2d3ca553 |
1 | @charset "UTF-8"; |
2 | |
3 | /// Provides a concise, one-line method for setting an element’s positioning |
4 | /// properties: `position`, `top`, `right`, `bottom` and `left`. Use a `null` |
5 | /// value to “skip” an edge of the box. |
6 | /// |
7 | /// @argument {string} $position |
8 | /// A CSS position value. |
9 | /// |
10 | /// @argument {list} $box-edge-values |
11 | /// List of lengths; accepts CSS shorthand. |
12 | /// |
13 | /// @example scss |
14 | /// .element { |
15 | /// @include position(relative, 0 null null 10em); |
16 | /// } |
17 | /// |
18 | /// // CSS Output |
19 | /// .element { |
20 | /// left: 10em; |
21 | /// position: relative; |
22 | /// top: 0; |
23 | /// } |
24 | /// |
25 | /// @example scss |
26 | /// .element { |
27 | /// @include position(absolute, 0); |
28 | /// } |
29 | /// |
30 | /// // CSS Output |
31 | /// .element { |
32 | /// position: absolute; |
33 | /// top: 0; |
34 | /// right: 0; |
35 | /// bottom: 0; |
36 | /// left: 0; |
37 | /// } |
38 | /// |
39 | /// @require {function} _is-length |
40 | /// |
41 | /// @require {function} _unpack-shorthand |
42 | |
43 | @mixin position( |
44 | $position, |
45 | $box-edge-values |
46 | ) { |
47 | $box-edge-values: _unpack-shorthand($box-edge-values); |
48 | $offsets: ( |
49 | "top": nth($box-edge-values, 1), |
50 | "right": nth($box-edge-values, 2), |
51 | "bottom": nth($box-edge-values, 3), |
52 | "left": nth($box-edge-values, 4), |
53 | ); |
54 | |
55 | position: $position; |
56 | |
57 | @each $offset, $value in $offsets { |
58 | @if _is-length($value) { |
59 | #{$offset}: $value; |
60 | } |
61 | } |
62 | } |