1 |
|
2 |
|
3 |
|
4 |
|
5 | $utilities: () !default;
|
6 |
|
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 | );
|