Created
November 15, 2023 18:52
-
-
Save joelcoxokc/1e22ed83ad0ed2359217bdecb88f76b7 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$flex-justify-types: ( | |
center, | |
start, | |
end, | |
left, | |
right, | |
normal, | |
space-between, | |
space-around, | |
space-evenly, | |
stretch, | |
inherit, | |
initial, | |
revert, | |
revert-layer, | |
unset | |
); | |
$flex-align-types: ( | |
normal, | |
stretch, | |
center, | |
start, | |
end, | |
self-start, | |
self-end, | |
baseline, | |
inherit, | |
initial, | |
revert, | |
revert-layer, | |
unset | |
); | |
[flex-layout] { | |
box-sizing: border-box; | |
display: flex; | |
} | |
[flex-layout~='row'] { | |
flex-direction: row; | |
} | |
[flex-layout~='column'] { | |
flex-direction: column; | |
} | |
[flex-layout~='wrap'] { | |
flex-wrap: wrap; | |
} | |
[flex] { | |
box-sizing: border-box; | |
flex: 1 1 0%; | |
} | |
[flex='none'] { | |
flex: none; | |
} | |
[flex='1 0 auto'] { | |
flex: 1 0 auto; | |
} | |
[flex='0 0 auto'] { | |
flex: 0 0 auto; | |
} | |
[flex='0 1 auto'] { | |
flex: 0 1 auto; | |
} | |
@mixin flex() { | |
@for $i from 0 through 20 { | |
[fxFlex='#{$i*5}'] { | |
flex: 1 1 $i * 5%; | |
box-sizing: border-box; | |
max-width: $i * 5%; | |
} | |
} | |
} | |
@include flex; | |
@mixin justify { | |
@each $justify in $flex-justify-types { | |
$prop: $justify; | |
@if ($prop == start) { | |
$prop: flex-start; | |
} | |
@if ($prop == end) { | |
$prop: flex-end; | |
} | |
[flex-layout~='row'], | |
[flex-layout~='column'] { | |
&[flex-align='#{$justify}'] { | |
align-items: stretch; | |
place-content: stretch #{$prop}; | |
} | |
} | |
} | |
} | |
@include justify(); | |
@mixin justifymulti { | |
@each $justify in $flex-justify-types { | |
$jprop: $justify; | |
@if ($jprop == start) { | |
$jprop: flex-start; | |
} | |
@if ($jprop == end) { | |
$jprop: flex-end; | |
} | |
@each $align in $flex-align-types { | |
$aprop: $align; | |
@if ($aprop == start) { | |
$aprop: flex-start; | |
} | |
@if ($aprop == end) { | |
$aprop: flex-end; | |
} | |
[flex-layout~='row'], | |
[flex-layout~='column'] { | |
&[flex-align='#{$justify} #{$align}'] { | |
align-items: #{$aprop}; | |
place-content: #{$aprop} #{$jprop}; | |
} | |
} | |
} | |
} | |
} | |
@include justifymulti(); | |
[flex-gap='sm'] { | |
&[flex-layout~='column'] { | |
> *:not(:last-child) { | |
margin-bottom: 8px; | |
} | |
} | |
&[flex-layout~='row'] { | |
> *:not(:last-child) { | |
margin-right: 8px; | |
} | |
} | |
} | |
[flex-gap='md'] { | |
&[flex-layout~='column'] { | |
> *:not(:last-child) { | |
margin-bottom: 16px; | |
} | |
} | |
&[flex-layout~='row'] { | |
> *:not(:last-child) { | |
margin-right: 16px; | |
} | |
} | |
} | |
[flex-gap='lg'] { | |
&[flex-layout~='column'] { | |
> *:not(:last-child) { | |
margin-bottom: 24px; | |
} | |
} | |
&[flex-layout~='row'] { | |
> *:not(:last-child) { | |
margin-right: 24px; | |
} | |
} | |
} | |
[flex-gap-top] { | |
margin-top: auto; | |
} | |
[flex-gap-right] { | |
margin-right: auto; | |
} | |
[flex-gap-bottom] { | |
margin-bottom: auto; | |
} | |
[flex-gap-left] { | |
margin-left: auto; | |
} | |
[flex-gap-top='sm'] { | |
margin-top: 8px; | |
} | |
[flex-gap-top='md'] { | |
margin-top: 16px; | |
} | |
[flex-gap-top='lg'] { | |
margin-top: 24px; | |
} | |
[flex-gap-right] { | |
margin-right: auto; | |
} | |
[flex-gap-right='sm'] { | |
margin-right: 8px; | |
} | |
[flex-gap-right='md'] { | |
margin-right: 16px; | |
} | |
[flex-gap-right='lg'] { | |
margin-right: 24px; | |
} | |
[flex-gap-top='sm'] { | |
margin-top: 8px; | |
} | |
[flex-gap-top='md'] { | |
margin-top: 16px; | |
} | |
[flex-gap-top='lg'] { | |
margin-top: 24px; | |
} | |
[flex-gap-top='sm'] { | |
margin-top: 8px; | |
} | |
[flex-gap-top='md'] { | |
margin-top: 16px; | |
} | |
[flex-gap-top='lg'] { | |
margin-top: 24px; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
[flex-layout] { | |
box-sizing: border-box; | |
display: flex; | |
} | |
[flex-layout~=row] { | |
flex-direction: row; | |
} | |
[flex-layout~=column] { | |
flex-direction: column; | |
} | |
[flex-layout~=wrap] { | |
flex-wrap: wrap; | |
} | |
[flex] { | |
box-sizing: border-box; | |
flex: 1 1 0%; | |
} | |
[flex=none] { | |
flex: none; | |
} | |
[flex="1 0 auto"] { | |
flex: 1 0 auto; | |
} | |
[flex="0 0 auto"] { | |
flex: 0 0 auto; | |
} | |
[flex="0 1 auto"] { | |
flex: 0 1 auto; | |
} | |
[fxFlex="0"] { | |
flex: 1 1 0%; | |
box-sizing: border-box; | |
max-width: 0%; | |
} | |
[fxFlex="5"] { | |
flex: 1 1 5%; | |
box-sizing: border-box; | |
max-width: 5%; | |
} | |
[fxFlex="10"] { | |
flex: 1 1 10%; | |
box-sizing: border-box; | |
max-width: 10%; | |
} | |
[fxFlex="15"] { | |
flex: 1 1 15%; | |
box-sizing: border-box; | |
max-width: 15%; | |
} | |
[fxFlex="20"] { | |
flex: 1 1 20%; | |
box-sizing: border-box; | |
max-width: 20%; | |
} | |
[fxFlex="25"] { | |
flex: 1 1 25%; | |
box-sizing: border-box; | |
max-width: 25%; | |
} | |
[fxFlex="30"] { | |
flex: 1 1 30%; | |
box-sizing: border-box; | |
max-width: 30%; | |
} | |
[fxFlex="35"] { | |
flex: 1 1 35%; | |
box-sizing: border-box; | |
max-width: 35%; | |
} | |
[fxFlex="40"] { | |
flex: 1 1 40%; | |
box-sizing: border-box; | |
max-width: 40%; | |
} | |
[fxFlex="45"] { | |
flex: 1 1 45%; | |
box-sizing: border-box; | |
max-width: 45%; | |
} | |
[fxFlex="50"] { | |
flex: 1 1 50%; | |
box-sizing: border-box; | |
max-width: 50%; | |
} | |
[fxFlex="55"] { | |
flex: 1 1 55%; | |
box-sizing: border-box; | |
max-width: 55%; | |
} | |
[fxFlex="60"] { | |
flex: 1 1 60%; | |
box-sizing: border-box; | |
max-width: 60%; | |
} | |
[fxFlex="65"] { | |
flex: 1 1 65%; | |
box-sizing: border-box; | |
max-width: 65%; | |
} | |
[fxFlex="70"] { | |
flex: 1 1 70%; | |
box-sizing: border-box; | |
max-width: 70%; | |
} | |
[fxFlex="75"] { | |
flex: 1 1 75%; | |
box-sizing: border-box; | |
max-width: 75%; | |
} | |
[fxFlex="80"] { | |
flex: 1 1 80%; | |
box-sizing: border-box; | |
max-width: 80%; | |
} | |
[fxFlex="85"] { | |
flex: 1 1 85%; | |
box-sizing: border-box; | |
max-width: 85%; | |
} | |
[fxFlex="90"] { | |
flex: 1 1 90%; | |
box-sizing: border-box; | |
max-width: 90%; | |
} | |
[fxFlex="95"] { | |
flex: 1 1 95%; | |
box-sizing: border-box; | |
max-width: 95%; | |
} | |
[fxFlex="100"] { | |
flex: 1 1 100%; | |
box-sizing: border-box; | |
max-width: 100%; | |
} | |
[flex-layout~=row][flex-align=center], | |
[flex-layout~=column][flex-align=center] { | |
align-items: stretch; | |
place-content: stretch center; | |
} | |
[flex-layout~=row][flex-align=start], | |
[flex-layout~=column][flex-align=start] { | |
align-items: stretch; | |
place-content: stretch flex-start; | |
} | |
[flex-layout~=row][flex-align=end], | |
[flex-layout~=column][flex-align=end] { | |
align-items: stretch; | |
place-content: stretch flex-end; | |
} | |
[flex-layout~=row][flex-align=left], | |
[flex-layout~=column][flex-align=left] { | |
align-items: stretch; | |
place-content: stretch left; | |
} | |
[flex-layout~=row][flex-align=right], | |
[flex-layout~=column][flex-align=right] { | |
align-items: stretch; | |
place-content: stretch right; | |
} | |
[flex-layout~=row][flex-align=normal], | |
[flex-layout~=column][flex-align=normal] { | |
align-items: stretch; | |
place-content: stretch normal; | |
} | |
[flex-layout~=row][flex-align=space-between], | |
[flex-layout~=column][flex-align=space-between] { | |
align-items: stretch; | |
place-content: stretch space-between; | |
} | |
[flex-layout~=row][flex-align=space-around], | |
[flex-layout~=column][flex-align=space-around] { | |
align-items: stretch; | |
place-content: stretch space-around; | |
} | |
[flex-layout~=row][flex-align=space-evenly], | |
[flex-layout~=column][flex-align=space-evenly] { | |
align-items: stretch; | |
place-content: stretch space-evenly; | |
} | |
[flex-layout~=row][flex-align=stretch], | |
[flex-layout~=column][flex-align=stretch] { | |
align-items: stretch; | |
place-content: stretch stretch; | |
} | |
[flex-layout~=row][flex-align=inherit], | |
[flex-layout~=column][flex-align=inherit] { | |
align-items: stretch; | |
place-content: stretch inherit; | |
} | |
[flex-layout~=row][flex-align=initial], | |
[flex-layout~=column][flex-align=initial] { | |
align-items: stretch; | |
place-content: stretch initial; | |
} | |
[flex-layout~=row][flex-align=revert], | |
[flex-layout~=column][flex-align=revert] { | |
align-items: stretch; | |
place-content: stretch revert; | |
} | |
[flex-layout~=row][flex-align=revert-layer], | |
[flex-layout~=column][flex-align=revert-layer] { | |
align-items: stretch; | |
place-content: stretch revert-layer; | |
} | |
[flex-layout~=row][flex-align=unset], | |
[flex-layout~=column][flex-align=unset] { | |
align-items: stretch; | |
place-content: stretch unset; | |
} | |
[flex-layout~=row][flex-align="center normal"], | |
[flex-layout~=column][flex-align="center normal"] { | |
align-items: normal; | |
place-content: normal center; | |
} | |
[flex-layout~=row][flex-align="center stretch"], | |
[flex-layout~=column][flex-align="center stretch"] { | |
align-items: stretch; | |
place-content: stretch center; | |
} | |
[flex-layout~=row][flex-align="center center"], | |
[flex-layout~=column][flex-align="center center"] { | |
align-items: center; | |
place-content: center center; | |
} | |
[flex-layout~=row][flex-align="center start"], | |
[flex-layout~=column][flex-align="center start"] { | |
align-items: flex-start; | |
place-content: flex-start center; | |
} | |
[flex-layout~=row][flex-align="center end"], | |
[flex-layout~=column][flex-align="center end"] { | |
align-items: flex-end; | |
place-content: flex-end center; | |
} | |
[flex-layout~=row][flex-align="center self-start"], | |
[flex-layout~=column][flex-align="center self-start"] { | |
align-items: self-start; | |
place-content: self-start center; | |
} | |
[flex-layout~=row][flex-align="center self-end"], | |
[flex-layout~=column][flex-align="center self-end"] { | |
align-items: self-end; | |
place-content: self-end center; | |
} | |
[flex-layout~=row][flex-align="center baseline"], | |
[flex-layout~=column][flex-align="center baseline"] { | |
align-items: baseline; | |
place-content: baseline center; | |
} | |
[flex-layout~=row][flex-align="center inherit"], | |
[flex-layout~=column][flex-align="center inherit"] { | |
align-items: inherit; | |
place-content: inherit center; | |
} | |
[flex-layout~=row][flex-align="center initial"], | |
[flex-layout~=column][flex-align="center initial"] { | |
align-items: initial; | |
place-content: initial center; | |
} | |
[flex-layout~=row][flex-align="center revert"], | |
[flex-layout~=column][flex-align="center revert"] { | |
align-items: revert; | |
place-content: revert center; | |
} | |
[flex-layout~=row][flex-align="center revert-layer"], | |
[flex-layout~=column][flex-align="center revert-layer"] { | |
align-items: revert-layer; | |
place-content: revert-layer center; | |
} | |
[flex-layout~=row][flex-align="center unset"], | |
[flex-layout~=column][flex-align="center unset"] { | |
align-items: unset; | |
place-content: unset center; | |
} | |
[flex-layout~=row][flex-align="start normal"], | |
[flex-layout~=column][flex-align="start normal"] { | |
align-items: normal; | |
place-content: normal flex-start; | |
} | |
[flex-layout~=row][flex-align="start stretch"], | |
[flex-layout~=column][flex-align="start stretch"] { | |
align-items: stretch; | |
place-content: stretch flex-start; | |
} | |
[flex-layout~=row][flex-align="start center"], | |
[flex-layout~=column][flex-align="start center"] { | |
align-items: center; | |
place-content: center flex-start; | |
} | |
[flex-layout~=row][flex-align="start start"], | |
[flex-layout~=column][flex-align="start start"] { | |
align-items: flex-start; | |
place-content: flex-start flex-start; | |
} | |
[flex-layout~=row][flex-align="start end"], | |
[flex-layout~=column][flex-align="start end"] { | |
align-items: flex-end; | |
place-content: flex-end flex-start; | |
} | |
[flex-layout~=row][flex-align="start self-start"], | |
[flex-layout~=column][flex-align="start self-start"] { | |
align-items: self-start; | |
place-content: self-start flex-start; | |
} | |
[flex-layout~=row][flex-align="start self-end"], | |
[flex-layout~=column][flex-align="start self-end"] { | |
align-items: self-end; | |
place-content: self-end flex-start; | |
} | |
[flex-layout~=row][flex-align="start baseline"], | |
[flex-layout~=column][flex-align="start baseline"] { | |
align-items: baseline; | |
place-content: baseline flex-start; | |
} | |
[flex-layout~=row][flex-align="start inherit"], | |
[flex-layout~=column][flex-align="start inherit"] { | |
align-items: inherit; | |
place-content: inherit flex-start; | |
} | |
[flex-layout~=row][flex-align="start initial"], | |
[flex-layout~=column][flex-align="start initial"] { | |
align-items: initial; | |
place-content: initial flex-start; | |
} | |
[flex-layout~=row][flex-align="start revert"], | |
[flex-layout~=column][flex-align="start revert"] { | |
align-items: revert; | |
place-content: revert flex-start; | |
} | |
[flex-layout~=row][flex-align="start revert-layer"], | |
[flex-layout~=column][flex-align="start revert-layer"] { | |
align-items: revert-layer; | |
place-content: revert-layer flex-start; | |
} | |
[flex-layout~=row][flex-align="start unset"], | |
[flex-layout~=column][flex-align="start unset"] { | |
align-items: unset; | |
place-content: unset flex-start; | |
} | |
[flex-layout~=row][flex-align="end normal"], | |
[flex-layout~=column][flex-align="end normal"] { | |
align-items: normal; | |
place-content: normal flex-end; | |
} | |
[flex-layout~=row][flex-align="end stretch"], | |
[flex-layout~=column][flex-align="end stretch"] { | |
align-items: stretch; | |
place-content: stretch flex-end; | |
} | |
[flex-layout~=row][flex-align="end center"], | |
[flex-layout~=column][flex-align="end center"] { | |
align-items: center; | |
place-content: center flex-end; | |
} | |
[flex-layout~=row][flex-align="end start"], | |
[flex-layout~=column][flex-align="end start"] { | |
align-items: flex-start; | |
place-content: flex-start flex-end; | |
} | |
[flex-layout~=row][flex-align="end end"], | |
[flex-layout~=column][flex-align="end end"] { | |
align-items: flex-end; | |
place-content: flex-end flex-end; | |
} | |
[flex-layout~=row][flex-align="end self-start"], | |
[flex-layout~=column][flex-align="end self-start"] { | |
align-items: self-start; | |
place-content: self-start flex-end; | |
} | |
[flex-layout~=row][flex-align="end self-end"], | |
[flex-layout~=column][flex-align="end self-end"] { | |
align-items: self-end; | |
place-content: self-end flex-end; | |
} | |
[flex-layout~=row][flex-align="end baseline"], | |
[flex-layout~=column][flex-align="end baseline"] { | |
align-items: baseline; | |
place-content: baseline flex-end; | |
} | |
[flex-layout~=row][flex-align="end inherit"], | |
[flex-layout~=column][flex-align="end inherit"] { | |
align-items: inherit; | |
place-content: inherit flex-end; | |
} | |
[flex-layout~=row][flex-align="end initial"], | |
[flex-layout~=column][flex-align="end initial"] { | |
align-items: initial; | |
place-content: initial flex-end; | |
} | |
[flex-layout~=row][flex-align="end revert"], | |
[flex-layout~=column][flex-align="end revert"] { | |
align-items: revert; | |
place-content: revert flex-end; | |
} | |
[flex-layout~=row][flex-align="end revert-layer"], | |
[flex-layout~=column][flex-align="end revert-layer"] { | |
align-items: revert-layer; | |
place-content: revert-layer flex-end; | |
} | |
[flex-layout~=row][flex-align="end unset"], | |
[flex-layout~=column][flex-align="end unset"] { | |
align-items: unset; | |
place-content: unset flex-end; | |
} | |
[flex-layout~=row][flex-align="left normal"], | |
[flex-layout~=column][flex-align="left normal"] { | |
align-items: normal; | |
place-content: normal left; | |
} | |
[flex-layout~=row][flex-align="left stretch"], | |
[flex-layout~=column][flex-align="left stretch"] { | |
align-items: stretch; | |
place-content: stretch left; | |
} | |
[flex-layout~=row][flex-align="left center"], | |
[flex-layout~=column][flex-align="left center"] { | |
align-items: center; | |
place-content: center left; | |
} | |
[flex-layout~=row][flex-align="left start"], | |
[flex-layout~=column][flex-align="left start"] { | |
align-items: flex-start; | |
place-content: flex-start left; | |
} | |
[flex-layout~=row][flex-align="left end"], | |
[flex-layout~=column][flex-align="left end"] { | |
align-items: flex-end; | |
place-content: flex-end left; | |
} | |
[flex-layout~=row][flex-align="left self-start"], | |
[flex-layout~=column][flex-align="left self-start"] { | |
align-items: self-start; | |
place-content: self-start left; | |
} | |
[flex-layout~=row][flex-align="left self-end"], | |
[flex-layout~=column][flex-align="left self-end"] { | |
align-items: self-end; | |
place-content: self-end left; | |
} | |
[flex-layout~=row][flex-align="left baseline"], | |
[flex-layout~=column][flex-align="left baseline"] { | |
align-items: baseline; | |
place-content: baseline left; | |
} | |
[flex-layout~=row][flex-align="left inherit"], | |
[flex-layout~=column][flex-align="left inherit"] { | |
align-items: inherit; | |
place-content: inherit left; | |
} | |
[flex-layout~=row][flex-align="left initial"], | |
[flex-layout~=column][flex-align="left initial"] { | |
align-items: initial; | |
place-content: initial left; | |
} | |
[flex-layout~=row][flex-align="left revert"], | |
[flex-layout~=column][flex-align="left revert"] { | |
align-items: revert; | |
place-content: revert left; | |
} | |
[flex-layout~=row][flex-align="left revert-layer"], | |
[flex-layout~=column][flex-align="left revert-layer"] { | |
align-items: revert-layer; | |
place-content: revert-layer left; | |
} | |
[flex-layout~=row][flex-align="left unset"], | |
[flex-layout~=column][flex-align="left unset"] { | |
align-items: unset; | |
place-content: unset left; | |
} | |
[flex-layout~=row][flex-align="right normal"], | |
[flex-layout~=column][flex-align="right normal"] { | |
align-items: normal; | |
place-content: normal right; | |
} | |
[flex-layout~=row][flex-align="right stretch"], | |
[flex-layout~=column][flex-align="right stretch"] { | |
align-items: stretch; | |
place-content: stretch right; | |
} | |
[flex-layout~=row][flex-align="right center"], | |
[flex-layout~=column][flex-align="right center"] { | |
align-items: center; | |
place-content: center right; | |
} | |
[flex-layout~=row][flex-align="right start"], | |
[flex-layout~=column][flex-align="right start"] { | |
align-items: flex-start; | |
place-content: flex-start right; | |
} | |
[flex-layout~=row][flex-align="right end"], | |
[flex-layout~=column][flex-align="right end"] { | |
align-items: flex-end; | |
place-content: flex-end right; | |
} | |
[flex-layout~=row][flex-align="right self-start"], | |
[flex-layout~=column][flex-align="right self-start"] { | |
align-items: self-start; | |
place-content: self-start right; | |
} | |
[flex-layout~=row][flex-align="right self-end"], | |
[flex-layout~=column][flex-align="right self-end"] { | |
align-items: self-end; | |
place-content: self-end right; | |
} | |
[flex-layout~=row][flex-align="right baseline"], | |
[flex-layout~=column][flex-align="right baseline"] { | |
align-items: baseline; | |
place-content: baseline right; | |
} | |
[flex-layout~=row][flex-align="right inherit"], | |
[flex-layout~=column][flex-align="right inherit"] { | |
align-items: inherit; | |
place-content: inherit right; | |
} | |
[flex-layout~=row][flex-align="right initial"], | |
[flex-layout~=column][flex-align="right initial"] { | |
align-items: initial; | |
place-content: initial right; | |
} | |
[flex-layout~=row][flex-align="right revert"], | |
[flex-layout~=column][flex-align="right revert"] { | |
align-items: revert; | |
place-content: revert right; | |
} | |
[flex-layout~=row][flex-align="right revert-layer"], | |
[flex-layout~=column][flex-align="right revert-layer"] { | |
align-items: revert-layer; | |
place-content: revert-layer right; | |
} | |
[flex-layout~=row][flex-align="right unset"], | |
[flex-layout~=column][flex-align="right unset"] { | |
align-items: unset; | |
place-content: unset right; | |
} | |
[flex-layout~=row][flex-align="normal normal"], | |
[flex-layout~=column][flex-align="normal normal"] { | |
align-items: normal; | |
place-content: normal normal; | |
} | |
[flex-layout~=row][flex-align="normal stretch"], | |
[flex-layout~=column][flex-align="normal stretch"] { | |
align-items: stretch; | |
place-content: stretch normal; | |
} | |
[flex-layout~=row][flex-align="normal center"], | |
[flex-layout~=column][flex-align="normal center"] { | |
align-items: center; | |
place-content: center normal; | |
} | |
[flex-layout~=row][flex-align="normal start"], | |
[flex-layout~=column][flex-align="normal start"] { | |
align-items: flex-start; | |
place-content: flex-start normal; | |
} | |
[flex-layout~=row][flex-align="normal end"], | |
[flex-layout~=column][flex-align="normal end"] { | |
align-items: flex-end; | |
place-content: flex-end normal; | |
} | |
[flex-layout~=row][flex-align="normal self-start"], | |
[flex-layout~=column][flex-align="normal self-start"] { | |
align-items: self-start; | |
place-content: self-start normal; | |
} | |
[flex-layout~=row][flex-align="normal self-end"], | |
[flex-layout~=column][flex-align="normal self-end"] { | |
align-items: self-end; | |
place-content: self-end normal; | |
} | |
[flex-layout~=row][flex-align="normal baseline"], | |
[flex-layout~=column][flex-align="normal baseline"] { | |
align-items: baseline; | |
place-content: baseline normal; | |
} | |
[flex-layout~=row][flex-align="normal inherit"], | |
[flex-layout~=column][flex-align="normal inherit"] { | |
align-items: inherit; | |
place-content: inherit normal; | |
} | |
[flex-layout~=row][flex-align="normal initial"], | |
[flex-layout~=column][flex-align="normal initial"] { | |
align-items: initial; | |
place-content: initial normal; | |
} | |
[flex-layout~=row][flex-align="normal revert"], | |
[flex-layout~=column][flex-align="normal revert"] { | |
align-items: revert; | |
place-content: revert normal; | |
} | |
[flex-layout~=row][flex-align="normal revert-layer"], | |
[flex-layout~=column][flex-align="normal revert-layer"] { | |
align-items: revert-layer; | |
place-content: revert-layer normal; | |
} | |
[flex-layout~=row][flex-align="normal unset"], | |
[flex-layout~=column][flex-align="normal unset"] { | |
align-items: unset; | |
place-content: unset normal; | |
} | |
[flex-layout~=row][flex-align="space-between normal"], | |
[flex-layout~=column][flex-align="space-between normal"] { | |
align-items: normal; | |
place-content: normal space-between; | |
} | |
[flex-layout~=row][flex-align="space-between stretch"], | |
[flex-layout~=column][flex-align="space-between stretch"] { | |
align-items: stretch; | |
place-content: stretch space-between; | |
} | |
[flex-layout~=row][flex-align="space-between center"], | |
[flex-layout~=column][flex-align="space-between center"] { | |
align-items: center; | |
place-content: center space-between; | |
} | |
[flex-layout~=row][flex-align="space-between start"], | |
[flex-layout~=column][flex-align="space-between start"] { | |
align-items: flex-start; | |
place-content: flex-start space-between; | |
} | |
[flex-layout~=row][flex-align="space-between end"], | |
[flex-layout~=column][flex-align="space-between end"] { | |
align-items: flex-end; | |
place-content: flex-end space-between; | |
} | |
[flex-layout~=row][flex-align="space-between self-start"], | |
[flex-layout~=column][flex-align="space-between self-start"] { | |
align-items: self-start; | |
place-content: self-start space-between; | |
} | |
[flex-layout~=row][flex-align="space-between self-end"], | |
[flex-layout~=column][flex-align="space-between self-end"] { | |
align-items: self-end; | |
place-content: self-end space-between; | |
} | |
[flex-layout~=row][flex-align="space-between baseline"], | |
[flex-layout~=column][flex-align="space-between baseline"] { | |
align-items: baseline; | |
place-content: baseline space-between; | |
} | |
[flex-layout~=row][flex-align="space-between inherit"], | |
[flex-layout~=column][flex-align="space-between inherit"] { | |
align-items: inherit; | |
place-content: inherit space-between; | |
} | |
[flex-layout~=row][flex-align="space-between initial"], | |
[flex-layout~=column][flex-align="space-between initial"] { | |
align-items: initial; | |
place-content: initial space-between; | |
} | |
[flex-layout~=row][flex-align="space-between revert"], | |
[flex-layout~=column][flex-align="space-between revert"] { | |
align-items: revert; | |
place-content: revert space-between; | |
} | |
[flex-layout~=row][flex-align="space-between revert-layer"], | |
[flex-layout~=column][flex-align="space-between revert-layer"] { | |
align-items: revert-layer; | |
place-content: revert-layer space-between; | |
} | |
[flex-layout~=row][flex-align="space-between unset"], | |
[flex-layout~=column][flex-align="space-between unset"] { | |
align-items: unset; | |
place-content: unset space-between; | |
} | |
[flex-layout~=row][flex-align="space-around normal"], | |
[flex-layout~=column][flex-align="space-around normal"] { | |
align-items: normal; | |
place-content: normal space-around; | |
} | |
[flex-layout~=row][flex-align="space-around stretch"], | |
[flex-layout~=column][flex-align="space-around stretch"] { | |
align-items: stretch; | |
place-content: stretch space-around; | |
} | |
[flex-layout~=row][flex-align="space-around center"], | |
[flex-layout~=column][flex-align="space-around center"] { | |
align-items: center; | |
place-content: center space-around; | |
} | |
[flex-layout~=row][flex-align="space-around start"], | |
[flex-layout~=column][flex-align="space-around start"] { | |
align-items: flex-start; | |
place-content: flex-start space-around; | |
} | |
[flex-layout~=row][flex-align="space-around end"], | |
[flex-layout~=column][flex-align="space-around end"] { | |
align-items: flex-end; | |
place-content: flex-end space-around; | |
} | |
[flex-layout~=row][flex-align="space-around self-start"], | |
[flex-layout~=column][flex-align="space-around self-start"] { | |
align-items: self-start; | |
place-content: self-start space-around; | |
} | |
[flex-layout~=row][flex-align="space-around self-end"], | |
[flex-layout~=column][flex-align="space-around self-end"] { | |
align-items: self-end; | |
place-content: self-end space-around; | |
} | |
[flex-layout~=row][flex-align="space-around baseline"], | |
[flex-layout~=column][flex-align="space-around baseline"] { | |
align-items: baseline; | |
place-content: baseline space-around; | |
} | |
[flex-layout~=row][flex-align="space-around inherit"], | |
[flex-layout~=column][flex-align="space-around inherit"] { | |
align-items: inherit; | |
place-content: inherit space-around; | |
} | |
[flex-layout~=row][flex-align="space-around initial"], | |
[flex-layout~=column][flex-align="space-around initial"] { | |
align-items: initial; | |
place-content: initial space-around; | |
} | |
[flex-layout~=row][flex-align="space-around revert"], | |
[flex-layout~=column][flex-align="space-around revert"] { | |
align-items: revert; | |
place-content: revert space-around; | |
} | |
[flex-layout~=row][flex-align="space-around revert-layer"], | |
[flex-layout~=column][flex-align="space-around revert-layer"] { | |
align-items: revert-layer; | |
place-content: revert-layer space-around; | |
} | |
[flex-layout~=row][flex-align="space-around unset"], | |
[flex-layout~=column][flex-align="space-around unset"] { | |
align-items: unset; | |
place-content: unset space-around; | |
} | |
[flex-layout~=row][flex-align="space-evenly normal"], | |
[flex-layout~=column][flex-align="space-evenly normal"] { | |
align-items: normal; | |
place-content: normal space-evenly; | |
} | |
[flex-layout~=row][flex-align="space-evenly stretch"], | |
[flex-layout~=column][flex-align="space-evenly stretch"] { | |
align-items: stretch; | |
place-content: stretch space-evenly; | |
} | |
[flex-layout~=row][flex-align="space-evenly center"], | |
[flex-layout~=column][flex-align="space-evenly center"] { | |
align-items: center; | |
place-content: center space-evenly; | |
} | |
[flex-layout~=row][flex-align="space-evenly start"], | |
[flex-layout~=column][flex-align="space-evenly start"] { | |
align-items: flex-start; | |
place-content: flex-start space-evenly; | |
} | |
[flex-layout~=row][flex-align="space-evenly end"], | |
[flex-layout~=column][flex-align="space-evenly end"] { | |
align-items: flex-end; | |
place-content: flex-end space-evenly; | |
} | |
[flex-layout~=row][flex-align="space-evenly self-start"], | |
[flex-layout~=column][flex-align="space-evenly self-start"] { | |
align-items: self-start; | |
place-content: self-start space-evenly; | |
} | |
[flex-layout~=row][flex-align="space-evenly self-end"], | |
[flex-layout~=column][flex-align="space-evenly self-end"] { | |
align-items: self-end; | |
place-content: self-end space-evenly; | |
} | |
[flex-layout~=row][flex-align="space-evenly baseline"], | |
[flex-layout~=column][flex-align="space-evenly baseline"] { | |
align-items: baseline; | |
place-content: baseline space-evenly; | |
} | |
[flex-layout~=row][flex-align="space-evenly inherit"], | |
[flex-layout~=column][flex-align="space-evenly inherit"] { | |
align-items: inherit; | |
place-content: inherit space-evenly; | |
} | |
[flex-layout~=row][flex-align="space-evenly initial"], | |
[flex-layout~=column][flex-align="space-evenly initial"] { | |
align-items: initial; | |
place-content: initial space-evenly; | |
} | |
[flex-layout~=row][flex-align="space-evenly revert"], | |
[flex-layout~=column][flex-align="space-evenly revert"] { | |
align-items: revert; | |
place-content: revert space-evenly; | |
} | |
[flex-layout~=row][flex-align="space-evenly revert-layer"], | |
[flex-layout~=column][flex-align="space-evenly revert-layer"] { | |
align-items: revert-layer; | |
place-content: revert-layer space-evenly; | |
} | |
[flex-layout~=row][flex-align="space-evenly unset"], | |
[flex-layout~=column][flex-align="space-evenly unset"] { | |
align-items: unset; | |
place-content: unset space-evenly; | |
} | |
[flex-layout~=row][flex-align="stretch normal"], | |
[flex-layout~=column][flex-align="stretch normal"] { | |
align-items: normal; | |
place-content: normal stretch; | |
} | |
[flex-layout~=row][flex-align="stretch stretch"], | |
[flex-layout~=column][flex-align="stretch stretch"] { | |
align-items: stretch; | |
place-content: stretch stretch; | |
} | |
[flex-layout~=row][flex-align="stretch center"], | |
[flex-layout~=column][flex-align="stretch center"] { | |
align-items: center; | |
place-content: center stretch; | |
} | |
[flex-layout~=row][flex-align="stretch start"], | |
[flex-layout~=column][flex-align="stretch start"] { | |
align-items: flex-start; | |
place-content: flex-start stretch; | |
} | |
[flex-layout~=row][flex-align="stretch end"], | |
[flex-layout~=column][flex-align="stretch end"] { | |
align-items: flex-end; | |
place-content: flex-end stretch; | |
} | |
[flex-layout~=row][flex-align="stretch self-start"], | |
[flex-layout~=column][flex-align="stretch self-start"] { | |
align-items: self-start; | |
place-content: self-start stretch; | |
} | |
[flex-layout~=row][flex-align="stretch self-end"], | |
[flex-layout~=column][flex-align="stretch self-end"] { | |
align-items: self-end; | |
place-content: self-end stretch; | |
} | |
[flex-layout~=row][flex-align="stretch baseline"], | |
[flex-layout~=column][flex-align="stretch baseline"] { | |
align-items: baseline; | |
place-content: baseline stretch; | |
} | |
[flex-layout~=row][flex-align="stretch inherit"], | |
[flex-layout~=column][flex-align="stretch inherit"] { | |
align-items: inherit; | |
place-content: inherit stretch; | |
} | |
[flex-layout~=row][flex-align="stretch initial"], | |
[flex-layout~=column][flex-align="stretch initial"] { | |
align-items: initial; | |
place-content: initial stretch; | |
} | |
[flex-layout~=row][flex-align="stretch revert"], | |
[flex-layout~=column][flex-align="stretch revert"] { | |
align-items: revert; | |
place-content: revert stretch; | |
} | |
[flex-layout~=row][flex-align="stretch revert-layer"], | |
[flex-layout~=column][flex-align="stretch revert-layer"] { | |
align-items: revert-layer; | |
place-content: revert-layer stretch; | |
} | |
[flex-layout~=row][flex-align="stretch unset"], | |
[flex-layout~=column][flex-align="stretch unset"] { | |
align-items: unset; | |
place-content: unset stretch; | |
} | |
[flex-layout~=row][flex-align="inherit normal"], | |
[flex-layout~=column][flex-align="inherit normal"] { | |
align-items: normal; | |
place-content: normal inherit; | |
} | |
[flex-layout~=row][flex-align="inherit stretch"], | |
[flex-layout~=column][flex-align="inherit stretch"] { | |
align-items: stretch; | |
place-content: stretch inherit; | |
} | |
[flex-layout~=row][flex-align="inherit center"], | |
[flex-layout~=column][flex-align="inherit center"] { | |
align-items: center; | |
place-content: center inherit; | |
} | |
[flex-layout~=row][flex-align="inherit start"], | |
[flex-layout~=column][flex-align="inherit start"] { | |
align-items: flex-start; | |
place-content: flex-start inherit; | |
} | |
[flex-layout~=row][flex-align="inherit end"], | |
[flex-layout~=column][flex-align="inherit end"] { | |
align-items: flex-end; | |
place-content: flex-end inherit; | |
} | |
[flex-layout~=row][flex-align="inherit self-start"], | |
[flex-layout~=column][flex-align="inherit self-start"] { | |
align-items: self-start; | |
place-content: self-start inherit; | |
} | |
[flex-layout~=row][flex-align="inherit self-end"], | |
[flex-layout~=column][flex-align="inherit self-end"] { | |
align-items: self-end; | |
place-content: self-end inherit; | |
} | |
[flex-layout~=row][flex-align="inherit baseline"], | |
[flex-layout~=column][flex-align="inherit baseline"] { | |
align-items: baseline; | |
place-content: baseline inherit; | |
} | |
[flex-layout~=row][flex-align="inherit inherit"], | |
[flex-layout~=column][flex-align="inherit inherit"] { | |
align-items: inherit; | |
place-content: inherit inherit; | |
} | |
[flex-layout~=row][flex-align="inherit initial"], | |
[flex-layout~=column][flex-align="inherit initial"] { | |
align-items: initial; | |
place-content: initial inherit; | |
} | |
[flex-layout~=row][flex-align="inherit revert"], | |
[flex-layout~=column][flex-align="inherit revert"] { | |
align-items: revert; | |
place-content: revert inherit; | |
} | |
[flex-layout~=row][flex-align="inherit revert-layer"], | |
[flex-layout~=column][flex-align="inherit revert-layer"] { | |
align-items: revert-layer; | |
place-content: revert-layer inherit; | |
} | |
[flex-layout~=row][flex-align="inherit unset"], | |
[flex-layout~=column][flex-align="inherit unset"] { | |
align-items: unset; | |
place-content: unset inherit; | |
} | |
[flex-layout~=row][flex-align="initial normal"], | |
[flex-layout~=column][flex-align="initial normal"] { | |
align-items: normal; | |
place-content: normal initial; | |
} | |
[flex-layout~=row][flex-align="initial stretch"], | |
[flex-layout~=column][flex-align="initial stretch"] { | |
align-items: stretch; | |
place-content: stretch initial; | |
} | |
[flex-layout~=row][flex-align="initial center"], | |
[flex-layout~=column][flex-align="initial center"] { | |
align-items: center; | |
place-content: center initial; | |
} | |
[flex-layout~=row][flex-align="initial start"], | |
[flex-layout~=column][flex-align="initial start"] { | |
align-items: flex-start; | |
place-content: flex-start initial; | |
} | |
[flex-layout~=row][flex-align="initial end"], | |
[flex-layout~=column][flex-align="initial end"] { | |
align-items: flex-end; | |
place-content: flex-end initial; | |
} | |
[flex-layout~=row][flex-align="initial self-start"], | |
[flex-layout~=column][flex-align="initial self-start"] { | |
align-items: self-start; | |
place-content: self-start initial; | |
} | |
[flex-layout~=row][flex-align="initial self-end"], | |
[flex-layout~=column][flex-align="initial self-end"] { | |
align-items: self-end; | |
place-content: self-end initial; | |
} | |
[flex-layout~=row][flex-align="initial baseline"], | |
[flex-layout~=column][flex-align="initial baseline"] { | |
align-items: baseline; | |
place-content: baseline initial; | |
} | |
[flex-layout~=row][flex-align="initial inherit"], | |
[flex-layout~=column][flex-align="initial inherit"] { | |
align-items: inherit; | |
place-content: inherit initial; | |
} | |
[flex-layout~=row][flex-align="initial initial"], | |
[flex-layout~=column][flex-align="initial initial"] { | |
align-items: initial; | |
place-content: initial initial; | |
} | |
[flex-layout~=row][flex-align="initial revert"], | |
[flex-layout~=column][flex-align="initial revert"] { | |
align-items: revert; | |
place-content: revert initial; | |
} | |
[flex-layout~=row][flex-align="initial revert-layer"], | |
[flex-layout~=column][flex-align="initial revert-layer"] { | |
align-items: revert-layer; | |
place-content: revert-layer initial; | |
} | |
[flex-layout~=row][flex-align="initial unset"], | |
[flex-layout~=column][flex-align="initial unset"] { | |
align-items: unset; | |
place-content: unset initial; | |
} | |
[flex-layout~=row][flex-align="revert normal"], | |
[flex-layout~=column][flex-align="revert normal"] { | |
align-items: normal; | |
place-content: normal revert; | |
} | |
[flex-layout~=row][flex-align="revert stretch"], | |
[flex-layout~=column][flex-align="revert stretch"] { | |
align-items: stretch; | |
place-content: stretch revert; | |
} | |
[flex-layout~=row][flex-align="revert center"], | |
[flex-layout~=column][flex-align="revert center"] { | |
align-items: center; | |
place-content: center revert; | |
} | |
[flex-layout~=row][flex-align="revert start"], | |
[flex-layout~=column][flex-align="revert start"] { | |
align-items: flex-start; | |
place-content: flex-start revert; | |
} | |
[flex-layout~=row][flex-align="revert end"], | |
[flex-layout~=column][flex-align="revert end"] { | |
align-items: flex-end; | |
place-content: flex-end revert; | |
} | |
[flex-layout~=row][flex-align="revert self-start"], | |
[flex-layout~=column][flex-align="revert self-start"] { | |
align-items: self-start; | |
place-content: self-start revert; | |
} | |
[flex-layout~=row][flex-align="revert self-end"], | |
[flex-layout~=column][flex-align="revert self-end"] { | |
align-items: self-end; | |
place-content: self-end revert; | |
} | |
[flex-layout~=row][flex-align="revert baseline"], | |
[flex-layout~=column][flex-align="revert baseline"] { | |
align-items: baseline; | |
place-content: baseline revert; | |
} | |
[flex-layout~=row][flex-align="revert inherit"], | |
[flex-layout~=column][flex-align="revert inherit"] { | |
align-items: inherit; | |
place-content: inherit revert; | |
} | |
[flex-layout~=row][flex-align="revert initial"], | |
[flex-layout~=column][flex-align="revert initial"] { | |
align-items: initial; | |
place-content: initial revert; | |
} | |
[flex-layout~=row][flex-align="revert revert"], | |
[flex-layout~=column][flex-align="revert revert"] { | |
align-items: revert; | |
place-content: revert revert; | |
} | |
[flex-layout~=row][flex-align="revert revert-layer"], | |
[flex-layout~=column][flex-align="revert revert-layer"] { | |
align-items: revert-layer; | |
place-content: revert-layer revert; | |
} | |
[flex-layout~=row][flex-align="revert unset"], | |
[flex-layout~=column][flex-align="revert unset"] { | |
align-items: unset; | |
place-content: unset revert; | |
} | |
[flex-layout~=row][flex-align="revert-layer normal"], | |
[flex-layout~=column][flex-align="revert-layer normal"] { | |
align-items: normal; | |
place-content: normal revert-layer; | |
} | |
[flex-layout~=row][flex-align="revert-layer stretch"], | |
[flex-layout~=column][flex-align="revert-layer stretch"] { | |
align-items: stretch; | |
place-content: stretch revert-layer; | |
} | |
[flex-layout~=row][flex-align="revert-layer center"], | |
[flex-layout~=column][flex-align="revert-layer center"] { | |
align-items: center; | |
place-content: center revert-layer; | |
} | |
[flex-layout~=row][flex-align="revert-layer start"], | |
[flex-layout~=column][flex-align="revert-layer start"] { | |
align-items: flex-start; | |
place-content: flex-start revert-layer; | |
} | |
[flex-layout~=row][flex-align="revert-layer end"], | |
[flex-layout~=column][flex-align="revert-layer end"] { | |
align-items: flex-end; | |
place-content: flex-end revert-layer; | |
} | |
[flex-layout~=row][flex-align="revert-layer self-start"], | |
[flex-layout~=column][flex-align="revert-layer self-start"] { | |
align-items: self-start; | |
place-content: self-start revert-layer; | |
} | |
[flex-layout~=row][flex-align="revert-layer self-end"], | |
[flex-layout~=column][flex-align="revert-layer self-end"] { | |
align-items: self-end; | |
place-content: self-end revert-layer; | |
} | |
[flex-layout~=row][flex-align="revert-layer baseline"], | |
[flex-layout~=column][flex-align="revert-layer baseline"] { | |
align-items: baseline; | |
place-content: baseline revert-layer; | |
} | |
[flex-layout~=row][flex-align="revert-layer inherit"], | |
[flex-layout~=column][flex-align="revert-layer inherit"] { | |
align-items: inherit; | |
place-content: inherit revert-layer; | |
} | |
[flex-layout~=row][flex-align="revert-layer initial"], | |
[flex-layout~=column][flex-align="revert-layer initial"] { | |
align-items: initial; | |
place-content: initial revert-layer; | |
} | |
[flex-layout~=row][flex-align="revert-layer revert"], | |
[flex-layout~=column][flex-align="revert-layer revert"] { | |
align-items: revert; | |
place-content: revert revert-layer; | |
} | |
[flex-layout~=row][flex-align="revert-layer revert-layer"], | |
[flex-layout~=column][flex-align="revert-layer revert-layer"] { | |
align-items: revert-layer; | |
place-content: revert-layer revert-layer; | |
} | |
[flex-layout~=row][flex-align="revert-layer unset"], | |
[flex-layout~=column][flex-align="revert-layer unset"] { | |
align-items: unset; | |
place-content: unset revert-layer; | |
} | |
[flex-layout~=row][flex-align="unset normal"], | |
[flex-layout~=column][flex-align="unset normal"] { | |
align-items: normal; | |
place-content: normal unset; | |
} | |
[flex-layout~=row][flex-align="unset stretch"], | |
[flex-layout~=column][flex-align="unset stretch"] { | |
align-items: stretch; | |
place-content: stretch unset; | |
} | |
[flex-layout~=row][flex-align="unset center"], | |
[flex-layout~=column][flex-align="unset center"] { | |
align-items: center; | |
place-content: center unset; | |
} | |
[flex-layout~=row][flex-align="unset start"], | |
[flex-layout~=column][flex-align="unset start"] { | |
align-items: flex-start; | |
place-content: flex-start unset; | |
} | |
[flex-layout~=row][flex-align="unset end"], | |
[flex-layout~=column][flex-align="unset end"] { | |
align-items: flex-end; | |
place-content: flex-end unset; | |
} | |
[flex-layout~=row][flex-align="unset self-start"], | |
[flex-layout~=column][flex-align="unset self-start"] { | |
align-items: self-start; | |
place-content: self-start unset; | |
} | |
[flex-layout~=row][flex-align="unset self-end"], | |
[flex-layout~=column][flex-align="unset self-end"] { | |
align-items: self-end; | |
place-content: self-end unset; | |
} | |
[flex-layout~=row][flex-align="unset baseline"], | |
[flex-layout~=column][flex-align="unset baseline"] { | |
align-items: baseline; | |
place-content: baseline unset; | |
} | |
[flex-layout~=row][flex-align="unset inherit"], | |
[flex-layout~=column][flex-align="unset inherit"] { | |
align-items: inherit; | |
place-content: inherit unset; | |
} | |
[flex-layout~=row][flex-align="unset initial"], | |
[flex-layout~=column][flex-align="unset initial"] { | |
align-items: initial; | |
place-content: initial unset; | |
} | |
[flex-layout~=row][flex-align="unset revert"], | |
[flex-layout~=column][flex-align="unset revert"] { | |
align-items: revert; | |
place-content: revert unset; | |
} | |
[flex-layout~=row][flex-align="unset revert-layer"], | |
[flex-layout~=column][flex-align="unset revert-layer"] { | |
align-items: revert-layer; | |
place-content: revert-layer unset; | |
} | |
[flex-layout~=row][flex-align="unset unset"], | |
[flex-layout~=column][flex-align="unset unset"] { | |
align-items: unset; | |
place-content: unset unset; | |
} | |
[flex-gap=sm][flex-layout~=column] > *:not(:last-child) { | |
margin-bottom: 8px; | |
} | |
[flex-gap=sm][flex-layout~=row] > *:not(:last-child) { | |
margin-right: 8px; | |
} | |
[flex-gap=md][flex-layout~=column] > *:not(:last-child) { | |
margin-bottom: 16px; | |
} | |
[flex-gap=md][flex-layout~=row] > *:not(:last-child) { | |
margin-right: 16px; | |
} | |
[flex-gap=lg][flex-layout~=column] > *:not(:last-child) { | |
margin-bottom: 24px; | |
} | |
[flex-gap=lg][flex-layout~=row] > *:not(:last-child) { | |
margin-right: 24px; | |
} | |
[flex-gap-top] { | |
margin-top: auto; | |
} | |
[flex-gap-right] { | |
margin-right: auto; | |
} | |
[flex-gap-bottom] { | |
margin-bottom: auto; | |
} | |
[flex-gap-left] { | |
margin-left: auto; | |
} | |
[flex-gap-top=sm] { | |
margin-top: 8px; | |
} | |
[flex-gap-top=md] { | |
margin-top: 16px; | |
} | |
[flex-gap-top=lg] { | |
margin-top: 24px; | |
} | |
[flex-gap-right] { | |
margin-right: auto; | |
} | |
[flex-gap-right=sm] { | |
margin-right: 8px; | |
} | |
[flex-gap-right=md] { | |
margin-right: 16px; | |
} | |
[flex-gap-right=lg] { | |
margin-right: 24px; | |
} | |
[flex-gap-top=sm] { | |
margin-top: 8px; | |
} | |
[flex-gap-top=md] { | |
margin-top: 16px; | |
} | |
[flex-gap-top=lg] { | |
margin-top: 24px; | |
} | |
[flex-gap-top=sm] { | |
margin-top: 8px; | |
} | |
[flex-gap-top=md] { | |
margin-top: 16px; | |
} | |
[flex-gap-top=lg] { | |
margin-top: 24px; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"sass": { | |
"compiler": "dart-sass/1.32.12", | |
"extensions": {}, | |
"syntax": "SCSS", | |
"outputStyle": "expanded" | |
}, | |
"autoprefixer": false | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment