1 /// Transforms shorthand that can range from 1-to-4 values to be 4 values.
3 /// @argument {list} $shorthand
7 /// margin: _unpack-shorthand(1em 2em);
12 /// margin: 1em 2em 1em 2em;
17 @function _unpack-shorthand($shorthand) {
18 @if length($shorthand) == 1 {
19 @return nth($shorthand, 1) nth($shorthand, 1) nth($shorthand, 1) nth($shorthand, 1);
20 } @else if length($shorthand) == 2 {
21 @return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 1) nth($shorthand, 2);
22 } @else if length($shorthand) == 3 {
23 @return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 3) nth($shorthand, 2);
29 /// hide-visually mixin from Bourbon < https://bourbon.io >
31 /// Hides an element visually while still allowing the content to be accessible
32 /// to assistive technology, e.g. screen readers. Passing `unhide` will reverse
33 /// the affects of the hiding, which is handy for showing the element on focus,
36 /// @link https://goo.gl/Vf1TGn
38 /// @argument {string} $toggle [hide]
39 /// Accepts `hide` or `unhide`. `unhide` reverses the affects of `hide`.
43 /// @include hide-visually;
47 /// @include hide-visually("unhide");
54 /// clip: rect(1px, 1px, 1px, 1px);
55 /// clip-path: inset(100%);
59 /// position: absolute;
63 /// .hide-visually:active,
64 /// .hide-visually:focus {
68 /// overflow: visible;
75 @mixin hide-visually($toggle: "hide") {
76 @if not index("hide" "unhide", $toggle) {
77 @error "`#{$toggle}` is not a valid value for the `$toggle` argument in " +
78 "the `hide-visually` mixin. Must be either `hide` or `unhide`.";
79 } @else if $toggle == "hide" {
81 clip: rect(1px, 1px, 1px, 1px);
82 clip-path: inset(100%);
89 } @else if $toggle == "unhide" {
100 /// Provides a concise, one-line method for setting an element’s positioning
101 /// properties: `position`, `top`, `right`, `bottom` and `left`. Use a `null`
102 /// value to “skip” an edge of the box.
104 /// @argument {string} $position
105 /// A CSS position value.
107 /// @argument {list} $box-edge-values
108 /// List of lengths; accepts CSS shorthand.
112 /// @include position(relative, 0 null null 10em);
118 /// position: relative;
124 /// @include position(absolute, 0);
129 /// position: absolute;
136 /// @require {function} _is-length
138 /// @require {function} _unpack-shorthand
144 $box-edge-values: _unpack-shorthand($box-edge-values);
146 "top": nth($box-edge-values, 1),
147 "right": nth($box-edge-values, 2),
148 "bottom": nth($box-edge-values, 3),
149 "left": nth($box-edge-values, 4),
154 @each $offset, $value in $offsets {
155 @if _is-length($value) {
161 @mixin circle($size, $display) {
165 -webkit-border-radius: $size/2;
166 -moz-border-radius: $size/2;
167 border-radius: $size/2;