@adobe/spectrum-css
Version:
The Spectrum CSS top-level backwards compatible package
91 lines (73 loc) • 1.74 kB
CSS
.spectrum-ToggleSwitch {
display: -ms-inline-flexbox;
display: inline-flex;
-ms-flex-align: start;
align-items: flex-start;
position: relative;
min-height: 32px;
max-width: 100%;
margin-right: 16px;
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(12px);
}
.spectrum-ToggleSwitch-input:disabled,
.spectrum-ToggleSwitch-input[disabled] {
cursor: default;
}
.spectrum-ToggleSwitch-label {
margin: 0 10px;
font-size: 14px;
transition: color 160ms ease-in-out;
margin-top: 6px;
}
.spectrum-ToggleSwitch-switch {
display: inline-block;
position: relative;
height: 14px;
width: 26px;
margin: 9px 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: 14px;
left: 0;
right: 0;
border-radius: 7px;
}
.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: 14px;
height: 14px;
top: 0;
left: 0;
border-width: 2px;
border-radius: 7px;
border-style: solid;
}