257 lines
6.3 KiB
SCSS
257 lines
6.3 KiB
SCSS
$utilities: map-merge(
|
|
$utilities,
|
|
(
|
|
"display": (
|
|
responsive: true,
|
|
print: true,
|
|
property: display,
|
|
class: d,
|
|
values: inline inline-block block grid inline-grid table table-row
|
|
table-cell contents flex inline-flex none,
|
|
),
|
|
"color":
|
|
map-merge(
|
|
map-get($utilities, "color"),
|
|
(
|
|
values:
|
|
map-merge(
|
|
map-get(map-get($utilities, "color"), "values"),
|
|
($all-colors)
|
|
),
|
|
)
|
|
),
|
|
"text-wrap": (
|
|
property: "text-wrap",
|
|
values: wrap nowrap pretty stable balance,
|
|
class: "text-wrap",
|
|
),
|
|
"font-family": (
|
|
property: "font-family",
|
|
values: (
|
|
"sans": $headings-font-family,
|
|
"serif": $font-family-base,
|
|
"serif-alt": $display-font-family,
|
|
"mono": $font-family-code,
|
|
),
|
|
class: "font-family",
|
|
),
|
|
"font-weight": (
|
|
property: font-weight,
|
|
class: fw,
|
|
values: (
|
|
light: $font-weight-light,
|
|
lighter: $font-weight-lighter,
|
|
normal: $font-weight-normal,
|
|
bold: $font-weight-bold,
|
|
bolder: $font-weight-bolder,
|
|
black: $font-weight-black,
|
|
),
|
|
),
|
|
"width": (
|
|
property: width,
|
|
responsive: true,
|
|
class: w,
|
|
values: (
|
|
0: 0,
|
|
1: $spacer * 0.25,
|
|
2: $spacer * 0.5,
|
|
3: $spacer,
|
|
4: $spacer * 1.5,
|
|
5: $spacer * 3,
|
|
6: $spacer * 6,
|
|
25: 25%,
|
|
50: 50%,
|
|
75: 75%,
|
|
100: 100%,
|
|
auto: auto,
|
|
),
|
|
),
|
|
"height": (
|
|
property: height,
|
|
responsive: true,
|
|
class: h,
|
|
values: (
|
|
0: 0,
|
|
1: $spacer * 0.25,
|
|
2: $spacer * 0.5,
|
|
3: $spacer,
|
|
4: $spacer * 1.5,
|
|
5: $spacer * 3,
|
|
6: $spacer * 6,
|
|
25: 25%,
|
|
50: 50%,
|
|
75: 75%,
|
|
100: 100%,
|
|
auto: auto,
|
|
),
|
|
),
|
|
"inset": (
|
|
property: inset,
|
|
class: inset,
|
|
values: (
|
|
0: 0,
|
|
1: $spacer * 0.25,
|
|
2: $spacer * 0.5,
|
|
3: $spacer,
|
|
4: $spacer * 1.5,
|
|
5: $spacer * 3,
|
|
25: 25%,
|
|
50: 50%,
|
|
75: 75%,
|
|
100: 100%,
|
|
auto: auto,
|
|
),
|
|
),
|
|
"rounded-tl": (
|
|
property: border-top-left-radius,
|
|
responsive: true,
|
|
class: rounded-tl,
|
|
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-bl": (
|
|
property: border-bottom-left-radius,
|
|
responsive: true,
|
|
class: rounded-bl,
|
|
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-tr": (
|
|
property: border-top-right-radius,
|
|
responsive: true,
|
|
class: rounded-tr,
|
|
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-br": (
|
|
property: border-bottom-right-radius,
|
|
responsive: true,
|
|
class: rounded-br,
|
|
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),
|
|
),
|
|
),
|
|
"overflow": (
|
|
class: overflow,
|
|
property: overflow,
|
|
responsive: true,
|
|
values: hidden visible clip scroll auto,
|
|
),
|
|
"overflow-x": (
|
|
class: overflow-x,
|
|
property: overflow-x,
|
|
responsive: true,
|
|
values: hidden visible clip scroll auto,
|
|
),
|
|
"overflow-y": (
|
|
class: overflow-y,
|
|
property: overflow-y,
|
|
responsive: true,
|
|
values: hidden visible clip scroll auto,
|
|
),
|
|
"position": (
|
|
property: position,
|
|
responsive: true,
|
|
values: static relative absolute fixed sticky,
|
|
),
|
|
"border": (
|
|
property: border,
|
|
responsive: true,
|
|
values: (
|
|
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
|
|
var(--#{$prefix}border-color),
|
|
0: 0,
|
|
),
|
|
),
|
|
"border-top": (
|
|
property: border-top,
|
|
responsive: true,
|
|
values: (
|
|
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
|
|
var(--#{$prefix}border-color),
|
|
0: 0,
|
|
),
|
|
),
|
|
"border-end": (
|
|
property: border-right,
|
|
responsive: true,
|
|
class: border-end,
|
|
values: (
|
|
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
|
|
var(--#{$prefix}border-color),
|
|
0: 0,
|
|
),
|
|
),
|
|
"border-bottom": (
|
|
property: border-bottom,
|
|
responsive: true,
|
|
values: (
|
|
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
|
|
var(--#{$prefix}border-color),
|
|
0: 0,
|
|
),
|
|
),
|
|
"border-start": (
|
|
property: border-left,
|
|
responsive: true,
|
|
class: border-start,
|
|
values: (
|
|
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
|
|
var(--#{$prefix}border-color),
|
|
0: 0,
|
|
),
|
|
),
|
|
"ratio": (
|
|
property: aspect-ratio,
|
|
responsive: true,
|
|
class: ratio,
|
|
values: (
|
|
null: unset,
|
|
3x2: math.div(3, 2),
|
|
2x3: math.div(2, 3),
|
|
4x3: math.div(4, 3),
|
|
3x4: math.div(3, 4),
|
|
16x9: math.div(16, 9),
|
|
6x16: math.div(9, 16),
|
|
21x9: math.div(21, 9),
|
|
9x21: math.div(9, 21),
|
|
),
|
|
),
|
|
)
|
|
);
|