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