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

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

.bk-form-control{
    display:inline-block;
    line-height:1;
    vertical-align:middle;
    font-size:0;

}

.bk-form-radio-button{
    position:relative;
    display:inline-block;
    outline:none;
    cursor:pointer
}

.bk-form-radio-button:first-child .bk-radio-button-text{
            border-top-left-radius:2px;
            border-bottom-left-radius:2px;
        }

.bk-form-radio-button:last-child .bk-radio-button-text{
            border-top-right-radius:2px;
            border-bottom-right-radius:2px;
        }

.bk-form-radio-button:nth-child(n+2){
        margin-left:-1px;
    }

.bk-form-radio-button.disabled{
        cursor:not-allowed;
        margin-left:0;
    }

.bk-form-radio-button .bk-radio-button-input{
        position:absolute;
        opacity:0
    }

.bk-form-radio-button .bk-radio-button-input:checked+.bk-radio-button-text{
            position:relative;
            z-index:1;
            background:#E1ECFF;
            color:#3a84ff;
            border-color:currentColor;
        }

.bk-form-radio-button .bk-radio-button-input:disabled+.bk-radio-button-text{
            position:relative;
            color:#dcdee5;
            background:rgba(250, 251, 253, 1);
            border-color:currentColor;
            border-left:none;
        }

.bk-form-radio-button .bk-radio-button-text{
        height:32px;
        line-height:30px;
        display:inline-block;
        outline:none;
        white-space:nowrap;
        -webkit-appearance:none;
        padding:0 18px;
        text-align:center;
        vertical-align:middle;
        font-size:14px;
        background-color:#fff;
        border:1px solid #c4c6cc;
        border-radius:0;
        -webkit-box-sizing:border-box;
                box-sizing:border-box;
        color:#63656e;
        text-decoration:none;
        -webkit-transition:background-color .3s ease;
        transition:background-color .3s ease;
        min-width:68px;
    }

.bk-form-radio-button:focus{
        -webkit-box-shadow:0 0 2px 2px #3c96ff;
                box-shadow:0 0 2px 2px #3c96ff;
        outline:none;
        position:relative;
        z-index:2;
    }