@sdata/web-vue 1.6.0 → 1.7.0

package/es/menu/style/index.scss

@@ -0,0 +1,726 @@
+@use '@style/theme/index.scss' as theme;
+@use '@style/theme/index.scss' as global;
+@use 'sass:string';
+@use 'sass:map';
+@use '@style/theme/legacy-less-var.scss' as legacyLessVar;
+@use '@style/mixins/index.scss' as *;
+@use '@components/menu/style/token.scss' as *;
+@use '@components/dropdown/style/token.scss' as *;
+
+$menu-prefix-cls: string.unquote('#{theme.$prefix}-menu');
+$trigger-menu-prefix-cls: string.unquote('#{theme.$prefix}-trigger-menu');
+
+$__less-vars: (
+  'dropdown-border-radius': $dropdown-border-radius,
+  'dropdown-box-shadow': $dropdown-box-shadow,
+  'dropdown-color-bg': $dropdown-color-bg,
+  'dropdown-color-border': $dropdown-color-border,
+  'dropdown-dark-color-bg': $dropdown-dark-color-bg,
+  'dropdown-dark-color-border': $dropdown-dark-color-border,
+  'dropdown-dark-group-title-color-text': $dropdown-dark-group-title-color-text,
+  'dropdown-dark-option-color-bg_default': $dropdown-dark-option-color-bg_default,
+  'dropdown-dark-option-color-bg_disabled': $dropdown-dark-option-color-bg_disabled,
+  'dropdown-dark-option-color-bg_hover': $dropdown-dark-option-color-bg_hover,
+  'dropdown-dark-option-color-bg_selected': $dropdown-dark-option-color-bg_selected,
+  'dropdown-dark-option-color-text_default': $dropdown-dark-option-color-text_default,
+  'dropdown-dark-option-color-text_disabled': $dropdown-dark-option-color-text_disabled,
+  'dropdown-dark-option-color-text_hover': $dropdown-dark-option-color-text_hover,
+  'dropdown-dark-option-color-text_selected': $dropdown-dark-option-color-text_selected,
+  'dropdown-font-size': $dropdown-font-size,
+  'dropdown-group-title-color-text': $dropdown-group-title-color-text,
+  'dropdown-group-title-font-size': $dropdown-group-title-font-size,
+  'dropdown-group-title-height': $dropdown-group-title-height,
+  'dropdown-group-title-padding-horizontal': $dropdown-group-title-padding-horizontal,
+  'dropdown-group-title-padding-top': $dropdown-group-title-padding-top,
+  'dropdown-margin-left-suffix-icon': $dropdown-margin-left-suffix-icon,
+  'dropdown-max-height': $dropdown-max-height,
+  'dropdown-option-color-bg_default': $dropdown-option-color-bg_default,
+  'dropdown-option-color-bg_disabled': $dropdown-option-color-bg_disabled,
+  'dropdown-option-color-bg_hover': $dropdown-option-color-bg_hover,
+  'dropdown-option-color-bg_selected': $dropdown-option-color-bg_selected,
+  'dropdown-option-color-text_default': $dropdown-option-color-text_default,
+  'dropdown-option-color-text_disabled': $dropdown-option-color-text_disabled,
+  'dropdown-option-color-text_hover': $dropdown-option-color-text_hover,
+  'dropdown-option-color-text_selected': $dropdown-option-color-text_selected,
+  'dropdown-option-font-weight_selected': $dropdown-option-font-weight_selected,
+  'dropdown-option-height': $dropdown-option-height,
+  'dropdown-option-padding-horizontal': $dropdown-option-padding-horizontal,
+  'dropdown-padding-vertical': $dropdown-padding-vertical,
+  'menu-border-radius': $menu-border-radius,
+  'menu-border-radius-collapse-button': $menu-border-radius-collapse-button,
+  'menu-collapse-padding-horizontal': $menu-collapse-padding-horizontal,
+  'menu-collapse-padding-vertical': $menu-collapse-padding-vertical,
+  'menu-collapse-width': $menu-collapse-width,
+  'menu-color-border-popup': $menu-color-border-popup,
+  'menu-color-label-item-selected': $menu-color-label-item-selected,
+  'menu-dark-color-bg': $menu-dark-color-bg,
+  'menu-dark-color-button': $menu-dark-color-button,
+  'menu-dark-color-bg-button': $menu-dark-color-bg-button,
+  'menu-dark-color-bg-button_hover': $menu-dark-color-bg-button_hover,
+  'menu-dark-color-group-title': $menu-dark-color-group-title,
+  'menu-dark-color-bg-item_default': $menu-dark-color-bg-item_default,
+  'menu-dark-color-bg-item_disabled': $menu-dark-color-bg-item_disabled,
+  'menu-dark-color-bg-item_hover': $menu-dark-color-bg-item_hover,
+  'menu-dark-color-bg-item_selected': $menu-dark-color-bg-item_selected,
+  'menu-dark-color-bg-submenu_selected_hover': $menu-dark-color-bg-submenu_selected_hover,
+  'menu-dark-color-icon_default': $menu-dark-color-icon_default,
+  'menu-dark-color-icon_disabled': $menu-dark-color-icon_disabled,
+  'menu-dark-color-icon_hover': $menu-dark-color-icon_hover,
+  'menu-dark-color-icon_selected': $menu-dark-color-icon_selected,
+  'menu-dark-color-item_default': $menu-dark-color-item_default,
+  'menu-dark-color-item_disabled': $menu-dark-color-item_disabled,
+  'menu-dark-color-item_hover': $menu-dark-color-item_hover,
+  'menu-dark-color-item_selected': $menu-dark-color-item_selected,
+  'menu-dark-color-submenu_selected': $menu-dark-color-submenu_selected,
+  'menu-font-size': $menu-font-size,
+  'menu-font-weight-item-selected': $menu-font-weight-item-selected,
+  'menu-height-collapse-button': $menu-height-collapse-button,
+  'menu-height-label-item-selected': $menu-height-label-item-selected,
+  'menu-horizontal-item-gap': $menu-horizontal-item-gap,
+  'menu-horizontal-item-height': $menu-horizontal-item-height,
+  'menu-horizontal-item-padding-horizontal': $menu-horizontal-item-padding-horizontal,
+  'menu-horizontal-margin-right-item-prefix-icon': $menu-horizontal-margin-right-item-prefix-icon,
+  'menu-horizontal-padding-horizontal': $menu-horizontal-padding-horizontal,
+  'menu-horizontal-padding-vertical': $menu-horizontal-padding-vertical,
+  'menu-item-gap': $menu-item-gap,
+  'menu-item-indent-spacing': $menu-item-indent-spacing,
+  'menu-light-color-bg': $menu-light-color-bg,
+  'menu-light-color-button': $menu-light-color-button,
+  'menu-light-color-bg-button': $menu-light-color-bg-button,
+  'menu-light-color-bg-button_hover': $menu-light-color-bg-button_hover,
+  'menu-light-color-bg-item_default': $menu-light-color-bg-item_default,
+  'menu-light-color-bg-item_disabled': $menu-light-color-bg-item_disabled,
+  'menu-light-color-bg-item_hover': $menu-light-color-bg-item_hover,
+  'menu-light-color-bg-item_selected': $menu-light-color-bg-item_selected,
+  'menu-light-color-bg-submenu_selected_hover': $menu-light-color-bg-submenu_selected_hover,
+  'menu-light-color-icon_default': $menu-light-color-icon_default,
+  'menu-light-color-icon_disabled': $menu-light-color-icon_disabled,
+  'menu-light-color-icon_hover': $menu-light-color-icon_hover,
+  'menu-light-color-icon_selected': $menu-light-color-icon_selected,
+  'menu-light-color-group-title': $menu-light-color-group-title,
+  'menu-light-color-item_default': $menu-light-color-item_default,
+  'menu-light-color-item_disabled': $menu-light-color-item_disabled,
+  'menu-light-color-item_hover': $menu-light-color-item_hover,
+  'menu-light-color-item_selected': $menu-light-color-item_selected,
+  'menu-light-color-submenu_selected': $menu-light-color-submenu_selected,
+  'menu-line-height': $menu-line-height,
+  'menu-margin-left-item-suffix-icon': $menu-margin-left-item-suffix-icon,
+  'menu-margin-right-item-prefix-icon': $menu-margin-right-item-prefix-icon,
+  'menu-pop-button-border-color': $menu-pop-button-border-color,
+  'menu-pop-button-box-shadow': $menu-pop-button-box-shadow,
+  'menu-pop-button-margin-bottom': $menu-pop-button-margin-bottom,
+  'menu-pop-button-size': $menu-pop-button-size,
+  'menu-vertical-item-padding-horizontal': $menu-vertical-item-padding-horizontal,
+  'menu-vertical-item-height': $menu-vertical-item-height,
+  'menu-vertical-padding-horizontal': $menu-vertical-padding-horizontal,
+  'menu-vertical-padding-vertical': $menu-vertical-padding-vertical,
+  'menu-width-collapse-button': $menu-width-collapse-button,
+  'prefix': theme.$prefix,
+  'sd-cssvars-prefix': global.$sd-cssvars-prefix,
+  'transition-duration-1': theme.$transition-duration-1,
+  'transition-duration-2': theme.$transition-duration-2,
+  'transition-timing-function-linear': theme.$transition-timing-function-linear,
+  'transition-timing-function-standard': theme.$transition-timing-function-standard,
+);
+
+@function less-var($name, $fallback: null) {
+  @return legacyLessVar.get($__less-vars, $name, $fallback);
+}
+
+@mixin applyStyleToItem() {
+  .#{$menu-prefix-cls}-item,
+  .#{$menu-prefix-cls}-group-title,
+  .#{$menu-prefix-cls}-pop-header,
+  .#{$menu-prefix-cls}-inline-header {
+    @content;
+  }
+}
+
+@mixin menu-text-color-transition() {
+  transition: color theme.$transition-duration-2 theme.$transition-timing-function-linear;
+}
+
+@mixin menu-item-base() {
+  @include applyStyleToItem() {
+    position: relative;
+    box-sizing: border-box;
+    border-radius: $menu-border-radius;
+    cursor: pointer;
+
+    &.#{$menu-prefix-cls}-disabled {
+      cursor: not-allowed;
+    }
+
+    &.#{$menu-prefix-cls}-selected {
+      font-weight: $menu-font-weight-item-selected;
+
+      @include menu-text-color-transition();
+
+      svg {
+        @include menu-text-color-transition();
+      }
+    }
+
+    .#{theme.$prefix}-icon,
+    .#{$menu-prefix-cls}-icon {
+      margin-right: $menu-margin-right-item-prefix-icon;
+    }
+
+    .#{$menu-prefix-cls}-icon {
+      .#{theme.$prefix}-icon {
+        margin-right: 0;
+      }
+    }
+  }
+}
+
+@mixin menu-item-mode($mode) {
+  @include applyStyleToItem() {
+    padding: 0 less-var('menu-#{$mode}-item-padding-horizontal');
+    line-height: less-var('menu-#{$mode}-item-height');
+
+    .#{$menu-prefix-cls}-icon-suffix .#{theme.$prefix}-icon {
+      margin-right: 0;
+    }
+  }
+
+  @include applyStyleToItem() {
+    @if $mode == vertical {
+      margin-bottom: $menu-item-gap;
+
+      &:not(.#{$menu-prefix-cls}-has-icon) {
+        @include text-ellipsis();
+      }
+
+      &.#{$menu-prefix-cls}-has-icon {
+        display: flex;
+        align-items: center;
+
+        > .#{$menu-prefix-cls}-indent-list,
+        > .#{$menu-prefix-cls}-icon {
+          flex: none;
+        }
+
+        .#{$menu-prefix-cls}-icon {
+          line-height: 1;
+        }
+
+        .#{$menu-prefix-cls}-title {
+          @include text-ellipsis();
+        }
+      }
+
+      .#{$menu-prefix-cls}-item-inner {
+        @include text-ellipsis();
+
+        width: 100%;
+      }
+
+      .#{$menu-prefix-cls}-icon-suffix {
+        position: absolute;
+        right: $menu-vertical-item-padding-horizontal;
+      }
+      /* stylelint-disable-next-line at-rule-empty-line-before */
+    } @else {
+      .#{theme.$prefix}-icon,
+      .#{$menu-prefix-cls}-icon {
+        margin-right: $menu-horizontal-margin-right-item-prefix-icon;
+      }
+
+      .#{$menu-prefix-cls}-icon-suffix {
+        margin-left: $menu-margin-left-item-suffix-icon;
+      }
+    }
+  }
+}
+
+@mixin menu-theme($theme) {
+  &-#{$theme} {
+    background-color: less-var('menu-#{$theme}-color-bg');
+
+    @include applyStyleToItem() {
+      color: less-var('menu-#{$theme}-color-item_default');
+      background-color: less-var('menu-#{$theme}-color-bg-item_default');
+
+      .#{theme.$prefix}-icon,
+      .#{$menu-prefix-cls}-icon {
+        color: less-var('menu-#{$theme}-color-icon_default');
+      }
+
+      &:hover {
+        color: less-var('menu-#{$theme}-color-item_hover');
+        background-color: less-var('menu-#{$theme}-color-bg-item_hover');
+
+        .#{theme.$prefix}-icon,
+        .#{$menu-prefix-cls}-icon {
+          color: less-var('menu-#{$theme}-color-icon_hover');
+        }
+      }
+
+      &.#{$menu-prefix-cls}-selected {
+        color: less-var('menu-#{$theme}-color-item_selected');
+
+        .#{theme.$prefix}-icon,
+        .#{$menu-prefix-cls}-icon {
+          color: less-var('menu-#{$theme}-color-icon_selected');
+        }
+      }
+
+      &.#{$menu-prefix-cls}-disabled {
+        color: less-var('menu-#{$theme}-color-item_disabled');
+        background-color: less-var('menu-#{$theme}-color-bg-item_disabled');
+
+        .#{theme.$prefix}-icon,
+        .#{$menu-prefix-cls}-icon {
+          color: less-var('menu-#{$theme}-color-icon_disabled');
+        }
+      }
+    }
+
+    .#{$menu-prefix-cls}-item.#{$menu-prefix-cls}-selected {
+      background-color: less-var('menu-#{$theme}-color-bg-item_selected');
+    }
+
+    .#{$menu-prefix-cls}-inline-header.#{$menu-prefix-cls}-selected {
+      color: less-var('menu-#{$theme}-color-submenu_selected');
+
+      .#{theme.$prefix}-icon,
+      .#{$menu-prefix-cls}-icon {
+        color: less-var('menu-#{$theme}-color-submenu_selected');
+      }
+
+      &:hover {
+        background-color: less-var('menu-#{$theme}-color-bg-submenu_selected_hover');
+      }
+    }
+
+    &.#{$menu-prefix-cls}-horizontal {
+      @include applyStyleToItem() {
+        &.#{$menu-prefix-cls}-selected {
+          background: none;
+
+          @include menu-text-color-transition();
+
+          &:hover {
+            background-color: less-var('menu-#{$theme}-color-bg-item_hover');
+          }
+        }
+      }
+    }
+
+    .#{$menu-prefix-cls}-group-title {
+      color: less-var('menu-#{$theme}-color-group-title');
+      pointer-events: none;
+    }
+
+    .#{$menu-prefix-cls}-collapse-button {
+      color: less-var('menu-#{$theme}-color-button');
+      background-color: less-var('menu-#{$theme}-color-bg-button');
+
+      &:hover {
+        background-color: less-var('menu-#{$theme}-color-bg-button_hover');
+      }
+    }
+  }
+}
+
+@keyframes #{theme.$prefix}-menu-selected-item-label-enter {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+.#{$menu-prefix-cls} {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  font-size: $menu-font-size;
+  line-height: $menu-line-height;
+  transition: width theme.$transition-duration-2 theme.$transition-timing-function-standard;
+
+  &:focus-visible {
+    outline: 3px solid var(string.unquote('#{global.$sd-cssvars-prefix}-color-primary-light-2'));
+  }
+
+  // 设置菜单层级的缩进
+  &-indent {
+    display: inline-block;
+    width: $menu-item-indent-spacing;
+  }
+
+  @include menu-item-base();
+  @include menu-theme(light);
+  @include menu-theme(dark);
+
+  // 校正 a 标签颜色
+  a,
+  a:hover,
+  a:focus,
+  a:active {
+    color: inherit;
+    text-decoration: none;
+    cursor: inherit;
+  }
+
+  &-inner {
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+  }
+
+  // 展开折叠图标
+  &-icon-suffix {
+    &.is-open {
+      transform: rotate(180deg);
+    }
+  }
+
+  &-vertical {
+    @include menu-item-mode(vertical);
+
+    .#{$menu-prefix-cls}-inner {
+      padding: $menu-vertical-padding-vertical $menu-vertical-padding-horizontal;
+    }
+
+    .#{$menu-prefix-cls}-item.#{$menu-prefix-cls}-item-indented {
+      display: flex;
+    }
+
+    // 为 header 右侧预留下放置 suffixIcon 的空间
+    .#{$menu-prefix-cls}-pop-header,
+    .#{$menu-prefix-cls}-inline-header {
+      padding-right: $menu-vertical-item-padding-horizontal + 16;
+    }
+  }
+
+  // 水平菜单中，仅允许出现普通 item 和 popSubMenu
+  &-horizontal {
+    width: 100%;
+    height: auto;
+
+    @include menu-item-mode(horizontal);
+
+    .#{$menu-prefix-cls}-inner {
+      display: flex;
+      align-items: center;
+      padding: $menu-horizontal-padding-vertical $menu-horizontal-padding-horizontal;
+    }
+
+    .#{$menu-prefix-cls}-item,
+    .#{$menu-prefix-cls}-pop {
+      display: inline-block;
+      flex-shrink: 0;
+      vertical-align: middle;
+
+      &:not(:first-child) {
+        margin-left: $menu-horizontal-item-gap;
+      }
+    }
+
+    .#{$menu-prefix-cls}-pop::after {
+      position: absolute;
+      bottom: -$menu-horizontal-padding-vertical;
+      left: 0;
+      width: 100%;
+      height: $menu-horizontal-padding-vertical;
+      content: ' ';
+    }
+  }
+
+  // 水平菜单的动态折叠容器
+  &-overflow {
+    &-wrap {
+      width: 100%;
+    }
+
+    &-sub-menu-mirror,
+    &-hidden-menu-item {
+      position: absolute !important;
+      white-space: nowrap;
+      visibility: hidden;
+      pointer-events: none;
+    }
+  }
+
+  // 选中状态下的提示浮标，相对于 MenuItem 定位
+  &-selected-label {
+    position: absolute;
+    right: $menu-horizontal-item-padding-horizontal;
+    bottom: -$menu-horizontal-padding-vertical;
+    left: $menu-horizontal-item-padding-horizontal;
+    height: $menu-height-label-item-selected;
+    background-color: $menu-color-label-item-selected;
+    animation: #{theme.$prefix}-menu-selected-item-label-enter theme.$transition-duration-2
+      theme.$transition-timing-function-linear;
+  }
+
+  &-pop-button {
+    width: auto;
+    background: none;
+    box-shadow: none;
+
+    &.#{$menu-prefix-cls}-collapsed {
+      width: auto;
+    }
+
+    @include applyStyleToItem() {
+      width: $menu-pop-button-size;
+      height: $menu-pop-button-size;
+      margin-bottom: $menu-pop-button-margin-bottom;
+      line-height: $menu-pop-button-size;
+      border: 1px solid $menu-pop-button-border-color;
+      border-radius: 50%;
+      box-shadow: $menu-pop-button-box-shadow;
+    }
+  }
+
+  // 折叠样式
+  &-collapsed {
+    width: $menu-collapse-width;
+
+    .#{$menu-prefix-cls}-inner {
+      padding: $menu-collapse-padding-vertical $menu-collapse-padding-horizontal;
+    }
+
+    .#{$menu-prefix-cls}-icon-suffix {
+      display: none;
+    }
+
+    // Hide text after icon when menu is collapsed
+    .#{$menu-prefix-cls}-has-icon {
+      > *:not(.#{$menu-prefix-cls}-icon) {
+        opacity: 0;
+      }
+    }
+
+    @include applyStyleToItem() {
+      .#{theme.$prefix}-icon {
+        margin-right: 100%;
+      }
+    }
+  }
+
+  // 折叠按钮
+  &-collapse-button {
+    position: absolute;
+    right: 12px;
+    bottom: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: $menu-width-collapse-button;
+    height: $menu-height-collapse-button;
+    border-radius: $menu-border-radius-collapse-button;
+    cursor: pointer;
+  }
+
+  // sub-menu-inline 的内容区域样式
+  &-inline-content {
+    height: auto;
+    overflow: hidden;
+    transition: height theme.$transition-duration-2 theme.$transition-timing-function-standard;
+
+    &-hide {
+      height: 0;
+    }
+  }
+
+  // 弹出的 ToolTip 中 a 标签的样式
+  &-item-tooltip a {
+    color: inherit;
+    cursor: text;
+
+    &:hover,
+    &:focus,
+    &:active {
+      color: inherit;
+    }
+  }
+
+  // 弹出菜单浮层三角箭头
+  &-pop-trigger {
+    &.#{theme.$prefix}-trigger-position-bl {
+      transform: translateY($menu-horizontal-padding-vertical);
+
+      .#{theme.$prefix}-trigger-arrow {
+        z-index: 0;
+        border-top: 1px solid $menu-color-border-popup;
+        border-left: 1px solid $menu-color-border-popup;
+      }
+    }
+
+    &.#{theme.$prefix}-trigger-position-rt {
+      transform: translateX($menu-vertical-padding-horizontal);
+
+      .#{theme.$prefix}-trigger-arrow {
+        z-index: 0;
+        border-bottom: 1px solid $menu-color-border-popup;
+        border-left: 1px solid $menu-color-border-popup;
+      }
+    }
+
+    &.#{$menu-prefix-cls}-pop-trigger-dark {
+      .#{theme.$prefix}-trigger-arrow {
+        background-color: $menu-dark-color-bg;
+        border-color: $menu-dark-color-bg;
+      }
+    }
+  }
+}
+
+// trigger 里的 menu
+.#{$trigger-menu-prefix-cls} {
+  position: relative;
+  box-sizing: border-box;
+  max-height: $dropdown-max-height;
+  padding: $dropdown-padding-vertical 0;
+  overflow: auto;
+  background-color: $dropdown-color-bg;
+  border: 1px solid $dropdown-color-border;
+  border-radius: $dropdown-border-radius;
+  box-shadow: $dropdown-box-shadow;
+
+  &-hidden {
+    display: none;
+  }
+
+  &-item,
+  &-pop-header {
+    position: relative;
+    // 避免 Trigger 的小箭头位于其上方
+    z-index: 1;
+    box-sizing: border-box;
+    width: 100%;
+    height: $dropdown-option-height;
+    padding: 0 $dropdown-option-padding-horizontal;
+
+    // default
+    color: $dropdown-option-color-text_default;
+    font-size: $dropdown-font-size;
+    line-height: $dropdown-option-height;
+    text-align: left;
+    background-color: $dropdown-option-color-bg_default;
+    cursor: pointer;
+
+    @include text-ellipsis();
+
+    // selected
+    &.#{$trigger-menu-prefix-cls}-selected {
+      color: $dropdown-option-color-text_selected;
+      font-weight: $dropdown-option-font-weight_selected;
+      background-color: $dropdown-option-color-bg_selected;
+      transition: all theme.$transition-duration-1 theme.$transition-timing-function-linear;
+    }
+
+    // hover
+    &:hover {
+      color: $dropdown-option-color-text_hover;
+      background-color: $dropdown-option-color-bg_hover;
+    }
+
+    // disabled
+    &.#{$trigger-menu-prefix-cls}-disabled {
+      color: $dropdown-option-color-text_disabled;
+      background-color: $dropdown-option-color-bg_disabled;
+      cursor: not-allowed;
+    }
+  }
+
+  .#{$trigger-menu-prefix-cls}-has-icon {
+    display: flex;
+    align-items: center;
+
+    .#{$trigger-menu-prefix-cls}-icon {
+      margin-right: 8px;
+      line-height: 1;
+    }
+
+    > * {
+      flex: none;
+    }
+
+    .#{$trigger-menu-prefix-cls}-title {
+      flex: auto;
+
+      @include text-ellipsis();
+    }
+  }
+
+  &-pop-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .#{$trigger-menu-prefix-cls}-icon-suffix {
+      margin-left: $dropdown-margin-left-suffix-icon;
+    }
+  }
+
+  &-group {
+    &:first-child &-title {
+      padding-top: $dropdown-group-title-padding-top - $dropdown-padding-vertical;
+    }
+  }
+
+  &-group-title {
+    box-sizing: border-box;
+    width: 100%;
+    padding: $dropdown-group-title-padding-top $dropdown-group-title-padding-horizontal 0
+      $dropdown-group-title-padding-horizontal;
+    color: $dropdown-group-title-color-text;
+    font-size: $dropdown-group-title-font-size;
+    line-height: $dropdown-group-title-height;
+
+    @include text-ellipsis();
+  }
+
+  &-pop-trigger {
+    // 下拉框的 menu 弹出不需要小箭头
+    .#{theme.$prefix}-trigger-arrow {
+      display: none;
+    }
+  }
+
+  &-dark {
+    background-color: $dropdown-dark-color-bg;
+    border-color: $dropdown-dark-color-border;
+
+    .#{$trigger-menu-prefix-cls}-item,
+    .#{$trigger-menu-prefix-cls}-pop-header {
+      // default
+      color: $dropdown-dark-option-color-text_default;
+      background-color: $dropdown-dark-option-color-bg_default;
+
+      // selected
+      &.#{$trigger-menu-prefix-cls}-selected {
+        color: $dropdown-dark-option-color-text_selected;
+        background-color: $dropdown-dark-option-color-bg_selected;
+
+        &:hover {
+          color: $dropdown-dark-option-color-text_selected;
+        }
+      }
+
+      // hover
+      &:hover {
+        color: $dropdown-dark-option-color-text_hover;
+        background-color: $dropdown-dark-option-color-bg_hover;
+      }
+
+      // disabled
+      &.#{$trigger-menu-prefix-cls}-disabled {
+        color: $dropdown-dark-option-color-text_disabled;
+        background-color: $dropdown-dark-option-color-bg_disabled;
+      }
+    }
+
+    .#{$trigger-menu-prefix-cls}-group-title {
+      color: $dropdown-dark-group-title-color-text;
+    }
+  }
+}