3 $utilities: () !default;
4 // stylelint-disable-next-line scss/dollar-variable-default
7 // scss-docs-start utils-vertical-align
9 property: vertical-align,
11 values: baseline top middle bottom text-bottom text-top
13 // scss-docs-end utils-vertical-align
14 // scss-docs-start utils-float
24 // scss-docs-end utils-float
26 // scss-docs-start utils-opacity
37 // scss-docs-end utils-opacity
38 // scss-docs-start utils-overflow
41 values: auto hidden visible scroll,
43 // scss-docs-end utils-overflow
44 // scss-docs-start utils-display
50 values: inline inline-block block grid table table-row table-cell flex inline-flex none
52 // scss-docs-end utils-display
53 // scss-docs-start utils-shadow
64 // scss-docs-end utils-shadow
65 // scss-docs-start utils-position
68 values: static relative absolute fixed sticky
72 values: $position-values
76 values: $position-values
81 values: $position-values
86 values: $position-values
90 class: translate-middle,
92 null: translate(-50%, -50%),
97 // scss-docs-end utils-position
98 // scss-docs-start utils-borders
102 null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
107 property: border-top,
109 null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
114 property: border-right,
117 null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
122 property: border-bottom,
124 null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
129 property: border-left,
132 null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
137 property: border-color,
142 values: $utilities-border-colors
146 css-variable-name: border-width,
148 values: $border-widths
152 class: border-opacity,
161 // scss-docs-end utils-borders
163 // scss-docs-start utils-sizing
185 "min-viewport-width": (
202 property: max-height,
211 "min-viewport-height": (
212 property: min-height,
216 // scss-docs-end utils-sizing
218 // scss-docs-start utils-flex
222 values: (fill: 1 1 auto)
226 property: flex-direction,
228 values: row column row-reverse column-reverse
241 property: flex-shrink,
252 values: wrap nowrap wrap-reverse
256 property: justify-content,
261 between: space-between,
262 around: space-around,
263 evenly: space-evenly,
268 property: align-items,
279 property: align-content,
284 between: space-between,
285 around: space-around,
291 property: align-self,
315 // scss-docs-end utils-flex
317 // scss-docs-start utils-spacing
322 values: map-merge($spacers, (auto: auto))
326 property: margin-right margin-left,
328 values: map-merge($spacers, (auto: auto))
332 property: margin-top margin-bottom,
334 values: map-merge($spacers, (auto: auto))
338 property: margin-top,
340 values: map-merge($spacers, (auto: auto))
344 property: margin-right,
346 values: map-merge($spacers, (auto: auto))
350 property: margin-bottom,
352 values: map-merge($spacers, (auto: auto))
356 property: margin-left,
358 values: map-merge($spacers, (auto: auto))
360 // Negative margin utilities
365 values: $negative-spacers
367 "negative-margin-x": (
369 property: margin-right margin-left,
371 values: $negative-spacers
373 "negative-margin-y": (
375 property: margin-top margin-bottom,
377 values: $negative-spacers
379 "negative-margin-top": (
381 property: margin-top,
383 values: $negative-spacers
385 "negative-margin-end": (
387 property: margin-right,
389 values: $negative-spacers
391 "negative-margin-bottom": (
393 property: margin-bottom,
395 values: $negative-spacers
397 "negative-margin-start": (
399 property: margin-left,
401 values: $negative-spacers
412 property: padding-right padding-left,
418 property: padding-top padding-bottom,
424 property: padding-top,
430 property: padding-right,
436 property: padding-bottom,
442 property: padding-left,
453 // scss-docs-end utils-spacing
455 // scss-docs-start utils-text
457 property: font-family,
459 values: (monospace: var(--#{$prefix}font-monospace))
468 property: font-style,
470 values: italic normal
473 property: font-weight,
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
485 property: line-height,
490 base: $line-height-base,
496 property: text-align,
505 property: text-decoration,
506 values: none underline line-through
509 property: text-transform,
511 values: lowercase uppercase capitalize
514 property: white-space,
522 property: word-wrap word-break,
524 values: (break: break-word),
527 // scss-docs-end utils-text
528 // scss-docs-start utils-color
536 $utilities-text-colors,
538 "muted": $text-muted,
539 "black-50": rgba($black, .5), // deprecated
540 "white-50": rgba($white, .5), // deprecated
555 // scss-docs-end utils-color
556 // scss-docs-start utils-bg-color
557 "background-color": (
558 property: background-color,
564 $utilities-bg-colors,
566 "transparent": transparent
581 // scss-docs-end utils-bg-color
583 property: background-image,
585 values: (gradient: var(--#{$prefix}gradient))
587 // scss-docs-start utils-interaction
589 property: user-select,
590 values: all auto none
593 property: pointer-events,
597 // scss-docs-end utils-interaction
598 // scss-docs-start utils-border-radius
600 property: border-radius,
603 null: var(--#{$prefix}border-radius),
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),
611 pill: var(--#{$prefix}border-radius-pill)
615 property: border-top-left-radius border-top-right-radius,
617 values: (null: var(--#{$prefix}border-radius))
620 property: border-top-right-radius border-bottom-right-radius,
622 values: (null: var(--#{$prefix}border-radius))
625 property: border-bottom-right-radius border-bottom-left-radius,
626 class: rounded-bottom,
627 values: (null: var(--#{$prefix}border-radius))
630 property: border-bottom-left-radius border-top-left-radius,
631 class: rounded-start,
632 values: (null: var(--#{$prefix}border-radius))
634 // scss-docs-end utils-border-radius
635 // scss-docs-start utils-visibility
637 property: visibility,
644 // scss-docs-end utils-visibility