kopia lustrzana https://github.com/wagtail/wagtail
110 wiersze
2.8 KiB
SCSS
110 wiersze
2.8 KiB
SCSS
@use "sass:math";
|
|
|
|
$switch-width: 40px;
|
|
$switch-height: 20px;
|
|
$switch-border: 2px;
|
|
$switch-outline: 3px;
|
|
|
|
$switch-border-radius: math.div(($switch-height + $switch-border * 2), 2);
|
|
$switch-outline-radius: $switch-border-radius + $switch-outline;
|
|
|
|
// All the greys in Wagtail are really dark or really bright
|
|
$switch-color-middle-grey: #777;
|
|
|
|
.switch {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
margin: 5px 0;
|
|
|
|
// Disable forms styling that's applied to the <label> tag
|
|
width: unset;
|
|
float: unset;
|
|
|
|
&__toggle {
|
|
position: relative;
|
|
cursor: pointer;
|
|
|
|
&::before,
|
|
&::after {
|
|
content: '';
|
|
transition: all 100ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
display: block;
|
|
}
|
|
|
|
&::before {
|
|
height: $switch-height;
|
|
width: $switch-width;
|
|
border-radius: $switch-border-radius;
|
|
background: $switch-color-middle-grey;
|
|
border: $switch-border solid $switch-color-middle-grey;
|
|
}
|
|
|
|
&::after {
|
|
box-sizing: border-box;
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translate($switch-border, -50%);
|
|
height: $switch-height;
|
|
width: $switch-height;
|
|
border: $switch-border solid $color-white;
|
|
border-radius: 50%;
|
|
background-color: $color-white;
|
|
}
|
|
}
|
|
|
|
[type=checkbox]:checked + &__toggle::before {
|
|
background: $color-teal;
|
|
border-color: $color-teal;
|
|
}
|
|
|
|
[type=checkbox]:checked + &__toggle::after {
|
|
transform: translate(calc(#{$switch-width} + #{$switch-border} - 100%), -50%);
|
|
}
|
|
|
|
[type=checkbox]:disabled + &__toggle {
|
|
cursor: not-allowed;
|
|
filter: grayscale(100%);
|
|
opacity: 0.3;
|
|
}
|
|
|
|
[type=checkbox]:disabled + &__toggle::after {
|
|
opacity: 0.5;
|
|
box-shadow: none;
|
|
}
|
|
|
|
[type=checkbox]:focus + &__toggle {
|
|
outline: $color-focus-outline solid $switch-outline;
|
|
-moz-outline-radius: $switch-outline-radius;
|
|
}
|
|
|
|
[type=checkbox] {
|
|
position: absolute;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
// Colour changes for when displaying on teal background
|
|
&--teal-background {
|
|
$background: #03b0b1;
|
|
|
|
.switch__toggle {
|
|
&::before {
|
|
background-color: #b9b9b9;
|
|
border: $switch-border solid #b9b9b9;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
&::after {
|
|
background-color: $color-white;
|
|
}
|
|
}
|
|
|
|
[type=checkbox]:checked + .switch__toggle::before {
|
|
// Override the white-background styling
|
|
background-color: $background;
|
|
border-color: $background;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|