You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
165 lines
2.8 KiB
165 lines
2.8 KiB
@use '../mixins/var' as *;
|
|
@use '../mixins/function' as *;
|
|
@use '../common/var' as *;
|
|
|
|
@mixin button-plain($type) {
|
|
$button-color-types: (
|
|
'': (
|
|
'text-color': (
|
|
'color',
|
|
$type,
|
|
),
|
|
'bg-color': (
|
|
'color',
|
|
$type,
|
|
'light-9',
|
|
),
|
|
'border-color': (
|
|
'color',
|
|
$type,
|
|
'light-5',
|
|
),
|
|
),
|
|
'hover': (
|
|
'text-color': (
|
|
'color',
|
|
'white',
|
|
),
|
|
'bg-color': (
|
|
'color',
|
|
$type,
|
|
),
|
|
'border-color': (
|
|
'color',
|
|
$type,
|
|
),
|
|
),
|
|
'active': (
|
|
'text-color': (
|
|
'color',
|
|
'white',
|
|
),
|
|
),
|
|
);
|
|
|
|
@each $type, $typeMap in $button-color-types {
|
|
@each $typeColor, $list in $typeMap {
|
|
@include css-var-from-global(('button', $type, $typeColor), $list);
|
|
}
|
|
}
|
|
|
|
&.is-disabled {
|
|
&,
|
|
&:hover,
|
|
&:focus,
|
|
&:active {
|
|
color: getCssVar('color', $type, 'light-5');
|
|
background-color: getCssVar('color', $type, 'light-9');
|
|
border-color: getCssVar('color', $type, 'light-8');
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin button-variant($type) {
|
|
$button-color-types: (
|
|
'': (
|
|
'text-color': (
|
|
'color',
|
|
'white',
|
|
),
|
|
'bg-color': (
|
|
'color',
|
|
$type,
|
|
),
|
|
'border-color': (
|
|
'color',
|
|
$type,
|
|
),
|
|
'outline-color': (
|
|
'color',
|
|
$type,
|
|
'light-5',
|
|
),
|
|
'active-color': (
|
|
'color',
|
|
$type,
|
|
'dark-2',
|
|
),
|
|
),
|
|
'hover': (
|
|
'text-color': (
|
|
'color',
|
|
'white',
|
|
),
|
|
'link-text-color': (
|
|
'color',
|
|
$type,
|
|
'light-5',
|
|
),
|
|
'bg-color': (
|
|
'color',
|
|
$type,
|
|
'light-3',
|
|
),
|
|
'border-color': (
|
|
'color',
|
|
$type,
|
|
'light-3',
|
|
),
|
|
),
|
|
'active': (
|
|
'bg-color': (
|
|
'color',
|
|
$type,
|
|
'dark-2',
|
|
),
|
|
'border-color': (
|
|
'color',
|
|
$type,
|
|
'dark-2',
|
|
),
|
|
),
|
|
'disabled': (
|
|
'text-color': (
|
|
'color',
|
|
'white',
|
|
),
|
|
'bg-color': (
|
|
'color',
|
|
$type,
|
|
'light-5',
|
|
),
|
|
'border-color': (
|
|
'color',
|
|
$type,
|
|
'light-5',
|
|
),
|
|
),
|
|
);
|
|
|
|
@each $type, $typeMap in $button-color-types {
|
|
@each $typeColor, $list in $typeMap {
|
|
@include css-var-from-global(('button', $type, $typeColor), $list);
|
|
}
|
|
}
|
|
|
|
&.is-plain,
|
|
&.is-text,
|
|
&.is-link {
|
|
@include button-plain($type);
|
|
}
|
|
}
|
|
|
|
@mixin button-size(
|
|
$padding-vertical,
|
|
$padding-horizontal,
|
|
$font-size,
|
|
$border-radius
|
|
) {
|
|
padding: $padding-vertical $padding-horizontal;
|
|
font-size: $font-size;
|
|
border-radius: $border-radius;
|
|
&.is-round {
|
|
padding: $padding-vertical $padding-horizontal;
|
|
}
|
|
}
|
|
|