49 lines
1.0 KiB
SCSS
49 lines
1.0 KiB
SCSS
$ui-switch-marker-size: .7rem;
|
|
$ui-switch-spacing: 1px;
|
|
$ui-switch-duration: 150ms;
|
|
$ui-switch-width-factor: 2.25;
|
|
|
|
.ui-switch {
|
|
padding: 3px;
|
|
}
|
|
|
|
.ui-switch__checkbox {
|
|
display: none;
|
|
}
|
|
|
|
.ui-switch__track {
|
|
border: 1px solid $dark;
|
|
border-radius: $ui-switch-marker-size;
|
|
padding: $ui-switch-spacing;
|
|
width: $ui-switch-width-factor * $ui-switch-marker-size;
|
|
height: $ui-switch-marker-size;
|
|
position: relative;
|
|
box-sizing: content-box;
|
|
background: white;
|
|
transition: background-color $ui-switch-duration ease-in-out;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.ui-switch__thumb {
|
|
border-radius: 100%;
|
|
width: $ui-switch-marker-size;
|
|
height: $ui-switch-marker-size;
|
|
background: $dark;
|
|
position: absolute;
|
|
transition: all $ui-switch-duration ease-in-out;
|
|
transition-property: background-color, left;
|
|
margin-left: $ui-switch-spacing;
|
|
left: 0;
|
|
}
|
|
|
|
.ui-switch--checked {
|
|
.ui-switch__thumb {
|
|
background: white;
|
|
left: ($ui-switch-width-factor - 1) * $ui-switch-marker-size;
|
|
}
|
|
|
|
.ui-switch__track {
|
|
background: $dark;
|
|
}
|
|
}
|