bk-magic-vue/lib/ui/tag-input.css

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

.bk-tag-selector{
    position:relative;
    min-height:32px;
}

.bk-tag-selector .bk-tag-input{
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        -webkit-box-align:center;
            -ms-flex-align:center;
                align-items:center;
        -webkit-box-pack:justify;
            -ms-flex-pack:justify;
                justify-content:space-between;
        padding:0 0 0 5px;
        border:1px solid #c4c6cc;
        min-height:32px;
        border-radius:2px;
        font-size:12px;
        position:relative;
        z-index:1;
        background:#fff;
        cursor:pointer;
        overflow:hidden
    }

.bk-tag-selector .bk-tag-input.disabled{
            background:#fafafa;
            cursor:not-allowed;
        }

.bk-tag-selector .bk-tag-input.disabled .tag-list >li{
                    cursor:not-allowed;
                }

.bk-tag-selector .bk-tag-input.disabled .tag-list .key-node{
                    padding-right:2px;
                }

.bk-tag-selector .bk-tag-input.active:not(.fix-height){
                border-color:#3a84ff;
            }

.bk-tag-selector .bk-tag-input.active.fix-height .tag-list{
                    border-color:#3a84ff;
                }

.bk-tag-selector .bk-tag-input.fix-height{
            overflow:visible;
            position:relative;
            border:1px solid transparent;
        }

.bk-tag-selector .bk-tag-input.fix-height .tag-list{
                background:#fff;
                border:1px solid #c4c6cc;
                position:absolute;
                left:0;
                top:0;
                right:0;
            }

.bk-tag-selector .bk-tag-input .placeholder{
            margin:0;
            padding:0;
            font-size:12px;
            position:absolute;
            line-height:30px;
            top:0;
            left:8px;
            color:#c4c6cc;
        }

.bk-tag-selector .bk-tag-input .clear-icon{
            margin-right:5px;
            cursor:pointer;
            color:#c4c6cc;
            font-size:14px
        }

.bk-tag-selector .bk-tag-input .clear-icon:hover{
                color:#979ba5;
            }

.bk-tag-selector .bk-tag-input .input{
            width:10px;
            height:22px;
            padding:0;
            border:0;
            -webkit-box-sizing:border-box;
                    box-sizing:border-box;
            outline:none;
            max-width:295px;
            font-size:12px;
        }

.bk-tag-selector .bk-tag-input .tag-list{
            display:inline-block;
            max-height:135px;
            overflow:auto;
            float:left;
            margin:0;
            padding:0
        }

.bk-tag-selector .bk-tag-input .tag-list.no-item{
                padding:0 0 0 5px;
            }

.bk-tag-selector .bk-tag-input .tag-list >li{
                display:inline-block;
                cursor:pointer;
                position:relative;
                margin:4px 5px 4px 0;
                border-radius:2px;
                float:left;
                height:22px;
                overflow:hidden;
                font-size:0;
                line-height:0
            }

.bk-tag-selector .bk-tag-input .tag-list >li.key-node{
                    border:solid 1px #F0F1F5;
                }

.bk-tag-selector .bk-tag-input .tag-list .key-node{
                background:#F0F1F5;
            }

.bk-tag-selector .bk-tag-input .tag-list .key-node .remove-key{
                    display:inline-block;
                }

.bk-tag-selector .bk-tag-input .tag-list .remove-key{
                position:relative;
                width:16px;
                height:16px;
                line-height:16px;
                top:2px;
                right:5px;
                display:inline-block;
                font-size:18px;
                text-align:center;
                color:#63656e;
                display:none;
                text-decoration:none;
            }

.bk-tag-selector .bk-tag-input .tag{
            display:inline-block;
            background-color:#F0F1F5;
            color:#63656e;
            font-size:12px;
            border:none;
            vertical-align:middle;
            -webkit-box-sizing:border-box;
                    box-sizing:border-box;
            overflow:hidden;
            border-radius:2px;
            padding:0 5px;
            height:20px;
            line-height:20px;
            word-break:break-all;
            max-width:190px;
            overflow:hidden;
            display:inline-block;
            text-overflow:ellipsis;
            white-space:nowrap;
            float:left;
        }

.bk-tag-selector .bk-tag-input .tag .text{
                height:20px;
                line-height:20px;
                display:block;
                text-overflow:ellipsis;
                overflow:hidden;
                white-space:nowrap;
            }

.bk-tag-selector .bk-tag-input .dropdown-actions{
            width:100%;
            font-size:0;
        }

.bk-tag-selector .bk-tag-input .dropdown-actions .bk-button{
                width:50%;
                margin:0;
                border-radius:0;
                border-width:0;
                border-top-width:1px;
            }

.bk-tag-selector .bk-tooltip.bk-select-dropdown{
        display:block
    }

.bk-tag-selector .bk-tooltip.bk-select-dropdown>.bk-tooltip-ref{
            display:block;
        }

.bk-tag-selector .bk-tag-popover-trigger{
        height:22px;
        margin-top:-27px;
        z-index:-1;
    }

.bk-tag-selector .highlight-text{
        color:#3A84FF;
    }

.highlight-text{
    color:#3A84FF;
}

.bk-select-dropdown .bk-selector-list{
        min-width:100%;
    }

.tippy-tooltip.bk-select-dropdown-theme[data-size=small]{
    padding:0;
    -webkit-box-shadow:0 3px 9px 0 rgba(0, 0, 0, .1);
            box-shadow:0 3px 9px 0 rgba(0, 0, 0, .1);
}

.tippy-tooltip.bk-select-dropdown-theme[data-size=small] .tippy-arrow{
        display:none;
    }

.bk-selector-list{
    min-width:150px;
}

.bk-selector-list .outside-ul::-webkit-scrollbar{
        width:6px;
        height:6px;
    }

.bk-selector-list .outside-ul::-webkit-scrollbar-thumb{
        min-height:24px;
        border-radius:3px;
        background-color:#dcdee5;
    }

.bk-selector-list .outside-ul{
        max-height:160px;
        padding:0;
        margin:0;
        list-style:none;
        overflow-y:auto;
        padding:6px 0;
        border-radius:2px;
        background-color:#fff;
        border:1px solid #DCDEE5;
    }

.bk-selector-list .bk-selector-group-item{
        list-style:none;
    }

.bk-selector-list .bk-selector-group-item .group-name{
            font-size:12px;
            color:#979BA5;
            line-height:32px;
            padding-left:11px;
        }

.bk-selector-list .bk-selector-group-list-item{
        list-style:none;
        margin:0;
        padding:0;
    }

.bk-selector-list .bk-selector-list-item{
        position:relative;
        width:100%;
        border-left:#c4c6cc;
        border-right:#c4c6cc;
        background-color:#fff;
        cursor:pointer
    }

.bk-selector-list .bk-selector-list-item:first-child{
            border-top:#c4c6cc;
        }

.bk-selector-list .bk-selector-list-item:last-child{
            border-bottom:#c4c6cc;
        }

.bk-selector-list .bk-selector-list-item.bk-selector-selected{
            background-color:#F4F6FA;
        }

.bk-selector-list .bk-selector-list-item.bk-selector-selected .selected-icon{
                display:inline-block;
            }

.bk-selector-list .bk-selector-list-item.bk-selector-actived{
            background-color:#F4F6FA;
        }

.bk-selector-list .bk-selector-list-item:hover{
            background-color:#EAF3FF;
        }

.bk-selector-list .bk-selector-list-item.disabled{
            background:#fff;
            cursor:not-allowed;
        }

.bk-selector-list .bk-selector-list-item.disabled .text{
                color:#c4c6cc;
            }

.bk-selector-list .bk-selector-list-item .loading{
            width:100%;
            height:40px;
            font-size:14px;
            position:relative;
            cursor:default;
        }

.bk-selector-list .bk-selector-list-item .text{
            padding:0 10px;
            line-height:32px;
            font-size:12px;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
            color:#63656e;
        }

.bk-selector-list .bk-selector-list-item .bk-selector-tools{
            position:absolute;
            display:none;
            top:10px;
            right:0;
            font-size:12px;
        }

.bk-selector-list .bk-selector-list-item .bk-selector-tools .bk-selector-list-icon{
                margin-right:14px;
            }