From 6c5668a4d372a73dee77176ec20710a3cc9df459 Mon Sep 17 00:00:00 2001
From: msidolphin <msidolphin@outlook.com>
Date: Wed, 2 Mar 2022 15:29:15 +0800
Subject: [PATCH] fix(components): [tabs] optimize new icon style (#6327)

---
 docs/examples/tabs/basic.vue              |  1 -
 docs/examples/tabs/card-style.vue         |  1 -
 docs/examples/tabs/custom-tab.vue         | 13 ++++++++++---
 docs/examples/tabs/customized-trigger.vue |  1 -
 docs/examples/tabs/dynamic-tabs.vue       |  1 -
 docs/examples/tabs/tab-position.vue       |  1 -
 packages/theme-chalk/src/tabs.scss        | 13 ++++++++-----
 7 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/docs/examples/tabs/basic.vue b/docs/examples/tabs/basic.vue
index b9b83f1c51..d23b8b36df 100644
--- a/docs/examples/tabs/basic.vue
+++ b/docs/examples/tabs/basic.vue
@@ -18,7 +18,6 @@ const handleClick = (tab: string, event: Event) => {
 <style>
 .demo-tabs > .el-tabs__content {
   padding: 32px;
-  background-color: #f4f5f7;
   color: #6b778c;
   font-size: 32px;
   font-weight: 600;
diff --git a/docs/examples/tabs/card-style.vue b/docs/examples/tabs/card-style.vue
index bd5aa3467d..f6a80bf77d 100644
--- a/docs/examples/tabs/card-style.vue
+++ b/docs/examples/tabs/card-style.vue
@@ -23,7 +23,6 @@ const handleClick = (tab: string, event: Event) => {
 <style>
 .demo-tabs > .el-tabs__content {
   padding: 32px;
-  background-color: #f4f5f7;
   color: #6b778c;
   font-size: 32px;
   font-weight: 600;
diff --git a/docs/examples/tabs/custom-tab.vue b/docs/examples/tabs/custom-tab.vue
index 28db99219d..88065416fa 100644
--- a/docs/examples/tabs/custom-tab.vue
+++ b/docs/examples/tabs/custom-tab.vue
@@ -2,8 +2,9 @@
   <el-tabs type="border-card" class="demo-tabs">
     <el-tab-pane>
       <template #label>
-        <span>
-          <el-icon><calendar /></el-icon>Route
+        <span class="custom-tabs-label">
+          <el-icon><calendar /></el-icon>
+          <span>Route</span>
         </span>
       </template>
       Route
@@ -20,9 +21,15 @@ import { Calendar } from '@element-plus/icons-vue'
 <style>
 .demo-tabs > .el-tabs__content {
   padding: 32px;
-  background-color: #f4f5f7;
   color: #6b778c;
   font-size: 32px;
   font-weight: 600;
 }
+.demo-tabs .custom-tabs-label .el-icon {
+  vertical-align: middle;
+}
+.demo-tabs .custom-tabs-label span {
+  vertical-align: middle;
+  margin-left: 4px;
+}
 </style>
diff --git a/docs/examples/tabs/customized-trigger.vue b/docs/examples/tabs/customized-trigger.vue
index ed96d35f0a..7593c37bfc 100644
--- a/docs/examples/tabs/customized-trigger.vue
+++ b/docs/examples/tabs/customized-trigger.vue
@@ -69,7 +69,6 @@ const removeTab = (targetName: string) => {
 <style>
 .demo-tabs > .el-tabs__content {
   padding: 32px;
-  background-color: #f4f5f7;
   color: #6b778c;
   font-size: 32px;
   font-weight: 600;
diff --git a/docs/examples/tabs/dynamic-tabs.vue b/docs/examples/tabs/dynamic-tabs.vue
index 062a68e024..67fdd16f34 100644
--- a/docs/examples/tabs/dynamic-tabs.vue
+++ b/docs/examples/tabs/dynamic-tabs.vue
@@ -65,7 +65,6 @@ const handleTabsEdit = (targetName: string, action: 'remove' | 'add') => {
 <style>
 .demo-tabs > .el-tabs__content {
   padding: 32px;
-  background-color: #f4f5f7;
   color: #6b778c;
   font-size: 32px;
   font-weight: 600;
diff --git a/docs/examples/tabs/tab-position.vue b/docs/examples/tabs/tab-position.vue
index 5241312535..62a9468073 100644
--- a/docs/examples/tabs/tab-position.vue
+++ b/docs/examples/tabs/tab-position.vue
@@ -21,7 +21,6 @@ const tabPosition = ref('left')
 <style>
 .demo-tabs > .el-tabs__content {
   padding: 32px;
-  background-color: #f4f5f7;
   color: #6b778c;
   font-size: 32px;
   font-weight: 600;
diff --git a/packages/theme-chalk/src/tabs.scss b/packages/theme-chalk/src/tabs.scss
index 72fe9a2fd3..cacce47c5f 100644
--- a/packages/theme-chalk/src/tabs.scss
+++ b/packages/theme-chalk/src/tabs.scss
@@ -21,16 +21,19 @@
     list-style: none;
   }
   @include e(new-tab) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
     float: right;
     border: 1px solid #d3dce6;
-    height: 18px;
-    width: 18px;
-    line-height: 18px;
-    margin: 10px;
+    height: 20px;
+    width: 20px;
+    line-height: 20px;
+    margin: 10px 0 10px 10px;
     border-radius: 3px;
     text-align: center;
     font-size: 12px;
-    color: #d3dce6;
+    color: var(--el-text-color-primary);
     cursor: pointer;
     transition: all 0.15s;