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:'';
        width:8px;
        height:2px;
        background:#fff;
        position:absolute;
        top:50%;
        left:50%;
        margin-left:-4px;
        border-radius:2px;
        margin-top:-1px;
        display:inline-block;
      }

.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;
  }