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-x: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-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:#f0f1f5;
          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%;
  }