getlackey/lackey-cms

[data-lky-switch] {
    span {
        display: block;
        position: relative;
        cursor: pointer;
        outline: none;
        user-select: none;
        width: #{$switch-width * 2};
        height: $switch-height;
        background-color: #dddddd;
        border-radius: $switch-width;
    }
    span:before,
    span:after {
        display: block;
        position: absolute;
        top: 1px;
        left: 1px;
        bottom: 1px;
        content: "";
    }
    span:before {
        right: 1px;
        background-color: #f1f1f1;
        border-radius: $switch-width;
        transition: background 0.4s;
    }
    span:after {
        width: #{$switch-width - 2px};
        background-color: #fff;
        border-radius: 100%;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
        transition: margin 0.4s;
    }
    input {
        position: absolute;
        margin-left: -9999px;
        visibility: hidden;
    }
    input:checked + span:before {
        background-color: $color-background-highlight;
    }
    input:checked + span:after {
        margin-left: $switch-width;
    }
}