From 02f3c7d66d083ba32667e3cdb028f948c699f218 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:11:00 +0800
Subject: [PATCH] refactor(carousel): migrate css var (#2638)

---
 packages/theme-chalk/src/carousel.scss   | 46 +++++++++++++++---------
 packages/theme-chalk/src/common/var.scss | 14 ++------
 2 files changed, 32 insertions(+), 28 deletions(-)

diff --git a/packages/theme-chalk/src/carousel.scss b/packages/theme-chalk/src/carousel.scss
index 28dd3622df..1d27e9af13 100644
--- a/packages/theme-chalk/src/carousel.scss
+++ b/packages/theme-chalk/src/carousel.scss
@@ -3,6 +3,18 @@
 @import 'mixins/mixins';
 @import 'common/var';
 
+:root {
+  --el-carousel-arrow-font-size: 12px;
+  --el-carousel-arrow-size: 36px;
+  --el-carousel-arrow-background: rgba(31, 45, 61, 0.11);
+  --el-carousel-arrow-hover-background: rgba(31, 45, 61, 0.23);
+  --el-carousel-indicator-width: 30px;
+  --el-carousel-indicator-height: 2px;
+  --el-carousel-indicator-padding-horizontal: 4px;
+  --el-carousel-indicator-padding-vertical: 12px;
+  --el-carousel-indicator-out-color: var(--el-border-color-hover);
+}
+
 @include b(carousel) {
   position: relative;
 
@@ -24,19 +36,19 @@
     outline: none;
     padding: 0;
     margin: 0;
-    height: $--carousel-arrow-size;
-    width: $--carousel-arrow-size;
+    height: var(--el-carousel-arrow-size);
+    width: var(--el-carousel-arrow-size);
     cursor: pointer;
     transition: var(--el-transition-duration);
     border-radius: 50%;
-    background-color: $--carousel-arrow-background;
+    background-color: var(--el-carousel-arrow-background);
     color: $--color-white;
     position: absolute;
     top: 50%;
     z-index: 10;
     transform: translateY(-50%);
     text-align: center;
-    font-size: $--carousel-arrow-font-size;
+    font-size: var(--el-carousel-arrow-font-size);
 
     @include m(left) {
       left: 16px;
@@ -47,7 +59,7 @@
     }
 
     &:hover {
-      background-color: $--carousel-arrow-hover-background;
+      background-color: var(--el-carousel-arrow-hover-background);
     }
 
     & i {
@@ -75,8 +87,10 @@
     }
 
     @include m(outside) {
-      bottom: #{$--carousel-indicator-height +
-        $--carousel-indicator-padding-vertical * 2};
+      bottom: calc(
+        var(--el-carousel-indicator-height) +
+          var(--el-carousel-indicator-padding-vertical) * 2
+      );
       text-align: center;
       position: static;
       transform: none;
@@ -84,7 +98,7 @@
         opacity: 0.64;
       }
       button {
-        background-color: $--carousel-indicator-out-color;
+        background-color: var(--el-carousel-indicator-out-color);
         opacity: 0.24;
       }
     }
@@ -118,16 +132,16 @@
 
     @include m(horizontal) {
       display: inline-block;
-      padding: $--carousel-indicator-padding-vertical
-        $--carousel-indicator-padding-horizontal;
+      padding: var(--el-carousel-indicator-padding-vertical)
+        var(--el-carousel-indicator-padding-horizontal);
     }
 
     @include m(vertical) {
-      padding: $--carousel-indicator-padding-horizontal
-        $--carousel-indicator-padding-vertical;
+      padding: var(--el-carousel-indicator-padding-horizontal)
+        var(--el-carousel-indicator-padding-vertical);
       .#{$namespace}-carousel__button {
-        width: $--carousel-indicator-height;
-        height: #{math.div($--carousel-indicator-width, 2)};
+        width: var(--el-carousel-indicator-height);
+        height: calc(var(--el-carousel-indicator-width / 2));
       }
     }
 
@@ -141,8 +155,8 @@
   @include e(button) {
     display: block;
     opacity: 0.48;
-    width: $--carousel-indicator-width;
-    height: $--carousel-indicator-height;
+    width: var(--el-carousel-indicator-width);
+    height: var(--el-carousel-indicator-height);
     background-color: $--color-white;
     border: none;
     outline: none;
diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss
index 51b7848f25..8f2a8999aa 100644
--- a/packages/theme-chalk/src/common/var.scss
+++ b/packages/theme-chalk/src/common/var.scss
@@ -616,18 +616,8 @@ $--scrollbar-hover-background-color: rgba(
 
 /* Carousel
 --------------------------*/
-/// fontSize||Font|1
-$--carousel-arrow-font-size: 12px !default;
-$--carousel-arrow-size: 36px !default;
-$--carousel-arrow-background: rgba(31, 45, 61, 0.11) !default;
-$--carousel-arrow-hover-background: rgba(31, 45, 61, 0.23) !default;
-/// width||Other|4
-$--carousel-indicator-width: 30px !default;
-/// height||Other|4
-$--carousel-indicator-height: 2px !default;
-$--carousel-indicator-padding-horizontal: 4px !default;
-$--carousel-indicator-padding-vertical: 12px !default;
-$--carousel-indicator-out-color: $--border-color-hover !default;
+// refactor with css3 var
+// See packages/theme-chalk/src/carousel.scss
 
 /* Collapse
 --------------------------*/