From fc40a3bbfb94459f98f5bb10199260089e8439c9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=91=E6=B8=B8=E5=90=9B?= <me@yunyoujun.cn>
Date: Fri, 23 Jul 2021 23:09:50 +0800
Subject: [PATCH] refactor(result): migrate css var (#2637)

---
 packages/theme-chalk/src/common/var.scss | 12 +-----
 packages/theme-chalk/src/result.scss     | 51 +++++++++++++-----------
 2 files changed, 30 insertions(+), 33 deletions(-)

diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss
index 6a2554a0c5..51b7848f25 100644
--- a/packages/theme-chalk/src/common/var.scss
+++ b/packages/theme-chalk/src/common/var.scss
@@ -721,16 +721,8 @@ $--descriptions-item-bordered-label-background: #fafafa !default;
 
 /* Result
 -------------------------- */
-$--result-padding: 40px 30px !default;
-$--result-icon-font-size: 64px !default;
-$--result-title-font-size: 20px !default;
-$--result-title-margin-top: 20px !default;
-$--result-subtitle-margin-top: 10px !default;
-$--result-extra-margin-top: 30px !default;
-$--result-info-color: $--color-info !default;
-$--result-success-color: $--color-success !default;
-$--result-warning-color: $--color-warning !default;
-$--result-danger-color: $--color-danger !default;
+// refactor with css3 var
+// See packages/theme-chalk/src/result.scss
 
 /* Break-point
 --------------------------*/
diff --git a/packages/theme-chalk/src/result.scss b/packages/theme-chalk/src/result.scss
index b2c6627410..8dff72a94e 100644
--- a/packages/theme-chalk/src/result.scss
+++ b/packages/theme-chalk/src/result.scss
@@ -1,6 +1,21 @@
 @import 'mixins/mixins';
 @import 'common/var';
 
+$types: success, warning, danger, info, error;
+
+:root {
+  --el-result-padding: 40px 30px;
+  --el-result-icon-font-size: 64px;
+  --el-result-title-font-size: 20px;
+  --el-result-title-margin-top: 20px;
+  --el-result-subtitle-margin-top: 10px;
+  --el-result-extra-margin-top: 30px;
+
+  @each $type in $types {
+    --el-result-#{$type}-color: var(--el-color-#{$type});
+  }
+}
+
 @include b(result) {
   display: flex;
   justify-content: center;
@@ -8,54 +23,44 @@
   flex-direction: column;
   text-align: center;
   box-sizing: border-box;
-  padding: $--result-padding;
+  padding: var(--el-result-padding);
 
   @include e(icon) {
     svg {
-      width: $--result-icon-font-size;
-      height: $--result-icon-font-size;
+      width: var(--el-result-icon-font-size);
+      height: var(--el-result-icon-font-size);
     }
   }
 
   @include e(title) {
-    margin-top: $--result-title-margin-top;
+    margin-top: var(--el-result-title-margin-top);
 
     p {
       margin: 0;
-      font-size: $--result-title-font-size;
-      color: $--color-text-primary;
+      font-size: var(--el-result-title-font-size);
+      color: var(--el-color-text-primary);
       line-height: 1.3;
     }
   }
 
   @include e(subtitle) {
-    margin-top: $--result-subtitle-margin-top;
+    margin-top: var(--el-result-subtitle-margin-top);
 
     p {
       margin: 0;
       font-size: var(--el-font-size-base);
-      color: $--color-text-regular;
+      color: var(--el-color-text-regular);
       line-height: 1.3;
     }
   }
 
   @include e(extra) {
-    margin-top: $--result-extra-margin-top;
+    margin-top: var(--el-result-extra-margin-top);
   }
 
-  .icon-success {
-    fill: $--result-success-color;
-  }
-
-  .icon-error {
-    fill: $--result-danger-color;
-  }
-
-  .icon-info {
-    fill: $--result-info-color;
-  }
-
-  .icon-warning {
-    fill: $--result-warning-color;
+  @each $type in $types {
+    .icon-#{$type} {
+      fill: var(--el-result-#{$type}-color);
+    }
   }
 }