67 lines
1.6 KiB
SCSS
67 lines
1.6 KiB
SCSS
$containerWidth: 42px;
|
|
$containerHeight: 26px;
|
|
$containerRadius: 15px;
|
|
$toggleActiveColor: lighten($seaBlue, 30%);
|
|
$containerShadowActive: 0 2px 2px $gkscale2 inset;
|
|
$containerShadowInactive: 0 2px 2px $gkscale1 inset;
|
|
$backgroundColorInactive: $gscale2;
|
|
$backgroundColorActive: darken($toggleActiveColor, 30%);
|
|
$thumbColorActive: $toggleActiveColor;
|
|
$thumbColorInactive: $gscale7;
|
|
$thumbWidth: 18px;
|
|
$thumbHeight: $thumbWidth;
|
|
$borderSize: 1px;
|
|
$animationSpeed: 0.2s;
|
|
|
|
.toggle {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
|
|
input {
|
|
display: none;
|
|
|
|
&:checked + label {
|
|
background: darken($thumbColorActive, 30%);
|
|
border: $borderSize solid rgba($gscaleF, .1);
|
|
box-shadow: $containerShadowActive;
|
|
|
|
&::after {
|
|
content: "";
|
|
display: block;
|
|
border-radius: 50%;
|
|
margin-left: calc($containerWidth - 21px);
|
|
width: $thumbWidth;
|
|
height: $thumbHeight;
|
|
transition: $animationSpeed;
|
|
background: $thumbColorActive;
|
|
box-shadow: 0 2px darken($thumbColorActive, 40%);
|
|
}
|
|
}
|
|
}
|
|
|
|
label {
|
|
width: $containerWidth + ($borderSize * 2);
|
|
height: $containerHeight;
|
|
border-radius: $containerRadius;
|
|
background: $backgroundColorInactive;
|
|
cursor: pointer;
|
|
border: $borderSize solid rgba($gscaleF, .1);
|
|
box-shadow: $containerShadowInactive;
|
|
|
|
&::after {
|
|
content: "";
|
|
display: block;
|
|
border-radius: 50%;
|
|
width: $thumbWidth;
|
|
height: $thumbHeight;
|
|
margin: 3px;
|
|
background: $thumbColorInactive;
|
|
box-shadow: 0 2px rgba($gkscale5, 0.9);
|
|
transition: $animationSpeed;
|
|
}
|
|
}
|
|
}
|