114 lines
2.8 KiB
SCSS
114 lines
2.8 KiB
SCSS
@use "sass:list";
|
|
@use '../../../styles/mixins' as *;
|
|
@use '../../../styles/variables' as *;
|
|
|
|
$button-types: 'filled', 'outlined', 'ghost', 'link';
|
|
$button-colors: 'primary', 'secondary';
|
|
|
|
/* prettier-ignore */
|
|
$button-variants: [
|
|
[
|
|
'primary',
|
|
(
|
|
'color': $color-white,
|
|
'background': $color-green-500,
|
|
'hover-background': $color-green-400,
|
|
'active-background': $color-gray-600,
|
|
)
|
|
],
|
|
[
|
|
'secondary',
|
|
(
|
|
'color': $color-green-500,
|
|
'background': $color-gray-300,
|
|
'hover-background': $color-gray-400,
|
|
'active-background': $color-gray-500,
|
|
)
|
|
]
|
|
];
|
|
|
|
.ui-button {
|
|
$self: &;
|
|
|
|
@include font(16px, 500, 20px);
|
|
|
|
--spinner-size: 20px;
|
|
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 10px;
|
|
position: relative;
|
|
cursor: pointer;
|
|
outline: none;
|
|
|
|
padding: 13px 23px;
|
|
background: var(--button-background, transparent);
|
|
color: var(--button-color, inherit);
|
|
border-radius: 12px;
|
|
width: var(--button-width, unset);
|
|
height: var(--button-height, 48px);
|
|
border: 1px solid var(--button-border-color, transparent);
|
|
white-space: nowrap;
|
|
transition: $transition-duration $transition-easing;
|
|
transition-property: background-color, border-color, color, opacity;
|
|
|
|
&:visited {
|
|
color: var(--button-color, inherit);
|
|
}
|
|
|
|
&:hover,
|
|
&:focus-visible {
|
|
--button-icon-color: var(--button-hover-color, var(--button-color));
|
|
|
|
background: var(--button-hover-background, var(--button-background));
|
|
color: var(--button-hover-color, var(--button-color));
|
|
border-color: var(--button-hover-border-color, transparent);
|
|
}
|
|
|
|
&:active {
|
|
--button-icon-color: var(--button-active-color, var(--button-color));
|
|
|
|
background: var(--button-active-background, var(--button-background));
|
|
color: var(--button-active-color, var(--button-color));
|
|
border-color: var(--button-active-border-color, transparent);
|
|
}
|
|
|
|
&.is-disabled {
|
|
background: var(--button-disabled-background, transparent);
|
|
color: var(--button-disabled-color);
|
|
border-color: var(--button-disabled-border-color, transparent);
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
&__icon {
|
|
color: var(--button-icon-color, inherit);
|
|
line-height: 1;
|
|
transition: color $transition-duration $transition-easing;
|
|
|
|
#{$self}.is-one-icon-only:not(#{$self}--link) & {
|
|
color: inherit;
|
|
}
|
|
}
|
|
|
|
&.is-one-icon-only {
|
|
padding: 0;
|
|
|
|
width: var(--button-width, var(--button-height, 40px));
|
|
}
|
|
|
|
@each $variant in $button-variants {
|
|
$color: list.nth($variant, 1);
|
|
$scheme: list.nth($variant, 2);
|
|
|
|
&--#{$color} {
|
|
@each $property, $value in $scheme {
|
|
--button-#{$property}: var(--button-#{$color}-#{$property});
|
|
}
|
|
}
|
|
|
|
/* prettier-ignore */
|
|
@include element-variant('button', $color, $scheme);
|
|
}
|
|
}
|