807 lines
19 KiB
SCSS
807 lines
19 KiB
SCSS
// 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
|
|
// Object Fit utilities
|
|
// scss-docs-start utils-object-fit
|
|
"object-fit": (
|
|
responsive: true,
|
|
property: object-fit,
|
|
values: (
|
|
contain: contain,
|
|
cover: cover,
|
|
fill: fill,
|
|
scale: scale-down,
|
|
none: none,
|
|
)
|
|
),
|
|
// scss-docs-end utils-object-fit
|
|
// 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,
|
|
),
|
|
"overflow-x": (
|
|
property: overflow-x,
|
|
values: auto hidden visible scroll,
|
|
),
|
|
"overflow-y": (
|
|
property: overflow-y,
|
|
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 inline-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: var(--#{$prefix}box-shadow),
|
|
sm: var(--#{$prefix}box-shadow-sm),
|
|
lg: var(--#{$prefix}box-shadow-lg),
|
|
none: none,
|
|
)
|
|
),
|
|
// scss-docs-end utils-shadow
|
|
// scss-docs-start utils-focus-ring
|
|
"focus-ring": (
|
|
css-var: true,
|
|
css-variable-name: focus-ring-color,
|
|
class: focus-ring,
|
|
values: map-loop($theme-colors-rgb, rgba-css-var, "$key", "focus-ring")
|
|
),
|
|
// scss-docs-end utils-focus-ring
|
|
// 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
|
|
),
|
|
"subtle-border-color": (
|
|
property: border-color,
|
|
class: border,
|
|
values: $utilities-border-subtle
|
|
),
|
|
"border-width": (
|
|
property: 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
|
|
),
|
|
"row-gap": (
|
|
responsive: true,
|
|
property: row-gap,
|
|
class: row-gap,
|
|
values: $spacers
|
|
),
|
|
"column-gap": (
|
|
responsive: true,
|
|
property: column-gap,
|
|
class: column-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: (
|
|
lighter: $font-weight-lighter,
|
|
light: $font-weight-light,
|
|
normal: $font-weight-normal,
|
|
medium: $font-weight-medium,
|
|
semibold: $font-weight-semibold,
|
|
bold: $font-weight-bold,
|
|
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": var(--#{$prefix}secondary-color), // deprecated
|
|
"black-50": rgba($black, .5), // deprecated
|
|
"white-50": rgba($white, .5), // deprecated
|
|
"body-secondary": var(--#{$prefix}secondary-color),
|
|
"body-tertiary": var(--#{$prefix}tertiary-color),
|
|
"body-emphasis": var(--#{$prefix}emphasis-color),
|
|
"reset": inherit,
|
|
)
|
|
)
|
|
),
|
|
"text-opacity": (
|
|
css-var: true,
|
|
class: text-opacity,
|
|
values: (
|
|
25: .25,
|
|
50: .5,
|
|
75: .75,
|
|
100: 1
|
|
)
|
|
),
|
|
"text-color": (
|
|
property: color,
|
|
class: text,
|
|
values: $utilities-text-emphasis-colors
|
|
),
|
|
// scss-docs-end utils-color
|
|
// scss-docs-start utils-links
|
|
"link-opacity": (
|
|
css-var: true,
|
|
class: link-opacity,
|
|
state: hover,
|
|
values: (
|
|
10: .1,
|
|
25: .25,
|
|
50: .5,
|
|
75: .75,
|
|
100: 1
|
|
)
|
|
),
|
|
"link-offset": (
|
|
property: text-underline-offset,
|
|
class: link-offset,
|
|
state: hover,
|
|
values: (
|
|
1: .125em,
|
|
2: .25em,
|
|
3: .375em,
|
|
)
|
|
),
|
|
"link-underline": (
|
|
property: text-decoration-color,
|
|
class: link-underline,
|
|
local-vars: (
|
|
"link-underline-opacity": 1
|
|
),
|
|
values: map-merge(
|
|
$utilities-links-underline,
|
|
(
|
|
null: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-underline-opacity, 1)),
|
|
)
|
|
)
|
|
),
|
|
"link-underline-opacity": (
|
|
css-var: true,
|
|
class: link-underline-opacity,
|
|
state: hover,
|
|
values: (
|
|
0: 0,
|
|
10: .1,
|
|
25: .25,
|
|
50: .5,
|
|
75: .75,
|
|
100: 1
|
|
),
|
|
),
|
|
// scss-docs-end utils-links
|
|
// 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,
|
|
"body-secondary": rgba(var(--#{$prefix}secondary-bg-rgb), var(--#{$prefix}bg-opacity)),
|
|
"body-tertiary": rgba(var(--#{$prefix}tertiary-bg-rgb), var(--#{$prefix}bg-opacity)),
|
|
)
|
|
)
|
|
),
|
|
"bg-opacity": (
|
|
css-var: true,
|
|
class: bg-opacity,
|
|
values: (
|
|
10: .1,
|
|
25: .25,
|
|
50: .5,
|
|
75: .75,
|
|
100: 1
|
|
)
|
|
),
|
|
"subtle-background-color": (
|
|
property: background-color,
|
|
class: bg,
|
|
values: $utilities-bg-subtle
|
|
),
|
|
// 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-xxl),
|
|
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),
|
|
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-xxl),
|
|
circle: 50%,
|
|
pill: var(--#{$prefix}border-radius-pill)
|
|
)
|
|
),
|
|
"rounded-end": (
|
|
property: border-top-right-radius border-bottom-right-radius,
|
|
class: rounded-end,
|
|
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-xxl),
|
|
circle: 50%,
|
|
pill: var(--#{$prefix}border-radius-pill)
|
|
)
|
|
),
|
|
"rounded-bottom": (
|
|
property: border-bottom-right-radius border-bottom-left-radius,
|
|
class: rounded-bottom,
|
|
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-xxl),
|
|
circle: 50%,
|
|
pill: var(--#{$prefix}border-radius-pill)
|
|
)
|
|
),
|
|
"rounded-start": (
|
|
property: border-bottom-left-radius border-top-left-radius,
|
|
class: rounded-start,
|
|
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-xxl),
|
|
circle: 50%,
|
|
pill: var(--#{$prefix}border-radius-pill)
|
|
)
|
|
),
|
|
// 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
|
|
// scss-docs-start utils-zindex
|
|
"z-index": (
|
|
property: z-index,
|
|
class: z,
|
|
values: $zindex-levels,
|
|
)
|
|
// scss-docs-end utils-zindex
|
|
),
|
|
$utilities
|
|
);
|