Menu: add chalk theme

examples/docs/en-US/menu.md

@@ -4,7 +4,7 @@
       padding-left: 55px;
     }
     .el-menu-vertical-demo:not(.el-menu--collapse) {
-      width: 200px;
+      width: 240px;
       min-height: 400px;
     }
     .line {
@@ -59,9 +59,9 @@ Menu that provides navigation for your website.
 
 Top bar NavMenu can be used in a variety of scenarios.
 
-::: demo By default Menu is vertical, but you can change it to horizontal by setting the mode prop to 'horizontal'. In addition, you can use the submenu component to create a second level menu.
+::: demo By default Menu is vertical, but you can change it to horizontal by setting the mode prop to 'horizontal'. In addition, you can use the submenu component to create a second level menu. Menu provides `background-color`, `text-color` and `active-text-color` to customize the colors.
 ```html
-<el-menu theme="dark" :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
+<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
   <el-menu-item index="1">Processing Center</el-menu-item>
   <el-submenu index="2">
     <template slot="title">Workspace</template>
@@ -72,7 +72,14 @@ Top bar NavMenu can be used in a variety of scenarios.
   <el-menu-item index="3"><a href="https://www.ele.me" target="_blank">Orders</a></el-menu-item>
 </el-menu>
 <div class="line"></div>
-<el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect">
+<el-menu
+  :default-active="activeIndex2"
+  class="el-menu-demo"
+  mode="horizontal"
+  @select="handleSelect"
+  background-color="#545c64"
+  text-color="#fff"
+  active-text-color="#ffd04b">
   <el-menu-item index="1">Processing Center</el-menu-item>
   <el-submenu index="2">
     <template slot="title">Workspace</template>
@@ -108,11 +115,18 @@ Vertical NavMenu with sub-menus.
 ::: demo You can use the el-menu-item-group component to create a menu group, and the name of the group is determined by the title prop or a named slot.
 ```html
 <el-row class="tac">
-  <el-col :span="8">
-    <h5>With icons</h5>
-    <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
+  <el-col :span="12">
+    <h5>Default colors</h5>
+    <el-menu
+      default-active="2"
+      class="el-menu-vertical-demo"
+      @open="handleOpen"
+      @close="handleClose">
       <el-submenu index="1">
-        <template slot="title"><i class="el-icon-message"></i>Navigator One</template>
+        <template slot="title">
+          <i class="el-icon-message"></i>
+          <span>Navigator One</span>
+        </template>
         <el-menu-item-group title="Group One">
           <el-menu-item index="1-1">item one</el-menu-item>
           <el-menu-item index="1-2">item one</el-menu-item>
@@ -125,18 +139,34 @@ Vertical NavMenu with sub-menus.
           <el-menu-item index="1-4-1">item one</el-menu-item>
         </el-submenu>
       </el-submenu>
-      <el-menu-item index="2"><i class="el-icon-menu"></i>Navigator Two</el-menu-item>
-      <el-menu-item index="3"><i class="el-icon-setting"></i>Navigator Three</el-menu-item>
+      <el-menu-item index="2">
+        <i class="el-icon-menu"></i>
+        <span>Navigator Two</span>
+      </el-menu-item>
+      <el-menu-item index="3">
+        <i class="el-icon-setting"></i>
+        <span>Navigator Three</span>
+      </el-menu-item>
     </el-menu>
   </el-col>
-  <el-col :span="8">
-    <h5>Without icons</h5>
-    <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" theme="dark">
+  <el-col :span="12">
+    <h5>Custom colors</h5>
+    <el-menu
+      default-active="2"
+      class="el-menu-vertical-demo"
+      @open="handleOpen"
+      @close="handleClose"
+      background-color="#545c64"
+      text-color="#fff"
+      active-text-color="#ffd04b">
       <el-submenu index="1">
-        <template slot="title">Navigator One</template>
+        <template slot="title">
+          <i class="el-icon-message"></i>
+          <span>Navigator One</span>
+        </template>
         <el-menu-item-group title="Group One">
           <el-menu-item index="1-1">item one</el-menu-item>
-          <el-menu-item index="1-2">item two</el-menu-item>
+          <el-menu-item index="1-2">item one</el-menu-item>
         </el-menu-item-group>
         <el-menu-item-group title="Group Two">
           <el-menu-item index="1-3">item three</el-menu-item>
@@ -146,21 +176,14 @@ Vertical NavMenu with sub-menus.
           <el-menu-item index="1-4-1">item one</el-menu-item>
         </el-submenu>
       </el-submenu>
-      <el-menu-item index="2">Navigator Two</el-menu-item>
-      <el-menu-item index="3">Navigator Three</el-menu-item>
-    </el-menu>
-  </el-col>
-  <el-col :span="8">
-    <h5>Groups</h5>
-    <el-menu mode="vertical" default-active="1" class="el-menu-vertical-demo">
-      <el-menu-item-group title="Group One">
-        <el-menu-item index="1"><i class="el-icon-message"></i>Navigator One</el-menu-item>
-        <el-menu-item index="2"><i class="el-icon-message"></i>Navigator Two</el-menu-item>
-      </el-menu-item-group>
-      <el-menu-item-group title="Group Two">
-        <el-menu-item index="3"><i class="el-icon-message"></i>Navigator Three</el-menu-item>
-        <el-menu-item index="4"><i class="el-icon-message"></i>Navigator Four</el-menu-item>
-      </el-menu-item-group>
+      <el-menu-item index="2">
+        <i class="el-icon-menu"></i>
+        <span>Navigator Two</span>
+      </el-menu-item>
+      <el-menu-item index="3">
+        <i class="el-icon-setting"></i>
+        <span>Navigator Three</span>
+      </el-menu-item>
     </el-menu>
   </el-col>
 </el-row>
@@ -251,6 +274,9 @@ Vertical NavMenu could be collapsed.
 |---------- |-------- |---------- |-------------  |-------- |
 | mode     | menu display mode   | string  |   horizontal/vertical   | vertical |
 | collapse  | whether the menu is collapsed (available only in vertical mode) | boolean  |   —   | false |
+| background-color  | background color of Menu (hex format) | string |   —   | #ffffff |
+| text-color  | text color of Menu (hex format) | string |   —   | #2d2f33 |
+| active-text-color  | text color of currently active menu item (hex format) | string |   —   | #1989fa |
 | theme     | theme color   | string    | light/dark | light |
 | default-active | index of currently active menu | string    | — | — |
 | default-openeds | array that contains keys of currently active sub-menus  | Array    | — | — |

examples/docs/zh-CN/menu.md

@@ -4,7 +4,7 @@
       padding-left: 55px;
     }
     .el-menu-vertical-demo:not(.el-menu--collapse) {
-      width: 200px;
+      width: 240px;
       min-height: 400px;
     }
     .line {
@@ -59,10 +59,10 @@
 
 适用广泛的基础用法。
 
-::: demo 导航菜单默认为垂直模式，通过 `mode` 属性可以使导航菜单变更为水平模式。另外，在菜单中通过 `submenu` 组件可以生成二级菜单。
+::: demo 导航菜单默认为垂直模式，通过`mode`属性可以使导航菜单变更为水平模式。另外，在菜单中通过`submenu`组件可以生成二级菜单。Menu 还提供了`background-color`、`text-color`和`active-text-color`，分别用于设置菜单的背景色、菜单的文字颜色和当前激活菜单的文字颜色。
 
 ```html
-<el-menu theme="dark" :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
+<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
   <el-menu-item index="1">处理中心</el-menu-item>
   <el-submenu index="2">
     <template slot="title">我的工作台</template>
@@ -73,7 +73,14 @@
   <el-menu-item index="3"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
 </el-menu>
 <div class="line"></div>
-<el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect">
+<el-menu
+  :default-active="activeIndex2"
+  class="el-menu-demo"
+  mode="horizontal"
+  @select="handleSelect"
+  background-color="#545c64"
+  text-color="#fff"
+  active-text-color="#ffd04b">
   <el-menu-item index="1">处理中心</el-menu-item>
   <el-submenu index="2">
     <template slot="title">我的工作台</template>
@@ -106,14 +113,21 @@
 
 垂直菜单，可内嵌子菜单。
 
-::: demo 通过 `el-menu-item-group` 组件可以实现菜单进行分组，分组名可以通过 `title` 属性直接设定也可以通过具名 slot 来设定。
+::: demo 通过`el-menu-item-group`组件可以实现菜单进行分组，分组名可以通过`title`属性直接设定，也可以通过具名 slot 来设定。
 ```html
 <el-row class="tac">
-  <el-col :span="8">
-    <h5>带 icon</h5>
-    <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
+  <el-col :span="12">
+    <h5>默认颜色</h5>
+    <el-menu
+      default-active="2"
+      class="el-menu-vertical-demo"
+      @open="handleOpen"
+      @close="handleClose">
       <el-submenu index="1">
-        <template slot="title"><i class="el-icon-message"></i>导航一</template>
+        <template slot="title">
+          <i class="el-icon-message"></i>
+          <span>导航一</span>
+        </template>
         <el-menu-item-group>
           <template slot="title">分组一</template>
           <el-menu-item index="1-1">选项1</el-menu-item>
@@ -127,16 +141,33 @@
           <el-menu-item index="1-4-1">选项1</el-menu-item>
         </el-submenu>
       </el-submenu>
-      <el-menu-item index="2"><i class="el-icon-menu"></i>导航二</el-menu-item>
-      <el-menu-item index="3"><i class="el-icon-setting"></i>导航三</el-menu-item>
+      <el-menu-item index="2">
+        <i class="el-icon-menu"></i>
+        <span slot="title">导航二</span>
+      </el-menu-item>
+      <el-menu-item index="3">
+        <i class="el-icon-setting"></i>
+        <span slot="title">导航三</span>
+      </el-menu-item>
     </el-menu>
   </el-col>
-  <el-col :span="8">
-    <h5>不带 icon</h5>
-    <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" theme="dark">
+  <el-col :span="12">
+    <h5>自定义颜色</h5>
+    <el-menu
+      default-active="2"
+      class="el-menu-vertical-demo"
+      @open="handleOpen"
+      @close="handleClose"
+      background-color="#545c64"
+      text-color="#fff"
+      active-text-color="#ffd04b">
       <el-submenu index="1">
-        <template slot="title">导航一</template>
-        <el-menu-item-group title="分组一">
+        <template slot="title">
+          <i class="el-icon-message"></i>
+          <span>导航一</span>
+        </template>
+        <el-menu-item-group>
+          <template slot="title">分组一</template>
           <el-menu-item index="1-1">选项1</el-menu-item>
           <el-menu-item index="1-2">选项2</el-menu-item>
         </el-menu-item-group>
@@ -148,21 +179,14 @@
           <el-menu-item index="1-4-1">选项1</el-menu-item>
         </el-submenu>
       </el-submenu>
-      <el-menu-item index="2">导航二</el-menu-item>
-      <el-menu-item index="3">导航三</el-menu-item>
-    </el-menu>
-  </el-col>
-  <el-col :span="8">
-    <h5>分组</h5>
-    <el-menu mode="vertical" default-active="1" class="el-menu-vertical-demo">
-      <el-menu-item-group title="分组一">
-        <el-menu-item index="1"><i class="el-icon-message"></i>导航一</el-menu-item>
-        <el-menu-item index="2"><i class="el-icon-message"></i>导航二</el-menu-item>
-      </el-menu-item-group>
-      <el-menu-item-group title="分组二">
-        <el-menu-item index="3"><i class="el-icon-message"></i>导航三</el-menu-item>
-        <el-menu-item index="4"><i class="el-icon-message"></i>导航四</el-menu-item>
-      </el-menu-item-group>
+      <el-menu-item index="2">
+        <i class="el-icon-menu"></i>
+        <span slot="title">导航二</span>
+      </el-menu-item>
+      <el-menu-item index="3">
+        <i class="el-icon-setting"></i>
+        <span slot="title">导航三</span>
+      </el-menu-item>
     </el-menu>
   </el-col>
 </el-row>
@@ -251,7 +275,9 @@
 |---------- |-------- |---------- |-------------  |-------- |
 | mode     | 模式   | string  |   horizontal,vertical   | vertical |
 | collapse  | 是否水平折叠收起菜单（仅在 mode 为 vertical 时可用）| boolean  |   —   | false |
-| theme     | 主题色   | string    | light,dark | light |
+| background-color  | 菜单的背景色（仅支持 hex 格式） | string |   —   | #ffffff |
+| text-color  | 菜单的文字颜色（仅支持 hex 格式） | string |   —   | #2d2f33 |
+| active-text-color  | 当前激活菜单的文字颜色（仅支持 hex 格式） | string |   —   | #1989fa |
 | default-active | 当前激活菜单的 index | string    | — | — |
 | default-openeds | 当前打开的submenu的 key 数组 | Array    | — | — |
 | unique-opened  | 是否只保持一个子菜单的展开 | boolean   | — | false   |

packages/menu/src/menu-item-group.vue

@@ -28,7 +28,7 @@
     },
     computed: {
       levelPadding() {
-        let padding = 10;
+        let padding = 20;
         let parent = this.$parent;
         if (this.rootMenu.collapse) return 20;
         while (parent && parent.$options.componentName !== 'ElMenu') {
@@ -37,7 +37,6 @@
           }
           parent = parent.$parent;
         }
-        padding === 10 && (padding = 20);
         return padding;
       }
     }

packages/menu/src/menu-item.vue

@@ -1,7 +1,9 @@
 <template>
   <li class="el-menu-item"
-    :style="paddingStyle"
+    :style="[paddingStyle, itemStyle, { backgroundColor }]"
     @click="handleClick"
+    @mouseenter="onMouseEnter"
+    @mouseleave="onMouseLeave"
     :class="{
       'is-active': active,
       'is-disabled': disabled
@@ -49,9 +51,46 @@
     computed: {
       active() {
         return this.index === this.rootMenu.activeIndex;
+      },
+      hoverBackground() {
+        return this.rootMenu.hoverBackground;
+      },
+      backgroundColor() {
+        return this.rootMenu.backgroundColor || '';
+      },
+      activeTextColor() {
+        return this.rootMenu.activeTextColor || '';
+      },
+      textColor() {
+        return this.rootMenu.textColor || '';
+      },
+      mode() {
+        return this.rootMenu.mode;
+      },
+      itemStyle() {
+        const style = {
+          color: this.active ? this.activeTextColor : this.textColor
+        };
+        if (this.mode === 'horizontal' && !this.isNested) {
+          style.borderBottomColor = this.active
+            ? (this.rootMenu.activeTextColor ? this.activeTextColor : '')
+            : 'transparent';
+        }
+        return style;
+      },
+      isNested() {
+        return this.parentMenu !== this.rootMenu;
       }
     },
     methods: {
+      onMouseEnter() {
+        if (this.mode === 'horizontal' && !this.rootMenu.backgroundColor) return;
+        this.$el.style.backgroundColor = this.hoverBackground;
+      },
+      onMouseLeave() {
+        if (this.mode === 'horizontal' && !this.rootMenu.backgroundColor) return;
+        this.$el.style.backgroundColor = this.backgroundColor;
+      },
       handleClick() {
         this.dispatch('ElMenu', 'item-click', this);
         this.$emit('click', this);

packages/menu/src/menu.vue

@@ -2,9 +2,9 @@
   <el-menu-collapse-transition>
     <ul class="el-menu"
       :key="+collapse"
+      :style="{ backgroundColor: backgroundColor || '' }"
       :class="{
         'el-menu--horizontal': mode === 'horizontal',
-        'el-menu--dark': theme === 'dark',
         'el-menu--collapse': collapse
       }"
     >
@@ -102,17 +102,16 @@
         default: ''
       },
       defaultOpeneds: Array,
-      theme: {
-        type: String,
-        default: 'light'
-      },
       uniqueOpened: Boolean,
       router: Boolean,
       menuTrigger: {
         type: String,
         default: 'hover'
       },
-      collapse: Boolean
+      collapse: Boolean,
+      backgroundColor: String,
+      textColor: String,
+      activeTextColor: String
     },
     data() {
       return {
@@ -122,6 +121,11 @@
         submenus: {}
       };
     },
+    computed: {
+      hoverBackground() {
+        return this.backgroundColor ? this.mixColor(this.backgroundColor, 0.2) : '';
+      }
+    },
     watch: {
       defaultActive(value) {
         const item = this.items[value];
@@ -141,6 +145,42 @@
       }
     },
     methods: {
+      getColorChannels(color) {
+        color = color.replace('#', '');
+        if (/^[1-9a-fA-F]{3}$/.test(color)) {
+          color = color.split('');
+          for (let i = 2; i >= 0; i--) {
+            color.splice(i, 0, color[i]);
+          }
+          color = color.join('');
+        }
+        if (/^[1-9a-fA-F]{6}$/.test(color)) {
+          return {
+            red: parseInt(color.slice(0, 2), 16),
+            green: parseInt(color.slice(2, 4), 16),
+            blue: parseInt(color.slice(4, 6), 16)
+          };
+        } else {
+          return {
+            red: 255,
+            green: 255,
+            blue: 255
+          };
+        }
+      },
+      mixColor(color, percent) {
+        let { red, green, blue } = this.getColorChannels(color);
+        if (percent > 0) { // shade given color
+          red *= 1 - percent;
+          green *= 1 - percent;
+          blue *= 1 - percent;
+        } else { // tint given color
+          red += (255 - red) * percent;
+          green += (255 - green) * percent;
+          blue += (255 - blue) * percent;
+        }
+        return `rgb(${ Math.round(red) }, ${ Math.round(green) }, ${ Math.round(blue) })`;
+      },
       addItem(item) {
         this.$set(this.items, item.index, item);
       },

packages/menu/src/submenu.vue

@@ -8,23 +8,28 @@
     @mouseenter="handleMouseenter"
     @mouseleave="handleMouseleave"
   >
-    <div class="el-submenu__title" ref="submenu-title" @click="handleClick" :style="paddingStyle">
+    <div
+      class="el-submenu__title"
+      ref="submenu-title"
+      @click="handleClick"
+      @mouseenter="handleTitleMouseenter"
+      @mouseleave="handleTitleMouseleave"
+      :style="[paddingStyle, titleStyle, { backgroundColor }]">
       <slot name="title"></slot>
       <i :class="{
         'el-submenu__icon-arrow': true,
-        'el-icon-caret-bottom': rootMenu.mode === 'horizontal',
-        'el-icon-arrow-down': rootMenu.mode === 'vertical' && !rootMenu.collapse,
-        'el-icon-caret-right': rootMenu.mode === 'vertical' && rootMenu.collapse
+        'el-icon-arrow-down': rootMenu.mode === 'horizontal' || rootMenu.mode === 'vertical' && !rootMenu.collapse,
+        'el-icon-arrow-right': rootMenu.mode === 'vertical' && rootMenu.collapse
       }">
       </i>
     </div>
     <template v-if="rootMenu.mode === 'horizontal' || (rootMenu.mode === 'vertical' && rootMenu.collapse)">
       <transition :name="menuTransitionName">
-        <ul class="el-menu" v-show="opened"><slot></slot></ul>
+        <ul class="el-menu" v-show="opened" :style="{ backgroundColor: rootMenu.backgroundColor || '' }"><slot></slot></ul>
       </transition>
     </template>
     <el-collapse-transition v-else>
-      <ul class="el-menu" v-show="opened"><slot></slot></ul>
+      <ul class="el-menu" v-show="opened" :style="{ backgroundColor: rootMenu.backgroundColor || '' }"><slot></slot></ul>
     </el-collapse-transition>
   </li>
 </template>
@@ -63,27 +68,54 @@
       opened() {
         return this.rootMenu.openedMenus.indexOf(this.index) > -1;
       },
-      active: {
-        cache: false,
-        get() {
-          let isActive = false;
-          const submenus = this.submenus;
-          const items = this.items;
+      active() {
+        let isActive = false;
+        const submenus = this.submenus;
+        const items = this.items;
 
-          Object.keys(items).forEach(index => {
-            if (items[index].active) {
-              isActive = true;
-            }
-          });
+        Object.keys(items).forEach(index => {
+          if (items[index].active) {
+            isActive = true;
+          }
+        });
 
-          Object.keys(submenus).forEach(index => {
-            if (submenus[index].active) {
-              isActive = true;
-            }
-          });
+        Object.keys(submenus).forEach(index => {
+          if (submenus[index].active) {
+            isActive = true;
+          }
+        });
 
-          return isActive;
+        return isActive;
+      },
+      hoverBackground() {
+        return this.rootMenu.hoverBackground;
+      },
+      backgroundColor() {
+        return this.rootMenu.backgroundColor || '';
+      },
+      activeTextColor() {
+        return this.rootMenu.activeTextColor || '';
+      },
+      textColor() {
+        return this.rootMenu.textColor || '';
+      },
+      mode() {
+        return this.rootMenu.mode;
+      },
+      titleStyle() {
+        if (this.mode !== 'horizontal') {
+          return {
+            color: this.textColor
+          };
         }
+        return {
+          borderBottomColor: this.active
+            ? (this.rootMenu.activeTextColor ? this.activeTextColor : '')
+            : 'transparent',
+          color: this.active
+            ? this.activeTextColor
+            : this.textColor
+        };
       }
     },
     methods: {
@@ -134,6 +166,14 @@
         this.timeout = setTimeout(() => {
           this.rootMenu.closeMenu(this.index);
         }, 300);
+      },
+      handleTitleMouseenter() {
+        if (this.mode === 'horizontal' && !this.rootMenu.backgroundColor) return;
+        this.$refs['submenu-title'].style.backgroundColor = this.rootMenu.hoverBackground;
+      },
+      handleTitleMouseleave() {
+        if (this.mode === 'horizontal' && !this.rootMenu.backgroundColor) return;
+        this.$refs['submenu-title'].style.backgroundColor = this.rootMenu.backgroundColor || '';
       }
     },
     created() {

packages/theme-chalk/src/aside.scss

@@ -0,0 +1,6 @@
+@import "mixins/mixins";
+
+@include b(aside) {
+  overflow: auto;
+  box-sizing: border-box;
+}

packages/theme-chalk/src/common/var.scss

@@ -584,13 +584,9 @@ $--steps-padding: 20px;
 
 /* Menu
 --------------------------*/
-$--menu-item-color: $--link-color;
-$--menu-item-fill: $--color-text-placeholder;
-$--menu-item-hover-fill: $--disabled-border-base;
-
-$--dark-menu-item-color: $--link-color;
-$--dark-menu-item-fill: $--color-text-secondary;
-$--dark-menu-item-hover-fill: $--link-color;
+$--menu-item-color: $--color-text-primary;
+$--menu-item-fill: $--color-white;
+$--menu-item-hover-fill: $--color-primary-light-9;
 
 /* Rate
 --------------------------*/

packages/theme-chalk/src/menu.scss

@@ -16,7 +16,7 @@
 }
 
 @include b(menu) {
-  border-radius: 2px;
+  border-right: solid 1px #e6e6e6;
   list-style: none;
   position: relative;
   margin: 0;
@@ -28,27 +28,9 @@
     list-style: none;
   }
 
-  @include m(dark) {
-    background-color: $--dark-menu-item-fill;
-
-    & .el-menu-item,
-    & .el-submenu__title {
-      color: $--color-black;
-
-      &:hover {
-        background-color: $--color-black;
-      }
-    }
-
-    & .el-submenu .el-menu {
-      background-color: $--color-black;
-
-      & .el-menu-item:hover {
-        background-color: $--color-black;
-      }
-    }
-  }
   @include m(horizontal) {
+    border-right: none;
+    border-bottom: solid 1px #e6e6e6;
     & .el-menu-item {
       float: left;
       height: 60px;
@@ -57,7 +39,8 @@
       cursor: pointer;
       position: relative;
       box-sizing: border-box;
-      border-bottom: 5px solid transparent;
+      border-bottom: 2px solid transparent;
+      color: $--color-text-secondary;
 
       a,
       a:hover {
@@ -65,7 +48,7 @@
       }
 
       &:hover {
-        background-color: $--menu-item-hover-fill;
+        background-color: #fff;
       }
     }
     & .el-submenu {
@@ -76,18 +59,23 @@
         position: absolute;
         top: 65px;
         left: 0;
-        border:1px solid $--color-black;
+        border: none;
         padding: 5px 0;
         background-color: $--color-white;
         z-index: 100;
         min-width: 100%;
-        box-shadow: 0 2px 4px 0 rgba(0,0,0,0.12), 0 0 6px 0 rgba(0,0,0,0.04);
+        box-shadow: $--box-shadow-light;
       }
 
       & .el-submenu__title {
         height: 60px;
         line-height: 60px;
-        border-bottom: 5px solid transparent;
+        border-bottom: 2px solid transparent;
+        color: $--color-text-secondary;
+      }
+
+      .el-submenu__title:hover {
+        background-color: #fff;
       }
 
       & .el-menu-item {
@@ -101,40 +89,18 @@
       & .el-submenu__icon-arrow {
         position: static;
         vertical-align: middle;
-        margin-left: 5px;
-        color: $--color-black;
+        margin-left: 8px;
         margin-top: -3px;
       }
     }
     & .el-menu-item:hover,
     & .el-submenu__title:hover {
-      background-color: $--menu-item-fill;
+      color: $--color-text-primary;
     }
-    & > .el-menu-item:hover,
-    & > .el-submenu:hover .el-submenu__title,
+    & > .el-menu-item.is-active,
     & > .el-submenu.is-active .el-submenu__title {
-      border-bottom: 5px solid $--color-primary;
-    }
-
-    &.el-menu--dark {
-      & .el-menu-item:hover,
-      & .el-submenu__title:hover {
-        background-color: $--dark-menu-item-fill;
-      }
-
-      & .el-submenu {
-        .el-menu-item,
-        .el-submenu-title {
-          color: $--color-black;
-
-          &:hover {
-            background-color: $--color-black;
-          }
-        }
-        .el-menu-item.is-active {
-          color: $--color-primary;
-        }
-      }
+      border-bottom: 2px solid $--color-primary;
+      color: $--color-text-primary;
     }
   }
   @include m(collapse) {
@@ -160,6 +126,10 @@
       }
     }
 
+    > .el-menu-item.is-active i {
+      color: inherit;
+    }
+
     .el-submenu {
       position: relative;
       & .el-menu {
@@ -168,6 +138,7 @@
         top: 0;
         left: 100%;
         z-index: 10;
+        box-shadow: $--box-shadow-light;
       }
 
       &.is-opened {
@@ -196,7 +167,10 @@
     margin-right: 0;
   }
   &:hover {
-    background-color: $--color-black;
+    background-color: $--menu-item-hover-fill;
+  }
+  i {
+    color: $--color-text-secondary;
   }
   @include when(active) {
     color: $--color-primary;
@@ -208,26 +182,26 @@
     position: relative;
     @include menu-item;
 
-    &:hover {
-      background-color: $--color-black;
-    }
-
     & * {
       vertical-align: middle;
     }
+
+    i {
+      color: $--color-text-secondary;
+    }
+
+    &:hover {
+      background-color: $--menu-item-hover-fill;
+    }
   }
   & .el-menu {
-    background-color: $--color-black;
+    border: none;
   }
   & .el-menu-item {
     height: 50px;
     line-height: 50px;
     padding: 0 45px;
     min-width: 200px;
-
-    &:hover {
-      background-color: $--color-black;
-    }
   }
   @include e(icon-arrow) {
     position: absolute;
@@ -260,11 +234,10 @@
     padding: 0;
   }
   @include e(title) {
-    padding-top: 15px;
+    padding: 7px 0 7px 20px;
     line-height: normal;
-    font-size: 14px;
-    padding-left: 20px;
-    color: $--color-black;
+    font-size: 12px;
+    color: $--color-text-secondary;
   }
 }
 

test/unit/specs/menu.spec.js

@@ -185,7 +185,7 @@ describe('Menu', () => {
     it('default opened', done => {
       vm = createVue({
         template: `
-          <el-menu theme="dark" :default-openeds="defaultOpeneds">
+          <el-menu :default-openeds="defaultOpeneds">
             <el-menu-item index="1">default opened处理中心</el-menu-item>
             <el-submenu index="2" ref="submenu1">
               <template slot="title">default opened我的工作台</template>
@@ -217,25 +217,10 @@ describe('Menu', () => {
       });
     });
   });
-  it('theme', () => {
-    vm = createVue({
-      template: `
-        <el-menu theme="dark">
-          <el-menu-item index="1" ref="item1">处理中心</el-menu-item>
-          <el-menu-item index="3">订单管理</el-menu-item>
-        </el-menu>
-      `,
-      data() {
-        return {
-        };
-      }
-    }, true);
-    expect(vm.$el.classList.contains('el-menu--dark')).to.be.true;
-  });
   it('unique-opened', done => {
     vm = createVue({
       template: `
-        <el-menu theme="dark" unique-opened default-active="2-2">
+        <el-menu unique-opened default-active="2-2">
           <el-menu-item index="1">处理中心</el-menu-item>
           <el-submenu index="2" ref="submenu1">
             <template slot="title">我的工作台</template>