A mixin that applies responsive spacing from a map
// A mixin that applies responsive spacing from a map | |
// Usage: @include u-set-spacing-style('page-spacing'); | |
@mixin u-set-spacing-style($group-name) { | |
$group: map-get($spacing, $group-name); | |
@each $property, $value in $group { | |
$is-breakpoint: variable-exists('breakpoints') and map-has-key($breakpoints, $property) and type-of($value) == 'map'; | |
@include u-set-breakpoint(if($is-breakpoint, $property, null)) { | |
@if ($is-breakpoint) { | |
$subproperties: $value; | |
@each $subproperty, $subvalue in $subproperties { | |
@include u-configure-spacing-style($subproperty, $subvalue); | |
} | |
} @else { | |
@include u-configure-spacing-style($property, $value); | |
} | |
} | |
} | |
} | |
@mixin u-configure-spacing-style($property, $value) { | |
$axis-positions: ( | |
'x': left right, | |
'y': top bottom | |
); | |
@if (str-index($property, '-x') or str-index($property, '-y')) { | |
$axis: str-slice($property, str-length($property)); | |
@if (type-of($value) == 'list') { | |
$positions: map-get($axis-positions, $axis); | |
@each $position in $positions { | |
$i: index($positions, $position); | |
#{str-slice($property, 1, -3)}-#{$position}: nth($value, $i); | |
} | |
} @else { | |
$positions: map-get($axis-positions, $axis); | |
@each $position in $positions { | |
#{str-slice($property, 1, -3)}-#{$position}: $value; | |
} | |
} | |
} @else { | |
#{$property}: $value; | |
} | |
} | |
@mixin u-set-breakpoint($breakpoint: null) { | |
@if ($breakpoint and variable-exists('breakpoints') and map-has-key($breakpoints, $breakpoint)) { | |
@media (min-width: map-get($breakpoints, $breakpoint)) { | |
@content; | |
} | |
} @else { | |
@content; | |
} | |
} |
// First level lists spacing patterns, second and third list properties. | |
// Properties can be: | |
// 1. margin, padding (1-4 values, with traditional CSS order) | |
// 2. margin-x, margin-y, padding-x, padding-y (1-2 values, order is top-bottom/left-right) | |
// 3. [padding/margin]-[left/right/top/bottom] (1 value) | |
$spacing: ( | |
'page-spacing': ( | |
'margin-y': 20px, | |
'padding-y': 10px 40px, | |
'large': ( | |
'padding-x': 40px 60px, | |
'margin-top': 100px | |
) | |
), | |
// 'card-spacing': () | |
); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment