bk-magic-vue/lib/ui/search-select.css

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

.search-select-wrap{
    position:relative;
    overflow:inherit;
    z-index:9;
    height:32px;
}

.search-select-wrap .bk-search-select{
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        -webkit-box-orient:horizontal;
        -webkit-box-direction:normal;
            -ms-flex-direction:row;
                flex-direction:row;
        -webkit-box-align:center;
            -ms-flex-align:center;
                align-items:center;
        font-size:12px;
        min-height:30px;
        -webkit-box-sizing:border-box;
                box-sizing:border-box;
        position:relative;
        border:1px solid #c4c6cc;
        border-radius:2px;
        outline:none;
        resize:none;
        -webkit-transition:border 0.2s linear;
        transition:border 0.2s linear;
        overflow:hidden;
        color:#63656e;
        -ms-flex-wrap:wrap;
            flex-wrap:wrap
    }

.search-select-wrap .bk-search-select.is-focus{
            border-color:#3c96ff !important;
            background:#fff !important;
            color:#3c96ff;
            overflow:auto;
        }

.search-select-wrap .bk-search-select .search-prefix{
            -webkit-box-flex:0;
                -ms-flex:0 0 auto;
                    flex:0 0 auto;
            display:-webkit-box;
            display:-ms-flexbox;
            display:flex;
            -webkit-box-align:center;
                -ms-flex-align:center;
                    align-items:center;
            height:100%;
        }

.search-select-wrap .bk-search-select .search-input{
            -webkit-box-flex:1;
                -ms-flex:1;
                    flex:1;
            position:relative;
            padding:0 2px;
            text-align:left;
            overflow:visible;
            display:-webkit-box;
            display:-ms-flexbox;
            display:flex;
            -ms-flex-wrap:wrap;
                flex-wrap:wrap;
            -webkit-box-align:center;
                -ms-flex-align:center;
                    align-items:center;
            min-height:26px;
            margin-top:4px;
            -webkit-transition:max-height .3s cubic-bezier(0.4, 0, 0.2, 1);
            transition:max-height .3s cubic-bezier(0.4, 0, 0.2, 1);
        }

.search-select-wrap .bk-search-select .search-input-chip{
                -webkit-box-flex:0;
                    -ms-flex:0 0 auto;
                        flex:0 0 auto;
                max-width:99%;
                display:inline-block;
                -ms-flex-item-align:center;
                    -ms-grid-row-align:center;
                    align-self:center;
                color:#63656e;
                margin:0 0 4px 6px;
                padding-left:8px;
                position:relative;
                background:#f0f1f5;
                border-radius:2px;
                line-height:22px
            }

.search-select-wrap .bk-search-select .search-input-chip.hidden-chip{
                    visibility:hidden
                }

.search-select-wrap .bk-search-select .search-input-chip:hover{
                    background:#dcdee5;
                }

.search-select-wrap .bk-search-select .search-input-chip:hover .chip-clear{
                        color:#63656e;
                    }

.search-select-wrap .bk-search-select .search-input-chip .chip-name{
                    display:inline-block;
                    margin-right:20px;
                    word-break:break-all;
                }

.search-select-wrap .bk-search-select .search-input-chip .chip-clear{
                    color:#979ba5;
                    position:absolute;
                    right:3px;
                    line-height:normal;
                    display:inline-block;
                    top:4px;
                    text-align:center;
                    cursor:pointer;
                    font-size:14px;
                }

.search-select-wrap .bk-search-select .search-input-input{
                position:relative;
                padding:0 10px;
                color:#63656e;
                -webkit-box-flex:1;
                    -ms-flex:1 1 auto;
                        flex:1 1 auto;
                border:none;
                height:100%;
                min-width:40px;
                display:-webkit-box;
                display:-ms-flexbox;
                display:flex;
                -webkit-box-align:center;
                    -ms-flex-align:center;
                        align-items:center;
                margin-top:-4px;
            }

.search-select-wrap .bk-search-select .search-input-input .div-input{
                    -webkit-box-flex:1;
                        -ms-flex:1 1 auto;
                            flex:1 1 auto;
                    line-height:20px;
                    padding:5px 0;
                    height:30px;
                    word-break:break-all
                }

.search-select-wrap .bk-search-select .search-input-input .div-input:focus{
                        outline:none;
                    }

.search-select-wrap .bk-search-select .search-input-input .input-before:before{
                        content:attr(data-placeholder);
                        color:#c4c6cc;
                        padding-left:2px;
                    }

.search-select-wrap .bk-search-select .search-input-input .input-after:after{
                        content:attr(data-tips);
                        color:#c4c6cc;
                        padding-left:2px;
                    }

.search-select-wrap .bk-search-select .search-select-wrap .bk-search-select .search-nextfix{
    -webkit-box-flex:0;
    -ms-flex:0 0 auto;
    flex:0 0 auto;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    height:100%;
}

.search-select-wrap .bk-search-select .search-nextfix{
    color:#c4c6cc;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
}

.search-select-wrap .bk-search-select .search-nextfix .search-clear{
                color:#c4c6cc;
                font-size:14px;
                width:12px;
                height:12px;
                margin-right:6px
            }

.search-select-wrap .bk-search-select .search-nextfix .search-clear:hover{
                    cursor:pointer;
                    color:#979ba5;
                }

.search-select-wrap .bk-search-select .search-nextfix .search-nextfix-icon{
                margin-right:8px;
                font-size:16px;
                -webkit-transition:color 0.2s linear;
                transition:color 0.2s linear
            }

.search-select-wrap .bk-search-select .search-nextfix .search-nextfix-icon:hover{
                    cursor:pointer;
                    color:#3c96ff;
                }

.search-select-wrap .bk-search-select .search-nextfix .search-nextfix-icon.is-focus{
                    border-color:#3c96ff !important;
                    background:#fff !important;
                    color:#3c96ff;
                }

.search-select-wrap .bk-search-select::-webkit-scrollbar{
            width:3px;
            height:5px;
        }

.search-select-wrap .bk-search-select::-webkit-scrollbar-thumb{
            border-radius:20px;
            background:#e6e9ea;
            -webkit-box-shadow:inset 0 0 6px rgba(204, 204, 204, 0.3);
                    box-shadow:inset 0 0 6px rgba(204, 204, 204, 0.3);
        }

.search-select-wrap .bk-select-tips{
        color:#ea3636;
        font-size:12px;
        margin-top:5px;
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        -webkit-box-align:center;
            -ms-flex-align:center;
                align-items:center;
        line-height:16px;
    }

.search-select-wrap .bk-select-tips .select-tips{
            font-size:16px;
            margin-right:5px;
            width:16px;
            height:16px;
        }