bk-magic-vue/lib/ui/radio.css

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

.bk-form-radio{
  font-size:14px;
  color:#63656e;
  line-height:18px;
  min-height:20px;
  display:inline-block;
  position:relative;
}

.bk-form-radio .bk-radio-text{
    font-style:normal;
    font-weight:normal;
    cursor:pointer;
    vertical-align:middle;
    display:inline-block;
  }

.bk-form-radio .icon-check{
    width:8px;
    height:8px;
    border-radius:50%;
    position:absolute;
    left:4px;
    top:50%;
    margin-top:-4px;
    display:block;
    background:#3a84ff;
  }

.bk-form-radio input[type='radio']{
    position:relative;
    display:inline-block;
    vertical-align:middle;
    width:16px;
    height:16px;
    margin:0 2px 0 0;
    border:1px solid #979ba5;
    border-radius:50%;
    background-color:#fff;
    background-clip:content-box;
    outline:none;
    color:#fff;
    visibility:visible;
    cursor:pointer;
    -webkit-appearance:none
  }

.bk-form-radio input[type='radio'].is-checked{
      padding:3px;
      color:#3a84ff;
      border-color:currentColor;
      background-color:currentColor
    }

.bk-form-radio input[type='radio'].is-checked[disabled]{
        color:#c4c6cc;
      }

.bk-form-radio input[type='radio'][disabled]{
      cursor:not-allowed;
      background-color:currentColor;
      border-color:#dcdee5;
      color:rgba(250, 251, 253, 1)
    }

.bk-form-radio input[type='radio'][disabled] + .bk-radio-text{
        color:#c4c6cc;
        cursor:not-allowed;
      }

.bk-form-radio:focus input[type='radio']{
    -webkit-box-shadow:0 0 2px 2px #3c96ff;
            box-shadow:0 0 2px 2px #3c96ff;
    border-color:#3c96ff;
    outline:none;
  }