Skip to content

Instantly share code, notes, and snippets.

@jasonmelgoza
Created September 29, 2020 04:46
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jasonmelgoza/d85980dd18f06868a06874975d5dc17c to your computer and use it in GitHub Desktop.
Save jasonmelgoza/d85980dd18f06868a06874975d5dc17c to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
//
// 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;
}
}
}
}
}
}
.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;
}
}
{
"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