16 lines
1.5 KiB
CSS
16 lines
1.5 KiB
CSS
/* switches.css - tiny, local CSS-only slide switch component */
|
|
:root{--switch-bg:#d1d5db;--switch-on:var(--brand, #2563eb);--switch-knob:#ffffff}
|
|
.switch{display:inline-flex;align-items:center;gap:10px;user-select:none}
|
|
.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;border:0;padding:0;margin:-1px}
|
|
.switch-toggle{position:relative;width:48px;height:28px;display:inline-block}
|
|
.switch-toggle input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;z-index:2;cursor:pointer}
|
|
.switch-toggle .slider{position:absolute;left:0;top:0;right:0;bottom:0;background:var(--switch-bg);border-radius:999px;transition:background .18s ease,box-shadow .18s ease;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.03)}
|
|
.switch-toggle .slider::before{content:"";position:absolute;left:4px;top:4px;width:20px;height:20px;background:var(--switch-knob);border-radius:50%;transition:transform .18s ease,box-shadow .18s ease;box-shadow:0 1px 2px rgba(0,0,0,0.12)}
|
|
.switch-toggle input:checked + .slider{background:var(--switch-on)}
|
|
.switch-toggle input:checked + .slider::before{transform:translateX(20px)}
|
|
.switch-toggle input:focus-visible + .slider{outline:3px solid rgba(37,99,235,0.18);outline-offset:2px}
|
|
.switch-label{font-weight:600;color:var(--text,#111827)}
|
|
.switch-toggle.small{width:36px;height:20px}
|
|
.switch-toggle.small .slider::before{width:12px;height:12px;left:3px;top:3px}
|
|
.switch-toggle.small input:checked + .slider::before{transform:translateX(16px)}
|