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