161 lines
3.9 KiB
SCSS
161 lines
3.9 KiB
SCSS
@import "../../../css/static/properties";
|
|
@import "../../../css/static/mixin";
|
|
|
|
html:root {
|
|
--switch-background: #1c1c1c;
|
|
|
|
--switch-thumb-background: #3d3a3a;
|
|
--switch-thumb-shadow: rgba(0, 0, 0, 0.27);
|
|
|
|
--switch-dot-background: #a5a5a5;
|
|
--switch-dot-shadow: rgba(165, 165, 165, 0.4);
|
|
|
|
--switch-dot-checked-background: #46c0ec;
|
|
--switch-dot-checked-shadow: #46c0ec;
|
|
|
|
--switch-thumb-disabled-background: #252424;
|
|
--switch-thumb-disabled-shadow: #2f2d2d;
|
|
|
|
--switch-dot-disabled-background: #808080;
|
|
--switch-dot-disabled-shadow: rgba(102, 102, 102, 0.4);
|
|
|
|
--switch-dot-checked-disabled-background: #138db9;
|
|
--switch-dot-checked-disabled-shadow: #138db9;
|
|
}
|
|
|
|
/* general switch look */
|
|
.switch {
|
|
$ball_outer_width: 1.5em; /* 1.5? */
|
|
$ball_inner_width: .4em;
|
|
|
|
$slider_height: .8em;
|
|
$slider_width: 2em;
|
|
|
|
$slider_border_size: .1em;
|
|
|
|
position: relative;
|
|
display: inline-block;
|
|
outline: none;
|
|
|
|
width: $slider_width;
|
|
height: $slider_height;
|
|
|
|
/* "allocate" space for the slider */
|
|
margin-top: ($ball_outer_width - $slider_height) / 2;
|
|
margin-bottom: ($ball_outer_width - $slider_height) / 2;
|
|
margin-left: $ball_outer_width / 2;
|
|
margin-right: $ball_outer_width / 2;
|
|
|
|
/* fix size */
|
|
flex-shrink: 0;
|
|
flex-grow: 0;
|
|
|
|
input {
|
|
/* "hide" the actual input node */
|
|
opacity: 0;
|
|
width: 0;
|
|
height: 0;
|
|
outline: none;
|
|
}
|
|
|
|
.slider {
|
|
pointer-events: all!important;
|
|
position: absolute;
|
|
cursor: pointer;
|
|
outline: none;
|
|
|
|
top: -$slider_border_size;
|
|
left: -$slider_border_size;
|
|
right: -$slider_border_size;
|
|
bottom: -$slider_border_size;
|
|
|
|
background-color: var(--switch-background);
|
|
|
|
border: $slider_border_size solid #262628;
|
|
border-radius: 5px;
|
|
|
|
&:before {
|
|
position: absolute;
|
|
content: "";
|
|
|
|
height: $ball_outer_width;
|
|
width: $ball_outer_width;
|
|
|
|
left: - $ball_outer_width / 2;
|
|
bottom: -($ball_outer_width - $slider_height) / 2;
|
|
|
|
background-color: var(--switch-thumb-background);
|
|
|
|
@include transition(.4s);
|
|
border-radius: 50%;
|
|
|
|
box-shadow: 0 0 .2em 1px var(--switch-thumb-shadow);
|
|
}
|
|
|
|
.dot {
|
|
position: absolute;
|
|
|
|
height: $ball_inner_width;
|
|
width: $ball_inner_width;
|
|
|
|
left: -($ball_inner_width / 2);
|
|
bottom: $slider_height / 2 - $ball_inner_width / 2;
|
|
|
|
background-color: var(--switch-dot-background);
|
|
box-shadow: 0 0 1em 1px var(--switch-dot-shadow);
|
|
border-radius: 50%;
|
|
|
|
@include transition(.4s);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
input:focus + .slider {
|
|
}
|
|
|
|
input:checked + .slider {
|
|
&:before {
|
|
@include transform(translateX($slider_width));
|
|
}
|
|
|
|
.dot {
|
|
@include transform(translateX($slider_width));
|
|
background-color: var(--switch-dot-checked-background);
|
|
box-shadow: 0 0 1em 1px var(--switch-dot-checked-shadow);
|
|
}
|
|
}
|
|
}
|
|
|
|
.container {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-start;
|
|
|
|
|
|
.label {
|
|
margin-left: .25em;
|
|
}
|
|
|
|
&.disabled {
|
|
.dot {
|
|
background-color: var(--switch-dot-disabled-background);
|
|
box-shadow: 0 0 1em 1px var(--switch-dot-disabled-shadow);
|
|
}
|
|
|
|
input:checked + .slider {
|
|
.dot {
|
|
background-color: var(--switch-dot-checked-disabled-background);
|
|
box-shadow: 0 0 1em 1px var(--switch-dot-checked-disabled-shadow);
|
|
}
|
|
}
|
|
|
|
.slider {
|
|
background-color: var(--switch-thumb-disabled-background);
|
|
}
|
|
|
|
.slider:before {
|
|
background-color: var(--switch-thumb-disabled-shadow);
|
|
}
|
|
}
|
|
} |