c2ea6701 |
1 | /// Transforms shorthand that can range from 1-to-4 values to be 4 values. |
2 | /// |
3 | /// @argument {list} $shorthand |
4 | /// |
5 | /// @example scss |
6 | /// .element { |
7 | /// margin: _unpack-shorthand(1em 2em); |
8 | /// } |
9 | /// |
10 | /// // CSS Output |
11 | /// .element { |
12 | /// margin: 1em 2em 1em 2em; |
13 | /// } |
14 | /// |
15 | /// @access private |
16 | |
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); |
24 | } @else { |
25 | @return $shorthand; |
26 | } |
27 | } |
28 | |
748286b5 |
29 | /// hide-visually mixin from Bourbon < https://bourbon.io > |
30 | /// |
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, |
34 | /// for example. |
35 | /// |
36 | /// @link https://goo.gl/Vf1TGn |
37 | /// |
38 | /// @argument {string} $toggle [hide] |
39 | /// Accepts `hide` or `unhide`. `unhide` reverses the affects of `hide`. |
40 | /// |
41 | /// @example scss |
42 | /// .element { |
43 | /// @include hide-visually; |
44 | /// |
45 | /// &:active, |
46 | /// &:focus { |
47 | /// @include hide-visually("unhide"); |
48 | /// } |
49 | /// } |
50 | /// |
51 | /// // CSS Output |
52 | /// .element { |
53 | /// border: 0; |
54 | /// clip: rect(1px, 1px, 1px, 1px); |
55 | /// clip-path: inset(100%); |
56 | /// height: 1px; |
57 | /// overflow: hidden; |
58 | /// padding: 0; |
59 | /// position: absolute; |
60 | /// width: 1px; |
61 | /// } |
62 | /// |
63 | /// .hide-visually:active, |
64 | /// .hide-visually:focus { |
65 | /// clip: auto; |
66 | /// clip-path: none; |
67 | /// height: auto; |
68 | /// overflow: visible; |
69 | /// position: static; |
70 | /// width: auto; |
71 | /// } |
72 | /// |
73 | /// @since 5.0.0 |
74 | |
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" { |
80 | border: 0; |
81 | clip: rect(1px, 1px, 1px, 1px); |
82 | clip-path: inset(100%); |
83 | height: 1px; |
84 | overflow: hidden; |
85 | padding: 0; |
86 | position: absolute; |
87 | white-space: nowrap; |
88 | width: 1px; |
89 | } @else if $toggle == "unhide" { |
90 | clip: auto; |
91 | clip-path: none; |
92 | height: auto; |
93 | overflow: visible; |
94 | position: static; |
95 | white-space: inherit; |
96 | width: auto; |
97 | } |
98 | } |
c2ea6701 |
99 | |
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. |
103 | /// |
104 | /// @argument {string} $position |
105 | /// A CSS position value. |
106 | /// |
107 | /// @argument {list} $box-edge-values |
108 | /// List of lengths; accepts CSS shorthand. |
109 | /// |
110 | /// @example scss |
111 | /// .element { |
112 | /// @include position(relative, 0 null null 10em); |
113 | /// } |
114 | /// |
115 | /// // CSS Output |
116 | /// .element { |
117 | /// left: 10em; |
118 | /// position: relative; |
119 | /// top: 0; |
120 | /// } |
121 | /// |
122 | /// @example scss |
123 | /// .element { |
124 | /// @include position(absolute, 0); |
125 | /// } |
126 | /// |
127 | /// // CSS Output |
128 | /// .element { |
129 | /// position: absolute; |
130 | /// top: 0; |
131 | /// right: 0; |
132 | /// bottom: 0; |
133 | /// left: 0; |
134 | /// } |
135 | /// |
136 | /// @require {function} _is-length |
137 | /// |
138 | /// @require {function} _unpack-shorthand |
139 | |
140 | @mixin position( |
141 | $position, |
142 | $box-edge-values |
143 | ) { |
144 | $box-edge-values: _unpack-shorthand($box-edge-values); |
145 | $offsets: ( |
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), |
150 | ); |
151 | |
152 | position: $position; |
153 | |
154 | @each $offset, $value in $offsets { |
155 | @if _is-length($value) { |
156 | #{$offset}: $value; |
157 | } |
158 | } |
159 | } |
f945c30b |
160 | |
161 | @mixin circle($size, $display) { |
162 | width: $size; |
163 | height: $size; |
164 | display: $display; |
165 | -webkit-border-radius: $size/2; |
166 | -moz-border-radius: $size/2; |
167 | border-radius: $size/2; |
168 | } |