lu2/theme/pure/css/common/ui/Switch.css

Simple and flexible UI component library based on native HTML and JavaScript

@charset "UTF-8";
/**
 *
 * @Switch.css
 * @author zhangxinxu
 * @create 15-06-18
 * @edit     17-06-14    keyboard accessible
**/
.ui-switch {
    display: inline-block;
    width: 44px; height: 26px;
    border: 2px solid;
    border-radius: 26px;
    background-color: currentColor;
    box-sizing: border-box;
    color: #b6bbc6;
    font-size: 0;
    transition: all .2s;
    cursor: pointer;
    /* UE better */
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.ui-switch::before {
    content: '';
    display: block;
    width: 22px; height: 22px;
    border-radius: 50%;
    background-color: #fff;
    transition: margin-left .2s;
}

:active + .ui-switch::before {
    box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.1);
}

:checked + .ui-switch {
    color: #2a80eb;
}

:checked + .ui-switch::before {
    margin-left: 18px;
}

:disabled + .ui-switch {
    opacity: .38;
    cursor: default;
}

:focus + .ui-switch,
.ui-switch:hover {
    color: #a2a9b6;
}

:checked:focus + .ui-switch,
:checked + .ui-switch:hover {
    color: #0057c3;
}

:disabled + .ui-switch:hover {
    color: #b6bbc6;
}

:checked:disabled + .ui-switch:hover {
    color: #2a80eb;
}

@media (prefers-reduced-motion: reduce) {
    .ui-switch,
    .ui-switch::before {
        transition: none;
    }
}