assets/sass/bourbon/bourbon/utilities/_directional-property.scss

   1 @charset "UTF-8";
   2
   3 /// Builds directional properties by parsing CSS shorthand values. For example,
   4 /// a value of `10px null` will output top and bottom directional properties,
   5 /// but the `null` skips left and right from being output.
   6 ///
   7 /// @argument {string} $property
   8 ///   Base property.
   9 ///
  10 /// @argument {string} $suffix
  11 ///   Suffix to append. Use `null` to omit.
  12 ///
  13 /// @argument {list} $values
  14 ///   List of values to set for the property.
  15 ///
  16 /// @example scss
  17 ///   .element {
  18 ///     @include _directional-property(border, width, null 5px);
  19 ///   }
  20 ///
  21 ///   // CSS Output
  22 ///   .element {
  23 ///     border-right-width: 5px;
  24 ///     border-left-width: 5px;
  25 ///   }
  26 ///
  27 /// @require {function} _compact-shorthand
  28 ///
  29 /// @require {function} _contains-falsy
  30 ///
  31 /// @access private
  32
  33 @mixin _directional-property(
  34   $property,
  35   $suffix,
  36   $values
  37 ) {
  38   $top: $property + "-top" + if($suffix, "-#{$suffix}", "");
  39   $bottom: $property + "-bottom" + if($suffix, "-#{$suffix}", "");
  40   $left: $property + "-left" + if($suffix, "-#{$suffix}", "");
  41   $right: $property + "-right" + if($suffix, "-#{$suffix}", "");
  42   $all: $property + if($suffix, "-#{$suffix}", "");
  43
  44   $values: _compact-shorthand($values);
  45
  46   @if _contains-falsy($values) {
  47     @if nth($values, 1) { #{$top}: nth($values, 1); }
  48
  49     @if length($values) == 1 {
  50       @if nth($values, 1) { #{$right}: nth($values, 1); }
  51     } @else {
  52       @if nth($values, 2) { #{$right}: nth($values, 2); }
  53     }
  54
  55     @if length($values) == 2 {
  56       @if nth($values, 1) { #{$bottom}: nth($values, 1); }
  57       @if nth($values, 2) { #{$left}: nth($values, 2); }
  58     } @else if length($values) == 3 {
  59       @if nth($values, 3) { #{$bottom}: nth($values, 3); }
  60       @if nth($values, 2) { #{$left}: nth($values, 2); }
  61     } @else if length($values) == 4 {
  62       @if nth($values, 3) { #{$bottom}: nth($values, 3); }
  63       @if nth($values, 4) { #{$left}: nth($values, 4); }
  64     }
  65   } @else {
  66     #{$all}: $values;
  67   }
  68 }