88 lines
1.4 KiB
SCSS
88 lines
1.4 KiB
SCSS
|
@import "colors";
|
||
|
|
@import "constants";
|
||
|
|
|
||
|
|
// Toggle-switch
|
||
|
|
// The switch - the box around
|
||
|
|
.form label.toggle-switch {
|
||
|
|
position: relative;
|
||
|
|
display: inline-block;
|
||
|
|
height: 24px;
|
||
|
|
margin: 0;
|
||
|
|
margin-right: 0.75rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Hide default HTML checkbox
|
||
|
|
.form label.toggle-switch input[type="checkbox"] {
|
||
|
|
opacity: 0;
|
||
|
|
width: 0;
|
||
|
|
height: 0;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
// The control
|
||
|
|
.toggle-switch-control {
|
||
|
|
position: absolute;
|
||
|
|
width: 47px;
|
||
|
|
cursor: pointer;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
bottom: 0;
|
||
|
|
background-color: $border-grey;
|
||
|
|
transition: 0.4s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.toggle-switch-control::before {
|
||
|
|
position: absolute;
|
||
|
|
content: "";
|
||
|
|
height: 20px;
|
||
|
|
width: 20px;
|
||
|
|
left: 2px;
|
||
|
|
bottom: 2px;
|
||
|
|
background-color: $white;
|
||
|
|
transition: 0.4s;
|
||
|
|
}
|
||
|
|
|
||
|
|
input:checked + .toggle-switch-control {
|
||
|
|
background-color: $green;
|
||
|
|
}
|
||
|
|
|
||
|
|
input:focus + .toggle-switch-control {
|
||
|
|
box-shadow: 0 0 1px $green;
|
||
|
|
}
|
||
|
|
|
||
|
|
input:checked + .toggle-switch-control::before {
|
||
|
|
transform: translateX(23px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.toggle-switch-label {
|
||
|
|
margin-left: 47px;
|
||
|
|
font-size: 1rem;
|
||
|
|
font-weight: normal;
|
||
|
|
}
|
||
|
|
|
||
|
|
.toggle-switch-label.on {
|
||
|
|
color: $green;
|
||
|
|
}
|
||
|
|
|
||
|
|
.toggle-switch-label.off {
|
||
|
|
color: $grey;
|
||
|
|
}
|
||
|
|
|
||
|
|
.toggle-switch-checkbox:checked ~ .toggle-switch-label.off {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.toggle-switch-checkbox:not(:checked) ~ .toggle-switch-label.on {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Rounded control
|
||
|
|
.toggle-switch-control.round {
|
||
|
|
border-radius: 24px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.toggle-switch-control.round::before {
|
||
|
|
border-radius: 50%;
|
||
|
|
}
|