数通智联化工云平台
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

@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;
}
}