Experiments page.
[wolnelektury.git] / 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 }