From bd75d831f20aeac7e0f6be6cb97cbe3d51a2aacd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=91=E6=B8=B8=E5=90=9B?= <me@yunyoujun.cn>
Date: Thu, 30 Dec 2021 17:28:49 +0800
Subject: [PATCH] fix(theme-chalk): auto menu item height & add css var, close
 #4864 (#5034)

---
 docs/examples/menu/vertical.vue          | 4 ++--
 packages/theme-chalk/src/common/var.scss | 1 +
 packages/theme-chalk/src/menu.scss       | 9 ++++-----
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/docs/examples/menu/vertical.vue b/docs/examples/menu/vertical.vue
index 77c878a293..11012f2082 100644
--- a/docs/examples/menu/vertical.vue
+++ b/docs/examples/menu/vertical.vue
@@ -1,7 +1,7 @@
 <template>
   <el-row class="tac">
     <el-col :span="12">
-      <h5>Default colors</h5>
+      <h5 class="mb-2">Default colors</h5>
       <el-menu
         default-active="2"
         class="el-menu-vertical-demo"
@@ -40,7 +40,7 @@
       </el-menu>
     </el-col>
     <el-col :span="12">
-      <h5>Custom colors</h5>
+      <h5 class="mb-2">Custom colors</h5>
       <el-menu
         active-text-color="#ffd04b"
         background-color="#545c64"
diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss
index 06bff94e6d..c4130ae750 100644
--- a/packages/theme-chalk/src/common/var.scss
+++ b/packages/theme-chalk/src/common/var.scss
@@ -915,6 +915,7 @@ $menu: map.merge(
     'hover-text-color': var(--el-text-color-primary),
     'bg-color': var(--el-color-white),
     'hover-bg-color': var(--el-color-primary-light-9),
+    'item-height': 56px,
     'item-font-size': var(--el-font-size-base),
     'item-hover-fill': var(--el-color-primary-light-9),
     'border-color': #e6e6e6,
diff --git a/packages/theme-chalk/src/menu.scss b/packages/theme-chalk/src/menu.scss
index d32b06cbac..ea782ab93a 100644
--- a/packages/theme-chalk/src/menu.scss
+++ b/packages/theme-chalk/src/menu.scss
@@ -7,8 +7,8 @@
 @mixin menu-item {
   display: flex;
   align-items: center;
-  height: 56px;
-  line-height: 56px;
+  height: var(--el-menu-item-height);
+  line-height: var(--el-menu-item-height);
   font-size: var(--el-menu-item-font-size);
   color: var(--el-menu-text-color);
   padding: 0 20px;
@@ -67,7 +67,7 @@
       justify-content: center;
       align-items: center;
 
-      height: 60px;
+      height: 100%;
       margin: 0;
       border-bottom: 2px solid transparent;
       color: var(--el-menu-text-color);
@@ -102,8 +102,7 @@
       }
 
       & .#{$namespace}-sub-menu__title {
-        height: 60px;
-        line-height: 60px;
+        height: 100%;
         border-bottom: 2px solid transparent;
         color: var(--el-menu-text-color);