@mixin grid-gap-responsive {
$gap-mobile: if( map-has-key($system-column-gaps, $theme-column-gap-mobile), map-get($system-column-gaps, $theme-column-gap-mobile), "error" ); $gap-desktop: if( map-has-key($system-column-gaps, $theme-column-gap-desktop), map-get($system-column-gaps, $theme-column-gap-desktop), "error" ); @if $gap-mobile == "error" { @error '$theme-column-gap-mobile is not set to a valid column gap width.'; } @if $gap-desktop == "error" { @error '$theme-column-gap-desktop is not set to a valid column gap width.'; } @include u-margin-x( unquote("#{$neg-prefix}-#{calc-gap-offset($gap-mobile)}") ); > * { @include this-border-box-sizing; @include u-padding-x(calc-gap-offset($gap-mobile)); } @include at-media("desktop") { @include u-margin-x( unquote("#{$neg-prefix}-#{calc-gap-offset($gap-desktop)}") ); > * { @include this-border-box-sizing; @include u-padding-x(calc-gap-offset($gap-desktop)); } }
}
@mixin grid-gap($props…) {
$props: unpack($props); @if length($props) == 0 { @include grid-gap-responsive; } @else { $gap: smart-quote(nth($props, 1)); @if $gap == 0 { @include u-margin-x(append-important($props, 0)); > * { @include this-border-box-sizing; @include u-padding-x(append-important($props, 0)); } } @else { @if map-has-key($project-column-gaps, $gap) { $gap: map-get($project-column-gaps, $gap); } @else if map-has-key($system-column-gaps, $gap) { $gap: map-get($system-column-gaps, $gap); } @include u-margin-x( append-important( $props, unquote("#{$neg-prefix}-#{calc-gap-offset($gap)}") ) ); > * { @include this-border-box-sizing; @include u-padding-x(append-important($props, calc-gap-offset($gap))); } } }
}
@mixin grid-col($props…) {
$props: unpack($props); @include this-border-box-sizing; @if length($props) == 0 { @include u-flex(fill); @include u-width(auto); } @else { $col: smart-quote(nth($props, 1)); @if $col == "auto" { $flex: append-important($props, auto); $width: append-important($props, auto); $maxw: append-important($props, full); @include u-flex($flex); @include u-width($width); @include u-maxw($maxw); } @else if $col == "fill" { $flex: append-important($props, fill); $width: append-important($props, auto); $maxw: append-important($props, full); @include u-flex($flex); @include u-width($width); @include u-maxw($maxw); min-width: 1px; // IE 11 } @else if not map-has-key($system-layout-grid-widths, $col) { @error '#{$col} is not a valid layout grid width. Valid width are #{map-keys($system-layout-grid-widths)}'; } @else { $flex: append-important($props, auto); $width: append-important( $props, map-get($system-layout-grid-widths, $col) ); @include u-flex($flex); @include u-width(override, $width); } }
}
@mixin grid-offset($props…) {
$props: unpack($props); $offset: smart-quote(nth($props, 1)); @if $offset == "none" { $width: append-important($props, 0); @include u-margin-left(override, $width); } @else if not map-has-key($system-layout-grid-widths, $offset) { @error '#{$offset} is not a valid layout grid width. Valid width are #{map-keys($system-layout-grid-widths)}'; } @else { $width: append-important( $props, map-get($system-layout-grid-widths, $offset) ); @include u-margin-left(override, $width); }
}