Fix Menu[theme=dark] selected and disabled style, ant-design#4440

neekey · Jan 6, 2017 · 0d38fef · 0d38fef
1 parent 1b10733
commit 0d38fef
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 18 deletions.
diff --git a/components/menu/style/index.less b/components/menu/style/index.less
@@ -163,18 +163,6 @@
     display: block;
     white-space: nowrap;
 
-    // Disabled state sets text to gray and nukes hover/tab effects
-    &.@{menu-prefix-cls}-item-disabled,
-    &.@{menu-prefix-cls}-submenu-disabled {
-      color: @text-color-secondary !important;
-      cursor: not-allowed;
-      background: none;
-      > a {
-        color: @text-color-secondary !important;
-        pointer-events: none;
-      }
-    }
-
     .@{iconfont-css-prefix} {
       min-width: 14px;
       margin-right: 8px;
@@ -326,6 +314,19 @@
       padding-left: 32px;
     }
   }
+
+  // Disabled state sets text to gray and nukes hover/tab effects
+  &-item-disabled,
+  &-submenu-disabled {
+    color: @disabled-color !important;
+    cursor: not-allowed;
+    background: none;
+    border-color: transparent !important;;
+    > a {
+      color: @disabled-color !important;
+      pointer-events: none;
+    }
+  }
 }
 
 
@@ -353,6 +354,7 @@
   }
 
   &-dark &-item,
+  &-dark &-item-group-title,
   &-dark &-item > a {
     color: @text-color-secondary-dark;
   }
@@ -376,18 +378,18 @@
   &-dark &-submenu:hover,
   &-dark &-submenu-title:hover {
     background-color: transparent;
-    color: @text-color-dark;
+    color: #fff;
     > a {
-      color: @text-color-dark;
+      color: #fff;
     }
   }
 
   &-dark &-item-selected {
     border-right: 0;
-    color: @text-color-dark;
+    color: #fff;
     > a,
     > a:hover {
-      color: @text-color-dark;
+      color: #fff;
     }
   }
 
@@ -398,4 +400,14 @@
   &-dark&-inline &-item-selected {
     background-color: @primary-color;
   }
+
+  // Disabled state sets text to dark gray and nukes hover/tab effects
+  &-dark &-item-disabled,
+  &-dark &-submenu-disabled {
+    &,
+    > a {
+      opacity: 0.8;
+      color: @disabled-color-dark !important;
+    }
+  }
 }
diff --git a/components/style/themes/default.less b/components/style/themes/default.less
@@ -33,8 +33,8 @@
 @disabled-color         : fade(#000, 25%);
 @heading-color-dark     : fade(#fff, 97%);
 @text-color-dark        : fade(#fff, 91%);
-@text-color-secondary-dark: fade(#fff, 57%);
-@disabled-color-dark    : fade(#000, 35%);
+@text-color-secondary-dark: fade(#fff, 67%);
+@disabled-color-dark    : fade(#fff, 35%);
 @font-size-base         : 12px;
 @font-size-lg           : @font-size-base + 2px;
 @line-height-base       : 1.5;