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

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

.bk-search-list{
    font-size:12px;
    position:relative;
    max-height:280px;
    min-height:32px;
    min-width:230px;
    line-height:32px;
    color:#63656e;
    margin:-0.3rem -0.6rem;
    outline:none;
    resize:none;
    pointer-events:all;
    border:1px solid #dcdee5;
    border-radius:2px;
}

.bk-search-list-condition{
        border-bottom:1px solid #dcdee5;
        padding:0 10px 0 16px;
        pointer-events:auto
    }

.bk-search-list-condition:hover{
            cursor:pointer;
            color:#3a84ff;
            background-color:rgba(234, 243, 255, 0.7);
        }

.bk-search-list-menu{
        margin:0;
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        -webkit-box-orient:vertical;
        -webkit-box-direction:normal;
            -ms-flex-direction:column;
                flex-direction:column;
        pointer-events:all;
        max-height:200px;
        overflow-x:hidden;
        overflow-y:auto;
        padding:0
    }

.bk-search-list-menu::-webkit-scrollbar{
        width:6px;
        height:6px;
    }

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

.bk-search-list-menu .is-group{
            border-bottom:1px solid #dcdee5;
        }

.bk-search-list-menu-item{
            -webkit-box-flex:1;
                -ms-flex:1 0 32px;
                    flex:1 0 32px;
            display:-webkit-box;
            display:-ms-flexbox;
            display:flex;
            -webkit-box-align:center;
                -ms-flex-align:center;
                    align-items:center;
            -webkit-box-pack:start;
                -ms-flex-pack:start;
                    justify-content:flex-start;
            pointer-events:auto;
            text-overflow:ellipsis;
            overflow:hidden;
            white-space:nowrap;
            padding:0 10px 0 16px
        }

.bk-search-list-menu-item.is-disabled{
                color:#c4c6cc;
                cursor:not-allowed;
            }

.bk-search-list-menu-item .item-name{
                -webkit-box-flex:1;
                    -ms-flex:1;
                        flex:1;
                line-height:32px;
                display:-webkit-box;
                display:-ms-flexbox;
                display:flex;
                -webkit-box-align:center;
                    -ms-flex-align:center;
                        align-items:center;
            }

.bk-search-list-menu-item .item-name-filter{
                    color:#3a84ff;
                    display:inline-block;
                    font-weight:bold;
                }

.bk-search-list-menu-item .item-icon{
                color:#3a84ff;
                font-size:16px;
                font-weight:bold;
            }

.bk-search-list-menu-item.is-hover, .bk-search-list-menu-item:not(.is-disabled):hover{
                cursor:pointer;
                color:#3a84ff;
                background-color:rgba(234, 243, 255, 0.7);
            }

.bk-search-list-menu-item .search-list-checkbox{
                pointer-events:none;
                margin-right:6px;
            }

.bk-search-list-loading{
        padding:0 16px;
        text-align:center;
        line-height:32px;
    }

.bk-search-list-error{
        padding:0 10px 0 16px;
        line-height:32px;
        font-weight:bold;
    }

.bk-search-list-footer{
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        line-height:32px;
        -webkit-box-orient:horizontal;
        -webkit-box-direction:normal;
            -ms-flex-direction:row;
                flex-direction:row;
        -ms-flex-pack:distribute;
            justify-content:space-around;
        -webkit-box-align:center;
            -ms-flex-align:center;
                align-items:center;
        pointer-events:auto;
    }

.bk-search-list-footer .footer-btn{
            -webkit-box-flex:1;
                -ms-flex:1;
                    flex:1;
            text-align:center;
            border-top:1px solid #dcdee5;
            pointer-events:auto
        }

.bk-search-list-footer .footer-btn:hover{
                cursor:pointer;
                color:#3a84ff;
                background-color:rgba(234, 243, 255, 0.7);
            }

.bk-search-list-footer .footer-btn:first-child{
                border-right:1px solid #dcdee5;
            }

.bk-search-list .search-menu-wrap{
        padding:6px 0;
    }

.tippy-tooltip.bk-search-select-theme-theme{
        -webkit-box-shadow:0 3px 9px 0 rgba(0, 0, 0, .1);
                box-shadow:0 3px 9px 0 rgba(0, 0, 0, .1);
        border-radius:2px;
    }