Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
34 lines (31 sloc) 990 Bytes
// 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
}
}
}