lu2/theme/edge/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
 * @editor shanyerong
 * @edit   20-04-30    description here
 * @edit   24-08-21    indeterminate attr support and use new css selector
**/
/* checkbox基础变量 */
:root {
    --ui-checkbox-width: 20px;
    --ui-checkbox-height: 20px;
    --ui-checkbox-icon: 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");
}

[is="ui-checkbox"] {
    -webkit-appearance: none;
    width: var(--ui-checkbox-width, 20px);
    height: var(--ui-checkbox-height, 20px);
    display: inline-flex;
    border: solid 1px rgba(0, 0, 0, 0);
    outline: none;
    border-radius: var(--ui-radius, 4px);
    box-sizing: border-box;
    box-shadow: inset 0 1px, inset 1px 0, inset -1px 0, inset 0 -1px;
    background-color: var(--ui-white, #ffffff);
    background-clip: content-box;
    color: var(--ui-border, #d0d0d5);
    transition: color var(--ui-animate-time, .2s), background-color var(--ui-animate-time, .2s);
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    vertical-align: -.5ex;
}

[is="ui-checkbox"]::after {
    content: "";
    width: 100%;
    height: 100%;
    background: var(--ui-checkbox-icon) no-repeat center;
    background-size: var(--ui-checkbox-size-x, 12px) var(--ui-checkbox-size-y, 12px);
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--ui-animate-time, .2s);
}

[is="ui-checkbox"]:not(:disabled):hover,
[is="ui-checkbox"]:disabled {
    color: var(--ui-dark-border, #ababaf);
}

[is="ui-checkbox"]:focus {
    color: var(--ui-blue, #2a80eb);
}

[is="ui-checkbox"]:focus:hover {
    color: var(--ui-dark-blue, #0057c3);
}

[is="ui-checkbox"]:checked {
    color: var(--ui-blue, #2a80eb);
    background-color: var(--ui-blue, #2a80eb);
}

[is="ui-checkbox"]:not(:disabled):checked:is(:focus, :hover) {
    color: var(--ui-dark-blue, #0057c3);
    background-color: var(--ui-dark-blue, #0057c3);
}

[is="ui-checkbox"]:checked::after {
    opacity: 1;
    visibility: visible;
}

[is="ui-checkbox"]:is(:indeterminate, [indeterminate]:not(:checked))::after {
    opacity: 1;
    visibility: visible;
    color: var(--ui-blue, #2a80eb);
    background-image: linear-gradient(currentColor, currentColor);
    background-size:  var(--ui-checkbox-indeterminate-size-x, 8px) var(--ui-checkbox-indeterminate-size-y, 8px);
    border-radius: var(--ui-checkbox-indeterminate-radius, 0);
}

[is="ui-checkbox"]:not(:disabled):where(:indeterminate, [indeterminate]:not(:checked)):is(:focus, :hover) {
    color: var(--ui-dark-blue, #0057c3);
}

[is="ui-checkbox"]:disabled {
    opacity: var(--ui-opacity, .4);
}

/* error */
[is="ui-checkbox"][is-error] {
    color: var(--ui-red, #eb4646) !important;
}

@media (prefers-reduced-motion: reduce) {
    [is="ui-checkbox"],
    [is="ui-checkbox"]::after {
        transition: none;
    }
}