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

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

@charset "UTF-8";
/**
 *
 * @Checkbox.css
 * @author zhangxinxu
 * @create 15-06-18
 * @edit 17-06-14    focusable
**/
input[type="checkbox"]:not([ui-visible]) {
    position: absolute;
    opacity: 0;
    width: 20px;
    height: 20px;
    cursor: pointer;
    z-index: -1;
}

[ui-visible] + .ui-checkbox {
    display: none;
}

/* 无绝对定位的模拟生成实现 */
.ui-checkbox {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 4px;
    box-sizing: border-box;
    box-shadow: inset 0 1px, inset 1px 0, inset -1px 0, inset 0 -1px;
    background-color: #fff;
    background-clip: content-box;
    color: #d0d0d5;
    transition: color .2s, background-color .1s;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    vertical-align: -5px;
    overflow: hidden;
}

.ui-checkbox + label {
    margin-left: 5px;
}

:not(:disabled) + .ui-checkbox:hover,
:disabled + .ui-checkbox {
    color: #ababaf;
}

:focus + .ui-checkbox {
    color: #2a80eb;
}
:focus + .ui-checkbox:hover {
    color: #0057c3;
}

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

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

.ui-checkbox::after {
    content: '';
    display: block;
    width: 100%; height: 100%;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpath d='M920.185 224.838c-33.782-33.935-88.619-33.935-122.464 0L409.955 614.564 226.231 429.952c-33.782-33.935-88.68-33.935-122.461 0-33.784 33.997-33.784 89.108 0 123.044l244.925 246.118c33.782 33.998 88.68 33.998 122.463 0l449.028-451.201c33.843-33.967 33.843-89.048-.001-123.075z' fill='%23fff'/%3E%3C/svg%3E") no-repeat center;
    background-size: 12px 12px;
    visibility: hidden;
}

:checked + .ui-checkbox::after {
    visibility: visible;
}

:disabled + .ui-checkbox {
    opacity: .38;
}

/* error */
.error.ui-checkbox {
    color: #eb4646;
}

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