infusion/src/components/switch/css/stylus/Switch.styl

Infusion is an application framework for developing flexible stuff with JavaScript

knobSize = 1.8em;
knobMargin = 0.2em;
foregroundColor = currentColor;
backgroundColor = #ffffff;
focusColor = #000000;

.fl-switchUI {
    display: flex;
    justify-content: center;
    align-items: center;
}

.fl-switchUI-control {
    width: knobSize * 3;
    border: 0.15em solid foregroundColor;
    border-radius: knobSize + knobMargin;
    margin: 0 1em;
    display: flex;
    align-items: center;
    background-color: backgroundColor;

    &:focus {
        outline: none;
        box-shadow: 0 0 0 0.2em backgroundColor,
                    0 0 0 0.35em focusColor;
    }

    &[aria-checked=true] {
        justify-content: flex-end;
    }
}

.fl-switchUI-controlKnob {
    height: knobSize;
    width: knobSize;
    background-color: foregroundColor;
    border-radius: knobSize;
    display: inline-block;
    margin: knobMargin;
}

.fl-switchUI-text {
    text-transform: uppercase;
    font-weight: 600;
}