From c9f03eaee4279945b8931a49e85f165c0151ec38 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=91=E6=B8=B8=E5=90=9B?= <me@yunyoujun.cn>
Date: Tue, 20 Jul 2021 13:18:24 +0800
Subject: [PATCH] refactor(pagination): migrate css var (#2587)

---
 packages/theme-chalk/src/common/var.scss |  21 +----
 packages/theme-chalk/src/pagination.scss | 115 +++++++++++++----------
 2 files changed, 67 insertions(+), 69 deletions(-)

diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss
index f780af7bc3..026bb476cc 100644
--- a/packages/theme-chalk/src/common/var.scss
+++ b/packages/theme-chalk/src/common/var.scss
@@ -464,25 +464,8 @@ $--table-fixed-box-shadow: 0 0 10px rgba(0, 0, 0, 0.12) !default;
 
 /* Pagination
 -------------------------- */
-/// fontSize||Font|1
-$--pagination-font-size: 13px !default;
-/// color||Color|0
-$--pagination-background-color: $--color-white !default;
-/// color||Color|0
-$--pagination-font-color: $--color-text-primary !default;
-$--pagination-border-radius: 3px !default;
-/// color||Color|0
-$--pagination-button-color: $--color-text-primary !default;
-/// height||Other|4
-$--pagination-button-width: 35.5px !default;
-/// height||Other|4
-$--pagination-button-height: 28px !default;
-/// color||Color|0
-$--pagination-button-disabled-color: $--color-text-placeholder !default;
-/// color||Color|0
-$--pagination-button-disabled-background-color: $--color-white !default;
-/// color||Color|0
-$--pagination-hover-color: $--color-primary !default;
+// refactor with css3 var
+// See packages/theme-chalk/src/pagination.scss
 
 /* Popup
 -------------------------- */
diff --git a/packages/theme-chalk/src/pagination.scss b/packages/theme-chalk/src/pagination.scss
index 47f7aaade3..569916194c 100644
--- a/packages/theme-chalk/src/pagination.scss
+++ b/packages/theme-chalk/src/pagination.scss
@@ -5,23 +5,38 @@
 @import 'common/var';
 @import 'select';
 
-$--pagination-height-extra-small: 22px !default;
-$--pagination-line-height-extra-small: $--pagination-height-extra-small !default;
+:root {
+  --el-pagination-font-size: 13px;
+  --el-pagination-background-color: var(--el-color-white);
+  --el-pagination-font-color: var(--el-color-text-primary);
+  --el-pagination-border-radius: 3px;
+  --el-pagination-button-color: var(--el-color-text-primary);
+  --el-pagination-button-width: 35.5px;
+  --el-pagination-button-height: 28px;
+  --el-pagination-button-disabled-color: var(--el-color-text-placeholder);
+  --el-pagination-button-disabled-background-color: var(--el-color-white);
+  --el-pagination-hover-color: var(--el-color-primary);
+
+  --el-pagination-height-extra-small: 22px;
+  --el-pagination-line-height-extra-small: var(
+    --el-pagination-height-extra-small
+  );
+}
 
 @include b(pagination) {
   white-space: nowrap;
   padding: 2px 5px;
-  color: $--pagination-font-color;
+  color: var(--el-pagination-font-color);
   font-weight: bold;
   @include utils-clearfix;
 
   span:not([class*='suffix']),
   button {
     display: inline-block;
-    font-size: $--pagination-font-size;
-    min-width: $--pagination-button-width;
-    height: $--pagination-button-height;
-    line-height: $--pagination-button-height;
+    font-size: var(--el-pagination-font-size);
+    min-width: var(--el-pagination-button-width);
+    height: var(--el-pagination-button-height);
+    line-height: var(--el-pagination-button-height);
     vertical-align: top;
     box-sizing: border-box;
   }
@@ -44,7 +59,7 @@ $--pagination-line-height-extra-small: $--pagination-height-extra-small !default
 
     .#{$namespace}-input__inner {
       padding-right: 25px;
-      border-radius: $--pagination-border-radius;
+      border-radius: var(--el-pagination-border-radius);
     }
   }
 
@@ -58,12 +73,12 @@ $--pagination-line-height-extra-small: $--pagination-height-extra-small !default
     }
 
     &:hover {
-      color: $--pagination-hover-color;
+      color: var(--el-pagination-hover-color);
     }
 
     &:disabled {
-      color: $--pagination-button-disabled-color;
-      background-color: $--pagination-button-disabled-background-color;
+      color: var(--el-pagination-button-disabled-color);
+      background-color: var(--el-pagination-button-disabled-background-color);
       cursor: not-allowed;
     }
   }
@@ -72,10 +87,10 @@ $--pagination-line-height-extra-small: $--pagination-height-extra-small !default
   .btn-next {
     background: center center no-repeat;
     background-size: 16px;
-    background-color: $--pagination-background-color;
+    background-color: var(--el-pagination-background-color);
     cursor: pointer;
     margin: 0;
-    color: $--pagination-button-color;
+    color: var(--el-pagination-button-color);
 
     .#{$namespace}-icon {
       display: block;
@@ -93,7 +108,7 @@ $--pagination-line-height-extra-small: $--pagination-height-extra-small !default
   }
 
   .#{$namespace}-pager li.disabled {
-    color: $--color-text-placeholder;
+    color: var(--el-color-text-placeholder);
     cursor: not-allowed;
   }
 
@@ -106,8 +121,8 @@ $--pagination-line-height-extra-small: $--pagination-height-extra-small !default
     .#{$namespace}-pager li:last-child {
       border-color: transparent;
       font-size: var(--el-font-size-extra-small);
-      line-height: $--pagination-line-height-extra-small;
-      height: $--pagination-height-extra-small;
+      line-height: var(--el-pagination-line-height-extra-small);
+      height: var(--el-pagination-height-extra-small);
       min-width: 22px;
     }
 
@@ -117,34 +132,34 @@ $--pagination-line-height-extra-small: $--pagination-height-extra-small !default
 
     .more::before,
     li.more::before {
-      line-height: $--pagination-line-height-extra-small;
+      line-height: var(--el-pagination-line-height-extra-small);
     }
 
     span:not([class*='suffix']),
     button {
-      height: $--pagination-height-extra-small;
-      line-height: $--pagination-line-height-extra-small;
+      height: var(--el-pagination-height-extra-small);
+      line-height: var(--el-pagination-line-height-extra-small);
     }
 
     @include e(editor) {
-      height: $--pagination-line-height-extra-small;
+      height: var(--el-pagination-line-height-extra-small);
       &.#{$namespace}-input .#{$namespace}-input__inner {
-        height: $--pagination-height-extra-small;
+        height: var(--el-pagination-height-extra-small);
       }
     }
 
     .#{$namespace}-input__inner,
     .#{$namespace}-input--mini {
-      height: $--pagination-height-extra-small !important;
-      line-height: $--pagination-line-height-extra-small;
+      height: var(--el-pagination-height-extra-small) !important;
+      line-height: var(--el-pagination-line-height-extra-small);
     }
 
     .#{$namespace}-input__suffix {
-      line-height: $--pagination-line-height-extra-small;
+      line-height: var(--el-pagination-line-height-extra-small);
       .#{$namespace}-input__suffix-inner {
-        line-height: $--pagination-line-height-extra-small;
+        line-height: var(--el-pagination-line-height-extra-small);
         i.el-select__caret {
-          line-height: $--pagination-line-height-extra-small;
+          line-height: var(--el-pagination-line-height-extra-small);
         }
       }
     }
@@ -153,14 +168,14 @@ $--pagination-line-height-extra-small: $--pagination-height-extra-small !default
   @include e(sizes) {
     margin: 0 10px 0 0;
     font-weight: normal;
-    color: $--color-text-regular;
+    color: var(--el-color-text-regular);
 
     .#{$namespace}-input .#{$namespace}-input__inner {
-      font-size: $--pagination-font-size;
+      font-size: var(--el-pagination-font-size);
       padding-left: 8px;
 
       &:hover {
-        border-color: $--pagination-hover-color;
+        border-color: var(--el-pagination-hover-color);
       }
     }
   }
@@ -168,13 +183,13 @@ $--pagination-line-height-extra-small: $--pagination-height-extra-small !default
   @include e(total) {
     margin-right: 10px;
     font-weight: normal;
-    color: $--color-text-regular;
+    color: var(--el-color-text-regular);
   }
 
   @include e(jump) {
     margin-left: 24px;
     font-weight: normal;
-    color: $--color-text-regular;
+    color: var(--el-color-text-regular);
 
     .#{$namespace}-input__inner {
       padding: 0 3px;
@@ -188,19 +203,19 @@ $--pagination-line-height-extra-small: $--pagination-height-extra-small !default
   @include e(editor) {
     line-height: 18px;
     padding: 0 2px;
-    height: $--pagination-button-height;
+    height: var(--el-pagination-button-height);
 
     text-align: center;
     margin: 0 2px;
     box-sizing: border-box;
-    border-radius: $--pagination-border-radius;
+    border-radius: var(--el-pagination-border-radius);
 
     &.#{$namespace}-input {
       width: 50px;
     }
 
     &.#{$namespace}-input .#{$namespace}-input__inner {
-      height: $--pagination-button-height;
+      height: var(--el-pagination-button-height);
     }
 
     .#{$namespace}-input__inner::-webkit-inner-spin-button,
@@ -216,12 +231,12 @@ $--pagination-line-height-extra-small: $--pagination-height-extra-small !default
     .#{$namespace}-pager li {
       margin: 0 5px;
       background-color: map.get($--colors, 'info', 'lighter');
-      color: $--color-text-regular;
+      color: var(--el-color-text-regular);
       min-width: 30px;
       border-radius: 2px;
 
       &.disabled {
-        color: $--color-text-placeholder;
+        color: var(--el-color-text-placeholder);
       }
     }
 
@@ -230,18 +245,18 @@ $--pagination-line-height-extra-small: $--pagination-height-extra-small !default
       padding: 0;
 
       &:disabled {
-        color: $--color-text-placeholder;
+        color: var(--el-color-text-placeholder);
       }
     }
 
     .#{$namespace}-pager li:not(.disabled) {
       &:hover {
-        color: $--pagination-hover-color;
+        color: var(--el-pagination-hover-color);
       }
 
       &.active {
-        background-color: $--color-primary;
-        color: $--color-white;
+        background-color: var(--el-color-primary);
+        color: var(--el-color-white);
       }
     }
 
@@ -271,13 +286,13 @@ $--pagination-line-height-extra-small: $--pagination-height-extra-small !default
 
   li {
     padding: 0 4px;
-    background: $--pagination-background-color;
+    background: var(--el-pagination-background-color);
     vertical-align: top;
     display: inline-block;
-    font-size: $--pagination-font-size;
-    min-width: $--pagination-button-width;
-    height: $--pagination-button-height;
-    line-height: $--pagination-button-height;
+    font-size: var(--el-pagination-font-size);
+    min-width: var(--el-pagination-button-width);
+    height: var(--el-pagination-button-height);
+    line-height: var(--el-pagination-button-height);
     cursor: pointer;
     box-sizing: border-box;
     text-align: center;
@@ -286,10 +301,10 @@ $--pagination-line-height-extra-small: $--pagination-height-extra-small !default
     &.btn-quicknext,
     &.btn-quickprev {
       line-height: 28px;
-      color: $--pagination-button-color;
+      color: var(--el-pagination-button-color);
 
       &.disabled {
-        color: $--color-text-placeholder;
+        color: var(--el-color-text-placeholder);
       }
     }
 
@@ -306,15 +321,15 @@ $--pagination-line-height-extra-small: $--pagination-height-extra-small !default
     }
 
     &:focus-visible {
-      outline: 1px solid $--pagination-hover-color;
+      outline: 1px solid var(--el-pagination-hover-color);
     }
 
     &:hover {
-      color: $--pagination-hover-color;
+      color: var(--el-pagination-hover-color);
     }
 
     &.active {
-      color: $--pagination-hover-color;
+      color: var(--el-pagination-hover-color);
       cursor: default;
     }
   }