Permalink
Cannot retrieve contributors at this time
// Gaps | |
// General gutter classes based on modular scale | |
// for vertically stacked items | |
$f-gap-sizes: "xs", "s", "m", "l", "xl"; | |
$gap-calc: "margin"; | |
@if $gap-calc == "margin" { | |
@each $gap-size in $f-gap-sizes { | |
.flex.gap_#{$gap-size} { | |
margin-left: calc(-1 * var(--gap-space, var(--space-#{$gap-size}))); | |
margin-bottom: calc(-1 * var(--gap-space, var(--space-#{$gap-size}))); | |
> * { | |
padding-left: var(--gap-space, var(--space-#{$gap-size})); | |
padding-bottom: var(--gap-space, var(--space-#{$gap-size})); | |
} | |
} | |
.flex.gap-h_#{$gap-size} { | |
margin-left: calc(-1 * var(--gap-space, var(--space-#{$gap-size}))) !important; | |
> * { | |
padding-left: var(--gap-space, var(--space-#{$gap-size})) !important | |
} | |
} | |
} | |
// do calc with gap | |
// (wishful thinking for now) | |
} @else { | |
@each $gap-size in $f-gap-sizes { | |
.flex.gap_#{$gap-size} { | |
gap: var(--space-#{$gap-size}); // supposed standard | |
} | |
} | |
} |