43 lines
1002 B
CSS
43 lines
1002 B
CSS
/* ----- Toggle Switch ----- */
|
|
/* round() FF118, Ch125 */
|
|
.toggle {
|
|
--toggle-dot: 12px;
|
|
--toggle-dot-margin: 1px;
|
|
--toggle-wh-ratio: 2.4;
|
|
--toggle-w: calc(var(--toggle-dot) * var(--toggle-wh-ratio) + var(--toggle-dot-margin) * 2);
|
|
--toggle-h: calc(var(--toggle-dot) + var(--toggle-dot-margin) * 2);
|
|
--toggle-trans: calc(var(--toggle-w) - var(--toggle-h));
|
|
|
|
appearance: none;
|
|
width: var(--toggle-w);
|
|
height: var(--toggle-h);
|
|
position: relative;
|
|
border-radius: 50px;
|
|
background-color: #ccc;
|
|
transition: background-color 0.5s;
|
|
}
|
|
|
|
.toggle::before {
|
|
content: '';
|
|
display: block;
|
|
margin: var(--toggle-dot-margin);
|
|
width: var(--toggle-dot);
|
|
height: var(--toggle-dot);
|
|
background-color: #fff;
|
|
border-radius: 50%;
|
|
color: #fff;
|
|
transition: 0.5s;
|
|
}
|
|
|
|
.toggle:checked {
|
|
background-color: var(--btn-bg);
|
|
}
|
|
|
|
.toggle:checked::before {
|
|
transform: translateX(var(--toggle-trans));
|
|
}
|
|
|
|
/* smaller toggle switch for patterns */
|
|
.pattern-row .toggle {
|
|
--toggle-dot: 10px;
|
|
} |