35 lines
652 B
CSS
35 lines
652 B
CSS
input.switch {
|
|
-webkit-appearance: none;
|
|
width: 34px;
|
|
height: 18px;
|
|
border: 1px solid var(--p40);
|
|
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(--p40);
|
|
box-shadow: inset 0 0 0px 1px var(--p40);
|
|
position: absolute;
|
|
border-radius: 50px;
|
|
}
|
|
|
|
input.switch:checked {
|
|
background: var(--p50);
|
|
}
|
|
|
|
input.switch:checked::after {
|
|
left: calc(100% - 17px);
|
|
background: var(--p10);
|
|
}
|