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

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

:root{
    --font-size:12px;
    --icon-size:14px;
    --extension-size:16px;
}

:root .medium-font{
        --font-size:14px;
        --icon-size:16px;
        --extension-size:20px;
    }

:root .large-font{
        --font-size:16px;
        --icon-size:20px;
        --extension-size:22px;
    }

:root .bk-select-large,
    :root .bk-select-popover-large{
        --font-size:14px;
    }

:root .bk-select-small,
    :root .bk-select-popover-small{
        --font-size:12px;
    }

.bk-select{
    position:relative;
    border:1px solid #c4c6cc;
    border-radius:2px;
    line-height:30px;
    color:#63656e;
    cursor:pointer;

    font-size:12px;

    font-size:var(--font-size)
}

.bk-select:focus{
        border-color:#3a84ff;
    }

.bk-select.only-bottom-border{
        border-color:transparent transparent #c4c6cc transparent
    }

.bk-select.only-bottom-border.is-focus{
            border-color:transparent transparent #3a84ff transparent;
            -webkit-box-shadow:none;
                    box-shadow:none;
        }

.bk-select.only-bottom-border.is-disabled{
            border-color:transparent transparent #dcdee5 transparent;
        }

.bk-select.only-bottom-border.is-readonly,
        .bk-select.only-bottom-border.is-loading{
            border-color:transparent transparent #dcdee5 transparent;
        }

.bk-select.is-default-trigger.is-unselected:before{
        position:absolute;
        height:100%;
        content:attr(data-placeholder);
        left:10px;
        top:0;
        color:#c3cdd7;
        pointer-events:none;
    }

.bk-select.is-default-trigger.is-unselected.is-disabled:before,
        .bk-select.is-default-trigger.is-unselected.is-readonly:before{
            color:#c4c6cc;
        }

.bk-select.has-prefix-icon.is-default-trigger.is-unselected:before{
            left:24px;
        }

.bk-select.has-prefix-icon .bk-select-name{
            padding-left:24px;
        }

.bk-select.is-focus{
        border-color:#3a84ff;
        -webkit-box-shadow:0px 0px 4px rgba(58, 132, 255, 0.4);
                box-shadow:0px 0px 4px rgba(58, 132, 255, 0.4);
    }

.bk-select.is-focus .bk-select-angle{
            -webkit-transform:rotate(-180deg);
                    transform:rotate(-180deg);
        }

.bk-select.is-disabled{
        background-color:#fafbfd;
        cursor:not-allowed;
        border-color:#dcdee5;
    }

.bk-select.is-disabled .bk-select-angle{
            color:#c4c6cc;
        }

.bk-select.is-readonly,
    .bk-select.is-loading{
        background-color:#fafafa;
        cursor:default;
        border:1px solid #dcdee5;
    }

.bk-select:hover .bk-select-clear{
            display:block
        }

.bk-select:hover .bk-select-clear + .bk-select-angle{
                display:none;
            }

.bk-select .bk-select-loading{
        position:absolute;
        right:9px;
        top:8px;
        width:18px;
        height:18px;
    }

.bk-select .bk-select-angle{
        position:absolute;
        right:2px;
        top:4px;
        color:#979ba5;
        font-size:22px;
        -webkit-transition:-webkit-transform .3s cubic-bezier(0.4, 0, 0.2, 1);
        transition:-webkit-transform .3s cubic-bezier(0.4, 0, 0.2, 1);
        transition:transform .3s cubic-bezier(0.4, 0, 0.2, 1);
        transition:transform .3s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform .3s cubic-bezier(0.4, 0, 0.2, 1);
        pointer-events:none;
    }

.bk-select .bk-select-clear{
        display:none;
        position:absolute;
        right:6px;
        top:8px;
        text-align:center;
        font-size:14px;
        z-index:100;
        color:#c4c6cc
    }

.bk-select .bk-select-clear:hover{
            color:#979ba5;
        }

.bk-select .bk-select-prefix-icon{
        position:absolute;
        left:6px;
        top:calc((100% - 12px) / 2);
        font-size:14px;
        font-size:var(--icon-size);
    }

.bk-select .bk-select-name{
        width:100%;
        height:30px;
        padding:0 36px 0 10px;
        display:block;
        max-width:100%;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        border:none;
        -webkit-appearance:none;
           -moz-appearance:none;
                appearance:none
    }

.bk-select .bk-select-name,.bk-select .bk-select-name:hover,.bk-select .bk-select-name:active{
           outline:none;
        }

.bk-select .bk-select-name.allow-create::-webkit-input-placeholder{
           color:#c3cdd7;
        }

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

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

.bk-select-dropdown-content{
    border:1px solid #dcdee5;
    border-radius:2px;
    line-height:32px;
    background:#fff;
    color:#63656e;
    overflow:hidden;
}

.bk-select-search-wrapper{
    position:relative;
    padding:0 5px;
}

.bk-select-search-wrapper .left-icon{
        position:absolute;
        font-size:16px;
        color:#979ba5;
        top:50%;
        -webkit-transform:translateY(-50%);
                transform:translateY(-50%);
        left:10px;
    }

.bk-select-search-input{
    width:100%;
    height:32px;
    padding:0 10px 0 30px;
    border:none;
    border-bottom:1px solid #dcdee5;
    font-size:12px;
    font-size:var(--font-size);
    outline:0;
    cursor:text
}

.bk-select-search-input::-webkit-input-placeholder{
      color:#c3cdd7;
    }

.bk-options{
    padding:0;
    margin:0;
    overflow-y:auto;
    list-style:none
}

.bk-options::-webkit-scrollbar{
        width:6px;
        height:6px;
    }

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

.bk-options.bk-options-single .bk-option.is-selected{
                background-color:#f4f6fa;
            }

.bk-options.bk-options-single .bk-option:hover,
            .bk-options.bk-options-single .bk-option.is-highlight{
                background-color:#eaf3ff;
            }

.bk-options .bk-option-group .bk-option-group-name{
            margin:0 16px;
            font-size:12px;
            font-size:var(--font-size);
            border-bottom:1px solid #dcdee5;
            color:#979ba5;
            position:relative
        }

.bk-options .bk-option-group .bk-option-group-name.is-collapse{
                cursor:pointer;
                margin:0 15px;
            }

.bk-options .bk-option-group .bk-option-group-name .bk-option-group-prefix{
                width:10px;
                display:inline-block;
                text-align:center;
                line-height:30px
            }

.bk-options .bk-option-group .bk-option-group-name .bk-option-group-prefix.readonly{
                    cursor:not-allowed;
                }

.bk-options .bk-option-group .bk-option-group-name .btn-check-all{
                position:absolute;
                disabled:inline-block;
                right:14px;
                top:2px;
            }

.bk-options .bk-option-group .bk-option-group-name .btn-check-all .bk-form-checkbox{
                    margin-right:0!important;
                }

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

.bk-options .bk-group-options .bk-option{
            padding:0 12px;
        }

.bk-options .bk-option{
        position:relative;
        cursor:pointer
    }

.bk-options .bk-option.is-selected{
            color:#3a84ff;
            background-color:#f4f6fa;
        }

.bk-options .bk-option:hover,
        .bk-options .bk-option.is-highlight{
            color:#3a84ff;
            background-color:#eaf3ff;
        }

.bk-options .bk-option.is-disabled{
            color:#c4c6cc;
            cursor:not-allowed;
            background-color:#fff;
        }

.bk-options .bk-option.is-selected.is-disabled{
            background-color:#fff;
            color:#c4c6cc;
        }

.bk-options .bk-option.is-selected.is-disabled .bk-option-icon{
                color:#c4c6cc;
            }

.bk-options .bk-option:first-child{
            margin-top:6px;
        }

.bk-options .bk-option:last-child{
            margin-bottom:6px;
        }

.bk-options .bk-option.bk-virtual-option{
            margin:0;
        }

.bk-options .bk-virtual-select .bk-min-nav-slide{
        width:6px;
        border-radius:3px;
        background-color:#dcdee5;
    }

.bk-options .bk-option-content{
        position:relative;
        padding:0 16px;
    }

.bk-options .bk-option-content .bk-option-content-default{
            font-size:0;
        }

.bk-options .bk-option-content .bk-option-icon{
            position:absolute;
            right:12px;
            top:4px;
            color:#3a84ff;
            font-size:26px;
            font-weight:normal;
        }

.bk-options .bk-option-content .bk-option-icon ~ .bk-option-name{
                padding-right:20px;
            }

.bk-options .bk-option-content .bk-option-name{
            vertical-align:middle;
            font-size:12px;
            font-size:var(--font-size);
            display:inline-block;
            max-width:100%;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
        }

.bk-options .bk-option-content .bk-option-checkbox .bk-checkbox-text{
            font-size:12px;
        }

.bk-select-empty{
    padding:0 10px;
    text-align:center;
    font-size:12px;
    font-size:var(--font-size);
}

.bk-select-extension{
    font-size:12px;
    font-size:var(--font-size);
    padding:0 16px;
    border-radius:0px 0px 1px 1px;
    border-top:1px solid #dcdee5;
    background:#fafbfd;
}

.bk-select-extension i{
        font-size:16px;
        font-size:var(--extension-size);
    }

.bk-select-extension:hover{
        background-color:#f0f1f5;
    }

.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-select-large{
    line-height:36px;
}

.bk-select-large .bk-select-angle{
        top:7px;
    }

.bk-select-large .bk-select-clear{
        top:11px;
    }

.bk-select-large .bk-select-name{
        height:36px;
    }

.bk-select-small{
    line-height:24px;
}

.bk-select-small .bk-select-angle{
        top:1px;
    }

.bk-select-small .bk-select-clear{
        top:5px;
    }

.bk-select-small .bk-select-name{
        height:24px;
    }

.bk-select-popover-large .bk-options .bk-option-content .bk-option-name{
                font-size:12px;
                font-size:var(--font-size);
            }

.bk-select-tag-container{
    white-space:normal;
    height:auto;
    min-height:30px;
    padding:0 30px 0 10px;
    overflow:hidden
}

.bk-select-tag-container.is-fixed-height{
        height:30px;
    }

.bk-select-tag-container.is-focus{
        height:auto !important;
        overflow:auto;
    }

.bk-select-tag-container.is-large-size{
        min-height:34px
    }

.bk-select-tag-container.is-large-size.is-fixed-height{
            height:34px;
        }

.bk-select-tag-container.is-large-size .bk-select-tag{
            height:24px;
        }

.bk-select-tag-container.is-large-size .bk-select-overflow-tag{
            min-height:24px;
            line-height:24px;
        }

.bk-select-tag-container.is-small-size{
        min-height:24px
    }

.bk-select-tag-container.is-small-size.is-fixed-height{
            height:24px;
        }

.bk-select-tag-container.is-small-size .bk-select-tag{
            height:20px;
        }

.bk-select-tag-container.is-small-size .bk-select-overflow-tag{
            min-height:20px;
            line-height:20px;
        }

.bk-select-tag-container.is-available .bk-select-tag:hover{
            background-color:#DCDEE5;
        }

.bk-select-tag-container.is-available .icon-close:hover{
            color:#63656E;
        }

.bk-select-tag-container.has-prefix-icon{
        padding-left:24px;
    }

.bk-select-tag-container .bk-select-tag{
        display:-webkit-inline-box;
        display:-ms-inline-flexbox;
        display:inline-flex;
        height:22px;
        line-height:22px;
        margin:0 6px 0 0;
        padding:0 2px 0 5px;
        -webkit-box-align:center;
            -ms-flex-align:center;
                align-items:center;
        background:#f0f1f5;
        border-radius:2px;
        font-size:12px;
        font-size:var(--font-size);
    }

.bk-select-tag-container .bk-select-tag .icon-close{
            margin-left:5px;
            -webkit-box-flex:18px;
                -ms-flex:18px 0 0px;
                    flex:18px 0 0;
            font-size:18px;
            color:#979BA5;
        }

.bk-select-tag-container .bk-select-tag.width-limit-tag{
            display:-webkit-inline-box;
            display:-ms-inline-flexbox;
            display:inline-flex;
            max-width:140px;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
        }

.bk-select-tag-container .bk-select-tag.width-limit-tag span{
                display:inline-block;
                max-width:130px;
                overflow:hidden;
                text-overflow:ellipsis;
                white-space:nowrap;
                height:100%;
            }

.bk-select-tag-container .bk-select-overflow-tag{
        display:-webkit-inline-box;
        display:-ms-inline-flexbox;
        display:inline-flex;
        padding:0 5px;
        margin:0 6px 0 0;
        min-width:22px;
        line-height:22px;
        font-size:12px;
        font-size:var(--font-size);
        text-align:center;
        background:#f0f1f5
    }

.bk-select-tag-container .bk-select-overflow-tag ~ .bk-select-tag{
            visibility:hidden;
            pointer-events:none;
        }

.bk-select-bottom-loading{
    position:relative;
    text-align:center;
    bottom:0;
    height:32px;
    line-height:25px;
    width:100%;
    z-index:777;
}

.bk-select-tag-input{
    height:22px;
    max-width:190px;
    padding:0;
    margin:4px 5px 4px 0;
    overflow:hidden;
    border:none;
    outline:none
}

.bk-select-tag-input::-webkit-input-placeholder{
      color:#c3cdd7;
    }