hivedav-website

Website for HiveDAV
git clone https://git.in0rdr.ch/hivedav-website.git
Log | Files | Refs | Pull requests | README | LICENSE

_directional-values.scss (2699B)

      1 @charset "UTF-8";
      2 
      3 /// Directional-property mixins are shorthands for writing properties like the following
      4 ///
      5 /// @ignore You can also use `false` instead of `null`.
      6 ///
      7 /// @param {List} $vals
      8 ///   List of directional values
      9 ///
     10 /// @example scss - Usage
     11 ///   .element {
     12 ///     @include border-style(dotted null);
     13 ///     @include margin(null 0 10px);
     14 ///   }
     15 ///
     16 /// @example css - CSS Output
     17 ///   .element {
     18 ///     border-bottom-style: dotted;
     19 ///     border-top-style: dotted;
     20 ///     margin-bottom: 10px;
     21 ///     margin-left: 0;
     22 ///     margin-right: 0;
     23 ///   }
     24 ///
     25 /// @require {function} contains-falsy
     26 ///
     27 /// @return {List}
     28 
     29 @function collapse-directionals($vals) {
     30   $output: null;
     31 
     32   $a: nth($vals, 1);
     33   $b: if(length($vals) < 2, $a, nth($vals, 2));
     34   $c: if(length($vals) < 3, $a, nth($vals, 3));
     35   $d: if(length($vals) < 2, $a, nth($vals, if(length($vals) < 4, 2, 4)));
     36 
     37   @if $a == 0 { $a: 0; }
     38   @if $b == 0 { $b: 0; }
     39   @if $c == 0 { $c: 0; }
     40   @if $d == 0 { $d: 0; }
     41 
     42   @if $a == $b and $a == $c and $a == $d { $output: $a;          }
     43   @else if $a == $c and $b == $d         { $output: $a $b;       }
     44   @else if $b == $d                      { $output: $a $b $c;    }
     45   @else                                  { $output: $a $b $c $d; }
     46 
     47   @return $output;
     48 }
     49 
     50 /// Output directional properties, for instance `margin`.
     51 ///
     52 /// @access private
     53 ///
     54 /// @param {String} $pre
     55 ///   Prefix to use
     56 /// @param {String} $suf
     57 ///   Suffix to use
     58 /// @param {List} $vals
     59 ///   List of values
     60 ///
     61 /// @require {function} collapse-directionals
     62 /// @require {function} contains-falsy
     63 
     64 @mixin directional-property($pre, $suf, $vals) {
     65   // Property Names
     66   $top:    $pre + "-top"    + if($suf, "-#{$suf}", "");
     67   $bottom: $pre + "-bottom" + if($suf, "-#{$suf}", "");
     68   $left:   $pre + "-left"   + if($suf, "-#{$suf}", "");
     69   $right:  $pre + "-right"  + if($suf, "-#{$suf}", "");
     70   $all:    $pre +             if($suf, "-#{$suf}", "");
     71 
     72   $vals: collapse-directionals($vals);
     73 
     74   @if contains-falsy($vals) {
     75     @if nth($vals, 1) { #{$top}: nth($vals, 1); }
     76 
     77     @if length($vals) == 1 {
     78       @if nth($vals, 1) { #{$right}: nth($vals, 1); }
     79     } @else {
     80       @if nth($vals, 2) { #{$right}: nth($vals, 2); }
     81     }
     82 
     83     @if length($vals) == 2 {
     84       @if nth($vals, 1) { #{$bottom}: nth($vals, 1); }
     85       @if nth($vals, 2) { #{$left}:   nth($vals, 2); }
     86     } @else if length($vals) == 3 {
     87       @if nth($vals, 3) { #{$bottom}: nth($vals, 3); }
     88       @if nth($vals, 2) { #{$left}:   nth($vals, 2); }
     89     } @else if length($vals) == 4 {
     90       @if nth($vals, 3) { #{$bottom}: nth($vals, 3); }
     91       @if nth($vals, 4) { #{$left}:   nth($vals, 4); }
     92     }
     93   } @else {
     94     #{$all}: $vals;
     95   }
     96 }