@evilcss/std/switch.classes.css

Awesome CSS design system and UI widgets

.std-switch {
    --switch-display--default: inline-flex;
    --switch-width--default: 2em;
    --switch-height--default: 1em;
    --switch-radius--default: var(--switch-height, var(--switch-height--default));
    --switch-gap--default: .2em;
    --switch-background--default: ButtonFace;
    --switch-background--checked--default: AccentColor;
    --switch-shadow-inset--default: 0 0 2px 0 hsl(0deg 0% 0% / .2);
    --switch-duration--default: var(--std-duration2);

    --knob-container-size: var(--switch-width, var(--switch-width--default));
    --knob-shift: calc((var(--knob-container-size) / 2) - 50%);

    box-sizing: content-box;
    display: var(--switch-display, var(--switch-display--default));
    justify-content: center;
    align-items: center;
    min-width: var(--switch-width, var(--switch-width--default));
    width: var(--switch-width, var(--switch-width--default));
    max-width: var(--switch-width, var(--switch-width--default));
    min-height: var(--switch-height, var(--switch-height--default));
    height: var(--switch-height, var(--switch-height--default));
    max-height: var(--switch-height, var(--switch-height--default));
    flex-shrink: 0;
    border-radius: var(--switch-radius, var(--switch-radius--default));
    padding: var(--switch-gap, var(--switch-gap--default));
    background: var(--switch-background, var(--switch-background--default));
    box-shadow: inset var(--switch-shadow-inset, var(--switch-shadow-inset--default));
    cursor: pointer;
}
.std-switch[aria-checked="true"] {
    background: var(--switch-background--checked, var(--switch-background--checked--default));
}

.std-switch,
.std-switch .std-knob,
.std-switch.std-knob::after {
    transition: all var(--switch-duration, var(--switch-duration--default));
}

.std-switch .std-knob,
.std-switch.std-knob::after {
    transform: translateX(calc(var(--knob-direction) * var(--knob-shift)));
}
.std-switch[aria-checked="false"] .std-knob,
.std-switch[aria-checked="false"].std-knob::after {
    --knob-direction: -1;
}
.std-switch[aria-checked="true"] .std-knob,
.std-switch[aria-checked="true"].std-knob::after {
    --knob-direction: 1;
}

.std-switch.std-knob {
    --knob-size--default: 1em;
    --knob-border-size--default: 0px;
    --knob-border-color--default: transparent;
    --knob-radius--default: var(--switch-height, var(--switch-height--default));
    --knob-background--default: ButtonText;
    --knob-background--active--default: ButtonText;
    --knob-background--hover--default: ButtonText;
    --knob-shadow--default: 0 0 3px 0 hsl(0deg 0% 0% / .2);
}
.std-switch.std-knob::after {
    content: '';
    box-sizing: border-box;
    display: inline-block;
    width: var(--knob-width, var(--knob-width--default, var(--knob-size, var(--knob-size--default))));
    height: var(--knob-height, var(--knob-height--default, var(--knob-size, var(--knob-size--default))));
    border-width: var(--knob-border-size, var(--knob-border-size--default));
    border-style: solid;
    border-color: var(--knob-border-color, var(--knob-border-color--default));
    border-radius: var(--knob-radius, var(--knob-radius--default));
    background: var(--knob-background, var(--knob-background--default));
    box-shadow: var(--knob-shadow, var(--knob-shadow--default));
}
.std-switch.std-knob:hover::after {
    background: var(--knob-background--hover, var(--knob-background--hover--default));
}
.std-switch.std-knob:active::after {
    background: var(--knob-background--active, var(--knob-background--active--default));
}