@cw-devops/bk-magic-vue/lib/ui/checkbox.css

基于蓝鲸 Magicbox 和 Vue 的前端组件库

.bk-form-checkbox{
    position:relative;
    display:inline-block;
    vertical-align:middle;
    font-size:0;
    line-height:18px;
    overflow:hidden;
    cursor:pointer
}

.bk-form-checkbox.is-indeterminate:not(.is-checked) .bk-checkbox{
            border-color:#3a84ff;
            background-color:#3a84ff;
            background-clip:content-box;
            position:relative
        }

.bk-form-checkbox.is-indeterminate:not(.is-checked) .bk-checkbox::after{
                
                content:'';                
                display:inline-block;
                position:absolute;
                top:50%;
                left:50%;
                width:6px;
                height:6px;
                background:#3a84ff;
                -webkit-transform:translate(-50%, -50%);
                        transform:translate(-50%, -50%);
                margin-left:0px;
                border-radius:0px;
                margin-top:0px;
            }

.bk-form-checkbox.is-indeterminate:not(.is-checked).is-disabled .bk-checkbox::after{
                    background-color:#CBD5E0;
                }

.bk-form-checkbox.is-disabled{
        cursor:not-allowed;
    }

.bk-form-checkbox.is-disabled .bk-checkbox{
            border-color:#dcdee5;
            background-color:#fafbfd;
        }

.bk-form-checkbox.is-disabled.is-checked .bk-checkbox{
            border-color:#dcdee5;
            background-color:#dcdee5;
        }

.bk-form-checkbox.is-checked .bk-checkbox{
            border-color:#3a84ff;
            background-color:#3a84ff;
            background-clip:border-box
        }

.bk-form-checkbox.is-checked .bk-checkbox:after{
                content:"";
                position:absolute;
                top:1px;
                left:4px;
                width:4px;
                height:8px;
                border:2px solid #fff;
                border-left:0;
                border-top:0;
                -webkit-transform-origin:center;
                        transform-origin:center;
                -webkit-transform:rotate(45deg) scaleY(1);
                        transform:rotate(45deg) scaleY(1);
            }

.bk-form-checkbox .bk-checkbox{
        position:relative;
        display:inline-block;
        vertical-align:middle;
        width:16px;
        height:16px;
        border:1px solid #979ba5;
        border-radius:2px
    }

.bk-form-checkbox .bk-checkbox:focus{
            border-color:#3c96ff;
            outline:none;
        }

.bk-form-checkbox .bk-checkbox-text{
        display:inline-block;
        margin:0 0 0 6px;
        vertical-align:middle;
        font-size:14px;
        color:#63656e;
    }