2d3ca553 |
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 | } |