35 lines
692 B
SCSS
35 lines
692 B
SCSS
input.switch {
|
|
-webkit-appearance: none;
|
|
width: 34px;
|
|
height: 18px;
|
|
border: 2px solid var(--border-color);
|
|
position: relative;
|
|
border-radius: 50px;
|
|
box-sizing: content-box;
|
|
cursor: pointer;
|
|
transition: background 150ms ease-in-out;
|
|
background: white;
|
|
}
|
|
|
|
input.switch::after {
|
|
top: 2px;
|
|
left: 2px;
|
|
transition: left 150ms ease-in-out;
|
|
content: " ";
|
|
width: 14px;
|
|
height: 14px;
|
|
background: var(--border-color);
|
|
box-shadow: inset 0 0 0px 1px var(--border-color);
|
|
position: absolute;
|
|
border-radius: 50px;
|
|
}
|
|
|
|
input.switch:checked {
|
|
background: var(--secondary);
|
|
}
|
|
|
|
input.switch:checked::after {
|
|
left: calc(100% - 17px);
|
|
background: var(--background);
|
|
}
|