src/wolnelektury/static/2022/styles/utils/bourbon/utilities/_directional-property.scss

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