mirror of
https://github.com/primer/css.git
synced 2024-12-25 23:23:47 +03:00
Import FormControl and Overlay from PVC (#2343)
* Bump `@primer/view-components` to `^0.0.114` * Import `FormControl` from PVC * Import `Overlay` from PVC
This commit is contained in:
simurai
GitHub
parent
9ab7402687
commit
4272e5ee9b
@ -16,7 +16,7 @@
|
||||
"@primer/octicons": "17.0.0",
|
||||
"@primer/octicons-react": "17.0.0",
|
||||
"@primer/primitives": "7.8.3",
|
||||
"@primer/view-components": "^0.0.112",
|
||||
"@primer/view-components": "^0.0.114",
|
||||
"@svgr/webpack": "5.5.0",
|
||||
"autoprefixer": "10.4.2",
|
||||
"babel-preset-gatsby": "^2.14.0",
|
||||
|
||||
@ -1543,16 +1543,16 @@
|
||||
resolved "https://registry.yarnpkg.com/@github/mini-throttle/-/mini-throttle-2.1.0.tgz#583a1d5e383caa21a1c067a649f15f7ab575dccf"
|
||||
integrity sha512-iEeR2OdVCPkdIPUszL8gJnKNu4MR8ANh7y0u/LPyaatYezgaWxUZEzhFntloqQq+HE6MZkFy+cl+xzCNuljOdw==
|
||||
|
||||
"@github/relative-time-element@^4.0.0":
|
||||
version "4.0.0"
|
||||
resolved "https://registry.yarnpkg.com/@github/relative-time-element/-/relative-time-element-4.0.0.tgz#18ca051f0385142e8c13096cd57e8637012c99ef"
|
||||
integrity sha512-A//nGe6GFciGP0GxSZZKZbULwSZuENZ19cTaAkvRU3Ptqgdpo95VF6YS5TPi54NVM/zt8q6KtDTOMyjdFQHj0g==
|
||||
|
||||
"@github/tab-container-element@^3.1.2":
|
||||
version "3.2.0"
|
||||
resolved "https://registry.yarnpkg.com/@github/tab-container-element/-/tab-container-element-3.2.0.tgz#d2d33da09ee3d7f4245a9f77479fe4969b137ae5"
|
||||
integrity sha512-to5ZJuywKK3KX53X1ifOcWjvUTQcBGdQ6Qkhm8L97xQ3ovICag1048M3YMpc+QSdr8xWeCBMnLeMnENqotB0Og==
|
||||
|
||||
"@github/time-elements@^3.1.2":
|
||||
version "3.6.0"
|
||||
resolved "https://registry.yarnpkg.com/@github/time-elements/-/time-elements-3.6.0.tgz#c61cbab56e9defd3faa3f24bd87afac00deeccd4"
|
||||
integrity sha512-MRt9TJztej6idLMvmuZbWc75TJrpl+1kgxWPFzCti4Md7kFtOFTRjXSGKmpc4vFT1NR3SgjHqTfI2Cnr9dJ7Wg==
|
||||
|
||||
"@graphql-tools/batch-execute@^7.1.2":
|
||||
version "7.1.2"
|
||||
resolved "https://registry.yarnpkg.com/@graphql-tools/batch-execute/-/batch-execute-7.1.2.tgz#35ba09a1e0f80f34f1ce111d23c40f039d4403a0"
|
||||
@ -2361,10 +2361,10 @@
|
||||
history "^5.0.0"
|
||||
styled-system "^5.1.5"
|
||||
|
||||
"@primer/view-components@^0.0.112":
|
||||
version "0.0.112"
|
||||
resolved "https://registry.yarnpkg.com/@primer/view-components/-/view-components-0.0.112.tgz#fe469883c8e2d4da3aba8e17002890b081ab6cd7"
|
||||
integrity sha512-YWvZkEy6pQSfA3kcY5NVYGxR/mFmrbhufLhp/XYuXkf1Uoj1AEa4FESfiPqJhkIomZh5o2B4XAwBCqPsJie9nA==
|
||||
"@primer/view-components@^0.0.114":
|
||||
version "0.0.114"
|
||||
resolved "https://registry.yarnpkg.com/@primer/view-components/-/view-components-0.0.114.tgz#44b847740dd7cb14209b78d99f25e51077aa14d2"
|
||||
integrity sha512-ATDaosRz7/5g2PCZo00dgbz6GRVIg8L43bwyOJ7M/3YQ9uaHkiVjQ9xIc0voRx870HAaGwstRP+qfCsJr/7gNw==
|
||||
dependencies:
|
||||
"@github/auto-complete-element" "^3.3.4"
|
||||
"@github/catalyst" "^1.6.0"
|
||||
@ -2372,8 +2372,8 @@
|
||||
"@github/details-menu-element" "^1.0.12"
|
||||
"@github/image-crop-element" "^5.0.0"
|
||||
"@github/mini-throttle" "^2.1.0"
|
||||
"@github/relative-time-element" "^4.0.0"
|
||||
"@github/tab-container-element" "^3.1.2"
|
||||
"@github/time-elements" "^3.1.2"
|
||||
"@primer/behaviors" "^1.2.0"
|
||||
|
||||
"@radix-ui/react-polymorphic@0.0.14", "@radix-ui/react-polymorphic@^0.0.14":
|
||||
|
||||
@ -43,7 +43,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@primer/primitives": "^7.9.0",
|
||||
"@primer/view-components": "^0.0.112"
|
||||
"@primer/view-components": "^0.0.114"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@changesets/changelog-github": "0.4.6",
|
||||
|
||||
@ -1,677 +1 @@
|
||||
// stylelint-disable primer/typography, primer/borders, primer/spacing, selector-max-type, selector-max-specificity, selector-no-qualifying-type, max-nesting-depth
|
||||
|
||||
// groups label, field, caption and inline error message
|
||||
.FormControl {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
gap: var(--base-size-4, 4px);
|
||||
}
|
||||
|
||||
// fill container
|
||||
.FormControl--fullWidth {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
// <label>
|
||||
.FormControl-label {
|
||||
font-size: var(--primer-text-body-size-medium, 14px);
|
||||
font-weight: var(--base-text-weight-semibold, 600);
|
||||
line-height: var(--primer-text-body-lineHeight-medium, calc(20 / 14));
|
||||
color: var(--color-fg-default);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
// optional caption
|
||||
.FormControl-caption {
|
||||
margin-bottom: 0;
|
||||
font-size: var(--primer-text-caption-size, 12px);
|
||||
font-weight: var(--primer-text-caption-weight, 400);
|
||||
line-height: var(--primer-text-caption-lineHeight, calc(16 / 12));
|
||||
color: var(--color-fg-muted);
|
||||
}
|
||||
|
||||
// inline validation message
|
||||
.FormControl-inlineValidation {
|
||||
display: flex;
|
||||
font-size: var(--primer-text-caption-size, 12px);
|
||||
font-weight: var(--base-text-weight-semibold, 600);
|
||||
color: var(--color-danger-fg);
|
||||
fill: var(--color-danger-fg);
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: var(--base-size-4, 4px);
|
||||
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// shared among all form control components (input, select, textarea, checkbox, radio)
|
||||
@mixin Field {
|
||||
color: var(--color-fg-default);
|
||||
background-color: var(--color-canvas-default);
|
||||
border: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default);
|
||||
|
||||
&[disabled] {
|
||||
color: var(--color-primer-fg-disabled);
|
||||
cursor: not-allowed;
|
||||
background-color: var(--color-input-disabled-bg);
|
||||
border-color: var(--color-border-default);
|
||||
opacity: 1;
|
||||
-webkit-text-fill-color: var(--color-primer-fg-disabled);
|
||||
}
|
||||
|
||||
&:not(:focus)[invalid] {
|
||||
border-color: var(--color-danger-emphasis);
|
||||
}
|
||||
|
||||
&:not([type='checkbox']):not([type='radio']):focus {
|
||||
@include focusBoxShadowInset;
|
||||
|
||||
// remove fallback :focus if :focus-visible is supported
|
||||
&:not(:focus-visible) {
|
||||
border-color: transparent;
|
||||
|
||||
@include focusBoxShadowInset(1px, transparent);
|
||||
}
|
||||
}
|
||||
|
||||
// default focus state
|
||||
&:not([type='checkbox']):not([type='radio']):focus-visible {
|
||||
@include focusBoxShadowInset;
|
||||
}
|
||||
}
|
||||
|
||||
// TextInput structure
|
||||
// ===================
|
||||
//
|
||||
// .FormControl
|
||||
// ├─ .FormControl-label
|
||||
// │ ├─ .FormControl-input-wrap
|
||||
// │ │ ├─ .FormControl-input-leadingVisualWrap
|
||||
// │ │ │ ├─ .FormControl-input-leadingVisual
|
||||
// │ │ ├─ .FormControl-input
|
||||
// │ │ ├─ .FormControl-input-trailingAction
|
||||
// ├─ .FormControl-inlineValidation
|
||||
// ├─ .FormControl-caption
|
||||
|
||||
// Select structure
|
||||
// ===================
|
||||
//
|
||||
// .FormControl
|
||||
// ├─ .FormControl-label
|
||||
// │ ├─ .FormControl-select-wrap
|
||||
// │ │ ├─ .FormControl-select
|
||||
// ├─ .FormControl-inlineValidation
|
||||
// ├─ .FormControl-caption
|
||||
|
||||
// Textarea structure
|
||||
// ===================
|
||||
//
|
||||
// .FormControl
|
||||
// ├─ .FormControl-label
|
||||
// ├─ .FormControl-textarea
|
||||
// ├─ .FormControl-inlineValidation
|
||||
// ├─ .FormControl-caption
|
||||
|
||||
.FormControl-input,
|
||||
.FormControl-select,
|
||||
.FormControl-textarea {
|
||||
@include Field;
|
||||
|
||||
width: 100%;
|
||||
font-size: var(--primer-text-body-size-medium, 14px);
|
||||
line-height: var(--primer-text-body-lineHeight-medium, calc(20 / 14));
|
||||
border-radius: var(--primer-borderRadius-medium, 6px);
|
||||
transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
|
||||
transition-property: color, background-color, box-shadow, border-color;
|
||||
padding-inline: var(--primer-control-medium-paddingInline-condensed, 8px);
|
||||
padding-block: calc(var(--primer-control-medium-paddingBlock, 6px) - var(--primer-borderWidth-thin, 1px));
|
||||
|
||||
&[disabled] {
|
||||
&::placeholder {
|
||||
color: var(--color-primer-fg-disabled);
|
||||
}
|
||||
}
|
||||
|
||||
&[readonly] {
|
||||
background-color: var(--color-input-disabled-bg);
|
||||
}
|
||||
|
||||
::placeholder {
|
||||
color: var(--color-fg-subtle);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
// sizes
|
||||
|
||||
&.FormControl-small {
|
||||
height: var(--primer-control-small-size, 28px);
|
||||
padding-inline: var(--primer-control-small-paddingInline-normal, 8px);
|
||||
padding-block: var(--primer-control-small-paddingBlock, 4px);
|
||||
font-size: var(--primer-text-body-size-small, 12px);
|
||||
}
|
||||
|
||||
&.FormControl-medium {
|
||||
height: var(--primer-control-medium-size, 32px);
|
||||
}
|
||||
|
||||
&.FormControl-large {
|
||||
height: var(--primer-control-large-size, 40px);
|
||||
padding-inline: var(--primer-control-large-paddingInline-normal, 12px);
|
||||
padding-block: var(--primer-control-large-paddingBlock, 10px);
|
||||
}
|
||||
|
||||
// variants
|
||||
|
||||
&.FormControl-inset {
|
||||
background-color: var(--color-canvas-inset);
|
||||
|
||||
&:focus-visible,
|
||||
&:focus {
|
||||
background-color: var(--color-canvas-default);
|
||||
}
|
||||
}
|
||||
|
||||
&.FormControl-monospace {
|
||||
font-family:
|
||||
var(
|
||||
--primer-fontStack-monospace,
|
||||
'ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace'
|
||||
);
|
||||
}
|
||||
|
||||
// validation states
|
||||
|
||||
&.FormControl-error {
|
||||
border-color: var(--color-danger-emphasis);
|
||||
}
|
||||
|
||||
&.FormControl-success {
|
||||
border-color: var(--color-success-emphasis);
|
||||
}
|
||||
|
||||
&.FormControl-warning {
|
||||
border-color: var(--color-attention-emphasis);
|
||||
}
|
||||
}
|
||||
|
||||
// positioning for leading/trailing items for TextInput
|
||||
.FormControl-input-wrap {
|
||||
position: relative;
|
||||
display: grid;
|
||||
|
||||
.FormControl-input-leadingVisualWrap {
|
||||
position: absolute;
|
||||
top: var(--base-size-8, 8px);
|
||||
left: var(--base-size-8, 8px);
|
||||
display: block;
|
||||
width: var(--base-size-16, 16px);
|
||||
height: var(--base-size-16, 16px);
|
||||
color: var(--color-fg-muted);
|
||||
pointer-events: none;
|
||||
|
||||
// octicon
|
||||
.FormControl-input-leadingVisual {
|
||||
display: block;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
|
||||
// TODO: replace with new Button component
|
||||
.FormControl-input-trailingAction {
|
||||
position: absolute;
|
||||
top: var(--base-size-4, 4px);
|
||||
right: var(--base-size-4, 4px);
|
||||
z-index: 4;
|
||||
display: grid;
|
||||
width: var(--primer-control-xsmall-size, 24px);
|
||||
height: var(--primer-control-xsmall-size, 24px);
|
||||
padding: 0;
|
||||
color: var(--color-fg-muted);
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-radius: var(--primer-borderRadius-small);
|
||||
transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);
|
||||
transition-property: color, background-color, border-color;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
svg {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
color: var(--color-primer-fg-disabled);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--color-action-list-item-default-hover-bg);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: var(--color-action-list-item-default-active-bg);
|
||||
}
|
||||
|
||||
// show vertical divider line between field and button
|
||||
&.FormControl-input-trailingAction--divider {
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: calc((var(--primer-control-xsmall-size) - var(--base-size-16)) / 2);
|
||||
left: calc(var(--base-size-4, 4px) * -1);
|
||||
display: block;
|
||||
width: var(--primer-borderWidth-thin);
|
||||
height: var(--base-size-16);
|
||||
content: '';
|
||||
background: var(--color-border-default);
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
@include minTouchTarget(var(--primer-control-medium-size, 32px), var(--primer-control-medium-size, 32px));
|
||||
|
||||
@media (pointer: coarse) {
|
||||
min-width: var(--primer-control-minTarget-coarse, 44px);
|
||||
min-height: var(--primer-control-minTarget-coarse, 44px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// if leadingVisual is present
|
||||
|
||||
/*
|
||||
┌──32px──┬────────────────────┐
|
||||
╎ ┌───┐ ┌────────────────┐ ╎
|
||||
╎ 16px 16px ╎
|
||||
╎ └───┘ └────────────────┘ ╎
|
||||
└───────8px───────────────────┘
|
||||
*/
|
||||
&.FormControl-input-wrap--leadingVisual {
|
||||
.FormControl-input {
|
||||
padding-inline-start:
|
||||
calc(
|
||||
var(--primer-control-medium-paddingInline-condensed, 8px) + var(--base-size-16, 16px) +
|
||||
var(--primer-control-medium-gap, 8px)
|
||||
); /* 32px */
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
┌──────────────────┬──32px──┐
|
||||
╎ ┌──────────────┐ ┌────┐ ╎
|
||||
╎ 24px 24px ╎
|
||||
╎ └──────────────┘ └────┘ ╎
|
||||
└──────────────────┴────────┘
|
||||
*/
|
||||
// if trailingAction is present
|
||||
&.FormControl-input-wrap--trailingAction {
|
||||
.FormControl-input {
|
||||
padding-inline-end:
|
||||
calc(
|
||||
var(--primer-control-medium-paddingInline-condensed, 8px) + var(--base-size-16, 16px) +
|
||||
var(--primer-control-medium-gap, 8px)
|
||||
); /* 32px */
|
||||
}
|
||||
|
||||
/*
|
||||
32px + 1px border
|
||||
┌──────────────────┬──33px──┐
|
||||
╎ ┌──────────────┐ ┌────┐ ╎
|
||||
╎ 24px 24px ╎
|
||||
╎ └──────────────┘ └────┘ ╎
|
||||
└──────────────────┴────────┘
|
||||
*/
|
||||
// if trailingAction divider is present, add 1px padding to accomodate input field text
|
||||
// can be refactored to has(.FormControl-input-trailingAction--divider)
|
||||
&.FormControl-input-wrap-trailingAction--divider {
|
||||
.FormControl-input {
|
||||
padding-inline-end:
|
||||
calc(
|
||||
var(--primer-control-medium-paddingInline-condensed, 8px) + var(--base-size-16, 16px) +
|
||||
var(--primer-control-medium-gap, 8px) + var(--primer-borderWidth-thin, 1px)
|
||||
); /* 33px */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// size modifications can be refactored with :has() - FormControl-input-wrap:has(.FormControl-large)
|
||||
// sizes
|
||||
&.FormControl-small {
|
||||
.FormControl-input-leadingVisualWrap {
|
||||
top: calc(var(--primer-control-medium-paddingInline-condensed, 8px) - 0.125rem); /* 6px */
|
||||
left: calc(var(--primer-control-medium-paddingInline-condensed, 8px) - 0.125rem); /* 6px */
|
||||
}
|
||||
|
||||
/*
|
||||
┌──────────────────┬──28px──┐
|
||||
╎ ┌──────────────┐ ┌────┐ ╎
|
||||
╎ 20px 20px ╎
|
||||
╎ └──────────────┘ └────┘ ╎
|
||||
└──────────────────┴────────┘
|
||||
*/
|
||||
&.FormControl-input-wrap--trailingAction {
|
||||
.FormControl-input.FormControl-small {
|
||||
padding-inline-end:
|
||||
calc(
|
||||
var(--primer-control-small-paddingInline-condensed, 8px) + var(--base-size-16, 16px) +
|
||||
var(--primer-control-small-gap, 8px)
|
||||
); /* 28px */
|
||||
}
|
||||
|
||||
/*
|
||||
28px + 1px border
|
||||
┌──────────────────┬──29px──┐
|
||||
╎ ┌──────────────┐ ┌────┐ ╎
|
||||
╎ 20px 20px ╎
|
||||
╎ └──────────────┘ └────┘ ╎
|
||||
└──────────────────┴────────┘
|
||||
*/
|
||||
&.FormControl-input-wrap-trailingAction--divider {
|
||||
.FormControl-input.FormControl-small {
|
||||
padding-inline-end:
|
||||
calc(
|
||||
var(--primer-control-small-paddingInline-condensed, 8px) + var(--base-size-16, 16px) +
|
||||
var(--primer-control-small-gap, 8px) + var(--primer-borderWidth-thin, 1px)
|
||||
); /* 29px */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.FormControl-input-trailingAction {
|
||||
width: calc(var(--primer-control-small-size, 28px) - var(--base-size-8, 8px));
|
||||
height: calc(var(--primer-control-small-size, 28px) - var(--base-size-8, 8px));
|
||||
|
||||
&::before {
|
||||
top: calc((var(--primer-control-xsmall-size) - var(--base-size-16)) / 4); /* 2px */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.FormControl-large {
|
||||
.FormControl-input-leadingVisualWrap {
|
||||
top: var(--primer-control-medium-paddingInline-normal, 12px);
|
||||
left: var(--primer-control-medium-paddingInline-normal, 12px);
|
||||
}
|
||||
|
||||
/*
|
||||
┌──36px──┬───12px padding──────┐
|
||||
╎ ┌───┐ ┌────────────────┐ ╎
|
||||
╎ 16px 16px ╎
|
||||
╎ └───┘ └────────────────┘ ╎
|
||||
└12px───8px───────────────────┘
|
||||
*/
|
||||
&.FormControl-input-wrap--leadingVisual {
|
||||
.FormControl-input.FormControl-large {
|
||||
padding-inline-start:
|
||||
calc(
|
||||
var(--primer-control-large-paddingInline-normal, 12px) + var(--base-size-16, 16px) +
|
||||
var(--primer-control-large-gap, 8px)
|
||||
); /* 36px */
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
┌──────────────────┬──36px──┐
|
||||
╎ ┌──────────────┐ ┌────┐ ╎
|
||||
╎ 28px 28px ╎
|
||||
╎ └──────────────┘ └────┘ ╎
|
||||
└──────────────────┴────────┘
|
||||
*/
|
||||
&.FormControl-input-wrap--trailingAction {
|
||||
.FormControl-input.FormControl-large {
|
||||
padding-inline-end:
|
||||
calc(
|
||||
var(--primer-control-large-paddingInline-normal, 12px) + var(--base-size-16, 16px) +
|
||||
var(--primer-control-large-gap, 8px)
|
||||
); /* 36px */
|
||||
}
|
||||
|
||||
/*
|
||||
┌──────────────────┬──37px──┐
|
||||
╎ ┌──────────────┐ ┌────┐ ╎
|
||||
╎ 28px 28px ╎
|
||||
╎ └──────────────┘ └────┘ ╎
|
||||
└──────────────────┴────────┘
|
||||
*/
|
||||
&.FormControl-input-wrap-trailingAction--divider {
|
||||
.FormControl-input.FormControl-large {
|
||||
padding-inline-end:
|
||||
calc(
|
||||
var(--primer-control-large-paddingInline-normal, 12px) + var(--base-size-16, 16px) +
|
||||
var(--primer-control-large-gap, 8px) + var(--primer-borderWidth-thin, 1px)
|
||||
); /* 37px */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.FormControl-input-trailingAction {
|
||||
top: calc(var(--primer-control-medium-paddingInline-condensed, 8px) - 0.125rem); /* 6px */
|
||||
right: calc(var(--primer-control-medium-paddingInline-condensed, 8px) - 0.125rem); /* 6px */
|
||||
width: var(--primer-control-small-size, 28px);
|
||||
height: var(--primer-control-small-size, 28px);
|
||||
|
||||
&::before {
|
||||
top: unset;
|
||||
height: var(--base-size-20);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.FormControl-select-wrap {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, auto) var(--base-size-16, 16px);
|
||||
|
||||
// mask allows for background-color to respect themes
|
||||
&::after {
|
||||
width: var(--base-size-16, 16px);
|
||||
height: var(--base-size-16, 16px);
|
||||
padding-right: var(--base-size-4, 4px);
|
||||
pointer-events: none;
|
||||
content: '';
|
||||
background-color: var(--color-fg-muted);
|
||||
mask: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iIzU4NjA2OSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNC40MjcgOS40MjdsMy4zOTYgMy4zOTZhLjI1MS4yNTEgMCAwMC4zNTQgMGwzLjM5Ni0zLjM5NkEuMjUuMjUgMCAwMDExLjM5NiA5SDQuNjA0YS4yNS4yNSAwIDAwLS4xNzcuNDI3ek00LjQyMyA2LjQ3TDcuODIgMy4wNzJhLjI1LjI1IDAgMDEuMzU0IDBMMTEuNTcgNi40N2EuMjUuMjUgMCAwMS0uMTc3LjQyN0g0LjZhLjI1LjI1IDAgMDEtLjE3Ny0uNDI3eiIgLz48L3N2Zz4=');
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
place-self: center end;
|
||||
}
|
||||
|
||||
// spans entire grid below mask
|
||||
.FormControl-select {
|
||||
grid-column: 1/-1;
|
||||
grid-row: 1;
|
||||
appearance: none;
|
||||
padding-right: var(--base-size-20, 20px);
|
||||
}
|
||||
}
|
||||
|
||||
// checkbox + radio specific styles
|
||||
|
||||
// Checkbox + Radio structure
|
||||
// ===================
|
||||
//
|
||||
// .FormControl-radio-wrap
|
||||
// ├─ .FormControl-radio
|
||||
// ├─ .FormControl-radio-labelWrap
|
||||
// │ ├─ .FormControl-label
|
||||
// │ ├─ .FormControl-caption
|
||||
|
||||
.FormControl-checkbox-wrap,
|
||||
.FormControl-radio-wrap {
|
||||
display: inline-grid;
|
||||
grid-template-columns: min-content auto;
|
||||
gap: var(--base-size-8, 8px);
|
||||
|
||||
.FormControl-checkbox-labelWrap,
|
||||
.FormControl-radio-labelWrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--base-size-4, 4px);
|
||||
}
|
||||
|
||||
.FormControl-label {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
// these selectors are temporary to override base.scss
|
||||
// once Field styles are widely adopted, we can adjust this and the global base styles
|
||||
input[type='checkbox'].FormControl-checkbox {
|
||||
@include Field;
|
||||
|
||||
position: relative;
|
||||
display: grid;
|
||||
width: var(--base-size-16, 16px);
|
||||
height: var(--base-size-16, 16px);
|
||||
margin: 0;
|
||||
margin-top: 0.125rem; // 2px to center align with label (20px line-height)
|
||||
cursor: pointer;
|
||||
border-color: var(--color-neutral-emphasis);
|
||||
border-radius: var(--primer-borderRadius-small, 3px);
|
||||
transition: background-color, border-color 80ms cubic-bezier(0.33, 1, 0.68, 1); // checked -> unchecked - add 120ms delay to fully see animation-out
|
||||
appearance: none;
|
||||
place-content: center;
|
||||
|
||||
&::before {
|
||||
width: var(--base-size-16, 16px);
|
||||
height: var(--base-size-16, 16px);
|
||||
visibility: hidden;
|
||||
content: '';
|
||||
background-color: var(--color-fg-on-emphasis);
|
||||
transition: visibility 0s linear 230ms;
|
||||
clip-path: inset(var(--base-size-16, 16px) 0 0 0);
|
||||
mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTEuNzgwMyAwLjIxOTYyNUMxMS45MjEgMC4zNjA0MjcgMTIgMC41NTEzMDUgMTIgMC43NTAzMTNDMTIgMC45NDkzMjEgMTEuOTIxIDEuMTQwMTkgMTEuNzgwMyAxLjI4MUw0LjUxODYgOC41NDA0MkM0LjM3Nzc1IDguNjgxIDQuMTg2ODIgOC43NiAzLjk4Nzc0IDguNzZDMy43ODg2NyA4Ljc2IDMuNTk3NzMgOC42ODEgMy40NTY4OSA4LjU0MDQyTDAuMjAxNjIyIDUuMjg2MkMwLjA2ODkyNzcgNS4xNDM4MyAtMC4wMDMzMDkwNSA0Ljk1NTU1IDAuMDAwMTE2NDkzIDQuNzYwOThDMC4wMDM1NTIwNSA0LjU2NjQzIDAuMDgyMzg5NCA0LjM4MDgxIDAuMjIwMDMyIDQuMjQzMjFDMC4zNTc2NjUgNC4xMDU2MiAwLjU0MzM1NSA0LjAyNjgxIDAuNzM3OTcgNC4wMjMzOEMwLjkzMjU4NCA0LjAxOTk0IDEuMTIwOTMgNC4wOTIxNyAxLjI2MzM0IDQuMjI0ODJMMy45ODc3NCA2Ljk0ODM1TDEwLjcxODYgMC4yMTk2MjVDMTAuODU5NSAwLjA3ODk5MjMgMTEuMDUwNCAwIDExLjI0OTUgMEMxMS40NDg1IDAgMTEuNjM5NSAwLjA3ODk5MjMgMTEuNzgwMyAwLjIxOTYyNVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo='); // octicon checkmark image
|
||||
mask-size: 75%;
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
|
||||
@media screen and (prefers-reduced-motion: no-preference) {
|
||||
animation: checkmarkOut 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards; // slightly snappier animation out
|
||||
}
|
||||
}
|
||||
|
||||
// extend touch target
|
||||
&::after {
|
||||
@include minTouchTarget(var(--primer-control-medium-size, 32px), var(--primer-control-medium-size, 32px));
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
~ .FormControl-checkbox-labelWrap,
|
||||
~ .FormControl-radio-labelWrap {
|
||||
.FormControl-label {
|
||||
color: var(--color-primer-fg-disabled);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:checked {
|
||||
background: var(--color-accent-fg);
|
||||
border-color: var(--color-accent-fg);
|
||||
transition: background-color, border-color 80ms cubic-bezier(0.32, 0, 0.67, 0) 0ms; // unchecked -> checked
|
||||
|
||||
&::before {
|
||||
visibility: visible;
|
||||
transition: visibility 0s linear 0s;
|
||||
|
||||
@media screen and (prefers-reduced-motion: no-preference) {
|
||||
animation: checkmarkIn 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards 80ms;
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
cursor: not-allowed;
|
||||
background-color: var(--color-primer-fg-disabled);
|
||||
border-color: var(--color-primer-fg-disabled);
|
||||
opacity: 1;
|
||||
|
||||
&::before {
|
||||
background-color: var(--color-fg-on-emphasis);
|
||||
}
|
||||
}
|
||||
|
||||
// Windows High Contrast mode
|
||||
// stylelint-disable primer/colors
|
||||
@media (forced-colors: active) {
|
||||
background-color: CanvasText;
|
||||
border-color: CanvasText;
|
||||
}
|
||||
// stylelint-enable primer/colors
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
@include focusOutline(2px);
|
||||
}
|
||||
|
||||
&:indeterminate {
|
||||
&::before {
|
||||
mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMiIgdmlld0JveD0iMCAwIDEwIDIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMCAxQzAgMC40NDc3MTUgMC40NDc3MTUgMCAxIDBIOUM5LjU1MjI5IDAgMTAgMC40NDc3MTUgMTAgMUMxMCAxLjU1MjI4IDkuNTUyMjkgMiA5IDJIMUMwLjQ0NzcxNSAyIDAgMS41NTIyOCAwIDFaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K');
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input[type='radio'].FormControl-radio {
|
||||
@include Field;
|
||||
|
||||
position: relative;
|
||||
width: var(--base-size-16, 16px);
|
||||
height: var(--base-size-16, 16px);
|
||||
margin: 0;
|
||||
margin-top: 0.125rem; // 2px to center align with label (20px line-height)
|
||||
cursor: pointer;
|
||||
border-color: var(--color-neutral-emphasis);
|
||||
border-radius: var(--primer-borderRadius-full, 100vh);
|
||||
transition: background-color, border-color 80ms cubic-bezier(0.33, 1, 0.68, 1); // checked -> unchecked - add 120ms delay to fully see animation-out
|
||||
appearance: none;
|
||||
|
||||
&::after {
|
||||
@include minTouchTarget(var(--primer-control-medium-size, 32px), var(--primer-control-medium-size, 32px));
|
||||
}
|
||||
|
||||
&:checked {
|
||||
border-color: var(--color-accent-fg);
|
||||
border-width: var(--base-size-4, 4px);
|
||||
|
||||
&:disabled {
|
||||
cursor: not-allowed;
|
||||
border-color: var(--color-primer-fg-disabled);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
@include focusOutline(2px);
|
||||
}
|
||||
|
||||
// Windows High Contrast mode
|
||||
// stylelint-disable primer/colors
|
||||
@media (forced-colors: active) {
|
||||
background-color: CanvasText;
|
||||
border-color: CanvasText;
|
||||
}
|
||||
// stylelint-enable primer/colors
|
||||
}
|
||||
|
||||
@keyframes checkmarkIn {
|
||||
from {
|
||||
clip-path: inset(var(--base-size-16, 16px) 0 0 0);
|
||||
}
|
||||
|
||||
to {
|
||||
clip-path: inset(0 0 0 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes checkmarkOut {
|
||||
from {
|
||||
clip-path: inset(0 0 0 0);
|
||||
}
|
||||
|
||||
to {
|
||||
clip-path: inset(var(--base-size-16, 16px) 0 0 0);
|
||||
}
|
||||
}
|
||||
@import '@primer/view-components/app/components/primer/alpha/text_field';
|
||||
|
||||
@ -1,485 +1 @@
|
||||
// stylelint-disable selector-max-compound-selectors, max-nesting-depth, selector-max-specificity, primer/borders
|
||||
// replace with primitive
|
||||
$primer-borderRadius-large: 0.75rem;
|
||||
|
||||
.Overlay--hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.Overlay--visibilityHidden {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.Overlay {
|
||||
display: flex;
|
||||
width: min(var(--overlay-width), 100vw - 2rem);
|
||||
min-width: 192px;
|
||||
max-height: min(calc(100vh - 2rem), var(--overlay-height));
|
||||
white-space: normal;
|
||||
flex-direction: column;
|
||||
background-color: var(--color-canvas-overlay);
|
||||
border-radius: $primer-borderRadius-large;
|
||||
box-shadow: var(--color-overlay-shadow);
|
||||
opacity: 1;
|
||||
|
||||
&.Overlay--size-auto {
|
||||
min-width: 192px;
|
||||
max-width: calc(100vw - 2rem);
|
||||
max-height: calc(100vh - 2rem);
|
||||
}
|
||||
|
||||
&.Overlay--size-full {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
&.Overlay--size-xsmall {
|
||||
--overlay-width: 192px;
|
||||
|
||||
max-height: calc(100vh - 2rem);
|
||||
}
|
||||
|
||||
&.Overlay--size-small {
|
||||
--overlay-height: 256px;
|
||||
--overlay-width: 320px;
|
||||
}
|
||||
|
||||
&.Overlay--size-small-portrait {
|
||||
--overlay-height: 432px;
|
||||
--overlay-width: 320px;
|
||||
}
|
||||
|
||||
&.Overlay--size-medium {
|
||||
--overlay-height: 320px;
|
||||
--overlay-width: 480px;
|
||||
}
|
||||
|
||||
&.Overlay--size-medium-portrait {
|
||||
--overlay-height: 600px;
|
||||
--overlay-width: 480px;
|
||||
}
|
||||
|
||||
&.Overlay--size-large {
|
||||
--overlay-height: 432px;
|
||||
--overlay-width: 640px;
|
||||
}
|
||||
|
||||
&.Overlay--size-xlarge {
|
||||
--overlay-height: 600px;
|
||||
--overlay-width: 960px;
|
||||
}
|
||||
|
||||
&.Overlay--height-auto {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
// start deprecate in favor of Alpha::Dialog
|
||||
&.Overlay--height-xsmall {
|
||||
height: min(192px, 100vh - 2rem);
|
||||
}
|
||||
|
||||
&.Overlay--height-small {
|
||||
height: min(256px, 100vh - 2rem);
|
||||
}
|
||||
|
||||
&.Overlay--height-medium {
|
||||
height: min(320px, 100vh - 2rem);
|
||||
}
|
||||
|
||||
&.Overlay--height-large {
|
||||
height: min(432px, 100vh - 2rem);
|
||||
}
|
||||
|
||||
&.Overlay--height-xlarge {
|
||||
height: min(600px, 100vh - 2rem);
|
||||
}
|
||||
|
||||
&.Overlay--width-auto {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
&.Overlay--width-small {
|
||||
width: min(256px, 100vw - 2rem);
|
||||
}
|
||||
|
||||
&.Overlay--width-medium {
|
||||
width: min(320px, 100vw - 2rem);
|
||||
}
|
||||
|
||||
&.Overlay--width-large {
|
||||
// stylelint-disable-next-line primer/responsive-widths
|
||||
width: min(480px, 100vw - 2rem);
|
||||
}
|
||||
|
||||
&.Overlay--width-xlarge {
|
||||
// stylelint-disable-next-line primer/responsive-widths
|
||||
width: min(640px, 100vw - 2rem);
|
||||
}
|
||||
|
||||
&.Overlay--width-xxlarge {
|
||||
// stylelint-disable-next-line primer/responsive-widths
|
||||
width: min(960px, 100vw - 2rem);
|
||||
}
|
||||
|
||||
// end deprecate
|
||||
|
||||
&.Overlay--motion-scaleFade {
|
||||
@media screen and (prefers-reduced-motion: no-preference) {
|
||||
animation: 200ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-scaleFade;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes Overlay--motion-scaleFade {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0.5);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// for <form> element that wraps entire contents of overlay
|
||||
.Overlay-form {
|
||||
display: flex;
|
||||
overflow: auto;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.Overlay-header {
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&.Overlay-header--divided {
|
||||
padding-bottom: $spacer-2;
|
||||
// stylelint-disable-next-line primer/box-shadow
|
||||
box-shadow: inset 0 #{-$border-width} var(--color-border-default);
|
||||
|
||||
+ .Overlay-body {
|
||||
padding-top: $spacer-3;
|
||||
}
|
||||
}
|
||||
|
||||
&.Overlay-header--large {
|
||||
.Overlay-headerContentWrap {
|
||||
.Overlay-titleWrap {
|
||||
gap: $spacer-2;
|
||||
|
||||
.Overlay-title {
|
||||
font-size: $h3-size;
|
||||
}
|
||||
|
||||
.Overlay-description {
|
||||
font-size: $body-font-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.Overlay-headerContentWrap {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: $spacer-2;
|
||||
padding: $spacer-2 $spacer-2 0 $spacer-2;
|
||||
|
||||
.Overlay-actionWrap {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: $spacer-2;
|
||||
}
|
||||
|
||||
.Overlay-titleWrap {
|
||||
display: flex;
|
||||
padding: ($spacer-2 * 0.75) 0 ($spacer-2 * 0.75) $spacer-2;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
gap: $spacer-1;
|
||||
|
||||
.Overlay-title {
|
||||
margin: 0;
|
||||
font-size: $body-font-size;
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
||||
.Overlay-description {
|
||||
margin: 0;
|
||||
font-size: $font-size-small;
|
||||
font-weight: $font-weight-normal;
|
||||
color: var(--color-fg-muted);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// generic body content slot
|
||||
.Overlay-body {
|
||||
padding: $spacer-3;
|
||||
padding-top: 0;
|
||||
overflow-y: auto;
|
||||
scrollbar-width: thin;
|
||||
font-size: $body-font-size;
|
||||
flex-grow: 1;
|
||||
|
||||
&.Overlay-body--paddingCondensed {
|
||||
padding: $spacer-2;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
&.Overlay-body--paddingNone {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// generic footer slot
|
||||
.Overlay-footer {
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
padding: 0 $spacer-3 $spacer-3 $spacer-3;
|
||||
flex-direction: row;
|
||||
flex-shrink: 0;
|
||||
flex-wrap: wrap;
|
||||
|
||||
&.Overlay-footer--divided {
|
||||
padding-top: $spacer-3;
|
||||
// stylelint-disable-next-line primer/box-shadow
|
||||
box-shadow: inset 0 $border-width var(--color-border-default);
|
||||
}
|
||||
|
||||
&.Overlay-footer--alignStart {
|
||||
justify-content: flex-start;
|
||||
gap: $spacer-2;
|
||||
}
|
||||
|
||||
&.Overlay-footer--alignCenter {
|
||||
justify-content: center;
|
||||
gap: $spacer-2;
|
||||
}
|
||||
|
||||
&.Overlay-footer--alignEnd {
|
||||
justify-content: flex-end;
|
||||
gap: $spacer-2;
|
||||
}
|
||||
}
|
||||
|
||||
// TODO: replace with refactored IconButton
|
||||
.Overlay-closeButton {
|
||||
position: relative;
|
||||
display: grid;
|
||||
width: $spacer-5;
|
||||
height: $spacer-5;
|
||||
padding: 0;
|
||||
color: var(--color-fg-muted);
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
background-color: transparent;
|
||||
border: $border-width $border-style transparent;
|
||||
border-radius: $border-radius;
|
||||
transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);
|
||||
transition-property: color, background-color, border-color;
|
||||
place-content: center;
|
||||
align-self: flex-start;
|
||||
flex-shrink: 0;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: var(--color-btn-hover-bg);
|
||||
border: $border-width $border-style var(--color-btn-hover-bg);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin Overlay-backdrop() {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
background-color: var(--color-neutral-muted);
|
||||
}
|
||||
|
||||
@mixin Overlay-backdrop--transparent() {
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
// variants must be mixins so we can extend within a media query (@extend is not supported inside media queries)
|
||||
|
||||
// border-radius repeats within placement options to ensure the original radius is reset when two classes co-exist
|
||||
|
||||
// center
|
||||
@mixin Overlay-backdrop--center {
|
||||
@include Overlay-backdrop;
|
||||
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
// anchor
|
||||
@mixin Overlay-backdrop--anchor {
|
||||
@include Overlay-backdrop--transparent;
|
||||
|
||||
.Overlay {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// anchor side(s)
|
||||
@mixin Overlay-backdrop--side($responsiveVariant: '') {
|
||||
@include Overlay-backdrop;
|
||||
|
||||
// default left
|
||||
align-items: center;
|
||||
justify-content: left;
|
||||
|
||||
&.Overlay-backdrop--placement-left#{$responsiveVariant} {
|
||||
align-items: center;
|
||||
justify-content: left;
|
||||
|
||||
> .Overlay#{$responsiveVariant} {
|
||||
height: 100vh;
|
||||
max-height: unset;
|
||||
border-radius: $primer-borderRadius-large;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
|
||||
@media screen and (prefers-reduced-motion: no-preference) {
|
||||
animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideInRight;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.Overlay-backdrop--placement-right#{$responsiveVariant} {
|
||||
align-items: center;
|
||||
justify-content: right;
|
||||
|
||||
> .Overlay#{$responsiveVariant} {
|
||||
height: 100vh;
|
||||
max-height: unset;
|
||||
border-radius: $primer-borderRadius-large;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
|
||||
@media screen and (prefers-reduced-motion: no-preference) {
|
||||
animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideInLeft;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.Overlay-backdrop--placement-bottom#{$responsiveVariant} {
|
||||
align-items: end;
|
||||
justify-content: center;
|
||||
|
||||
> .Overlay#{$responsiveVariant} {
|
||||
width: 100vw;
|
||||
height: auto;
|
||||
max-height: calc(100vh - 2rem);
|
||||
border-radius: $primer-borderRadius-large;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
|
||||
@media screen and (prefers-reduced-motion: no-preference) {
|
||||
animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideUp;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.Overlay-backdrop--placement-top#{$responsiveVariant} {
|
||||
align-items: start;
|
||||
justify-content: center;
|
||||
|
||||
> .Overlay#{$responsiveVariant} {
|
||||
border-radius: $primer-borderRadius-large;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
|
||||
@media screen and (prefers-reduced-motion: no-preference) {
|
||||
animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideDown;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// full width
|
||||
@mixin Overlay-backdrop--full {
|
||||
@include Overlay-backdrop;
|
||||
|
||||
.Overlay {
|
||||
width: 100%;
|
||||
max-width: 100vw;
|
||||
height: 100%;
|
||||
max-height: 100vh;
|
||||
border-radius: unset !important;
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Overlay variant classnames
|
||||
.Overlay-backdrop--center {
|
||||
@include Overlay-backdrop--center;
|
||||
}
|
||||
|
||||
.Overlay-backdrop--anchor {
|
||||
@include Overlay-backdrop--anchor;
|
||||
}
|
||||
|
||||
.Overlay-backdrop--side {
|
||||
@include Overlay-backdrop--side;
|
||||
}
|
||||
|
||||
.Overlay-backdrop--full {
|
||||
@include Overlay-backdrop--full;
|
||||
}
|
||||
|
||||
// responsive variants
|
||||
// up to 767px
|
||||
@media (max-width: #{map-get($breakpoints, 'md') - 0.02px}) {
|
||||
.Overlay-backdrop--center-whenNarrow {
|
||||
@include Overlay-backdrop--center;
|
||||
}
|
||||
|
||||
.Overlay-backdrop--anchor-whenNarrow {
|
||||
@include Overlay-backdrop--anchor;
|
||||
}
|
||||
|
||||
.Overlay-backdrop--side-whenNarrow {
|
||||
@include Overlay-backdrop--side('-whenNarrow');
|
||||
}
|
||||
|
||||
.Overlay-backdrop--full-whenNarrow {
|
||||
@include Overlay-backdrop--full;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes Overlay--motion-slideDown {
|
||||
from {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes Overlay--motion-slideUp {
|
||||
from {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes Overlay--motion-slideInRight {
|
||||
from {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes Overlay--motion-slideInLeft {
|
||||
from {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
@import '@primer/view-components/app/components/primer/alpha/dialog';
|
||||
|
||||
20
yarn.lock
20
yarn.lock
@ -825,16 +825,16 @@
|
||||
resolved "https://registry.yarnpkg.com/@github/prettier-config/-/prettier-config-0.0.4.tgz#cbfddb36a7f29a81c5af155dc5827e95b23b9ccd"
|
||||
integrity sha512-ZOJ+U771Mw68qp2GPbcqPt2Xg0LEl0YwiIFHXwVLAFm2TgDnsgcCHhXO8PIxOWPqSFO4S7xIMD9CBobfaWGASA==
|
||||
|
||||
"@github/relative-time-element@^4.0.0":
|
||||
version "4.0.0"
|
||||
resolved "https://registry.yarnpkg.com/@github/relative-time-element/-/relative-time-element-4.0.0.tgz#18ca051f0385142e8c13096cd57e8637012c99ef"
|
||||
integrity sha512-A//nGe6GFciGP0GxSZZKZbULwSZuENZ19cTaAkvRU3Ptqgdpo95VF6YS5TPi54NVM/zt8q6KtDTOMyjdFQHj0g==
|
||||
|
||||
"@github/tab-container-element@^3.1.2":
|
||||
version "3.2.0"
|
||||
resolved "https://registry.yarnpkg.com/@github/tab-container-element/-/tab-container-element-3.2.0.tgz#d2d33da09ee3d7f4245a9f77479fe4969b137ae5"
|
||||
integrity sha512-to5ZJuywKK3KX53X1ifOcWjvUTQcBGdQ6Qkhm8L97xQ3ovICag1048M3YMpc+QSdr8xWeCBMnLeMnENqotB0Og==
|
||||
|
||||
"@github/time-elements@^3.1.2":
|
||||
version "3.3.0"
|
||||
resolved "https://registry.yarnpkg.com/@github/time-elements/-/time-elements-3.3.0.tgz#134d69e359bc150938a5edfe6525e051e0b5ed35"
|
||||
integrity sha512-ru9YsaRfikuljnLWv69Ao7FrQ8dyxf7gDcqQ+3peGOMYMKIQMb4VPpM2ULR9vzxuTDLsqvoEFJVQ7Teu1wdy4A==
|
||||
|
||||
"@humanwhocodes/config-array@^0.10.5":
|
||||
version "0.10.7"
|
||||
resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.10.7.tgz#6d53769fd0c222767e6452e8ebda825c22e9f0dc"
|
||||
@ -1198,10 +1198,10 @@
|
||||
stylelint-scss "^4.0.0"
|
||||
tap-map "^1.0.0"
|
||||
|
||||
"@primer/view-components@^0.0.112":
|
||||
version "0.0.112"
|
||||
resolved "https://registry.yarnpkg.com/@primer/view-components/-/view-components-0.0.112.tgz#fe469883c8e2d4da3aba8e17002890b081ab6cd7"
|
||||
integrity sha512-YWvZkEy6pQSfA3kcY5NVYGxR/mFmrbhufLhp/XYuXkf1Uoj1AEa4FESfiPqJhkIomZh5o2B4XAwBCqPsJie9nA==
|
||||
"@primer/view-components@^0.0.114":
|
||||
version "0.0.114"
|
||||
resolved "https://registry.yarnpkg.com/@primer/view-components/-/view-components-0.0.114.tgz#44b847740dd7cb14209b78d99f25e51077aa14d2"
|
||||
integrity sha512-ATDaosRz7/5g2PCZo00dgbz6GRVIg8L43bwyOJ7M/3YQ9uaHkiVjQ9xIc0voRx870HAaGwstRP+qfCsJr/7gNw==
|
||||
dependencies:
|
||||
"@github/auto-complete-element" "^3.3.4"
|
||||
"@github/catalyst" "^1.6.0"
|
||||
@ -1209,8 +1209,8 @@
|
||||
"@github/details-menu-element" "^1.0.12"
|
||||
"@github/image-crop-element" "^5.0.0"
|
||||
"@github/mini-throttle" "^2.1.0"
|
||||
"@github/relative-time-element" "^4.0.0"
|
||||
"@github/tab-container-element" "^3.1.2"
|
||||
"@github/time-elements" "^3.1.2"
|
||||
"@primer/behaviors" "^1.2.0"
|
||||
|
||||
"@sinclair/typebox@^0.24.1":
|
||||
|
||||
Loading…
Reference in New Issue
Block a user