From 678f8a5c655136644ef5f90648b16a3602808b74 Mon Sep 17 00:00:00 2001
From: alxkosov <50827950+alxkosov@users.noreply.github.com>
Date: Fri, 2 Aug 2019 17:51:34 +0300
Subject: [PATCH] feat: menu component customization: create new variables for
 easy customization (#17273)

* new variable for customize margins and font-size on menu

* vars for icons size for menu items

* var for color of icon selected-item on dark menu

* menu selected item: vars for color text and icon

* var for background on hover item in dark menu

* rename variable

* deleted vars for icon size in menu

* change @menu-item-last-margin to @menu-item-boundary-margin
---
 components/menu/style/dark.less      |  9 +++++++++
 components/menu/style/index.less     | 12 ++++++------
 components/style/themes/default.less | 13 ++++++++++++-
 3 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/components/menu/style/dark.less b/components/menu/style/dark.less
index cc2dd17916..aeacbfba01 100644
--- a/components/menu/style/dark.less
+++ b/components/menu/style/dark.less
@@ -91,6 +91,9 @@
       }
     }
   }
+  &-dark &-item:hover {
+    background-color: @menu-dark-item-hover-bg;
+  }
 
   &-dark &-item-selected {
     color: @menu-dark-highlight-color;
@@ -102,6 +105,12 @@
     > a:hover {
       color: @menu-dark-highlight-color;
     }
+    .@{iconfont-css-prefix} {
+      color: @menu-dark-selected-item-icon-color;
+    }
+    span {
+      color: @menu-dark-selected-item-text-color;
+    }
   }
 
   &&-dark &-item-selected,
diff --git a/components/menu/style/index.less b/components/menu/style/index.less
index 795a35dc7b..b54490842e 100644
--- a/components/menu/style/index.less
+++ b/components/menu/style/index.less
@@ -160,7 +160,7 @@
     .@{iconfont-css-prefix} {
       min-width: 14px;
       margin-right: 10px;
-      font-size: @menu-icon-size;
+      font-size: @font-size-base;
       transition: font-size 0.15s @ease-out, margin 0.3s @ease-in-out;
       + span {
         opacity: 1;
@@ -353,11 +353,11 @@
     .@{menu-prefix-cls}-item,
     .@{menu-prefix-cls}-submenu-title {
       height: @menu-item-height;
-      margin-top: 4px;
-      margin-bottom: 4px;
+      margin-top: @menu-item-vertical-margin;
+      margin-bottom: @menu-item-vertical-margin;
       padding: 0 16px;
       overflow: hidden;
-      font-size: @font-size-base;
+      font-size: @menu-item-font-size;
       line-height: @menu-item-height;
       text-overflow: ellipsis;
     }
@@ -368,7 +368,7 @@
     }
 
     .@{menu-prefix-cls}-item:not(:last-child) {
-      margin-bottom: 8px;
+      margin-bottom: @menu-item-boundary-margin;
     }
 
     > .@{menu-prefix-cls}-item,
@@ -418,7 +418,7 @@
       }
       .@{iconfont-css-prefix} {
         margin: 0;
-        font-size: @menu-icon-size-lg;
+        font-size: 16px;
         line-height: @menu-item-height;
         + span {
           display: inline-block;
diff --git a/components/style/themes/default.less b/components/style/themes/default.less
index d1457accb1..517a779df9 100644
--- a/components/style/themes/default.less
+++ b/components/style/themes/default.less
@@ -387,6 +387,15 @@
 @menu-icon-size: @font-size-base;
 @menu-icon-size-lg: @font-size-lg;
 
+@menu-item-vertical-margin: 4px;
+@menu-item-font-size: @font-size-base;
+@menu-item-boundary-margin: 8px;
+@menu-icon-size: @font-size-base;
+@menu-icon-size-lg: @font-size-lg;
+@menu-dark-selected-item-icon-color: @white;
+@menu-dark-selected-item-text-color: @white;
+@dark-menu-item-hover-bg: transparent;
+
 // dark theme
 @menu-dark-color: @text-color-secondary-dark;
 @menu-dark-bg: @layout-header-background;
@@ -394,7 +403,9 @@
 @menu-dark-submenu-bg: #000c17;
 @menu-dark-highlight-color: #fff;
 @menu-dark-item-active-bg: @primary-color;
-
+@menu-dark-selected-item-icon-color: @white;
+@menu-dark-selected-item-text-color: @white;
+@menu-dark-item-hover-bg: transparent;
 // Spin
 // ---
 @spin-dot-size-sm: 14px;