1 |
|
2 |
|
3 | $utilities: () !default;
|
4 |
|
5 | $utilities: map-merge(
|
6 | (
|
7 | "align": (
|
8 | property: vertical-align,
|
9 | class: align,
|
10 | values: baseline top middle bottom text-bottom text-top
|
11 | ),
|
12 | "float": (
|
13 | responsive: true,
|
14 | property: float,
|
15 | values: left right none
|
16 | ),
|
17 | "overflow": (
|
18 | property: overflow,
|
19 | values: auto hidden,
|
20 | ),
|
21 | "display": (
|
22 | responsive: true,
|
23 | print: true,
|
24 | property: display,
|
25 | class: d,
|
26 | values: none inline inline-block block table table-row table-cell flex inline-flex
|
27 | ),
|
28 | "shadow": (
|
29 | property: box-shadow,
|
30 | class: shadow,
|
31 | values: (
|
32 | xs: $box-shadow-xs,
|
33 | sm: $box-shadow-sm,
|
34 | null: $box-shadow,
|
35 | md: $box-shadow-md,
|
36 | lg: $box-shadow-lg,
|
37 | xl: $box-shadow-xl,
|
38 | none: none,
|
39 | )
|
40 | ),
|
41 | "position": (
|
42 | property: position,
|
43 | values: static relative absolute fixed sticky
|
44 | ),
|
45 | "border": (
|
46 | property: border,
|
47 | values: (
|
48 | null: $border-width solid $border-color,
|
49 | 0: 0,
|
50 | )
|
51 | ),
|
52 | "border-top": (
|
53 | property: border-top,
|
54 | values: (
|
55 | null: $border-width solid $border-color,
|
56 | 0: 0,
|
57 | )
|
58 | ),
|
59 | "border-right": (
|
60 | property: border-right,
|
61 | values: (
|
62 | null: $border-width solid $border-color,
|
63 | 0: 0,
|
64 | )
|
65 | ),
|
66 | "border-bottom": (
|
67 | property: border-bottom,
|
68 | values: (
|
69 | null: $border-width solid $border-color,
|
70 | 0: 0,
|
71 | )
|
72 | ),
|
73 | "border-left": (
|
74 | property: border-left,
|
75 | values: (
|
76 | null: $border-width solid $border-color,
|
77 | 0: 0,
|
78 | )
|
79 | ),
|
80 | "border-color": (
|
81 | property: border-color,
|
82 | class: border,
|
83 | values: map-merge($theme-colors, (white: $white))
|
84 | ),
|
85 | // Sizing utilities
|
86 | "width": (
|
87 | property: width,
|
88 | class: w,
|
89 | values: (
|
90 | 25: 25%,
|
91 | 50: 50%,
|
92 | 75: 75%,
|
93 | 100: 100%,
|
94 | auto: auto
|
95 | )
|
96 | ),
|
97 | "max-width": (
|
98 | property: max-width,
|
99 | class: mw,
|
100 | values: (100: 100%)
|
101 | ),
|
102 | "viewport-width": (
|
103 | property: width,
|
104 | class: vw,
|
105 | values: (100: 100vw)
|
106 | ),
|
107 | "min-viewport-width": (
|
108 | property: min-width,
|
109 | class: min-vw,
|
110 | values: (100: 100vw)
|
111 | ),
|
112 | "height": (
|
113 | property: height,
|
114 | class: h,
|
115 | values: (
|
116 | 25: 25%,
|
117 | 50: 50%,
|
118 | 75: 75%,
|
119 | 100: 100%,
|
120 | auto: auto
|
121 | )
|
122 | ),
|
123 | "max-height": (
|
124 | property: max-height,
|
125 | class: mh,
|
126 | values: (100: 100%)
|
127 | ),
|
128 | "viewport-height": (
|
129 | property: height,
|
130 | class: vh,
|
131 | values: (100: 100vh)
|
132 | ),
|
133 | "min-viewport-height": (
|
134 | property: min-height,
|
135 | class: min-vh,
|
136 | values: (100: 100vh)
|
137 | ),
|
138 | // Flex utilities
|
139 | "flex": (
|
140 | responsive: true,
|
141 | property: flex,
|
142 | values: (fill: 1 1 auto)
|
143 | ),
|
144 | "flex-direction": (
|
145 | responsive: true,
|
146 | property: flex-direction,
|
147 | class: flex,
|
148 | values: row column row-reverse column-reverse
|
149 | ),
|
150 | "flex-grow": (
|
151 | responsive: true,
|
152 | property: flex-grow,
|
153 | class: flex,
|
154 | values: (
|
155 | grow-0: 0,
|
156 | grow-1: 1,
|
157 | )
|
158 | ),
|
159 | "flex-shrink": (
|
160 | responsive: true,
|
161 | property: flex-shrink,
|
162 | class: flex,
|
163 | values: (
|
164 | shrink-0: 0,
|
165 | shrink-1: 1,
|
166 | )
|
167 | ),
|
168 | "flex-wrap": (
|
169 | responsive: true,
|
170 | property: flex-wrap,
|
171 | class: flex,
|
172 | values: wrap nowrap wrap-reverse
|
173 | ),
|
174 | "justify-content": (
|
175 | responsive: true,
|
176 | property: justify-content,
|
177 | values: (
|
178 | start: flex-start,
|
179 | end: flex-end,
|
180 | center: center,
|
181 | between: space-between,
|
182 | around: space-around,
|
183 | )
|
184 | ),
|
185 | "align-items": (
|
186 | responsive: true,
|
187 | property: align-items,
|
188 | values: (
|
189 | start: flex-start,
|
190 | end: flex-end,
|
191 | center: center,
|
192 | baseline: baseline,
|
193 | stretch: stretch,
|
194 | )
|
195 | ),
|
196 | "align-content": (
|
197 | responsive: true,
|
198 | property: align-content,
|
199 | values: (
|
200 | start: flex-start,
|
201 | end: flex-end,
|
202 | center: center,
|
203 | between: space-between,
|
204 | around: space-around,
|
205 | stretch: stretch,
|
206 | )
|
207 | ),
|
208 | "align-self": (
|
209 | responsive: true,
|
210 | property: align-self,
|
211 | values: (
|
212 | auto: auto,
|
213 | start: flex-start,
|
214 | end: flex-end,
|
215 | center: center,
|
216 | baseline: baseline,
|
217 | stretch: stretch,
|
218 | )
|
219 | ),
|
220 | "order": (
|
221 | responsive: true,
|
222 | property: order,
|
223 | values: (
|
224 | first: -1,
|
225 | 0: 0,
|
226 | 1: 1,
|
227 | 2: 2,
|
228 | 3: 3,
|
229 | 4: 4,
|
230 | 5: 5,
|
231 | last: 6,
|
232 | ),
|
233 | ),
|
234 | // Margin utilities
|
235 | "margin": (
|
236 | responsive: true,
|
237 | property: margin,
|
238 | class: m,
|
239 | values: map-merge(map-merge($spacers, (auto: auto)), $layout-spacers)
|
240 | ),
|
241 | "margin-x": (
|
242 | responsive: true,
|
243 | property: margin-right margin-left,
|
244 | class: mx,
|
245 | values: map-merge(map-merge($spacers, (auto: auto)), $layout-spacers)
|
246 | ),
|
247 | "margin-y": (
|
248 | responsive: true,
|
249 | property: margin-top margin-bottom,
|
250 | class: my,
|
251 | values: map-merge(map-merge($spacers, (auto: auto)), $layout-spacers)
|
252 | ),
|
253 | "margin-top": (
|
254 | responsive: true,
|
255 | property: margin-top,
|
256 | class: mt,
|
257 | values: map-merge(map-merge($spacers, (auto: auto)), $layout-spacers)
|
258 | ),
|
259 | "margin-right": (
|
260 | responsive: true,
|
261 | property: margin-right,
|
262 | class: mr,
|
263 | values: map-merge(map-merge($spacers, (auto: auto)), $layout-spacers)
|
264 | ),
|
265 | "margin-bottom": (
|
266 | responsive: true,
|
267 | property: margin-bottom,
|
268 | class: mb,
|
269 | values: map-merge(map-merge($spacers, (auto: auto)), $layout-spacers)
|
270 | ),
|
271 | "margin-left": (
|
272 | responsive: true,
|
273 | property: margin-left,
|
274 | class: ml,
|
275 | values: map-merge(map-merge($spacers, (auto: auto)), $layout-spacers)
|
276 | ),
|
277 | // // Negative margin utilities
|
278 | "negative-margin": (
|
279 | responsive: true,
|
280 | property: margin,
|
281 | class: m,
|
282 | values: $negative-spacers
|
283 | ),
|
284 | "negative-margin-x": (
|
285 | responsive: true,
|
286 | property: margin-right margin-left,
|
287 | class: mx,
|
288 | values: $negative-spacers
|
289 | ),
|
290 | "negative-margin-y": (
|
291 | responsive: true,
|
292 | property: margin-top margin-bottom,
|
293 | class: my,
|
294 | values: $negative-spacers
|
295 | ),
|
296 | "negative-margin-top": (
|
297 | responsive: true,
|
298 | property: margin-top,
|
299 | class: mt,
|
300 | values: $negative-spacers
|
301 | ),
|
302 | "negative-margin-right": (
|
303 | responsive: true,
|
304 | property: margin-right,
|
305 | class: mr,
|
306 | values: $negative-spacers
|
307 | ),
|
308 | "negative-margin-bottom": (
|
309 | responsive: true,
|
310 | property: margin-bottom,
|
311 | class: mb,
|
312 | values: $negative-spacers
|
313 | ),
|
314 | "negative-margin-left": (
|
315 | responsive: true,
|
316 | property: margin-left,
|
317 | class: ml,
|
318 | values: $negative-spacers
|
319 | ),
|
320 | // Padding utilities
|
321 | "padding": (
|
322 | responsive: true,
|
323 | property: padding,
|
324 | class: p,
|
325 | values: map-merge($spacers, $layout-spacers)
|
326 | ),
|
327 | "padding-x": (
|
328 | responsive: true,
|
329 | property: padding-right padding-left,
|
330 | class: px,
|
331 | values: map-merge($spacers, $layout-spacers)
|
332 | ),
|
333 | "padding-y": (
|
334 | responsive: true,
|
335 | property: padding-top padding-bottom,
|
336 | class: py,
|
337 | values: map-merge($spacers, $layout-spacers)
|
338 | ),
|
339 | "padding-top": (
|
340 | responsive: true,
|
341 | property: padding-top,
|
342 | class: pt,
|
343 | values: map-merge($spacers, $layout-spacers)
|
344 | ),
|
345 | "padding-right": (
|
346 | responsive: true,
|
347 | property: padding-right,
|
348 | class: pr,
|
349 | values: map-merge($spacers, $layout-spacers)
|
350 | ),
|
351 | "padding-bottom": (
|
352 | responsive: true,
|
353 | property: padding-bottom,
|
354 | class: pb,
|
355 | values: map-merge($spacers, $layout-spacers)
|
356 | ),
|
357 | "padding-left": (
|
358 | responsive: true,
|
359 | property: padding-left,
|
360 | class: pl,
|
361 | values: map-merge($spacers, $layout-spacers)
|
362 | ),
|
363 | // Text
|
364 | "font-weight": (
|
365 | property: font-weight,
|
366 | values: (
|
367 | light: $font-weight-light,
|
368 | lighter: $font-weight-lighter,
|
369 | normal: $font-weight-normal,
|
370 | bold: $font-weight-bold,
|
371 | bolder: $font-weight-bolder
|
372 | )
|
373 | ),
|
374 | "text-transform": (
|
375 | property: text-transform,
|
376 | class: text,
|
377 | values: lowercase uppercase capitalize
|
378 | ),
|
379 | "text-align": (
|
380 | responsive: true,
|
381 | property: text-align,
|
382 | class: text,
|
383 | values: left right center justify
|
384 | ),
|
385 | "color": (
|
386 | property: color,
|
387 | class: text,
|
388 | values: map-merge(
|
389 | $theme-colors,
|
390 | (
|
391 | white: $white,
|
392 | body: $body-color,
|
393 | muted: $text-muted,
|
394 | dark-50: rgba($dark, .5),
|
395 | white-50: rgba($white, .5),
|
396 | reset: inherit,
|
397 | )
|
398 | )
|
399 | ),
|
400 | "line-height": (
|
401 | property: line-height,
|
402 | class: lh,
|
403 | values: (
|
404 | 1: 1,
|
405 | sm: $line-height-sm,
|
406 | base: $line-height-base,
|
407 | lg: $line-height-lg,
|
408 | )
|
409 | ),
|
410 | "background-color": (
|
411 | property: background-color,
|
412 | class: bg,
|
413 | values: map-merge(
|
414 | $theme-colors,
|
415 | (
|
416 | white: $white,
|
417 | transparent: transparent
|
418 | )
|
419 | )
|
420 | ),
|
421 | "white-space": (
|
422 | property: white-space,
|
423 | class: text,
|
424 | values: (
|
425 | wrap: normal,
|
426 | nowrap: nowrap,
|
427 | )
|
428 | ),
|
429 | "text-decoration": (
|
430 | property: text-decoration,
|
431 | values: none
|
432 | ),
|
433 | "font-style": (
|
434 | property: font-style,
|
435 | class: font,
|
436 | values: italic
|
437 | ),
|
438 | "overflow-wrap": (
|
439 | property: overflow-wrap word-break, // word-break for IE & < Edge 18
|
440 | class: text,
|
441 | values: (break: break-word)
|
442 | ),
|
443 | "font-family": (
|
444 | property: font-family,
|
445 | class: font,
|
446 | values: (monospace: $font-family-monospace)
|
447 | ),
|
448 | "rounded": (
|
449 | property: border-radius,
|
450 | class: rounded,
|
451 | values: (
|
452 | null: $border-radius,
|
453 | sm: $border-radius-sm,
|
454 | lg: $border-radius-lg,
|
455 | circle: 50%,
|
456 | // pill: $rounded-pill,
|
457 | 0: 0,
|
458 | )
|
459 | ),
|
460 | "rounded-top": (
|
461 | property: border-top-left-radius border-top-right-radius,
|
462 | class: rounded-top,
|
463 | values: (null: $border-radius)
|
464 | ),
|
465 | "rounded-right": (
|
466 | property: border-top-right-radius border-bottom-right-radius,
|
467 | class: rounded-right,
|
468 | values: (null: $border-radius)
|
469 | ),
|
470 | "rounded-bottom": (
|
471 | property: border-bottom-right-radius border-bottom-left-radius,
|
472 | class: rounded-bottom,
|
473 | values: (null: $border-radius)
|
474 | ),
|
475 | "rounded-left": (
|
476 | property: border-bottom-left-radius border-top-left-radius,
|
477 | class: rounded-left,
|
478 | values: (null: $border-radius)
|
479 | ),
|
480 | "visibility": (
|
481 | property: visibility,
|
482 | class: null,
|
483 | values: (
|
484 | visible: visible,
|
485 | invisible: hidden,
|
486 | )
|
487 | )
|
488 | ),
|
489 | $utilities
|
490 | );
|
491 |
|
492 |
|
493 |
|
494 |
|
495 | @mixin generate-utility($utility, $infix) {
|
496 | $values: map-get($utility, values);
|
497 |
|
498 |
|
499 | @if type-of($values) == "string" or type-of(nth($values, 1)) != "list" {
|
500 | $values: zip($values, $values);
|
501 | }
|
502 |
|
503 | @each $key, $value in $values {
|
504 | $properties: map-get($utility, property);
|
505 |
|
506 |
|
507 | @if type-of($properties) == "string" {
|
508 | $properties: append((), $properties);
|
509 | }
|
510 |
|
511 |
|
512 | $property-class: if(map-has-key($utility, class), map-get($utility, class), nth($properties, 1));
|
513 | $property-class: if($property-class == null, "", $property-class);
|
514 |
|
515 | $infix: if($property-class == "" and str-slice($infix, 1, 1) == "-", str-slice($infix, 2), $infix);
|
516 |
|
517 |
|
518 | $property-class-modifier: if($key, if($property-class == "" and $infix == "", "", "-") + $key, "");
|
519 |
|
520 | .#{$property-class + $infix + $property-class-modifier} {
|
521 | @each $property in $properties {
|
522 |
|
523 | #{$property}: $value !important;
|
524 | }
|
525 | }
|
526 | }
|
527 | }
|
528 |
|
529 |
|
530 | @each $breakpoint in map-keys($grid-breakpoints) {
|
531 |
|
532 |
|
533 | @include media-breakpoint-up($breakpoint) {
|
534 | $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
535 |
|
536 |
|
537 | @each $key, $utility in $utilities {
|
538 |
|
539 |
|
540 | @if type-of($utility) == "map" and (map-get($utility, responsive) or $infix == "") {
|
541 | @include generate-utility($utility, $infix);
|
542 | }
|
543 | }
|
544 | }
|
545 | }
|
546 |
|
547 |
|
548 | .skeleton__text {
|
549 | @include skeleton;
|
550 | width: 100%;
|
551 | height: 1rem;
|
552 | margin-bottom: $spacing-md;
|
553 | }
|
554 |
|
555 | .skeleton__heading {
|
556 | height: 1.5rem;
|
557 | }
|