Experiments page.
[wolnelektury.git] / src / wolnelektury / static / 2022 / styles / utils / bourbon / library / _position.scss
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 }