93 lines
2.2 KiB
SCSS
93 lines
2.2 KiB
SCSS
@use '../../styles/mixins' as *;
|
|
@use '../../styles/variables' as *;
|
|
|
|
.ui-switch {
|
|
$self: &;
|
|
|
|
display: inline-flex;
|
|
|
|
&__control {
|
|
position: relative;
|
|
border-radius: 5px;
|
|
background: var(--switch-background);
|
|
width: 28px;
|
|
height: 10px;
|
|
cursor: pointer;
|
|
transition: background 0.2s ease;
|
|
outline: none;
|
|
|
|
#{$self}.is-loading & {
|
|
cursor: wait;
|
|
}
|
|
|
|
#{$self}.is-disabled & {
|
|
cursor: not-allowed;
|
|
background-color: var(--switch-disabled-background);
|
|
}
|
|
}
|
|
|
|
&__input {
|
|
position: absolute;
|
|
width: 0;
|
|
height: 0;
|
|
opacity: 0;
|
|
margin: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
&__action {
|
|
--action-size: var(--switch-action-size, 16px);
|
|
|
|
position: absolute;
|
|
top: -3px;
|
|
left: 0;
|
|
width: var(--action-size);
|
|
height: var(--action-size);
|
|
background: var(--switch-off-action-background);
|
|
border-radius: 50%;
|
|
transition: .2s ease;
|
|
transition-property: background-color, left;
|
|
|
|
#{$self}.is-focused &,
|
|
#{$self}__control:hover & {
|
|
background: var(--switch-off-action-hover-background);
|
|
}
|
|
|
|
#{$self}.is-checked & {
|
|
background: var(--switch-on-action-background);
|
|
left: calc(100% - var(--action-size));
|
|
}
|
|
|
|
#{$self}:not(.is-disabled).is-checked.is-focused &,
|
|
#{$self}:not(.is-disabled).is-checked #{$self}__control:hover & {
|
|
background-color: var(--switch-on-action-hover-background);
|
|
}
|
|
|
|
#{$self}.is-disabled & {
|
|
background-color: var(--switch-off-action-disabled-background);
|
|
}
|
|
|
|
#{$self}.is-disabled.is-checked & {
|
|
background-color: var(--switch-on-action-disabled-background);
|
|
}
|
|
}
|
|
|
|
&__spinner {
|
|
--spinner-size: 12px;
|
|
--spinner-color: #{$clr-white};
|
|
|
|
margin: 2px;
|
|
}
|
|
|
|
/* prettier-ignore */
|
|
@include element-variant('switch', '', (
|
|
'background': $clr-grey-300,
|
|
'disabled-background': $clr-grey-200,
|
|
'off-action-background': $clr-grey-400,
|
|
'off-action-hover-background': $clr-grey-500,
|
|
'off-action-disabled-background': $clr-grey-300,
|
|
'on-action-background': $clr-cyan-500,
|
|
'on-action-hover-background': $clr-cyan-400,
|
|
'on-action-disabled-background': $clr-cyan-300
|
|
));
|
|
} |