+++ /dev/null
-// Utilities
-
-$utilities: () !default;
-// stylelint-disable-next-line scss/dollar-variable-default
-$utilities: map-merge(
- (
- // scss-docs-start utils-vertical-align
- "align": (
- property: vertical-align,
- class: align,
- values: baseline top middle bottom text-bottom text-top
- ),
- // scss-docs-end utils-vertical-align
- // scss-docs-start utils-float
- "float": (
- responsive: true,
- property: float,
- values: (
- start: left,
- end: right,
- none: none,
- )
- ),
- // scss-docs-end utils-float
- // Opacity utilities
- // scss-docs-start utils-opacity
- "opacity": (
- property: opacity,
- values: (
- 0: 0,
- 25: .25,
- 50: .5,
- 75: .75,
- 100: 1,
- )
- ),
- // scss-docs-end utils-opacity
- // scss-docs-start utils-overflow
- "overflow": (
- property: overflow,
- values: auto hidden visible scroll,
- ),
- // scss-docs-end utils-overflow
- // scss-docs-start utils-display
- "display": (
- responsive: true,
- print: true,
- property: display,
- class: d,
- values: inline inline-block block grid table table-row table-cell flex inline-flex none
- ),
- // scss-docs-end utils-display
- // scss-docs-start utils-shadow
- "shadow": (
- property: box-shadow,
- class: shadow,
- values: (
- null: $box-shadow,
- sm: $box-shadow-sm,
- lg: $box-shadow-lg,
- none: none,
- )
- ),
- // scss-docs-end utils-shadow
- // scss-docs-start utils-position
- "position": (
- property: position,
- values: static relative absolute fixed sticky
- ),
- "top": (
- property: top,
- values: $position-values
- ),
- "bottom": (
- property: bottom,
- values: $position-values
- ),
- "start": (
- property: left,
- class: start,
- values: $position-values
- ),
- "end": (
- property: right,
- class: end,
- values: $position-values
- ),
- "translate-middle": (
- property: transform,
- class: translate-middle,
- values: (
- null: translate(-50%, -50%),
- x: translateX(-50%),
- y: translateY(-50%),
- )
- ),
- // scss-docs-end utils-position
- // scss-docs-start utils-borders
- "border": (
- property: border,
- values: (
- null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
- 0: 0,
- )
- ),
- "border-top": (
- property: border-top,
- values: (
- null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
- 0: 0,
- )
- ),
- "border-end": (
- property: border-right,
- class: border-end,
- values: (
- null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
- 0: 0,
- )
- ),
- "border-bottom": (
- property: border-bottom,
- values: (
- null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
- 0: 0,
- )
- ),
- "border-start": (
- property: border-left,
- class: border-start,
- values: (
- null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
- 0: 0,
- )
- ),
- "border-color": (
- property: border-color,
- class: border,
- local-vars: (
- "border-opacity": 1
- ),
- values: $utilities-border-colors
- ),
- "border-width": (
- css-var: true,
- css-variable-name: border-width,
- class: border,
- values: $border-widths
- ),
- "border-opacity": (
- css-var: true,
- class: border-opacity,
- values: (
- 10: .1,
- 25: .25,
- 50: .5,
- 75: .75,
- 100: 1
- )
- ),
- // scss-docs-end utils-borders
- // Sizing utilities
- // scss-docs-start utils-sizing
- "width": (
- property: width,
- class: w,
- values: (
- 25: 25%,
- 50: 50%,
- 75: 75%,
- 100: 100%,
- auto: auto
- )
- ),
- "max-width": (
- property: max-width,
- class: mw,
- values: (100: 100%)
- ),
- "viewport-width": (
- property: width,
- class: vw,
- values: (100: 100vw)
- ),
- "min-viewport-width": (
- property: min-width,
- class: min-vw,
- values: (100: 100vw)
- ),
- "height": (
- property: height,
- class: h,
- values: (
- 25: 25%,
- 50: 50%,
- 75: 75%,
- 100: 100%,
- auto: auto
- )
- ),
- "max-height": (
- property: max-height,
- class: mh,
- values: (100: 100%)
- ),
- "viewport-height": (
- property: height,
- class: vh,
- values: (100: 100vh)
- ),
- "min-viewport-height": (
- property: min-height,
- class: min-vh,
- values: (100: 100vh)
- ),
- // scss-docs-end utils-sizing
- // Flex utilities
- // scss-docs-start utils-flex
- "flex": (
- responsive: true,
- property: flex,
- values: (fill: 1 1 auto)
- ),
- "flex-direction": (
- responsive: true,
- property: flex-direction,
- class: flex,
- values: row column row-reverse column-reverse
- ),
- "flex-grow": (
- responsive: true,
- property: flex-grow,
- class: flex,
- values: (
- grow-0: 0,
- grow-1: 1,
- )
- ),
- "flex-shrink": (
- responsive: true,
- property: flex-shrink,
- class: flex,
- values: (
- shrink-0: 0,
- shrink-1: 1,
- )
- ),
- "flex-wrap": (
- responsive: true,
- property: flex-wrap,
- class: flex,
- values: wrap nowrap wrap-reverse
- ),
- "justify-content": (
- responsive: true,
- property: justify-content,
- values: (
- start: flex-start,
- end: flex-end,
- center: center,
- between: space-between,
- around: space-around,
- evenly: space-evenly,
- )
- ),
- "align-items": (
- responsive: true,
- property: align-items,
- values: (
- start: flex-start,
- end: flex-end,
- center: center,
- baseline: baseline,
- stretch: stretch,
- )
- ),
- "align-content": (
- responsive: true,
- property: align-content,
- values: (
- start: flex-start,
- end: flex-end,
- center: center,
- between: space-between,
- around: space-around,
- stretch: stretch,
- )
- ),
- "align-self": (
- responsive: true,
- property: align-self,
- values: (
- auto: auto,
- start: flex-start,
- end: flex-end,
- center: center,
- baseline: baseline,
- stretch: stretch,
- )
- ),
- "order": (
- responsive: true,
- property: order,
- values: (
- first: -1,
- 0: 0,
- 1: 1,
- 2: 2,
- 3: 3,
- 4: 4,
- 5: 5,
- last: 6,
- ),
- ),
- // scss-docs-end utils-flex
- // Margin utilities
- // scss-docs-start utils-spacing
- "margin": (
- responsive: true,
- property: margin,
- class: m,
- values: map-merge($spacers, (auto: auto))
- ),
- "margin-x": (
- responsive: true,
- property: margin-right margin-left,
- class: mx,
- values: map-merge($spacers, (auto: auto))
- ),
- "margin-y": (
- responsive: true,
- property: margin-top margin-bottom,
- class: my,
- values: map-merge($spacers, (auto: auto))
- ),
- "margin-top": (
- responsive: true,
- property: margin-top,
- class: mt,
- values: map-merge($spacers, (auto: auto))
- ),
- "margin-end": (
- responsive: true,
- property: margin-right,
- class: me,
- values: map-merge($spacers, (auto: auto))
- ),
- "margin-bottom": (
- responsive: true,
- property: margin-bottom,
- class: mb,
- values: map-merge($spacers, (auto: auto))
- ),
- "margin-start": (
- responsive: true,
- property: margin-left,
- class: ms,
- values: map-merge($spacers, (auto: auto))
- ),
- // Negative margin utilities
- "negative-margin": (
- responsive: true,
- property: margin,
- class: m,
- values: $negative-spacers
- ),
- "negative-margin-x": (
- responsive: true,
- property: margin-right margin-left,
- class: mx,
- values: $negative-spacers
- ),
- "negative-margin-y": (
- responsive: true,
- property: margin-top margin-bottom,
- class: my,
- values: $negative-spacers
- ),
- "negative-margin-top": (
- responsive: true,
- property: margin-top,
- class: mt,
- values: $negative-spacers
- ),
- "negative-margin-end": (
- responsive: true,
- property: margin-right,
- class: me,
- values: $negative-spacers
- ),
- "negative-margin-bottom": (
- responsive: true,
- property: margin-bottom,
- class: mb,
- values: $negative-spacers
- ),
- "negative-margin-start": (
- responsive: true,
- property: margin-left,
- class: ms,
- values: $negative-spacers
- ),
- // Padding utilities
- "padding": (
- responsive: true,
- property: padding,
- class: p,
- values: $spacers
- ),
- "padding-x": (
- responsive: true,
- property: padding-right padding-left,
- class: px,
- values: $spacers
- ),
- "padding-y": (
- responsive: true,
- property: padding-top padding-bottom,
- class: py,
- values: $spacers
- ),
- "padding-top": (
- responsive: true,
- property: padding-top,
- class: pt,
- values: $spacers
- ),
- "padding-end": (
- responsive: true,
- property: padding-right,
- class: pe,
- values: $spacers
- ),
- "padding-bottom": (
- responsive: true,
- property: padding-bottom,
- class: pb,
- values: $spacers
- ),
- "padding-start": (
- responsive: true,
- property: padding-left,
- class: ps,
- values: $spacers
- ),
- // Gap utility
- "gap": (
- responsive: true,
- property: gap,
- class: gap,
- values: $spacers
- ),
- // scss-docs-end utils-spacing
- // Text
- // scss-docs-start utils-text
- "font-family": (
- property: font-family,
- class: font,
- values: (monospace: var(--#{$prefix}font-monospace))
- ),
- "font-size": (
- rfs: true,
- property: font-size,
- class: fs,
- values: $font-sizes
- ),
- "font-style": (
- property: font-style,
- class: fst,
- values: italic normal
- ),
- "font-weight": (
- property: font-weight,
- class: fw,
- values: (
- light: $font-weight-light,
- lighter: $font-weight-lighter,
- normal: $font-weight-normal,
- bold: $font-weight-bold,
- semibold: $font-weight-semibold,
- bolder: $font-weight-bolder
- )
- ),
- "line-height": (
- property: line-height,
- class: lh,
- values: (
- 1: 1,
- sm: $line-height-sm,
- base: $line-height-base,
- lg: $line-height-lg,
- )
- ),
- "text-align": (
- responsive: true,
- property: text-align,
- class: text,
- values: (
- start: left,
- end: right,
- center: center,
- )
- ),
- "text-decoration": (
- property: text-decoration,
- values: none underline line-through
- ),
- "text-transform": (
- property: text-transform,
- class: text,
- values: lowercase uppercase capitalize
- ),
- "white-space": (
- property: white-space,
- class: text,
- values: (
- wrap: normal,
- nowrap: nowrap,
- )
- ),
- "word-wrap": (
- property: word-wrap word-break,
- class: text,
- values: (break: break-word),
- rtl: false
- ),
- // scss-docs-end utils-text
- // scss-docs-start utils-color
- "color": (
- property: color,
- class: text,
- local-vars: (
- "text-opacity": 1
- ),
- values: map-merge(
- $utilities-text-colors,
- (
- "muted": $text-muted,
- "black-50": rgba($black, .5), // deprecated
- "white-50": rgba($white, .5), // deprecated
- "reset": inherit,
- )
- )
- ),
- "text-opacity": (
- css-var: true,
- class: text-opacity,
- values: (
- 25: .25,
- 50: .5,
- 75: .75,
- 100: 1
- )
- ),
- // scss-docs-end utils-color
- // scss-docs-start utils-bg-color
- "background-color": (
- property: background-color,
- class: bg,
- local-vars: (
- "bg-opacity": 1
- ),
- values: map-merge(
- $utilities-bg-colors,
- (
- "transparent": transparent
- )
- )
- ),
- "bg-opacity": (
- css-var: true,
- class: bg-opacity,
- values: (
- 10: .1,
- 25: .25,
- 50: .5,
- 75: .75,
- 100: 1
- )
- ),
- // scss-docs-end utils-bg-color
- "gradient": (
- property: background-image,
- class: bg,
- values: (gradient: var(--#{$prefix}gradient))
- ),
- // scss-docs-start utils-interaction
- "user-select": (
- property: user-select,
- values: all auto none
- ),
- "pointer-events": (
- property: pointer-events,
- class: pe,
- values: none auto,
- ),
- // scss-docs-end utils-interaction
- // scss-docs-start utils-border-radius
- "rounded": (
- property: border-radius,
- class: rounded,
- values: (
- null: var(--#{$prefix}border-radius),
- 0: 0,
- 1: var(--#{$prefix}border-radius-sm),
- 2: var(--#{$prefix}border-radius),
- 3: var(--#{$prefix}border-radius-lg),
- 4: var(--#{$prefix}border-radius-xl),
- 5: var(--#{$prefix}border-radius-2xl),
- circle: 50%,
- pill: var(--#{$prefix}border-radius-pill)
- )
- ),
- "rounded-top": (
- property: border-top-left-radius border-top-right-radius,
- class: rounded-top,
- values: (null: var(--#{$prefix}border-radius))
- ),
- "rounded-end": (
- property: border-top-right-radius border-bottom-right-radius,
- class: rounded-end,
- values: (null: var(--#{$prefix}border-radius))
- ),
- "rounded-bottom": (
- property: border-bottom-right-radius border-bottom-left-radius,
- class: rounded-bottom,
- values: (null: var(--#{$prefix}border-radius))
- ),
- "rounded-start": (
- property: border-bottom-left-radius border-top-left-radius,
- class: rounded-start,
- values: (null: var(--#{$prefix}border-radius))
- ),
- // scss-docs-end utils-border-radius
- // scss-docs-start utils-visibility
- "visibility": (
- property: visibility,
- class: null,
- values: (
- visible: visible,
- invisible: hidden,
- )
- )
- // scss-docs-end utils-visibility
- ),
- $utilities
-);
Code Review / csit.git / blobdiff