123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111 |
- // 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...);
- }
|