artistry/src/styl/toggle/toggle.styl

A powerful and configurable stylesheet

@require "toggle-settings.styl";
.toggle {
    display: inline-block;
    margin: $toggle-margin 0;
    padding: 0;
    border: 0;
    .toggle-box {
        box-sizing: content-box;
        position: relative;
        display: block;
        margin: max(0, -1 * $toggle-button-offset);
        padding: 0;
        border: $toggle-border-width solid $toggle-border-color;
        height: $toggle-box-height;
        min-width: $toggle-min-width;
        border-radius: ($toggle-box-height / 2 + $toggle-border-width);
        background-color: $toggle-box-background-color;
        box-shadow: $toggle-box-box-shadow;
        cursor: pointer;
        & > input[type="checkbox"] {
            display: none;
            &:checked + .toggle-button {
                transform: translateX($toggle-min-width - ($toggle-button-height + 2 * ($toggle-button-offset - $toggle-border-width)));
            }
        }
        &:hover {
            & > .toggle-button {
                background-color: $toggle-button-hover-background-color;
                border-color: $toggle-button-hover-border-color;
                box-shadow: $toggle-button-hover-box-shadow;
            }
        }
        &:active {
            & > .toggle-button {
                background-color: $toggle-button-active-background-color;
                border-color: $toggle-button-active-border-color;
            }
        }
        & > .toggle-button {
            box-sizing: content-box;
            position: absolute;
            display: block;
            margin: 0 ($toggle-button-offset - $toggle-border-width);
            padding: 0;
            border: $toggle-border-width solid $toggle-button-border-color;
            height: $toggle-button-height;
            width: $toggle-button-height;
            top: (($toggle-box-height - $toggle-button-height) / 2 - $toggle-border-width);
            border-radius: 50%;
            background-color: $toggle-button-background-color;
            box-shadow: $toggle-button-box-shadow;
            transition: transform 0.3s, box-shadow 0.3s;
            user-select: none;
        }
    }
}