vue-ant-patterns/es/style/overlay/dropdown-menu.less

vue-ant-patterns

@import '../mixins/index.less';
@import '../themes/index.less';

/* dropdown-menu 部分样式覆盖 */
@ant-dropdown: ant-dropdown;
@menu: ant-dropdown-menu;
@dropmenu-dark: ant-dropdown-menu-dark;

@arrow: ant-dropdown-menu-submenu-arrow;

@header-dropdown: ~'@{depot-prefix}-header-dropdown';

.@{header-dropdown} {
  .ant-dropdown {
    min-width: 200px;
    &-menu {
      min-width: 200px;
      // background: @header-menu-dark-bg;
      &-dark {
        min-width: 200px;
        background: @header-menu-dark-bg;
        .ant-dropdown-menu-item-divider {
          background-color: #444f6b;
        }
        .@{menu} {
          background: @header-menu-dark-bg;
        }
        .@{menu}-item,
        .@{menu}-submenu,
        .@{menu}-submenu-title {
          .@{arrow} {
            color: @header-menu-dark-color;
            .anticon {
              color: @header-menu-dark-color;
            }
          }
          &:hover,
          &-selected {
            background: @header-menu-active-bg;
            color: @header-menu-active-color;
            .@{menu}-submenu-title {
              background: @header-menu-active-bg;
              .@{arrow} {
                color: @header-menu-active-color;
                .anticon {
                  color: @header-menu-active-color;
                }
              }
            }
          }
        }

        .@{menu}-submenu-disabled,
        .@{menu}-item-disabled,
        .@{menu}-submenu-disabled .@{menu}-submenu-title {
          background: none;
          color: @disabled-color;
          .@{arrow} {
            background: none;
            color: @disabled-color;
            .anticon {
              background: none;
              color: @disabled-color;
            }
          }
          &:hover {
            background: none;
            color: @disabled-color;
            .@{arrow} {
              background: none;
              color: @disabled-color;
              .anticon {
                background: none;
                color: @disabled-color;
              }
            }
          }
        }

        .@{menu}-item-selected,
        .@{menu}-submenu-selected {
          color: @header-menu-active-color;
          background-color: @header-menu-active-bg;
          > a,
          > a:hover,
          .@{menu}-submenu-title,
          .@{menu}-submenu-title:hover {
            background-color: @header-menu-active-bg;
            color: @header-menu-active-color;
          }
        }
      }
      &-submenu-selected {
        color: @menu-highlight-color;
        background-color: @menu-item-active-bg;
      }
      // @menu-highlight-color;
      // @menu-item-active-bg;
    }
  }

  .@{menu}-submenu.@{menu}-submenu-popup.@{menu}-dark {
    background: none;
  }

  &.avatar-dropdown {
    .ant-dropdown {
      min-width: 150px;
      &-menu {
        min-width: 150px;
      }
    }
  }
}