Your IP : 3.21.93.20
// 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: 0.25,
50: 0.5,
75: 0.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: 0.1,
25: 0.25,
50: 0.5,
75: 0.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, 0.5),
// deprecated
'white-50': rgba($white, 0.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: 0.25,
50: 0.5,
75: 0.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: 0.1,
25: 0.25,
50: 0.5,
75: 0.75,
100: 1,
),
),
'link-offset': (
property: text-underline-offset,
class: link-offset,
state: hover,
values: (
1: 0.125em,
2: 0.25em,
3: 0.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: 0.1,
25: 0.25,
50: 0.5,
75: 0.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: 0.1,
25: 0.25,
50: 0.5,
75: 0.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
);