UNPKG

@adobe/spectrum-css

Version:

The Spectrum CSS top-level backwards compatible package

91 lines (73 loc) 1.74 kB
.spectrum-ToggleSwitch { display: -ms-inline-flexbox; display: inline-flex; -ms-flex-align: start; align-items: flex-start; position: relative; min-height: 40px; max-width: 100%; margin-right: 20px; vertical-align: top; } .spectrum-ToggleSwitch-input { margin: 0; box-sizing: border-box; padding: 0; position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: .0001; z-index: 1; cursor: pointer; } .spectrum-ToggleSwitch-input:checked + .spectrum-ToggleSwitch-switch::after { transform: translateX(18px); } .spectrum-ToggleSwitch-input:disabled, .spectrum-ToggleSwitch-input[disabled] { cursor: default; } .spectrum-ToggleSwitch-label { margin: 0 13px; font-size: 17px; transition: color 160ms ease-in-out; margin-top: 8px; } .spectrum-ToggleSwitch-switch { display: inline-block; position: relative; height: 18px; width: 36px; margin: 11px 0; -ms-flex-positive: 0; flex-grow: 0; -ms-flex-negative: 0; flex-shrink: 0; vertical-align: middle; } .spectrum-ToggleSwitch-switch::before, .spectrum-ToggleSwitch-switch::after { display: block; position: absolute; content: ""; box-sizing: border-box; } .spectrum-ToggleSwitch-switch::before { transition: background 130ms ease-in-out, border 130ms ease-in-out; height: 18px; left: 0; right: 0; border-radius: 9px; } .spectrum-ToggleSwitch-switch::after { transition: background 130ms ease-in-out, border 130ms ease-in-out, transform 130ms ease-in-out, box-shadow 130ms ease-in-out; width: 18px; height: 18px; top: 0; left: 0; border-width: 2px; border-radius: 9px; border-style: solid; }