112 lines
2.8 KiB
SCSS
112 lines
2.8 KiB
SCSS
|
// directional-property mixins are shorthands
|
||
|
|
// for writing properties like the following
|
||
|
|
//
|
||
|
|
// @include margin(null 0 10px);
|
||
|
|
// ------
|
||
|
|
// margin-right: 0;
|
||
|
|
// margin-bottom: 10px;
|
||
|
|
// margin-left: 0;
|
||
|
|
//
|
||
|
|
// - or -
|
||
|
|
//
|
||
|
|
// @include border-style(dotted null);
|
||
|
|
// ------
|
||
|
|
// border-top-style: dotted;
|
||
|
|
// border-bottom-style: dotted;
|
||
|
|
//
|
||
|
|
// ------
|
||
|
|
//
|
||
|
|
// Note: You can also use false instead of null
|
||
|
|
|
||
|
|
@function collapse-directionals($vals) {
|
||
|
|
$output: null;
|
||
|
|
|
||
|
|
$A: nth( $vals, 1 );
|
||
|
|
$B: if( length($vals) < 2, $A, nth($vals, 2));
|
||
|
|
$C: if( length($vals) < 3, $A, nth($vals, 3));
|
||
|
|
$D: if( length($vals) < 2, $A, nth($vals, if( length($vals) < 4, 2, 4) ));
|
||
|
|
|
||
|
|
@if $A == 0 { $A: 0 }
|
||
|
|
@if $B == 0 { $B: 0 }
|
||
|
|
@if $C == 0 { $C: 0 }
|
||
|
|
@if $D == 0 { $D: 0 }
|
||
|
|
|
||
|
|
@if $A == $B and $A == $C and $A == $D { $output: $A }
|
||
|
|
@else if $A == $C and $B == $D { $output: $A $B }
|
||
|
|
@else if $B == $D { $output: $A $B $C }
|
||
|
|
@else { $output: $A $B $C $D }
|
||
|
|
|
||
|
|
@return $output;
|
||
|
|
}
|
||
|
|
|
||
|
|
@function contains-falsy($list) {
|
||
|
|
@each $item in $list {
|
||
|
|
@if not $item {
|
||
|
|
@return true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@return false;
|
||
|
|
}
|
||
|
|
|
||
|
|
@mixin directional-property($pre, $suf, $vals) {
|
||
|
|
// Property Names
|
||
|
|
$top: $pre + "-top" + if($suf, "-#{$suf}", "");
|
||
|
|
$bottom: $pre + "-bottom" + if($suf, "-#{$suf}", "");
|
||
|
|
$left: $pre + "-left" + if($suf, "-#{$suf}", "");
|
||
|
|
$right: $pre + "-right" + if($suf, "-#{$suf}", "");
|
||
|
|
$all: $pre + if($suf, "-#{$suf}", "");
|
||
|
|
|
||
|
|
$vals: collapse-directionals($vals);
|
||
|
|
|
||
|
|
@if contains-falsy($vals) {
|
||
|
|
@if nth($vals, 1) { #{$top}: nth($vals, 1); }
|
||
|
|
|
||
|
|
@if length($vals) == 1 {
|
||
|
|
@if nth($vals, 1) { #{$right}: nth($vals, 1); }
|
||
|
|
} @else {
|
||
|
|
@if nth($vals, 2) { #{$right}: nth($vals, 2); }
|
||
|
|
}
|
||
|
|
|
||
|
|
// prop: top/bottom right/left
|
||
|
|
@if length($vals) == 2 {
|
||
|
|
@if nth($vals, 1) { #{$bottom}: nth($vals, 1); }
|
||
|
|
@if nth($vals, 2) { #{$left}: nth($vals, 2); }
|
||
|
|
|
||
|
|
// prop: top right/left bottom
|
||
|
|
} @else if length($vals) == 3 {
|
||
|
|
@if nth($vals, 3) { #{$bottom}: nth($vals, 3); }
|
||
|
|
@if nth($vals, 2) { #{$left}: nth($vals, 2); }
|
||
|
|
|
||
|
|
// prop: top right bottom left
|
||
|
|
} @else if length($vals) == 4 {
|
||
|
|
@if nth($vals, 3) { #{$bottom}: nth($vals, 3); }
|
||
|
|
@if nth($vals, 4) { #{$left}: nth($vals, 4); }
|
||
|
|
}
|
||
|
|
|
||
|
|
// prop: top/right/bottom/left
|
||
|
|
} @else {
|
||
|
|
#{$all}: $vals;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@mixin margin($vals...) {
|
||
|
|
@include directional-property(margin, false, $vals...);
|
||
|
|
}
|
||
|
|
|
||
|
|
@mixin padding($vals...) {
|
||
|
|
@include directional-property(padding, false, $vals...);
|
||
|
|
}
|
||
|
|
|
||
|
|
@mixin border-style($vals...) {
|
||
|
|
@include directional-property(border, style, $vals...);
|
||
|
|
}
|
||
|
|
|
||
|
|
@mixin border-color($vals...) {
|
||
|
|
@include directional-property(border, color, $vals...);
|
||
|
|
}
|
||
|
|
|
||
|
|
@mixin border-width($vals...) {
|
||
|
|
@include directional-property(border, width, $vals...);
|
||
|
|
}
|