diff --git a/src/BaseStyles.tsx b/src/BaseStyles.tsx index cabc7d8a668..2a76442ea1d 100644 --- a/src/BaseStyles.tsx +++ b/src/BaseStyles.tsx @@ -33,217 +33,7 @@ const GlobalStyle = createGlobalStyle<{colorScheme?: 'light' | 'dark'}>` DO NOT EDIT MANUALLY */ - .Stack{ - --Stack-gap: var(--primer-stack-gap-normal, 16px); - --Stack-gap-whenNarrow: var(--Stack-gap); - --Stack-divider-color: var(--color-border-default); - display:flex; - flex-flow:column; - flex-wrap:nowrap; - align-items:stretch; - gap:var(--Stack-gap) - } - @media(max-width: 767.98px){ - .Stack{ - gap:var(--Stack-gap-whenNarrow) - } - } - @media(min-width: 768px){ - .Stack--dir-inline-whenRegular{ - flex-flow:row - } - .Stack--dir-block-whenRegular{ - flex-flow:column - } - } - @media(max-width: 767.98px){ - .Stack--dir-inline-whenNarrow{ - flex-flow:row - } - .Stack--dir-block-whenNarrow{ - flex-flow:column - } - } - @media(min-width: 768px){ - .Stack--gap-none-whenRegular{ - --Stack-gap: 0 - } - .Stack--gap-condensed-whenRegular{ - --Stack-gap: var(--primer-stack-gap-condensed, 8px) - } - .Stack--gap-normal-whenRegular{ - --Stack-gap: var(--primer-stack-gap-normal, 16px) - } - .Stack--gap-spacious-whenRegular{ - --Stack-gap: var(--primer-stack-gap-spacious, 24px) - } - } - @media(max-width: 767.98px){ - .Stack--gap-none-whenNarrow{ - --Stack-gap-whenNarrow: 0 - } - .Stack--gap-condensed-whenNarrow{ - --Stack-gap-whenNarrow: var(--primer-stack-gap-condensed, 8px) - } - .Stack--gap-normal-whenNarrow{ - --Stack-gap-whenNarrow: var(--primer-stack-gap-normal, 16px) - } - } - @media(min-width: 768px){ - .Stack--align-start-whenRegular{ - align-items:flex-start - } - .Stack--align-center-whenRegular{ - align-items:center - } - .Stack--align-end-whenRegular{ - align-items:flex-end - } - .Stack--align-baseline-whenRegular{ - align-items:baseline - } - } - @media(max-width: 767.98px){ - .Stack--align-start-whenNarrow{ - align-items:flex-start - } - .Stack--align-center-whenNarrow{ - align-items:center - } - .Stack--align-end-whenNarrow{ - align-items:flex-end - } - .Stack--align-baseline-whenNarrow{ - align-items:baseline - } - } - @media(min-width: 768px){ - .Stack--alignWrap-start-whenRegular{ - align-content:flex-start - } - .Stack--alignWrap-center-whenRegular{ - align-content:center - } - .Stack--alignWrap-end-whenRegular{ - align-content:flex-end - } - .Stack--alignWrap-distribute-whenRegular{ - align-content:space-between - } - .Stack--alignWrap-distributeEvenly-whenRegular{ - align-content:space-evenly - } - } - @media(max-width: 767.98px){ - .Stack--alignWrap-start-whenNarrow{ - align-content:flex-start - } - .Stack--alignWrap-center-whenNarrow{ - align-content:center - } - .Stack--alignWrap-end-whenNarrow{ - align-content:flex-end - } - .Stack--alignWrap-distribute-whenNarrow{ - align-content:space-between - } - .Stack--alignWrap-distributeEvenly-whenNarrow{ - align-content:space-evenly - } - } - @media(min-width: 768px){ - .Stack--spread-start-whenRegular{ - justify-content:flex-start - } - .Stack--spread-center-whenRegular{ - justify-content:center - } - .Stack--spread-end-whenRegular{ - justify-content:flex-end - } - .Stack--spread-distribute-whenRegular{ - justify-content:space-between - } - .Stack--spread-distributeEvenly-whenRegular{ - justify-content:space-evenly - } - } - @media(max-width: 767.98px){ - .Stack--spread-start-whenNarrow{ - justify-content:flex-start - } - .Stack--spread-center-whenNarrow{ - justify-content:center - } - .Stack--spread-end-whenNarrow{ - justify-content:flex-end - } - .Stack--spread-distribute-whenNarrow{ - justify-content:space-between - } - .Stack--spread-distributeEvenly-whenNarrow{ - justify-content:space-evenly - } - } - @media(min-width: 768px){ - .Stack--wrap-whenRegular{ - flex-wrap:wrap - } - .Stack--nowrap-whenRegular{ - flex-wrap:nowrap - } - } - @media(max-width: 767.98px){ - .Stack--wrap-whenNarrow{ - flex-wrap:wrap - } - .Stack--nowrap-whenNarrow{ - flex-wrap:nowrap - } - } - @media(min-width: 768px){ - .Stack--showDividers-whenRegular .Stack-divider{ - display:block - } - } - @media(max-width: 767.98px){ - .Stack--showDividers-whenNarrow .Stack-divider{ - display:block - } - } - .Stack-divider{ - margin:0; - padding:0; - border:none; - display:none; - align-self:stretch - } - @media(min-width: 768px){ - .Stack--dir-block-whenRegular .Stack-divider{ - border-block-end:var(--primer-borderWidth-thin, 1px) solid var(--Stack-divider-color); - inline-size:auto; - block-size:0 - } - .Stack--dir-inline-whenRegular .Stack-divider{ - border-inline-end:var(--primer-borderWidth-thin, 1px) solid var(--Stack-divider-color); - inline-size:0; - block-size:auto - } - } - @media(max-width: 767.98px){ - .Stack--dir-block-whenNarrow .Stack-divider{ - border-block-end:var(--primer-borderWidth-thin, 1px) solid var(--Stack-divider-color); - inline-size:auto; - block-size:0 - } - .Stack--dir-inline-whenNarrow .Stack-divider{ - border-inline-end:var(--primer-borderWidth-thin, 1px) solid var(--Stack-divider-color); - inline-size:0; - block-size:auto - } - } - - + .Stack{--Stack-gap:var(--primer-stack-gap-normal, 16px);--Stack-gap-whenNarrow:var(--Stack-gap);--Stack-divider-color:var(--color-border-default);display:flex;flex-flow:column;flex-wrap:nowrap;align-items:stretch;gap:var(--Stack-gap)}@media(min-width:768px){.Stack--dir-inline-whenRegular{flex-flow:row}.Stack--dir-block-whenRegular{flex-flow:column}.Stack--gap-none-whenRegular{--Stack-gap:0}.Stack--gap-condensed-whenRegular{--Stack-gap:var(--primer-stack-gap-condensed, 8px)}.Stack--gap-normal-whenRegular{--Stack-gap:var(--primer-stack-gap-normal, 16px)}.Stack--gap-spacious-whenRegular{--Stack-gap:var(--primer-stack-gap-spacious, 24px)}}@media(max-width:767.98px){.Stack{gap:var(--Stack-gap-whenNarrow)}.Stack--dir-inline-whenNarrow{flex-flow:row}.Stack--dir-block-whenNarrow{flex-flow:column}.Stack--gap-none-whenNarrow{--Stack-gap-whenNarrow:0}.Stack--gap-condensed-whenNarrow{--Stack-gap-whenNarrow:var(--primer-stack-gap-condensed, 8px)}.Stack--gap-normal-whenNarrow{--Stack-gap-whenNarrow:var(--primer-stack-gap-normal, 16px)}}@media(min-width:768px){.Stack--align-start-whenRegular{align-items:flex-start}.Stack--align-center-whenRegular{align-items:center}.Stack--align-end-whenRegular{align-items:flex-end}.Stack--align-baseline-whenRegular{align-items:baseline}.Stack--alignWrap-start-whenRegular{align-content:flex-start}.Stack--alignWrap-center-whenRegular{align-content:center}.Stack--alignWrap-end-whenRegular{align-content:flex-end}.Stack--alignWrap-distribute-whenRegular{align-content:space-between}.Stack--alignWrap-distributeEvenly-whenRegular{align-content:space-evenly}}@media(max-width:767.98px){.Stack--align-start-whenNarrow{align-items:flex-start}.Stack--align-center-whenNarrow{align-items:center}.Stack--align-end-whenNarrow{align-items:flex-end}.Stack--align-baseline-whenNarrow{align-items:baseline}.Stack--alignWrap-start-whenNarrow{align-content:flex-start}.Stack--alignWrap-center-whenNarrow{align-content:center}.Stack--alignWrap-end-whenNarrow{align-content:flex-end}.Stack--alignWrap-distribute-whenNarrow{align-content:space-between}.Stack--alignWrap-distributeEvenly-whenNarrow{align-content:space-evenly}}@media(min-width:768px){.Stack--spread-start-whenRegular{justify-content:flex-start}.Stack--spread-center-whenRegular{justify-content:center}.Stack--spread-end-whenRegular{justify-content:flex-end}.Stack--spread-distribute-whenRegular{justify-content:space-between}.Stack--spread-distributeEvenly-whenRegular{justify-content:space-evenly}}@media(max-width:767.98px){.Stack--spread-start-whenNarrow{justify-content:flex-start}.Stack--spread-center-whenNarrow{justify-content:center}.Stack--spread-end-whenNarrow{justify-content:flex-end}.Stack--spread-distribute-whenNarrow{justify-content:space-between}.Stack--spread-distributeEvenly-whenNarrow{justify-content:space-evenly}}.Stack-divider{margin:0;padding:0;border:none;display:none;align-self:stretch}@media(min-width:768px){.Stack--wrap-whenRegular{flex-wrap:wrap}.Stack--nowrap-whenRegular{flex-wrap:nowrap}.Stack--showDividers-whenRegular .Stack-divider{display:block}.Stack--dir-block-whenRegular .Stack-divider{border-block-end:var(--primer-borderWidth-thin,1px) solid var(--Stack-divider-color);inline-size:auto;block-size:0}.Stack--dir-inline-whenRegular .Stack-divider{border-inline-end:var(--primer-borderWidth-thin,1px) solid var(--Stack-divider-color);inline-size:0;block-size:auto}}@media(max-width:767.98px){.Stack--wrap-whenNarrow{flex-wrap:wrap}.Stack--nowrap-whenNarrow{flex-wrap:nowrap}.Stack--showDividers-whenNarrow .Stack-divider{display:block}.Stack--dir-block-whenNarrow .Stack-divider{border-block-end:var(--primer-borderWidth-thin,1px) solid var(--Stack-divider-color);inline-size:auto;block-size:0}.Stack--dir-inline-whenNarrow .Stack-divider{border-inline-end:var(--primer-borderWidth-thin,1px) solid var(--Stack-divider-color);inline-size:0;block-size:auto}} ` const Base = styled.div`