233 lines
5.0 KiB
SCSS
233 lines
5.0 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,
|
|
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,
|
|
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,
|
|
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,
|
|
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
|
|
)
|
|
)
|
|
)
|
|
);
|