365 lines
9.6 KiB
SCSS
365 lines
9.6 KiB
SCSS
/* -------------------------------------------------------------------------- */
|
|
/* Utilities */
|
|
/* -------------------------------------------------------------------------- */
|
|
|
|
$utilities: () !default;
|
|
$utilities: map_merge(
|
|
(
|
|
'opacity': (
|
|
property: opacity,
|
|
responsive: true,
|
|
values: (
|
|
0: 0,
|
|
25: 0.25,
|
|
50: 0.5,
|
|
75: 0.75,
|
|
85: 0.85,
|
|
100: 1
|
|
)
|
|
),
|
|
'position': (
|
|
property: position,
|
|
responsive: true,
|
|
values: static relative absolute fixed sticky
|
|
),
|
|
'translate-middle': (
|
|
property: transform,
|
|
responsive: true,
|
|
class: translate-middle,
|
|
values: (
|
|
null: translate(-50%, -50%),
|
|
x: translateX(-50%),
|
|
y: translateY(-50%)
|
|
)
|
|
),
|
|
'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,
|
|
class: border-end,
|
|
responsive: true,
|
|
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
|
|
)
|
|
),
|
|
'border-color': false,
|
|
// Preventing bootstrap to generate border colors
|
|
'subtle-border-color': false,
|
|
// Preventing bootstrap to generate border subtle colors
|
|
'border-opacity': false,
|
|
// Preventing bootstrap to generate border opacity
|
|
'width':
|
|
(
|
|
property: width,
|
|
responsive: true,
|
|
class: w,
|
|
values: $sizes
|
|
),
|
|
'height': (
|
|
property: height,
|
|
class: h,
|
|
responsive: true,
|
|
values: $sizes
|
|
),
|
|
'viewport-height': (
|
|
property: height,
|
|
class: vh,
|
|
values: $viewport-heights
|
|
),
|
|
'min-viewport-height': (
|
|
property: min-height,
|
|
class: min-vh,
|
|
values: $viewport-heights
|
|
),
|
|
'font-size': (
|
|
property: font-size,
|
|
class: fs,
|
|
responsive: true,
|
|
values: $font-sizes
|
|
),
|
|
'font-weight': (
|
|
property: font-weight,
|
|
class: fw,
|
|
values: (
|
|
thin: $font-weight-thin,
|
|
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,
|
|
'black': $font-weight-black
|
|
)
|
|
),
|
|
'text-transform': (
|
|
property: text-transform,
|
|
class: text,
|
|
values: (
|
|
lowercase: lowercase,
|
|
uppercase: uppercase,
|
|
capitalize: capitalize,
|
|
transform-none: none
|
|
)
|
|
),
|
|
'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':
|
|
rgba(
|
|
var(--#{$prefix}secondary-color-rgb),
|
|
var(--#{$prefix}text-opacity)
|
|
),
|
|
'body-tertiary':
|
|
rgba(
|
|
var(--#{$prefix}tertiary-color-rgb),
|
|
var(--#{$prefix}text-opacity)
|
|
),
|
|
'body-quaternary':
|
|
rgba(
|
|
var(--#{$prefix}quaternary-color-rgb),
|
|
var(--#{$prefix}text-opacity)
|
|
),
|
|
'body-emphasis': var(--#{$prefix}emphasis-color),
|
|
'reset': inherit,
|
|
'body-highlight':
|
|
rgba(
|
|
var(--#{$prefix}body-highlight-color-rgb),
|
|
var(--#{$prefix}text-opacity)
|
|
)
|
|
)
|
|
)
|
|
),
|
|
'text-opacity': (
|
|
css-var: true,
|
|
class: text-opacity,
|
|
values: $text-opacities
|
|
),
|
|
'background-color': (
|
|
property: background-color,
|
|
class: bg,
|
|
local-vars: (
|
|
'bg-opacity': 1
|
|
),
|
|
values:
|
|
map-merge(
|
|
$utilities-bg-colors,
|
|
(
|
|
'transparent': transparent,
|
|
'body-emphasis':
|
|
rgba(
|
|
var(--#{$prefix}emphasis-bg-rgb),
|
|
var(--#{$prefix}bg-opacity)
|
|
),
|
|
'body-secondary':
|
|
rgba(
|
|
var(--#{$prefix}secondary-bg-rgb),
|
|
var(--#{$prefix}bg-opacity)
|
|
),
|
|
'body-tertiary':
|
|
rgba(
|
|
var(--#{$prefix}tertiary-bg-rgb),
|
|
var(--#{$prefix}bg-opacity)
|
|
),
|
|
'body-quaternary':
|
|
rgba(
|
|
var(--#{$prefix}quaternary-bg-rgb),
|
|
var(--#{$prefix}bg-opacity)
|
|
),
|
|
'body-highlight':
|
|
rgba(
|
|
var(--#{$prefix}body-highlight-bg-rgb),
|
|
var(--#{$prefix}bg-opacity)
|
|
)
|
|
)
|
|
)
|
|
),
|
|
'bg-opacity': (
|
|
css-var: true,
|
|
class: bg-opacity,
|
|
values: $bg-opacities
|
|
),
|
|
// ----------- border radius --------------
|
|
“rounded”:
|
|
(
|
|
property: border-radius,
|
|
responsive: true,
|
|
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,
|
|
responsive: true,
|
|
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,
|
|
responsive: true,
|
|
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,
|
|
responsive: true,
|
|
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,
|
|
responsive: true,
|
|
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)
|
|
)
|
|
),
|
|
// ----------- phoenix specific starts --------------
|
|
'border-x':
|
|
(
|
|
property: border-left border-right,
|
|
class: border-x,
|
|
values: (
|
|
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
|
|
var(--#{$prefix}border-color),
|
|
0: 0
|
|
)
|
|
),
|
|
'border-y': (
|
|
property: border-top border-bottom,
|
|
class: border-y,
|
|
values: (
|
|
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
|
|
var(--#{$prefix}border-color),
|
|
0: 0
|
|
)
|
|
),
|
|
'letter-spacing': (
|
|
property: letter-spacing,
|
|
class: ls,
|
|
values: (
|
|
1: 1,
|
|
2: 0.165em,
|
|
3: 0.25em
|
|
)
|
|
),
|
|
'column-count': (
|
|
property: column-count,
|
|
class: column,
|
|
responsive: true,
|
|
values: (
|
|
1: 1,
|
|
2: 2,
|
|
3: 3
|
|
)
|
|
),
|
|
'cursor': (
|
|
property: cursor,
|
|
class: cursor,
|
|
values: (
|
|
pointer: pointer,
|
|
default: default
|
|
)
|
|
),
|
|
// ----------- phoenix specific ends --------------
|
|
),
|
|
$utilities
|
|
);
|