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

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

.bk-tag{
    background-color:rgba(151, 155, 165, 0.1);
    border-color:rgba(220, 222, 229, 0.6);
    color:#63656e;
    display:inline-block;
    font-size:12px;
    padding:0 10px;
    height:22px;
    line-height:22px;
    margin:2px 0 2px 6px;
    cursor:default;
    -webkit-box-sizing:border-box;
            box-sizing:border-box
}

.bk-tag:hover{
        opacity:0.8;
    }

.bk-tag-closable{
    padding:0 2px 0 10px;
}

.bk-tag-icon{
    font-size:14px;
}

.bk-tag-close{
    font-size:16px;
    cursor:pointer;
}

.bk-tag-success{
    background-color:rgba(20, 165, 104, 0.1);
    border-color:rgba(20, 165, 104, 0.3);
    color:#14a568;
}

.bk-tag-info{
    background-color:rgba(58, 132, 255, 0.1);
    border-color:rgba(58, 132, 255, 0.3);
    color:#3a84ff;
}

.bk-tag-warning{
    background-color:rgba(254, 156, 0, 0.1);
    border-color:rgba(254, 156, 0, 0.3);
    color:#fe9c00;
}

.bk-tag-danger{
    background-color:rgba(234, 53, 54, 0.1);
    border-color:rgba(234, 53, 54, 0.3);
    color:#ea3536;
}

.bk-tag-filled{
    color:#ffffff
}

.bk-tag-filled.bk-tag{
        background:#979ba5;
    }

.bk-tag-filled.bk-tag-success{
        background:#14a568;
    }

.bk-tag-filled.bk-tag-info{
        background:#3a84ff;
    }

.bk-tag-filled.bk-tag-warning{
        background:#fe9c00;
    }

.bk-tag-filled.bk-tag-danger{
        background:#ea3536;
    }

.bk-tag-stroke{
    border-width:1px;
    border-style:solid;
    padding:0 9px;
    line-height:20px
}

.bk-tag-stroke.bk-tag-closable{
        padding:0 2px 0 9px;
    }

.bk-tag-checkable{
    background:none;
    cursor:pointer
}

.bk-tag-checkable:hover{
        background:rgba(151, 155, 165, 0.15);
    }

.bk-tag-check{
    background:#3a84ff;
    color:#ffffff
}

.bk-tag-check:hover{
        color:#ffffff;
        opacity:1;
        background:#3a84ff;
    }