99 lines
1.6 KiB
SCSS
99 lines
1.6 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: 15px;
|
|
|
|
margin-bottom: $default-fields-spacer;
|
|
|
|
&.small-margin {
|
|
margin-bottom: $default-spacer;
|
|
}
|
|
|
|
&.no-margin {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
// 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;
|
|
border: 1px solid transparent;
|
|
}
|
|
|
|
.toggle-switch-control::before {
|
|
position: absolute;
|
|
content: "";
|
|
height: 20px;
|
|
width: 20px;
|
|
left: 1px;
|
|
bottom: 1px;
|
|
background-color: $white;
|
|
transition: 0.4s;
|
|
}
|
|
|
|
input:checked + .toggle-switch-control {
|
|
background-color: $green;
|
|
}
|
|
|
|
input:focus + .toggle-switch-control {
|
|
border-color: $blue-france-500;
|
|
box-shadow: 0px 0px 2px 1px $blue-france-500;
|
|
}
|
|
|
|
input:checked + .toggle-switch-control::before {
|
|
transform: translateX(23px);
|
|
}
|
|
|
|
.toggle-switch-label {
|
|
margin-left: 47px;
|
|
font-size: 16px;
|
|
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%;
|
|
}
|