refactor(var): simplify checkbox var & move transition to root (eleme…

…nt-plus#2729)
LoveUSimone · Jul 28, 2021 · c8acaeb · c8acaeb
1 parent 90c7c05
commit c8acaeb
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 48 deletions.
diff --git a/commitlint.config.js b/commitlint.config.js
@@ -30,6 +30,7 @@ const scopes = [
   'typography',
   'color',
   'border',
+  'var',
 ]
 
 module.exports = {

diff --git a/packages/theme-chalk/src/base.scss b/packages/theme-chalk/src/base.scss
@@ -1,3 +1,3 @@
+@import 'var.scss';
 @import 'common/transition.scss';
 @import 'icon.scss';
-@import 'var.scss';
diff --git a/packages/theme-chalk/src/checkbox.scss b/packages/theme-chalk/src/checkbox.scss
@@ -5,6 +5,53 @@
 @import 'mixins/_button';
 @import 'mixins/utils';
 
+$--checkbox-bordered-padding: () !default;
+$--checkbox-bordered-padding: map.merge(
+  (
+    'default': 9px 20px 9px 10px,
+    'medium': 7px 20px 7px 10px,
+    'small': 5px 15px 5px 10px,
+    'mini': 3px 15px 3px 10px,
+  ),
+  $--checkbox-bordered-padding
+);
+
+$--checkbox-bordered-input-height: () !default;
+$--checkbox-bordered-input-height: map.merge(
+  (
+    'medium': 14px,
+    'small': 12px,
+    'mini': 12px,
+  ),
+  $--checkbox-bordered-input-height
+);
+
+$--checkbox-bordered-input-width: () !default;
+$--checkbox-bordered-input-width: map.merge(
+  $--checkbox-bordered-input-height,
+  $--checkbox-bordered-input-width
+);
+
+$--checkbox-bordered-height: () !default;
+$--checkbox-bordered-height: map.merge(
+  (
+    'medium': 36px,
+    'small': 32px,
+    'mini': 28px,
+  ),
+  $--checkbox-bordered-height
+);
+
+$--checkbox-line-height: () !default;
+$--checkbox-line-height: map.merge(
+  (
+    'medium': 17px,
+    'small': 15px,
+    'mini': 12px,
+  ),
+  $--checkbox-line-height
+);
+
 :root {
   --el-checkbox-font-size: 14px;
   --el-checkbox-font-weight: var(--el-font-weight-primary);
@@ -15,10 +62,6 @@
   --el-checkbox-background-color: var(--el-color-white);
   --el-checkbox-input-border: var(--el-border-base);
 
-  --el-checkbox-medium-line-height: 17px;
-  --el-checkbox-small-line-height: 15px;
-  --el-checkbox-mini-line-height: 12px;
-
   --el-checkbox-disabled-border-color: var(--el-border-color-base);
   --el-checkbox-disabled-input-fill: #edf2fc;
   --el-checkbox-disabled-icon-color: var(--el-text-color-placeholder);
@@ -36,19 +79,6 @@
 
   --el-checkbox-input-border-color-hover: var(--el-color-primary);
   --el-checkbox-bordered-height: 40px;
-  --el-checkbox-bordered-padding: 9px 20px 9px 10px;
-  --el-checkbox-bordered-medium-padding: 7px 20px 7px 10px;
-  --el-checkbox-bordered-small-padding: 5px 15px 5px 10px;
-  --el-checkbox-bordered-mini-padding: 3px 15px 3px 10px;
-  --el-checkbox-bordered-medium-input-height: 14px;
-  --el-checkbox-bordered-medium-input-width: 14px;
-  --el-checkbox-bordered-medium-height: 36px;
-  --el-checkbox-bordered-small-input-height: 12px;
-  --el-checkbox-bordered-small-input-width: 12px;
-  --el-checkbox-bordered-small-height: 32px;
-  --el-checkbox-bordered-mini-input-height: 12px;
-  --el-checkbox-bordered-mini-input-width: 12px;
-  --el-checkbox-bordered-mini-height: 28px;
 
   --el-checkbox-button-checked-background-color: var(--el-color-primary);
   --el-checkbox-button-checked-font-color: var(--el-color-white);
@@ -89,18 +119,18 @@
 
     @each $size in (medium, small, mini) {
       &.#{$namespace}-checkbox--#{size} {
-        padding: var(--el-checkbox-bordered-#{$size}-padding);
+        padding: map.get($--checkbox-bordered-padding, $size);
         border-radius: map.get($--button-border-radius, $size);
-        height: var(--el-checkbox-bordered-#{$size}-height);
+        height: map.get($--checkbox-bordered-height, $size);
 
         .#{$namespace}-checkbox__label {
-          line-height: var(--el-checkox-#{size}-line-height);
+          line-height: map.get($--checkbox-line-height, $size);
           font-size: map.get($--button-font-size, $size);
         }
 
         .#{$namespace}-checkbox__inner {
-          height: var(--el-checkbox-bordered-#{size}-input-height);
-          width: var(--el-checkbox-bordered-#{size}-input-width);
+          height: map.get($--checkbox-bordered-input-height, $size);
+          width: map.get($--checkbox-bordered-input-width, $size);
         }
       }
     }

diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss
@@ -8,31 +8,6 @@
 // type|skipAutoTranslation|Category|Order
 // skipAutoTranslation 1
 
-/* Transition
--------------------------- */
-// refer to this website to get the bezier motion function detail
-//  https://cubic-bezier.com/#p1,p2,p3,p4 (change px as your function parameter)
-
-:root {
-  --el-transition-duration: 0.3s;
-  --el-transition-duration-fast: 0.2s;
-  --el-ease-in-out-bezier-function: cubic-bezier(0.645, 0.045, 0.355, 1);
-  --el-fast-bezier-transition: cubic-bezier(0.23, 1, 0.32, 1);
-
-  --el-all-transition: all var(--el-transition-duration)
-    var(--el-ease-in-out-bezier-function);
-  --el-fade-transition: opacity var(--el-transition-duration)
-    var(--el-fast-bezier-transition);
-  --el-md-fade-transition: transform var(--el-transition-duration)
-      var(--el-fast-bezier-transition),
-    opacity var(--el-transition-duration) var(--el-fast-bezier-transition);
-  --el-fade-linear-transition: opacity var(--el-transition-duration-fast) linear;
-  --el-border-transition-base: border-color var(--el-transition-duration-fast)
-    var(--el-ease-in-out-bezier-function);
-  --el-color-transition-base: color var(--el-transition-duration-fast)
-    var(--el-ease-in-out-bezier-function);
-}
-
 /* Color
 -------------------------- */
 $--colors: () !default;

diff --git a/packages/theme-chalk/src/var.scss b/packages/theme-chalk/src/var.scss
@@ -99,3 +99,27 @@
   // message
   --el-message-close-size: 16px;
 }
+
+/* Transition
+-------------------------- */
+// refer to this website to get the bezier motion function detail
+//  https://cubic-bezier.com/#p1,p2,p3,p4 (change px as your function parameter)
+:root {
+  --el-transition-duration: 0.3s;
+  --el-transition-duration-fast: 0.2s;
+  --el-ease-in-out-bezier-function: cubic-bezier(0.645, 0.045, 0.355, 1);
+  --el-fast-bezier-transition: cubic-bezier(0.23, 1, 0.32, 1);
+
+  --el-all-transition: all var(--el-transition-duration)
+    var(--el-ease-in-out-bezier-function);
+  --el-fade-transition: opacity var(--el-transition-duration)
+    var(--el-fast-bezier-transition);
+  --el-md-fade-transition: transform var(--el-transition-duration)
+      var(--el-fast-bezier-transition),
+    opacity var(--el-transition-duration) var(--el-fast-bezier-transition);
+  --el-fade-linear-transition: opacity var(--el-transition-duration-fast) linear;
+  --el-border-transition-base: border-color var(--el-transition-duration-fast)
+    var(--el-ease-in-out-bezier-function);
+  --el-color-transition-base: color var(--el-transition-duration-fast)
+    var(--el-ease-in-out-bezier-function);
+}