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

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

.bk-dropdown-menu{
    --font-size:12px
}

.bk-dropdown-menu.medium-font{
        --font-size:14px;
    }

.bk-dropdown-menu.large-font{
        --font-size:16px;
    }

.bk-dropdown-menu.medium-font .bk-dropdown-list > li > a, .bk-dropdown-menu.large-font .bk-dropdown-list > li > a{
                    height:36px;
                    line-height:37px;
                }

.bk-dropdown-menu{

    display:inline-block;
    position:relative
}

.bk-dropdown-menu.disabled, .bk-dropdown-menu.disabled *{
        cursor:not-allowed;
        color:#c4c6cc;
        border-color:#dcdee5 !important;
        background-color:#fafafa !important;
    }

.bk-dropdown-menu .bk-dropdown-trigger{
        font-size:var(--font-size);
    }

.bk-dropdown-menu .bk-dropdown-trigger .bk-icon{
            -webkit-transform-origin:center;
                    transform-origin:center;
            -webkit-transition:all ease 0.2s;
            transition:all ease 0.2s
        }

.bk-dropdown-menu .bk-dropdown-trigger .bk-icon.icon-flip{
                -webkit-transform:rotate(180deg);
                        transform:rotate(180deg);
            }

.bk-dropdown-menu .bk-dropdown-trigger .bk-button{
            font-size:var(--font-size);
        }

.bk-dropdown-menu .bk-dropdown-content{
        background:#fff;
        padding:4px 0;
        margin:0;
        z-index:2500;
        border-radius:2px;
        border:1px solid #dcdee5;
        -webkit-box-sizing:border-box;
                box-sizing:border-box;
        -webkit-transition:visibility 0s, max-height 200ms linear;
        transition:visibility 0s, max-height 200ms linear;
        visibility:hidden;
        -webkit-box-shadow:0 2px 6px rgba(51, 60, 72, 0.1);
                box-shadow:0 2px 6px rgba(51, 60, 72, 0.1);
        text-align:left;
        display:inline-block;
        overflow:hidden

    }

.bk-dropdown-menu .bk-dropdown-content::-webkit-scrollbar{
            width:4px;
            background-color:transparent;
        }

.bk-dropdown-menu .bk-dropdown-content::-webkit-scrollbar-thumb{
            height:5px;
            border-radius:2px;
            background-color:#dcdee5;
        }

.bk-dropdown-menu .bk-dropdown-content.is-show{
            visibility:visible;
        }

.bk-dropdown-menu .bk-dropdown-content.menuStyle{
            overflow:auto;
        }

.bk-dropdown-menu .bk-dropdown-list{
        max-height:166px;
        list-style:none;
        padding:0;
        margin:0
    }

.bk-dropdown-menu .bk-dropdown-list::-webkit-scrollbar{
            width:4px;
            height:4px;
        }

.bk-dropdown-menu .bk-dropdown-list::-webkit-scrollbar-thumb{
            border-radius:20px;
            background:#dde4eb;
            -webkit-box-shadow:inset 0 0 6px hsla(0,0%,80%,.3);
        }

.bk-dropdown-menu .bk-dropdown-list > li{
            width:100%;
            margin:0;
            display:inline-block;
        }

.bk-dropdown-menu .bk-dropdown-list > li > a{
                display:block;
                height:32px;
                line-height:33px;
                padding:0 16px;
                color:#63656e;
                font-size:var(--font-size);
                text-decoration:none;
                white-space:nowrap
            }

.bk-dropdown-menu .bk-dropdown-list > li > a:hover{
                    background-color:#eaf3ff;
                    color:#3a84ff;
                }

.bk-dropdown-menu .bk-dropdown-list > li .bk-icon{
                margin-right:5px;
            }

.bk-dropdown-full-width .bk-dropdown-content{
        min-width:100%;
    }

.bk-dropdown-full-width .bk-dropdown-list{
        width:100%;
    }