Created
September 29, 2020 04:46
-
-
Save jasonmelgoza/d85980dd18f06868a06874975d5dc17c 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
// | |
// Spacing Utilities | |
// | |
// Spacing System | |
// | |
$space-unit: 4px; | |
$space-xxs: $space-unit; // 4px | |
$space-xs: $space-unit * 2; // 8px | |
$space-sm: $space-unit * 3; // 12px | |
$space-md: $space-unit * 5; // 20px | |
$space-lg: $space-unit * 8; // 32px | |
$space-xl: $space-unit * 14; // 56px | |
$space-xxl: $space-unit * 18; // 72px | |
// Varabiles | |
// ------------------------------ | |
// Mounts | |
$spaceamounts: ( | |
'0' 0, | |
'1' $space-xxs, | |
'2' $space-xs, | |
'3' $space-sm, | |
'4' $space-md, | |
'5' $space-lg, | |
'6' $space-xl, | |
'7' $space-xxl | |
); | |
// Sides | |
$sides: all, vertical, horizontal, top, right, bottom, left; | |
// Sizes | |
$desktop: 30em; | |
$lg-desktop: 60em; | |
// Functions | |
// ------------------------------ | |
.root :global { | |
// Margins | |
@each $space in $spaceamounts { | |
@each $side in $sides { | |
@if $side == all { | |
.ma#{nth($space, 1)} { | |
margin: #{nth($space, 2)} !important; | |
} | |
} @else if $side == vertical { | |
.mv#{nth($space, 1)} { | |
margin-top: #{nth($space, 2)} !important; | |
margin-bottom: #{nth($space, 2)} !important; | |
} | |
} @else if $side == horizontal { | |
.mh#{nth($space, 1)} { | |
margin-right: #{nth($space, 2)} !important; | |
margin-left: #{nth($space, 2)} !important; | |
} | |
} @else { | |
.m#{str-slice($side, 0, 1)}#{nth($space, 1)} { | |
margin-#{$side}: #{nth($space, 2)} !important; | |
} | |
} | |
} | |
} | |
// Padding | |
@each $space in $spaceamounts { | |
@each $side in $sides { | |
@if $side == all { | |
.pa#{nth($space, 1)} { | |
padding: #{nth($space, 2)} !important; | |
} | |
} @else if $side == vertical { | |
.pv#{nth($space, 1)} { | |
padding-top: #{nth($space, 2)} !important; | |
padding-bottom: #{nth($space, 2)} !important; | |
} | |
} @else if $side == horizontal { | |
.ph#{nth($space, 1)} { | |
padding-right: #{nth($space, 2)} !important; | |
padding-left: #{nth($space, 2)} !important; | |
} | |
} @else { | |
.p#{str-slice($side, 0, 1)}#{nth($space, 1)} { | |
padding-#{$side}: #{nth($space, 2)} !important; | |
} | |
} | |
} | |
} | |
// Breakpoints | |
// Not small | |
@media screen and (min-width: $desktop) { | |
@each $space in $spaceamounts { | |
@each $side in $sides { | |
@if $side == all { | |
.ma#{nth($space, 1)}-ns { | |
margin: #{nth($space, 2)} !important; | |
} | |
} @else if $side == vertical { | |
.mv#{nth($space, 1)}-ns { | |
margin-top: #{nth($space, 2)} !important; | |
margin-bottom: #{nth($space, 2)} !important; | |
} | |
} @else if $side == horizontal { | |
.mh#{nth($space, 1)}-ns { | |
margin-right: #{nth($space, 2)} !important; | |
margin-left: #{nth($space, 2)} !important; | |
} | |
} @else { | |
.m#{str-slice($side, 0, 1)}#{nth($space, 1)}-ns { | |
margin-#{$side}: #{nth($space, 2)} !important; | |
} | |
} | |
} | |
} | |
@each $space in $spaceamounts { | |
@each $side in $sides { | |
@if $side == all { | |
.pa#{nth($space, 1)}-ns { | |
padding: #{nth($space, 2)} !important; | |
} | |
} @else if $side == vertical { | |
.pv#{nth($space, 1)}-ns { | |
padding-top: #{nth($space, 2)} !important; | |
padding-bottom: #{nth($space, 2)} !important; | |
} | |
} @else if $side == horizontal { | |
.ph#{nth($space, 1)}-ns { | |
padding-right: #{nth($space, 2)} !important; | |
padding-left: #{nth($space, 2)} !important; | |
} | |
} @else { | |
.p#{str-slice($side, 0, 1)}#{nth($space, 1)}-ns { | |
padding-#{$side}: #{nth($space, 2)} !important; | |
} | |
} | |
} | |
} | |
} | |
// Medium | |
@media screen and (min-width: $desktop) and (max-width: $lg-desktop) { | |
@each $space in $spaceamounts { | |
@each $side in $sides { | |
@if $side == all { | |
.ma#{nth($space, 1)}-m { | |
margin: #{nth($space, 2)} !important; | |
} | |
} @else if $side == vertical { | |
.mv#{nth($space, 1)}-m { | |
margin-top: #{nth($space, 2)} !important; | |
margin-bottom: #{nth($space, 2)} !important; | |
} | |
} @else if $side == horizontal { | |
.mh#{nth($space, 1)}-m { | |
margin-right: #{nth($space, 2)} !important; | |
margin-left: #{nth($space, 2)} !important; | |
} | |
} @else { | |
.m#{str-slice($side, 0, 1)}#{nth($space, 1)}-m { | |
margin-#{$side}: #{nth($space, 2)} !important; | |
} | |
} | |
} | |
} | |
@each $space in $spaceamounts { | |
@each $side in $sides { | |
@if $side == all { | |
.pa#{nth($space, 1)}-m { | |
padding: #{nth($space, 2)} !important; | |
} | |
} @else if $side == vertical { | |
.pv#{nth($space, 1)}-m { | |
padding-top: #{nth($space, 2)} !important; | |
padding-bottom: #{nth($space, 2)} !important; | |
} | |
} @else if $side == horizontal { | |
.ph#{nth($space, 1)}-m { | |
padding-right: #{nth($space, 2)} !important; | |
padding-left: #{nth($space, 2)} !important; | |
} | |
} @else { | |
.p#{str-slice($side, 0, 1)}#{nth($space, 1)}-m { | |
padding-#{$side}: #{nth($space, 2)} !important; | |
} | |
} | |
} | |
} | |
} | |
// Large | |
@media screen and (min-width: $lg-desktop) { | |
@each $space in $spaceamounts { | |
@each $side in $sides { | |
@if $side == all { | |
.ma#{nth($space, 1)}-l { | |
margin: #{nth($space, 2)} !important; | |
} | |
} @else if $side == vertical { | |
.mv#{nth($space, 1)}-l { | |
margin-top: #{nth($space, 2)} !important; | |
margin-bottom: #{nth($space, 2)} !important; | |
} | |
} @else if $side == horizontal { | |
.mh#{nth($space, 1)}-l { | |
margin-right: #{nth($space, 2)} !important; | |
margin-left: #{nth($space, 2)} !important; | |
} | |
} @else { | |
.m#{str-slice($side, 0, 1)}#{nth($space, 1)}-l { | |
margin-#{$side}: #{nth($space, 2)} !important; | |
} | |
} | |
} | |
} | |
@each $space in $spaceamounts { | |
@each $side in $sides { | |
@if $side == all { | |
.pa#{nth($space, 1)}-l { | |
padding: #{nth($space, 2)} !important; | |
} | |
} @else if $side == vertical { | |
.pv#{nth($space, 1)}-l { | |
padding-top: #{nth($space, 2)} !important; | |
padding-bottom: #{nth($space, 2)} !important; | |
} | |
} @else if $side == horizontal { | |
.ph#{nth($space, 1)}-l { | |
padding-right: #{nth($space, 2)} !important; | |
padding-left: #{nth($space, 2)} !important; | |
} | |
} @else { | |
.p#{str-slice($side, 0, 1)}#{nth($space, 1)}-l { | |
padding-#{$side}: #{nth($space, 2)} !important; | |
} | |
} | |
} | |
} | |
} | |
} |
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
.root :global .ma0 { | |
margin: 0 !important; | |
} | |
.root :global .mv0 { | |
margin-top: 0 !important; | |
margin-bottom: 0 !important; | |
} | |
.root :global .mh0 { | |
margin-right: 0 !important; | |
margin-left: 0 !important; | |
} | |
.root :global .mt0 { | |
margin-top: 0 !important; | |
} | |
.root :global .mr0 { | |
margin-right: 0 !important; | |
} | |
.root :global .mb0 { | |
margin-bottom: 0 !important; | |
} | |
.root :global .ml0 { | |
margin-left: 0 !important; | |
} | |
.root :global .ma1 { | |
margin: 4px !important; | |
} | |
.root :global .mv1 { | |
margin-top: 4px !important; | |
margin-bottom: 4px !important; | |
} | |
.root :global .mh1 { | |
margin-right: 4px !important; | |
margin-left: 4px !important; | |
} | |
.root :global .mt1 { | |
margin-top: 4px !important; | |
} | |
.root :global .mr1 { | |
margin-right: 4px !important; | |
} | |
.root :global .mb1 { | |
margin-bottom: 4px !important; | |
} | |
.root :global .ml1 { | |
margin-left: 4px !important; | |
} | |
.root :global .ma2 { | |
margin: 8px !important; | |
} | |
.root :global .mv2 { | |
margin-top: 8px !important; | |
margin-bottom: 8px !important; | |
} | |
.root :global .mh2 { | |
margin-right: 8px !important; | |
margin-left: 8px !important; | |
} | |
.root :global .mt2 { | |
margin-top: 8px !important; | |
} | |
.root :global .mr2 { | |
margin-right: 8px !important; | |
} | |
.root :global .mb2 { | |
margin-bottom: 8px !important; | |
} | |
.root :global .ml2 { | |
margin-left: 8px !important; | |
} | |
.root :global .ma3 { | |
margin: 12px !important; | |
} | |
.root :global .mv3 { | |
margin-top: 12px !important; | |
margin-bottom: 12px !important; | |
} | |
.root :global .mh3 { | |
margin-right: 12px !important; | |
margin-left: 12px !important; | |
} | |
.root :global .mt3 { | |
margin-top: 12px !important; | |
} | |
.root :global .mr3 { | |
margin-right: 12px !important; | |
} | |
.root :global .mb3 { | |
margin-bottom: 12px !important; | |
} | |
.root :global .ml3 { | |
margin-left: 12px !important; | |
} | |
.root :global .ma4 { | |
margin: 20px !important; | |
} | |
.root :global .mv4 { | |
margin-top: 20px !important; | |
margin-bottom: 20px !important; | |
} | |
.root :global .mh4 { | |
margin-right: 20px !important; | |
margin-left: 20px !important; | |
} | |
.root :global .mt4 { | |
margin-top: 20px !important; | |
} | |
.root :global .mr4 { | |
margin-right: 20px !important; | |
} | |
.root :global .mb4 { | |
margin-bottom: 20px !important; | |
} | |
.root :global .ml4 { | |
margin-left: 20px !important; | |
} | |
.root :global .ma5 { | |
margin: 32px !important; | |
} | |
.root :global .mv5 { | |
margin-top: 32px !important; | |
margin-bottom: 32px !important; | |
} | |
.root :global .mh5 { | |
margin-right: 32px !important; | |
margin-left: 32px !important; | |
} | |
.root :global .mt5 { | |
margin-top: 32px !important; | |
} | |
.root :global .mr5 { | |
margin-right: 32px !important; | |
} | |
.root :global .mb5 { | |
margin-bottom: 32px !important; | |
} | |
.root :global .ml5 { | |
margin-left: 32px !important; | |
} | |
.root :global .ma6 { | |
margin: 56px !important; | |
} | |
.root :global .mv6 { | |
margin-top: 56px !important; | |
margin-bottom: 56px !important; | |
} | |
.root :global .mh6 { | |
margin-right: 56px !important; | |
margin-left: 56px !important; | |
} | |
.root :global .mt6 { | |
margin-top: 56px !important; | |
} | |
.root :global .mr6 { | |
margin-right: 56px !important; | |
} | |
.root :global .mb6 { | |
margin-bottom: 56px !important; | |
} | |
.root :global .ml6 { | |
margin-left: 56px !important; | |
} | |
.root :global .ma7 { | |
margin: 72px !important; | |
} | |
.root :global .mv7 { | |
margin-top: 72px !important; | |
margin-bottom: 72px !important; | |
} | |
.root :global .mh7 { | |
margin-right: 72px !important; | |
margin-left: 72px !important; | |
} | |
.root :global .mt7 { | |
margin-top: 72px !important; | |
} | |
.root :global .mr7 { | |
margin-right: 72px !important; | |
} | |
.root :global .mb7 { | |
margin-bottom: 72px !important; | |
} | |
.root :global .ml7 { | |
margin-left: 72px !important; | |
} | |
.root :global .pa0 { | |
padding: 0 !important; | |
} | |
.root :global .pv0 { | |
padding-top: 0 !important; | |
padding-bottom: 0 !important; | |
} | |
.root :global .ph0 { | |
padding-right: 0 !important; | |
padding-left: 0 !important; | |
} | |
.root :global .pt0 { | |
padding-top: 0 !important; | |
} | |
.root :global .pr0 { | |
padding-right: 0 !important; | |
} | |
.root :global .pb0 { | |
padding-bottom: 0 !important; | |
} | |
.root :global .pl0 { | |
padding-left: 0 !important; | |
} | |
.root :global .pa1 { | |
padding: 4px !important; | |
} | |
.root :global .pv1 { | |
padding-top: 4px !important; | |
padding-bottom: 4px !important; | |
} | |
.root :global .ph1 { | |
padding-right: 4px !important; | |
padding-left: 4px !important; | |
} | |
.root :global .pt1 { | |
padding-top: 4px !important; | |
} | |
.root :global .pr1 { | |
padding-right: 4px !important; | |
} | |
.root :global .pb1 { | |
padding-bottom: 4px !important; | |
} | |
.root :global .pl1 { | |
padding-left: 4px !important; | |
} | |
.root :global .pa2 { | |
padding: 8px !important; | |
} | |
.root :global .pv2 { | |
padding-top: 8px !important; | |
padding-bottom: 8px !important; | |
} | |
.root :global .ph2 { | |
padding-right: 8px !important; | |
padding-left: 8px !important; | |
} | |
.root :global .pt2 { | |
padding-top: 8px !important; | |
} | |
.root :global .pr2 { | |
padding-right: 8px !important; | |
} | |
.root :global .pb2 { | |
padding-bottom: 8px !important; | |
} | |
.root :global .pl2 { | |
padding-left: 8px !important; | |
} | |
.root :global .pa3 { | |
padding: 12px !important; | |
} | |
.root :global .pv3 { | |
padding-top: 12px !important; | |
padding-bottom: 12px !important; | |
} | |
.root :global .ph3 { | |
padding-right: 12px !important; | |
padding-left: 12px !important; | |
} | |
.root :global .pt3 { | |
padding-top: 12px !important; | |
} | |
.root :global .pr3 { | |
padding-right: 12px !important; | |
} | |
.root :global .pb3 { | |
padding-bottom: 12px !important; | |
} | |
.root :global .pl3 { | |
padding-left: 12px !important; | |
} | |
.root :global .pa4 { | |
padding: 20px !important; | |
} | |
.root :global .pv4 { | |
padding-top: 20px !important; | |
padding-bottom: 20px !important; | |
} | |
.root :global .ph4 { | |
padding-right: 20px !important; | |
padding-left: 20px !important; | |
} | |
.root :global .pt4 { | |
padding-top: 20px !important; | |
} | |
.root :global .pr4 { | |
padding-right: 20px !important; | |
} | |
.root :global .pb4 { | |
padding-bottom: 20px !important; | |
} | |
.root :global .pl4 { | |
padding-left: 20px !important; | |
} | |
.root :global .pa5 { | |
padding: 32px !important; | |
} | |
.root :global .pv5 { | |
padding-top: 32px !important; | |
padding-bottom: 32px !important; | |
} | |
.root :global .ph5 { | |
padding-right: 32px !important; | |
padding-left: 32px !important; | |
} | |
.root :global .pt5 { | |
padding-top: 32px !important; | |
} | |
.root :global .pr5 { | |
padding-right: 32px !important; | |
} | |
.root :global .pb5 { | |
padding-bottom: 32px !important; | |
} | |
.root :global .pl5 { | |
padding-left: 32px !important; | |
} | |
.root :global .pa6 { | |
padding: 56px !important; | |
} | |
.root :global .pv6 { | |
padding-top: 56px !important; | |
padding-bottom: 56px !important; | |
} | |
.root :global .ph6 { | |
padding-right: 56px !important; | |
padding-left: 56px !important; | |
} | |
.root :global .pt6 { | |
padding-top: 56px !important; | |
} | |
.root :global .pr6 { | |
padding-right: 56px !important; | |
} | |
.root :global .pb6 { | |
padding-bottom: 56px !important; | |
} | |
.root :global .pl6 { | |
padding-left: 56px !important; | |
} | |
.root :global .pa7 { | |
padding: 72px !important; | |
} | |
.root :global .pv7 { | |
padding-top: 72px !important; | |
padding-bottom: 72px !important; | |
} | |
.root :global .ph7 { | |
padding-right: 72px !important; | |
padding-left: 72px !important; | |
} | |
.root :global .pt7 { | |
padding-top: 72px !important; | |
} | |
.root :global .pr7 { | |
padding-right: 72px !important; | |
} | |
.root :global .pb7 { | |
padding-bottom: 72px !important; | |
} | |
.root :global .pl7 { | |
padding-left: 72px !important; | |
} | |
@media screen and (min-width: 30em) { | |
.root :global .ma0-ns { | |
margin: 0 !important; | |
} | |
.root :global .mv0-ns { | |
margin-top: 0 !important; | |
margin-bottom: 0 !important; | |
} | |
.root :global .mh0-ns { | |
margin-right: 0 !important; | |
margin-left: 0 !important; | |
} | |
.root :global .mt0-ns { | |
margin-top: 0 !important; | |
} | |
.root :global .mr0-ns { | |
margin-right: 0 !important; | |
} | |
.root :global .mb0-ns { | |
margin-bottom: 0 !important; | |
} | |
.root :global .ml0-ns { | |
margin-left: 0 !important; | |
} | |
.root :global .ma1-ns { | |
margin: 4px !important; | |
} | |
.root :global .mv1-ns { | |
margin-top: 4px !important; | |
margin-bottom: 4px !important; | |
} | |
.root :global .mh1-ns { | |
margin-right: 4px !important; | |
margin-left: 4px !important; | |
} | |
.root :global .mt1-ns { | |
margin-top: 4px !important; | |
} | |
.root :global .mr1-ns { | |
margin-right: 4px !important; | |
} | |
.root :global .mb1-ns { | |
margin-bottom: 4px !important; | |
} | |
.root :global .ml1-ns { | |
margin-left: 4px !important; | |
} | |
.root :global .ma2-ns { | |
margin: 8px !important; | |
} | |
.root :global .mv2-ns { | |
margin-top: 8px !important; | |
margin-bottom: 8px !important; | |
} | |
.root :global .mh2-ns { | |
margin-right: 8px !important; | |
margin-left: 8px !important; | |
} | |
.root :global .mt2-ns { | |
margin-top: 8px !important; | |
} | |
.root :global .mr2-ns { | |
margin-right: 8px !important; | |
} | |
.root :global .mb2-ns { | |
margin-bottom: 8px !important; | |
} | |
.root :global .ml2-ns { | |
margin-left: 8px !important; | |
} | |
.root :global .ma3-ns { | |
margin: 12px !important; | |
} | |
.root :global .mv3-ns { | |
margin-top: 12px !important; | |
margin-bottom: 12px !important; | |
} | |
.root :global .mh3-ns { | |
margin-right: 12px !important; | |
margin-left: 12px !important; | |
} | |
.root :global .mt3-ns { | |
margin-top: 12px !important; | |
} | |
.root :global .mr3-ns { | |
margin-right: 12px !important; | |
} | |
.root :global .mb3-ns { | |
margin-bottom: 12px !important; | |
} | |
.root :global .ml3-ns { | |
margin-left: 12px !important; | |
} | |
.root :global .ma4-ns { | |
margin: 20px !important; | |
} | |
.root :global .mv4-ns { | |
margin-top: 20px !important; | |
margin-bottom: 20px !important; | |
} | |
.root :global .mh4-ns { | |
margin-right: 20px !important; | |
margin-left: 20px !important; | |
} | |
.root :global .mt4-ns { | |
margin-top: 20px !important; | |
} | |
.root :global .mr4-ns { | |
margin-right: 20px !important; | |
} | |
.root :global .mb4-ns { | |
margin-bottom: 20px !important; | |
} | |
.root :global .ml4-ns { | |
margin-left: 20px !important; | |
} | |
.root :global .ma5-ns { | |
margin: 32px !important; | |
} | |
.root :global .mv5-ns { | |
margin-top: 32px !important; | |
margin-bottom: 32px !important; | |
} | |
.root :global .mh5-ns { | |
margin-right: 32px !important; | |
margin-left: 32px !important; | |
} | |
.root :global .mt5-ns { | |
margin-top: 32px !important; | |
} | |
.root :global .mr5-ns { | |
margin-right: 32px !important; | |
} | |
.root :global .mb5-ns { | |
margin-bottom: 32px !important; | |
} | |
.root :global .ml5-ns { | |
margin-left: 32px !important; | |
} | |
.root :global .ma6-ns { | |
margin: 56px !important; | |
} | |
.root :global .mv6-ns { | |
margin-top: 56px !important; | |
margin-bottom: 56px !important; | |
} | |
.root :global .mh6-ns { | |
margin-right: 56px !important; | |
margin-left: 56px !important; | |
} | |
.root :global .mt6-ns { | |
margin-top: 56px !important; | |
} | |
.root :global .mr6-ns { | |
margin-right: 56px !important; | |
} | |
.root :global .mb6-ns { | |
margin-bottom: 56px !important; | |
} | |
.root :global .ml6-ns { | |
margin-left: 56px !important; | |
} | |
.root :global .ma7-ns { | |
margin: 72px !important; | |
} | |
.root :global .mv7-ns { | |
margin-top: 72px !important; | |
margin-bottom: 72px !important; | |
} | |
.root :global .mh7-ns { | |
margin-right: 72px !important; | |
margin-left: 72px !important; | |
} | |
.root :global .mt7-ns { | |
margin-top: 72px !important; | |
} | |
.root :global .mr7-ns { | |
margin-right: 72px !important; | |
} | |
.root :global .mb7-ns { | |
margin-bottom: 72px !important; | |
} | |
.root :global .ml7-ns { | |
margin-left: 72px !important; | |
} | |
.root :global .pa0-ns { | |
padding: 0 !important; | |
} | |
.root :global .pv0-ns { | |
padding-top: 0 !important; | |
padding-bottom: 0 !important; | |
} | |
.root :global .ph0-ns { | |
padding-right: 0 !important; | |
padding-left: 0 !important; | |
} | |
.root :global .pt0-ns { | |
padding-top: 0 !important; | |
} | |
.root :global .pr0-ns { | |
padding-right: 0 !important; | |
} | |
.root :global .pb0-ns { | |
padding-bottom: 0 !important; | |
} | |
.root :global .pl0-ns { | |
padding-left: 0 !important; | |
} | |
.root :global .pa1-ns { | |
padding: 4px !important; | |
} | |
.root :global .pv1-ns { | |
padding-top: 4px !important; | |
padding-bottom: 4px !important; | |
} | |
.root :global .ph1-ns { | |
padding-right: 4px !important; | |
padding-left: 4px !important; | |
} | |
.root :global .pt1-ns { | |
padding-top: 4px !important; | |
} | |
.root :global .pr1-ns { | |
padding-right: 4px !important; | |
} | |
.root :global .pb1-ns { | |
padding-bottom: 4px !important; | |
} | |
.root :global .pl1-ns { | |
padding-left: 4px !important; | |
} | |
.root :global .pa2-ns { | |
padding: 8px !important; | |
} | |
.root :global .pv2-ns { | |
padding-top: 8px !important; | |
padding-bottom: 8px !important; | |
} | |
.root :global .ph2-ns { | |
padding-right: 8px !important; | |
padding-left: 8px !important; | |
} | |
.root :global .pt2-ns { | |
padding-top: 8px !important; | |
} | |
.root :global .pr2-ns { | |
padding-right: 8px !important; | |
} | |
.root :global .pb2-ns { | |
padding-bottom: 8px !important; | |
} | |
.root :global .pl2-ns { | |
padding-left: 8px !important; | |
} | |
.root :global .pa3-ns { | |
padding: 12px !important; | |
} | |
.root :global .pv3-ns { | |
padding-top: 12px !important; | |
padding-bottom: 12px !important; | |
} | |
.root :global .ph3-ns { | |
padding-right: 12px !important; | |
padding-left: 12px !important; | |
} | |
.root :global .pt3-ns { | |
padding-top: 12px !important; | |
} | |
.root :global .pr3-ns { | |
padding-right: 12px !important; | |
} | |
.root :global .pb3-ns { | |
padding-bottom: 12px !important; | |
} | |
.root :global .pl3-ns { | |
padding-left: 12px !important; | |
} | |
.root :global .pa4-ns { | |
padding: 20px !important; | |
} | |
.root :global .pv4-ns { | |
padding-top: 20px !important; | |
padding-bottom: 20px !important; | |
} | |
.root :global .ph4-ns { | |
padding-right: 20px !important; | |
padding-left: 20px !important; | |
} | |
.root :global .pt4-ns { | |
padding-top: 20px !important; | |
} | |
.root :global .pr4-ns { | |
padding-right: 20px !important; | |
} | |
.root :global .pb4-ns { | |
padding-bottom: 20px !important; | |
} | |
.root :global .pl4-ns { | |
padding-left: 20px !important; | |
} | |
.root :global .pa5-ns { | |
padding: 32px !important; | |
} | |
.root :global .pv5-ns { | |
padding-top: 32px !important; | |
padding-bottom: 32px !important; | |
} | |
.root :global .ph5-ns { | |
padding-right: 32px !important; | |
padding-left: 32px !important; | |
} | |
.root :global .pt5-ns { | |
padding-top: 32px !important; | |
} | |
.root :global .pr5-ns { | |
padding-right: 32px !important; | |
} | |
.root :global .pb5-ns { | |
padding-bottom: 32px !important; | |
} | |
.root :global .pl5-ns { | |
padding-left: 32px !important; | |
} | |
.root :global .pa6-ns { | |
padding: 56px !important; | |
} | |
.root :global .pv6-ns { | |
padding-top: 56px !important; | |
padding-bottom: 56px !important; | |
} | |
.root :global .ph6-ns { | |
padding-right: 56px !important; | |
padding-left: 56px !important; | |
} | |
.root :global .pt6-ns { | |
padding-top: 56px !important; | |
} | |
.root :global .pr6-ns { | |
padding-right: 56px !important; | |
} | |
.root :global .pb6-ns { | |
padding-bottom: 56px !important; | |
} | |
.root :global .pl6-ns { | |
padding-left: 56px !important; | |
} | |
.root :global .pa7-ns { | |
padding: 72px !important; | |
} | |
.root :global .pv7-ns { | |
padding-top: 72px !important; | |
padding-bottom: 72px !important; | |
} | |
.root :global .ph7-ns { | |
padding-right: 72px !important; | |
padding-left: 72px !important; | |
} | |
.root :global .pt7-ns { | |
padding-top: 72px !important; | |
} | |
.root :global .pr7-ns { | |
padding-right: 72px !important; | |
} | |
.root :global .pb7-ns { | |
padding-bottom: 72px !important; | |
} | |
.root :global .pl7-ns { | |
padding-left: 72px !important; | |
} | |
} | |
@media screen and (min-width: 30em) and (max-width: 60em) { | |
.root :global .ma0-m { | |
margin: 0 !important; | |
} | |
.root :global .mv0-m { | |
margin-top: 0 !important; | |
margin-bottom: 0 !important; | |
} | |
.root :global .mh0-m { | |
margin-right: 0 !important; | |
margin-left: 0 !important; | |
} | |
.root :global .mt0-m { | |
margin-top: 0 !important; | |
} | |
.root :global .mr0-m { | |
margin-right: 0 !important; | |
} | |
.root :global .mb0-m { | |
margin-bottom: 0 !important; | |
} | |
.root :global .ml0-m { | |
margin-left: 0 !important; | |
} | |
.root :global .ma1-m { | |
margin: 4px !important; | |
} | |
.root :global .mv1-m { | |
margin-top: 4px !important; | |
margin-bottom: 4px !important; | |
} | |
.root :global .mh1-m { | |
margin-right: 4px !important; | |
margin-left: 4px !important; | |
} | |
.root :global .mt1-m { | |
margin-top: 4px !important; | |
} | |
.root :global .mr1-m { | |
margin-right: 4px !important; | |
} | |
.root :global .mb1-m { | |
margin-bottom: 4px !important; | |
} | |
.root :global .ml1-m { | |
margin-left: 4px !important; | |
} | |
.root :global .ma2-m { | |
margin: 8px !important; | |
} | |
.root :global .mv2-m { | |
margin-top: 8px !important; | |
margin-bottom: 8px !important; | |
} | |
.root :global .mh2-m { | |
margin-right: 8px !important; | |
margin-left: 8px !important; | |
} | |
.root :global .mt2-m { | |
margin-top: 8px !important; | |
} | |
.root :global .mr2-m { | |
margin-right: 8px !important; | |
} | |
.root :global .mb2-m { | |
margin-bottom: 8px !important; | |
} | |
.root :global .ml2-m { | |
margin-left: 8px !important; | |
} | |
.root :global .ma3-m { | |
margin: 12px !important; | |
} | |
.root :global .mv3-m { | |
margin-top: 12px !important; | |
margin-bottom: 12px !important; | |
} | |
.root :global .mh3-m { | |
margin-right: 12px !important; | |
margin-left: 12px !important; | |
} | |
.root :global .mt3-m { | |
margin-top: 12px !important; | |
} | |
.root :global .mr3-m { | |
margin-right: 12px !important; | |
} | |
.root :global .mb3-m { | |
margin-bottom: 12px !important; | |
} | |
.root :global .ml3-m { | |
margin-left: 12px !important; | |
} | |
.root :global .ma4-m { | |
margin: 20px !important; | |
} | |
.root :global .mv4-m { | |
margin-top: 20px !important; | |
margin-bottom: 20px !important; | |
} | |
.root :global .mh4-m { | |
margin-right: 20px !important; | |
margin-left: 20px !important; | |
} | |
.root :global .mt4-m { | |
margin-top: 20px !important; | |
} | |
.root :global .mr4-m { | |
margin-right: 20px !important; | |
} | |
.root :global .mb4-m { | |
margin-bottom: 20px !important; | |
} | |
.root :global .ml4-m { | |
margin-left: 20px !important; | |
} | |
.root :global .ma5-m { | |
margin: 32px !important; | |
} | |
.root :global .mv5-m { | |
margin-top: 32px !important; | |
margin-bottom: 32px !important; | |
} | |
.root :global .mh5-m { | |
margin-right: 32px !important; | |
margin-left: 32px !important; | |
} | |
.root :global .mt5-m { | |
margin-top: 32px !important; | |
} | |
.root :global .mr5-m { | |
margin-right: 32px !important; | |
} | |
.root :global .mb5-m { | |
margin-bottom: 32px !important; | |
} | |
.root :global .ml5-m { | |
margin-left: 32px !important; | |
} | |
.root :global .ma6-m { | |
margin: 56px !important; | |
} | |
.root :global .mv6-m { | |
margin-top: 56px !important; | |
margin-bottom: 56px !important; | |
} | |
.root :global .mh6-m { | |
margin-right: 56px !important; | |
margin-left: 56px !important; | |
} | |
.root :global .mt6-m { | |
margin-top: 56px !important; | |
} | |
.root :global .mr6-m { | |
margin-right: 56px !important; | |
} | |
.root :global .mb6-m { | |
margin-bottom: 56px !important; | |
} | |
.root :global .ml6-m { | |
margin-left: 56px !important; | |
} | |
.root :global .ma7-m { | |
margin: 72px !important; | |
} | |
.root :global .mv7-m { | |
margin-top: 72px !important; | |
margin-bottom: 72px !important; | |
} | |
.root :global .mh7-m { | |
margin-right: 72px !important; | |
margin-left: 72px !important; | |
} | |
.root :global .mt7-m { | |
margin-top: 72px !important; | |
} | |
.root :global .mr7-m { | |
margin-right: 72px !important; | |
} | |
.root :global .mb7-m { | |
margin-bottom: 72px !important; | |
} | |
.root :global .ml7-m { | |
margin-left: 72px !important; | |
} | |
.root :global .pa0-m { | |
padding: 0 !important; | |
} | |
.root :global .pv0-m { | |
padding-top: 0 !important; | |
padding-bottom: 0 !important; | |
} | |
.root :global .ph0-m { | |
padding-right: 0 !important; | |
padding-left: 0 !important; | |
} | |
.root :global .pt0-m { | |
padding-top: 0 !important; | |
} | |
.root :global .pr0-m { | |
padding-right: 0 !important; | |
} | |
.root :global .pb0-m { | |
padding-bottom: 0 !important; | |
} | |
.root :global .pl0-m { | |
padding-left: 0 !important; | |
} | |
.root :global .pa1-m { | |
padding: 4px !important; | |
} | |
.root :global .pv1-m { | |
padding-top: 4px !important; | |
padding-bottom: 4px !important; | |
} | |
.root :global .ph1-m { | |
padding-right: 4px !important; | |
padding-left: 4px !important; | |
} | |
.root :global .pt1-m { | |
padding-top: 4px !important; | |
} | |
.root :global .pr1-m { | |
padding-right: 4px !important; | |
} | |
.root :global .pb1-m { | |
padding-bottom: 4px !important; | |
} | |
.root :global .pl1-m { | |
padding-left: 4px !important; | |
} | |
.root :global .pa2-m { | |
padding: 8px !important; | |
} | |
.root :global .pv2-m { | |
padding-top: 8px !important; | |
padding-bottom: 8px !important; | |
} | |
.root :global .ph2-m { | |
padding-right: 8px !important; | |
padding-left: 8px !important; | |
} | |
.root :global .pt2-m { | |
padding-top: 8px !important; | |
} | |
.root :global .pr2-m { | |
padding-right: 8px !important; | |
} | |
.root :global .pb2-m { | |
padding-bottom: 8px !important; | |
} | |
.root :global .pl2-m { | |
padding-left: 8px !important; | |
} | |
.root :global .pa3-m { | |
padding: 12px !important; | |
} | |
.root :global .pv3-m { | |
padding-top: 12px !important; | |
padding-bottom: 12px !important; | |
} | |
.root :global .ph3-m { | |
padding-right: 12px !important; | |
padding-left: 12px !important; | |
} | |
.root :global .pt3-m { | |
padding-top: 12px !important; | |
} | |
.root :global .pr3-m { | |
padding-right: 12px !important; | |
} | |
.root :global .pb3-m { | |
padding-bottom: 12px !important; | |
} | |
.root :global .pl3-m { | |
padding-left: 12px !important; | |
} | |
.root :global .pa4-m { | |
padding: 20px !important; | |
} | |
.root :global .pv4-m { | |
padding-top: 20px !important; | |
padding-bottom: 20px !important; | |
} | |
.root :global .ph4-m { | |
padding-right: 20px !important; | |
padding-left: 20px !important; | |
} | |
.root :global .pt4-m { | |
padding-top: 20px !important; | |
} | |
.root :global .pr4-m { | |
padding-right: 20px !important; | |
} | |
.root :global .pb4-m { | |
padding-bottom: 20px !important; | |
} | |
.root :global .pl4-m { | |
padding-left: 20px !important; | |
} | |
.root :global .pa5-m { | |
padding: 32px !important; | |
} | |
.root :global .pv5-m { | |
padding-top: 32px !important; | |
padding-bottom: 32px !important; | |
} | |
.root :global .ph5-m { | |
padding-right: 32px !important; | |
padding-left: 32px !important; | |
} | |
.root :global .pt5-m { | |
padding-top: 32px !important; | |
} | |
.root :global .pr5-m { | |
padding-right: 32px !important; | |
} | |
.root :global .pb5-m { | |
padding-bottom: 32px !important; | |
} | |
.root :global .pl5-m { | |
padding-left: 32px !important; | |
} | |
.root :global .pa6-m { | |
padding: 56px !important; | |
} | |
.root :global .pv6-m { | |
padding-top: 56px !important; | |
padding-bottom: 56px !important; | |
} | |
.root :global .ph6-m { | |
padding-right: 56px !important; | |
padding-left: 56px !important; | |
} | |
.root :global .pt6-m { | |
padding-top: 56px !important; | |
} | |
.root :global .pr6-m { | |
padding-right: 56px !important; | |
} | |
.root :global .pb6-m { | |
padding-bottom: 56px !important; | |
} | |
.root :global .pl6-m { | |
padding-left: 56px !important; | |
} | |
.root :global .pa7-m { | |
padding: 72px !important; | |
} | |
.root :global .pv7-m { | |
padding-top: 72px !important; | |
padding-bottom: 72px !important; | |
} | |
.root :global .ph7-m { | |
padding-right: 72px !important; | |
padding-left: 72px !important; | |
} | |
.root :global .pt7-m { | |
padding-top: 72px !important; | |
} | |
.root :global .pr7-m { | |
padding-right: 72px !important; | |
} | |
.root :global .pb7-m { | |
padding-bottom: 72px !important; | |
} | |
.root :global .pl7-m { | |
padding-left: 72px !important; | |
} | |
} | |
@media screen and (min-width: 60em) { | |
.root :global .ma0-l { | |
margin: 0 !important; | |
} | |
.root :global .mv0-l { | |
margin-top: 0 !important; | |
margin-bottom: 0 !important; | |
} | |
.root :global .mh0-l { | |
margin-right: 0 !important; | |
margin-left: 0 !important; | |
} | |
.root :global .mt0-l { | |
margin-top: 0 !important; | |
} | |
.root :global .mr0-l { | |
margin-right: 0 !important; | |
} | |
.root :global .mb0-l { | |
margin-bottom: 0 !important; | |
} | |
.root :global .ml0-l { | |
margin-left: 0 !important; | |
} | |
.root :global .ma1-l { | |
margin: 4px !important; | |
} | |
.root :global .mv1-l { | |
margin-top: 4px !important; | |
margin-bottom: 4px !important; | |
} | |
.root :global .mh1-l { | |
margin-right: 4px !important; | |
margin-left: 4px !important; | |
} | |
.root :global .mt1-l { | |
margin-top: 4px !important; | |
} | |
.root :global .mr1-l { | |
margin-right: 4px !important; | |
} | |
.root :global .mb1-l { | |
margin-bottom: 4px !important; | |
} | |
.root :global .ml1-l { | |
margin-left: 4px !important; | |
} | |
.root :global .ma2-l { | |
margin: 8px !important; | |
} | |
.root :global .mv2-l { | |
margin-top: 8px !important; | |
margin-bottom: 8px !important; | |
} | |
.root :global .mh2-l { | |
margin-right: 8px !important; | |
margin-left: 8px !important; | |
} | |
.root :global .mt2-l { | |
margin-top: 8px !important; | |
} | |
.root :global .mr2-l { | |
margin-right: 8px !important; | |
} | |
.root :global .mb2-l { | |
margin-bottom: 8px !important; | |
} | |
.root :global .ml2-l { | |
margin-left: 8px !important; | |
} | |
.root :global .ma3-l { | |
margin: 12px !important; | |
} | |
.root :global .mv3-l { | |
margin-top: 12px !important; | |
margin-bottom: 12px !important; | |
} | |
.root :global .mh3-l { | |
margin-right: 12px !important; | |
margin-left: 12px !important; | |
} | |
.root :global .mt3-l { | |
margin-top: 12px !important; | |
} | |
.root :global .mr3-l { | |
margin-right: 12px !important; | |
} | |
.root :global .mb3-l { | |
margin-bottom: 12px !important; | |
} | |
.root :global .ml3-l { | |
margin-left: 12px !important; | |
} | |
.root :global .ma4-l { | |
margin: 20px !important; | |
} | |
.root :global .mv4-l { | |
margin-top: 20px !important; | |
margin-bottom: 20px !important; | |
} | |
.root :global .mh4-l { | |
margin-right: 20px !important; | |
margin-left: 20px !important; | |
} | |
.root :global .mt4-l { | |
margin-top: 20px !important; | |
} | |
.root :global .mr4-l { | |
margin-right: 20px !important; | |
} | |
.root :global .mb4-l { | |
margin-bottom: 20px !important; | |
} | |
.root :global .ml4-l { | |
margin-left: 20px !important; | |
} | |
.root :global .ma5-l { | |
margin: 32px !important; | |
} | |
.root :global .mv5-l { | |
margin-top: 32px !important; | |
margin-bottom: 32px !important; | |
} | |
.root :global .mh5-l { | |
margin-right: 32px !important; | |
margin-left: 32px !important; | |
} | |
.root :global .mt5-l { | |
margin-top: 32px !important; | |
} | |
.root :global .mr5-l { | |
margin-right: 32px !important; | |
} | |
.root :global .mb5-l { | |
margin-bottom: 32px !important; | |
} | |
.root :global .ml5-l { | |
margin-left: 32px !important; | |
} | |
.root :global .ma6-l { | |
margin: 56px !important; | |
} | |
.root :global .mv6-l { | |
margin-top: 56px !important; | |
margin-bottom: 56px !important; | |
} | |
.root :global .mh6-l { | |
margin-right: 56px !important; | |
margin-left: 56px !important; | |
} | |
.root :global .mt6-l { | |
margin-top: 56px !important; | |
} | |
.root :global .mr6-l { | |
margin-right: 56px !important; | |
} | |
.root :global .mb6-l { | |
margin-bottom: 56px !important; | |
} | |
.root :global .ml6-l { | |
margin-left: 56px !important; | |
} | |
.root :global .ma7-l { | |
margin: 72px !important; | |
} | |
.root :global .mv7-l { | |
margin-top: 72px !important; | |
margin-bottom: 72px !important; | |
} | |
.root :global .mh7-l { | |
margin-right: 72px !important; | |
margin-left: 72px !important; | |
} | |
.root :global .mt7-l { | |
margin-top: 72px !important; | |
} | |
.root :global .mr7-l { | |
margin-right: 72px !important; | |
} | |
.root :global .mb7-l { | |
margin-bottom: 72px !important; | |
} | |
.root :global .ml7-l { | |
margin-left: 72px !important; | |
} | |
.root :global .pa0-l { | |
padding: 0 !important; | |
} | |
.root :global .pv0-l { | |
padding-top: 0 !important; | |
padding-bottom: 0 !important; | |
} | |
.root :global .ph0-l { | |
padding-right: 0 !important; | |
padding-left: 0 !important; | |
} | |
.root :global .pt0-l { | |
padding-top: 0 !important; | |
} | |
.root :global .pr0-l { | |
padding-right: 0 !important; | |
} | |
.root :global .pb0-l { | |
padding-bottom: 0 !important; | |
} | |
.root :global .pl0-l { | |
padding-left: 0 !important; | |
} | |
.root :global .pa1-l { | |
padding: 4px !important; | |
} | |
.root :global .pv1-l { | |
padding-top: 4px !important; | |
padding-bottom: 4px !important; | |
} | |
.root :global .ph1-l { | |
padding-right: 4px !important; | |
padding-left: 4px !important; | |
} | |
.root :global .pt1-l { | |
padding-top: 4px !important; | |
} | |
.root :global .pr1-l { | |
padding-right: 4px !important; | |
} | |
.root :global .pb1-l { | |
padding-bottom: 4px !important; | |
} | |
.root :global .pl1-l { | |
padding-left: 4px !important; | |
} | |
.root :global .pa2-l { | |
padding: 8px !important; | |
} | |
.root :global .pv2-l { | |
padding-top: 8px !important; | |
padding-bottom: 8px !important; | |
} | |
.root :global .ph2-l { | |
padding-right: 8px !important; | |
padding-left: 8px !important; | |
} | |
.root :global .pt2-l { | |
padding-top: 8px !important; | |
} | |
.root :global .pr2-l { | |
padding-right: 8px !important; | |
} | |
.root :global .pb2-l { | |
padding-bottom: 8px !important; | |
} | |
.root :global .pl2-l { | |
padding-left: 8px !important; | |
} | |
.root :global .pa3-l { | |
padding: 12px !important; | |
} | |
.root :global .pv3-l { | |
padding-top: 12px !important; | |
padding-bottom: 12px !important; | |
} | |
.root :global .ph3-l { | |
padding-right: 12px !important; | |
padding-left: 12px !important; | |
} | |
.root :global .pt3-l { | |
padding-top: 12px !important; | |
} | |
.root :global .pr3-l { | |
padding-right: 12px !important; | |
} | |
.root :global .pb3-l { | |
padding-bottom: 12px !important; | |
} | |
.root :global .pl3-l { | |
padding-left: 12px !important; | |
} | |
.root :global .pa4-l { | |
padding: 20px !important; | |
} | |
.root :global .pv4-l { | |
padding-top: 20px !important; | |
padding-bottom: 20px !important; | |
} | |
.root :global .ph4-l { | |
padding-right: 20px !important; | |
padding-left: 20px !important; | |
} | |
.root :global .pt4-l { | |
padding-top: 20px !important; | |
} | |
.root :global .pr4-l { | |
padding-right: 20px !important; | |
} | |
.root :global .pb4-l { | |
padding-bottom: 20px !important; | |
} | |
.root :global .pl4-l { | |
padding-left: 20px !important; | |
} | |
.root :global .pa5-l { | |
padding: 32px !important; | |
} | |
.root :global .pv5-l { | |
padding-top: 32px !important; | |
padding-bottom: 32px !important; | |
} | |
.root :global .ph5-l { | |
padding-right: 32px !important; | |
padding-left: 32px !important; | |
} | |
.root :global .pt5-l { | |
padding-top: 32px !important; | |
} | |
.root :global .pr5-l { | |
padding-right: 32px !important; | |
} | |
.root :global .pb5-l { | |
padding-bottom: 32px !important; | |
} | |
.root :global .pl5-l { | |
padding-left: 32px !important; | |
} | |
.root :global .pa6-l { | |
padding: 56px !important; | |
} | |
.root :global .pv6-l { | |
padding-top: 56px !important; | |
padding-bottom: 56px !important; | |
} | |
.root :global .ph6-l { | |
padding-right: 56px !important; | |
padding-left: 56px !important; | |
} | |
.root :global .pt6-l { | |
padding-top: 56px !important; | |
} | |
.root :global .pr6-l { | |
padding-right: 56px !important; | |
} | |
.root :global .pb6-l { | |
padding-bottom: 56px !important; | |
} | |
.root :global .pl6-l { | |
padding-left: 56px !important; | |
} | |
.root :global .pa7-l { | |
padding: 72px !important; | |
} | |
.root :global .pv7-l { | |
padding-top: 72px !important; | |
padding-bottom: 72px !important; | |
} | |
.root :global .ph7-l { | |
padding-right: 72px !important; | |
padding-left: 72px !important; | |
} | |
.root :global .pt7-l { | |
padding-top: 72px !important; | |
} | |
.root :global .pr7-l { | |
padding-right: 72px !important; | |
} | |
.root :global .pb7-l { | |
padding-bottom: 72px !important; | |
} | |
.root :global .pl7-l { | |
padding-left: 72px !important; | |
} | |
} |
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.26.11", | |
"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