1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 |
|
18 |
|
19 | @mixin animation($animation) {
|
20 | -webkit-animation: $animation;
|
21 | -o-animation: $animation;
|
22 | animation: $animation;
|
23 | }
|
24 |
|
25 | @mixin animation-name($name) {
|
26 | -webkit-animation-name: $name;
|
27 | animation-name: $name;
|
28 | }
|
29 |
|
30 | @mixin animation-duration($duration) {
|
31 | -webkit-animation-duration: $duration;
|
32 | animation-duration: $duration;
|
33 | }
|
34 |
|
35 | @mixin animation-timing-function($timing-function) {
|
36 | -webkit-animation-timing-function: $timing-function;
|
37 | animation-timing-function: $timing-function;
|
38 | }
|
39 |
|
40 | @mixin animation-delay($delay) {
|
41 | -webkit-animation-delay: $delay;
|
42 | animation-delay: $delay;
|
43 | }
|
44 |
|
45 | @mixin animation-iteration-count($iteration-count) {
|
46 | -webkit-animation-iteration-count: $iteration-count;
|
47 | animation-iteration-count: $iteration-count;
|
48 | }
|
49 |
|
50 | @mixin animation-direction($direction) {
|
51 | -webkit-animation-direction: $direction;
|
52 | animation-direction: $direction;
|
53 | }
|
54 |
|
55 | @mixin animation-fill-mode($fill-mode) {
|
56 | -webkit-animation-fill-mode: $fill-mode;
|
57 | animation-fill-mode: $fill-mode;
|
58 | }
|
59 |
|
60 | @mixin keyframes($name) {
|
61 | @-webkit-keyframes #{$name} {
|
62 | @content;
|
63 | }
|
64 |
|
65 | @-moz-keyframes #{$name} {
|
66 | @content;
|
67 | }
|
68 |
|
69 | @-ms-keyframes #{$name} {
|
70 | @content;
|
71 | }
|
72 |
|
73 | @keyframes #{$name} {
|
74 | @content;
|
75 | }
|
76 | }
|
77 |
|
78 |
|
79 |
|
80 |
|
81 |
|
82 | @mixin backface-visibility($visibility) {
|
83 | -webkit-backface-visibility: $visibility;
|
84 | -moz-backface-visibility: $visibility;
|
85 | backface-visibility: $visibility;
|
86 | }
|
87 |
|
88 |
|
89 |
|
90 |
|
91 |
|
92 |
|
93 | @mixin box-shadow($shadow...) {
|
94 | -webkit-box-shadow: $shadow;
|
95 | box-shadow: $shadow;
|
96 | }
|
97 |
|
98 |
|
99 | @mixin box-sizing($boxmodel) {
|
100 | -webkit-box-sizing: $boxmodel;
|
101 | -moz-box-sizing: $boxmodel;
|
102 | box-sizing: $boxmodel;
|
103 | }
|
104 |
|
105 |
|
106 | @mixin content-columns($column-count, $column-gap: $grid-gutter-width) {
|
107 | -webkit-column-count: $column-count;
|
108 | -moz-column-count: $column-count;
|
109 | column-count: $column-count;
|
110 | -webkit-column-gap: $column-gap;
|
111 | -moz-column-gap: $column-gap;
|
112 | column-gap: $column-gap;
|
113 | }
|
114 |
|
115 |
|
116 | @mixin hyphens($mode: auto) {
|
117 | word-wrap: break-word;
|
118 | -webkit-hyphens: $mode;
|
119 | -moz-hyphens: $mode;
|
120 | -ms-hyphens: $mode;
|
121 | -o-hyphens: $mode;
|
122 | hyphens: $mode;
|
123 | }
|
124 |
|
125 |
|
126 | @mixin scale($ratio...) {
|
127 | -webkit-transform: scale($ratio);
|
128 | -ms-transform: scale($ratio);
|
129 | -o-transform: scale($ratio);
|
130 | transform: scale($ratio);
|
131 | }
|
132 |
|
133 | @mixin scaleX($ratio) {
|
134 | -webkit-transform: scaleX($ratio);
|
135 | -ms-transform: scaleX($ratio);
|
136 | -o-transform: scaleX($ratio);
|
137 | transform: scaleX($ratio);
|
138 | }
|
139 |
|
140 | @mixin scaleY($ratio) {
|
141 | -webkit-transform: scaleY($ratio);
|
142 | -ms-transform: scaleY($ratio);
|
143 | -o-transform: scaleY($ratio);
|
144 | transform: scaleY($ratio);
|
145 | }
|
146 |
|
147 | @mixin skew($x, $y) {
|
148 | -webkit-transform: skewX($x) skewY($y);
|
149 | -ms-transform: skewX($x) skewY($y);
|
150 | -o-transform: skewX($x) skewY($y);
|
151 | transform: skewX($x) skewY($y);
|
152 | }
|
153 |
|
154 | @mixin translate($x, $y) {
|
155 | -webkit-transform: translate($x, $y);
|
156 | -ms-transform: translate($x, $y);
|
157 | -o-transform: translate($x, $y);
|
158 | transform: translate($x, $y);
|
159 | }
|
160 |
|
161 | @mixin translate3d($x, $y, $z) {
|
162 | -webkit-transform: translate3d($x, $y, $z);
|
163 | transform: translate3d($x, $y, $z);
|
164 | }
|
165 |
|
166 | @mixin scale3d($x, $y, $z) {
|
167 | -webkit-transform: scale3d($x, $y, $z);
|
168 | transform: scale3d($x, $y, $z);
|
169 | }
|
170 |
|
171 | @mixin rotate($degrees) {
|
172 | -webkit-transform: rotate($degrees);
|
173 | -ms-transform: rotate($degrees);
|
174 | -o-transform: rotate($degrees);
|
175 | transform: rotate($degrees);
|
176 | }
|
177 |
|
178 | @mixin rotateX($degrees) {
|
179 | -webkit-transform: rotateX($degrees);
|
180 | -ms-transform: rotateX($degrees);
|
181 | -o-transform: rotateX($degrees);
|
182 | transform: rotateX($degrees);
|
183 | }
|
184 |
|
185 | @mixin rotateY($degrees) {
|
186 | -webkit-transform: rotateY($degrees);
|
187 | -ms-transform: rotateY($degrees);
|
188 | -o-transform: rotateY($degrees);
|
189 | transform: rotateY($degrees);
|
190 | }
|
191 |
|
192 | @mixin perspective($perspective) {
|
193 | -webkit-perspective: $perspective;
|
194 | -moz-perspective: $perspective;
|
195 | perspective: $perspective;
|
196 | }
|
197 |
|
198 | @mixin perspective-origin($perspective) {
|
199 | -webkit-perspective-origin: $perspective;
|
200 | -moz-perspective-origin: $perspective;
|
201 | perspective-origin: $perspective;
|
202 | }
|
203 |
|
204 | @mixin transform-origin($origin) {
|
205 | -webkit-transform-origin: $origin;
|
206 | -moz-transform-origin: $origin;
|
207 | -ms-transform-origin: $origin;
|
208 | transform-origin: $origin;
|
209 | }
|
210 |
|
211 | @mixin transform($transforms) {
|
212 | -moz-transform: $transforms;
|
213 | -o-transform: $transforms;
|
214 | -ms-transform: $transforms;
|
215 | -webkit-transform: $transforms;
|
216 | transform: $transforms;
|
217 | }
|
218 |
|
219 |
|
220 |
|
221 | @mixin transition($transition...) {
|
222 | -webkit-transition: $transition;
|
223 | -o-transition: $transition;
|
224 | transition: $transition;
|
225 | }
|
226 |
|
227 | @mixin transition-property($transition-property...) {
|
228 | -webkit-transition-property: $transition-property;
|
229 | transition-property: $transition-property;
|
230 | }
|
231 |
|
232 | @mixin transition-delay($transition-delay) {
|
233 | -webkit-transition-delay: $transition-delay;
|
234 | transition-delay: $transition-delay;
|
235 | }
|
236 |
|
237 | @mixin transition-duration($transition-duration...) {
|
238 | -webkit-transition-duration: $transition-duration;
|
239 | transition-duration: $transition-duration;
|
240 | }
|
241 |
|
242 | @mixin transition-timing-function($timing-function) {
|
243 | -webkit-transition-timing-function: $timing-function;
|
244 | transition-timing-function: $timing-function;
|
245 | }
|
246 |
|
247 | @mixin transition-transform($transition...) {
|
248 | -webkit-transition: -webkit-transform $transition;
|
249 | -moz-transition: -moz-transform $transition;
|
250 | -o-transition: -o-transform $transition;
|
251 | transition: transform $transition;
|
252 | }
|
253 |
|
254 |
|
255 |
|
256 | @function prefix($property, $prefixes: webkit moz o ms) {
|
257 | $vendor-prefixed-properties: transform background-clip background-size;
|
258 | $result: ();
|
259 |
|
260 | @each $prefix in $prefixes {
|
261 | @if index($vendor-prefixed-properties, $property) {
|
262 | $property: -#{$prefix}-#{$property};
|
263 | }
|
264 | $result: append($result, $property);
|
265 | }
|
266 | @return $result;
|
267 | }
|
268 |
|
269 | @function trans-prefix($transition, $prefix: moz) {
|
270 | $prefixed: ();
|
271 |
|
272 | @each $trans in $transition {
|
273 | $prop-name: nth($trans, 1);
|
274 | $vendor-prop-name: prefix($prop-name, $prefix);
|
275 | $prop-vals: nth($trans, 2);
|
276 | $prefixed: append($prefixed, $vendor-prop-name $prop-vals, comma);
|
277 | }
|
278 | @return $prefixed;
|
279 | }
|
280 |
|
281 | @mixin transitionCustom($values...) {
|
282 | $transitions: ();
|
283 |
|
284 | @each $declaration in $values {
|
285 | $prop: nth($declaration, 1);
|
286 | $prop-opts: ();
|
287 | $length: length($declaration);
|
288 |
|
289 | @if $length >= 2 {
|
290 | @for $i from 2 through $length {
|
291 | $prop-opts: append($prop-opts, nth($declaration, $i));
|
292 | }
|
293 | }
|
294 | $trans: $prop, $prop-opts;
|
295 | $transitions: append($transitions, $trans, comma);
|
296 | }
|
297 | -webkit-transition: trans-prefix($transitions, webkit);
|
298 | -moz-transition: trans-prefix($transitions, moz);
|
299 | -o-transition: trans-prefix($transitions, o);
|
300 | transition: $values;
|
301 | }
|
302 |
|
303 |
|
304 |
|
305 |
|
306 | @mixin user-select($select) {
|
307 | -webkit-user-select: $select;
|
308 | -moz-user-select: $select;
|
309 | -ms-user-select: $select;
|
310 | user-select: $select;
|
311 | }
|
312 |
|
313 |
|
314 |
|
315 | @mixin grab-cursor {
|
316 | cursor: -webkit-grab;
|
317 | cursor: -moz-grab;
|
318 | cursor: -o-grab;
|
319 | cursor: -ms-grab;
|
320 | cursor: grab;
|
321 | }
|
322 |
|
323 | @mixin grabbing-cursor {
|
324 | cursor: move;
|
325 | cursor: -webkit-grabbing;
|
326 | cursor: -moz-grabbing;
|
327 | cursor: -o-grabbing;
|
328 | cursor: -ms-grabbing;
|
329 | cursor: grabbing;
|
330 | }
|