Merge branch 'develop-0.10.0' of github.com:ant-design/ant-design into develop-0.10.0

components/menu/index.jsx

@@ -38,6 +38,10 @@ const AntMenu = React.createClass({
     this.props.onClose();
   },
   render() {
+    this.theme = '';
+    if (this.props.theme) {
+      this.theme = this.props.theme;
+    }
     let openAnimation = '';
     switch (this.props.mode) {
     case 'horizontal':
@@ -51,14 +55,19 @@ const AntMenu = React.createClass({
       break;
     default:
     }
+
     let props = {
       openKeys: this.state.openKeys,
       onClick: this.handleClick,
       onOpen: this.handleOpenKeys,
       onClose: this.handleCloseKeys,
+      className: this.theme,
     };
     if (this.props.mode === 'inline') {
-      return <Menu {...this.props} openAnimation={openAnimation} />;
+      props = {
+        className: this.theme,
+      };
+      return <Menu {...this.props} {...props} openAnimation={openAnimation} />;
     } else {
       return <Menu {...this.props} {...props} openTransitionName={openAnimation} />;
     }

components/menu/index.md

@@ -28,6 +28,7 @@
 
 | 参数     | 说明           | 类型     | 默认值       |
 |----------|----------------|----------|--------------|
+| theme    | 主题颜色 | enum: 'dark' | 默认为空 |
 | mode    | 菜单类型 | enum: 'vertical', 'horizontal', 'inline' | vertical |
 | selectedKeys | 当前选中的菜单项 key 数组 |  |      |
 | defaultSelectedKeys | 初始选中的菜单项 key 数组 |  |      |

style/components/menu.less

@@ -1,14 +1,13 @@
 @menu-prefix-cls: ~"@{css-prefix}menu";
 
+// default theme
 .@{menu-prefix-cls} {
   outline: none;
   margin-bottom: 0;
   padding-left: 0; // Override default ul/ol
   list-style: none;
   z-index: 999;
-  border: 1px solid #d9d9d9;
   box-shadow: @overlay-shadow;
-  border-radius: @border-radius-base;
   color: @text-color;
   background: #fff;
 
@@ -46,16 +45,35 @@
     background-color: tint(@primary-color, 90%);
   }
 
-  &-item-selected {
-    background-color: tint(@primary-color, 90%);
-    color: @primary-color;
-  }
-
   & > li&-submenu {
     cursor: pointer;
     transition: all 0.3s ease;
   }
 
+  &-vertical,
+  &-inline {
+    border-right: 1px solid #e9e9e9;
+
+    .@{menu-prefix-cls}-item {
+      border-right: 2px solid transparent;
+      margin-left: -1px;
+      left: 1px;
+      position: relative;
+      z-index: 1;
+    }
+
+    .@{menu-prefix-cls}-selected,
+    .@{menu-prefix-cls}-item-active {
+      border-right: 2px solid @primary-color;
+    }
+
+    .@{menu-prefix-cls}-item-selected {
+      background-color: tint(@primary-color, 90%);
+      color: @primary-color;
+      border-right: 2px solid #2db7f5;
+    }
+  }
+
   &-submenu-horizontal > .@{menu-prefix-cls} {
     top: 100%;
     left: 0;
@@ -147,12 +165,10 @@
   }
 
   &-horizontal {
-    background-color: #FBFBFB;
     border: none;
     border-bottom: 1px solid #d9d9d9;
     box-shadow: none;
-    border-radius: 0;
+    padding-left: 20px;
-    padding-left: 24px;
     z-index: 0;
 
     & > .@{menu-prefix-cls}-item,
@@ -172,7 +188,7 @@
         }
         &:before, &:after {
           position: absolute;
-          background-color: rgba(255, 255, 255, 0.001);
+          background-color: transparent;
           width: 20px;
           height: 50px;
           content: '';
@@ -186,12 +202,12 @@
     & > .@{menu-prefix-cls}-submenu, & > .@{menu-prefix-cls}-item {
       float: left;
       border-bottom: 2px solid transparent;
-      margin-right: 24px;
+      margin-right: 20px;
 
       &-active,
       &-selected {
         border-bottom: 2px solid @primary-color;
-        background-color: #FBFBFB;
+        background-color: #FFF;
         color: @primary-color;
         .anticon {
           color: @primary-color;
@@ -208,32 +224,14 @@
   }
 
   &-vertical, &-inline {
-    padding: 12px 0;
     & > .@{menu-prefix-cls}-item, & > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
-      padding: 0 24px;
+      padding: 0 20px;
       font-size: 12px;
       line-height: 42px;
       height: 42px;
     }
   }
 
-  &-vertical, &-horizontal {
-    .@{menu-prefix-cls}-submenu {
-      .@{menu-prefix-cls}-item:first-child {
-        border-radius: @border-radius-base @border-radius-base 0 0;
-      }
-      .@{menu-prefix-cls}-item:last-child {
-        border-radius: 0 0 @border-radius-base @border-radius-base;
-      }
-      &:first-child {
-        border-radius: @border-radius-base @border-radius-base 0 0;
-      }
-      &:last-child {
-        border-radius: 0 0 @border-radius-base @border-radius-base;
-      }
-    }
-  }
-
   &-vertical&-sub {
     padding: 0;
     transform-origin: 0 0;
@@ -244,16 +242,13 @@
 
   &-root&-vertical,
   &-root&-inline {
-    border-radius: 0;
     box-shadow: none;
   }
 
   &-sub&-inline {
     padding: 0;
     border: none;
-    border-radius: 0;
     box-shadow: none;
-    overflow: hidden;
     & > .@{menu-prefix-cls}-item, & > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
       line-height: 34px;
       height: 34px;
@@ -270,3 +265,125 @@
     top: -1px;
   }
 }
+
+
+// dark theme
+.dark.@{menu-prefix-cls} {
+  color: #8c8c8c;
+  background: #404040;
+
+  .@{menu-prefix-cls}-item-active,
+  .@{menu-prefix-cls}-submenu .@{menu-prefix-cls}-submenu-active,
+  .@{menu-prefix-cls}-submenu-vertical.@{menu-prefix-cls}-submenu-active > .@{menu-prefix-cls}-submenu-title:hover,
+  .@{menu-prefix-cls}-submenu-inline.@{menu-prefix-cls}-submenu-active > .@{menu-prefix-cls}-submenu-title:hover {
+    background: #404040;
+    color: #FFF;
+
+    .anticon {
+      color: #FFF;
+    }
+  }
+
+  .@{menu-prefix-cls}-submenu {
+    background: #404040;
+  }
+
+  &-horizontal {
+    background-color: #404040;
+    border: none;
+    border-bottom: 1px solid #d9d9d9;
+    box-shadow: none;
+    padding-left: 20px;
+    z-index: 0;
+    color: #8c8c8c;
+
+    .@{menu-prefix-cls}-item.@{menu-prefix-cls}-item-selected,
+    .@{menu-prefix-cls}-item.@{menu-prefix-cls}-item-active {
+      border-bottom: 0px;
+      background-color: #404040;
+      color: #FFF;
+
+      .anticon {
+        color: #FFF;
+      }
+    }
+
+    .@{menu-prefix-cls}-vertical {
+      .@{menu-prefix-cls}-item.@{menu-prefix-cls}-item-selected,
+      .@{menu-prefix-cls}-item.@{menu-prefix-cls}-item-active {
+        background-color: #2DB7F5;
+        color: #FFF;
+      }
+    }
+
+    .@{menu-prefix-cls}-submenu-active {
+      border: 0;
+      color: #FFF;
+
+      .anticon {
+        color: #FFF;
+      }
+    }
+
+    & > .@{menu-prefix-cls}-item,
+    & > .@{menu-prefix-cls}-submenu {
+      border-bottom: 0px;
+      top: 0px;
+      > a , > span{
+        line-height: 51px;
+      }
+      > a {
+        color: #8c8c8c;
+        &:hover {
+          color: #FFF;
+        }
+        &:before, &:after {
+          background-color: transparent;
+        }
+        &:before {
+          left: 0;
+        }
+      }
+    }
+  }
+
+  .@{menu-prefix-cls}-vertical,
+  .@{menu-prefix-cls}-inline {
+    .@{menu-prefix-cls}-item,
+    .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
+      color: #8c8c8c;
+    }
+    .@{menu-prefix-cls}-item {
+      background-color: #333333;
+    }
+  }
+
+
+  &-vertical,
+  &-inline {
+    border-right: 0px solid #3F3F3F;
+
+    .@{menu-prefix-cls}-item.@{menu-prefix-cls}-item-selected,
+    .@{menu-prefix-cls}-item.@{menu-prefix-cls}-item-active {
+      border-right: 0px solid #2DB7F5;
+      background-color: #2DB7F5;
+      color: #FFF;
+    }
+  }
+
+  .@{menu-prefix-cls}-vertical,
+  .@{menu-prefix-cls}-inline {
+    border-right: 0px;
+
+    .@{menu-prefix-cls}-item {
+      border-right: 0px solid transparent;
+      margin-left: 0px;
+      left: 0px;
+    }
+
+    .@{menu-prefix-cls}-selected,
+    .@{menu-prefix-cls}-item-active {
+      border-right: 0px;
+    }
+  }
+}