From d4cfd29248d0607177a3b9145454339a604cab3f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=91=E6=B8=B8=E5=90=9B?= <me@yunyoujun.cn>
Date: Mon, 26 Jul 2021 15:06:05 +0800
Subject: [PATCH] refactor(popover): migrate css var (#2687)

---
 packages/theme-chalk/src/common/var.scss | 16 ++------------
 packages/theme-chalk/src/popover.scss    | 27 +++++++++++++++++-------
 packages/theme-chalk/src/popper.scss     | 12 +++++++----
 3 files changed, 29 insertions(+), 26 deletions(-)

diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss
index 35bf633b52..f987a809d0 100644
--- a/packages/theme-chalk/src/common/var.scss
+++ b/packages/theme-chalk/src/common/var.scss
@@ -457,20 +457,8 @@ $--popup-modal-opacity: 0.5 !default;
 
 /* Popover
 -------------------------- */
-/// color||Color|0
-$--popover-background-color: $--color-white !default;
-/// fontSize||Font|1
-$--popover-font-size: map.get($--font-size, 'base') !default;
-/// color||Color|0
-$--popover-border-color: map.get($--border-color, 'lighter') !default;
-/// padding||Spacing|3
-$--popover-padding: 12px !default;
-$--popover-padding-large: 18px 20px !default;
-/// fontSize||Font|1
-$--popover-title-font-size: 16px !default;
-/// color||Color|0
-$--popover-title-font-color: var(--el-color-text-primary) !default;
-$--popover-border-radius: 4px !default;
+// refactor with css3 var
+// See packages/theme-chalk/src/popover.scss
 
 /* Tooltip
 -------------------------- */
diff --git a/packages/theme-chalk/src/popover.scss b/packages/theme-chalk/src/popover.scss
index 849943fb34..9fffa1dc45 100644
--- a/packages/theme-chalk/src/popover.scss
+++ b/packages/theme-chalk/src/popover.scss
@@ -2,28 +2,39 @@
 @import 'common/var';
 @import 'popper';
 
+:root {
+  --el-popover-background-color: var(--el-color-white);
+  --el-popover-font-size: var(--el-font-size-base);
+  --el-popover-border-color: var(--el-border-color-lighter);
+  --el-popover-padding: 12px;
+  --el-popover-padding-large: 18px 20px;
+  --el-popover-title-font-size: 16px;
+  --el-popover-title-font-color: var(--el-color-text-primary);
+  --el-popover-border-radius: 4px;
+}
+
 @include b(popover) {
   &.#{$namespace}-popper {
-    background: $--popover-background-color;
+    background: var(--el-popover-background-color);
     min-width: 150px;
-    border-radius: $--popover-border-radius;
-    border: 1px solid $--popover-border-color;
-    padding: $--popover-padding;
+    border-radius: var(--el-popover-border-radius);
+    border: 1px solid var(--el-popover-border-color);
+    padding: var(--el-popover-padding);
     z-index: var(--el-index-popper);
     color: var(--el-color-text-regular);
     line-height: 1.4;
     text-align: justify;
-    font-size: $--popover-font-size;
+    font-size: var(--el-popover-font-size);
     box-shadow: var(--el-box-shadow-light);
     word-break: break-all;
 
     @include m(plain) {
-      padding: $--popover-padding-large;
+      padding: var(--el-popover-padding-large);
     }
 
     @include e(title) {
-      color: $--popover-title-font-color;
-      font-size: $--popover-title-font-size;
+      color: var(--el-popover-title-font-color);
+      font-size: var(--el-popover-title-font-size);
       line-height: 1;
       margin-bottom: 12px;
     }
diff --git a/packages/theme-chalk/src/popper.scss b/packages/theme-chalk/src/popper.scss
index 1856966475..7b88f950a6 100644
--- a/packages/theme-chalk/src/popper.scss
+++ b/packages/theme-chalk/src/popper.scss
@@ -1,9 +1,13 @@
 @import 'mixins/mixins';
 @import 'common/var';
 
+:root {
+  --el-popper-border-radius: var(--el-popover-border-radius, 4px);
+}
+
 @include b(popper) {
   position: absolute;
-  border-radius: $--popover-border-radius;
+  border-radius: var(--el-popper-border-radius);
   padding: 10px;
   z-index: 2000;
   font-size: 12px;
@@ -15,7 +19,7 @@
   $arrow-selector: #{& + '__arrow'};
 
   @include when(dark) {
-    color: $--color-white;
+    color: var(--el-color-white);
     background: var(--el-color-text-primary);
     #{$arrow-selector}::before {
       background: var(--el-color-text-primary);
@@ -24,12 +28,12 @@
   }
 
   @include when(light) {
-    background: $--color-white;
+    background: var(--el-color-white);
     border: 1px solid var(--el-border-color-light);
 
     #{$arrow-selector}::before {
       border: 1px solid var(--el-border-color-light);
-      background: $--color-white;
+      background: var(--el-color-white);
       right: 0;
     }
   }