element-plus 1.2.0-beta.6 → 1.3.0-beta.1

package/theme-chalk/src/avatar.scss

@@ -1,25 +1,28 @@
+@use 'sass:map';
+
 @use 'mixins/mixins' as *;
 @use 'mixins/var' as *;
 @use 'common/var' as *;
 
 @include b(avatar) {
   @include set-component-css-var('avatar', $avatar);
+  @include set-component-css-var('avatar-size', $avatar-size);
 
-  display: inline-block;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
   box-sizing: border-box;
   text-align: center;
   overflow: hidden;
   color: var(--el-avatar-text-color);
   background: var(--el-avatar-bg-color);
-  width: var(--el-avatar-large-size);
-  height: var(--el-avatar-large-size);
-  line-height: var(--el-avatar-large-size);
-  font-size: var(--el-avatar-text-font-size);
+  width: var(--el-avatar-size);
+  height: var(--el-avatar-size);
+  font-size: var(--el-avatar-text-size);
 
   > img {
     display: block;
     height: 100%;
-    vertical-align: middle;
   }
 
   @include m(circle) {
@@ -31,14 +34,12 @@
   }
 
   @include m(icon) {
-    font-size: var(--el-avatar-icon-font-size);
+    font-size: var(--el-avatar-icon-size);
   }
 
-  @each $size in (small, medium, large) {
+  @each $size in (small, default, large) {
     @include m($size) {
-      width: var(--el-avatar-#{$size}-size);
-      height: var(--el-avatar-#{$size}-size);
-      line-height: var(--el-avatar-#{$size}-size);
+      --el-avatar-size: #{map.get($avatar-size, $size)};
     }
   }
 }

package/theme-chalk/src/button.scss

@@ -10,10 +10,24 @@
   @include set-component-css-var('button', $button);
 }
 
+$button-icon-span-gap: () !default;
+$button-icon-span-gap: map.merge(
+  (
+    'large': 8px,
+    'default': 6px,
+    'small': 4px,
+  ),
+  $button-icon-span-gap
+);
+
 @include b(button) {
-  display: inline-block;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+
   line-height: 1;
-  min-height: map.get($input-height, 'default');
+  // min-height will expand when in flex
+  height: map.get($input-height, 'default');
   white-space: nowrap;
   cursor: pointer;
   background-color: var(--el-button-bg-color, #{map.get($button, 'bg-color')});
@@ -32,13 +46,18 @@
   font-weight: var(--el-button-font-weight);
   user-select: none;
 
+  > span {
+    display: inline-flex;
+    align-items: center;
+  }
+
   & + & {
-    margin-left: 10px;
+    margin-left: 12px;
   }
 
   @include button-size(
-    map.get($button-padding-vertical, 'default'),
-    map.get($button-padding-horizontal, 'default'),
+    map.get($button-padding-vertical, 'default') - $button-border-width,
+    map.get($button-padding-horizontal, 'default') - $button-border-width,
     map.get($button-font-size, 'default'),
     map.get($button-border-radius, 'default')
   );
@@ -73,7 +92,7 @@
 
   & [class*='#{$namespace}-icon'] {
     & + span {
-      margin-left: 5px;
+      margin-left: map.get($button-icon-span-gap, 'default');
     }
     svg {
       vertical-align: bottom;
@@ -151,11 +170,10 @@
   }
   @include when(round) {
     border-radius: var(--el-border-radius-round);
-    padding: 12px 23px;
   }
   @include when(circle) {
     border-radius: 50%;
-    padding: map.get($button-padding-vertical, 'default');
+    padding: map.get($button-padding-vertical, 'default') - $button-border-width;
   }
 
   @include e(text) {
@@ -177,19 +195,27 @@
     }
   }
 
-  @each $size in (medium, small, mini) {
+  @each $size in (large, small) {
     @include m($size) {
-      min-height: map.get($input-height, $size);
+      --el-button-size: #{map.get($input-height, $size)};
+      height: var(--el-button-size);
+
+      & [class*='#{$namespace}-icon'] {
+        & + span {
+          margin-left: map.get($button-icon-span-gap, $size);
+        }
+      }
 
       @include button-size(
-        map.get($button-padding-vertical, $size),
-        map.get($button-padding-horizontal, $size),
+        map.get($button-padding-vertical, $size) - $button-border-width,
+        map.get($button-padding-horizontal, $size) - $button-border-width,
         map.get($button-font-size, $size),
         map.get($button-border-radius, $size)
       );
 
       @include when(circle) {
-        padding: map.get($button-padding-vertical, $size);
+        width: var(--el-button-size);
+        padding: map.get($button-padding-vertical, $size) - $button-border-width;
       }
     }
   }

package/theme-chalk/src/cascader-panel.scss

@@ -113,7 +113,7 @@
   @include e(label) {
     flex: 1;
     text-align: left;
-    padding: 0 10px;
+    padding: 0 8px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;

package/theme-chalk/src/cascader.scss

@@ -73,7 +73,7 @@
     }
   }
 
-  @each $size in (medium, small, mini) {
+  @each $size in (large, small) {
     @include m($size) {
       font-size: map.get($input-font-size, $size);
       line-height: map.get($input-height, $size);

package/theme-chalk/src/checkbox-button.scss

@@ -35,8 +35,8 @@
     user-select: none;
 
     @include button-size(
-      map.get($button-padding-vertical, 'default'),
-      map.get($button-padding-horizontal, 'default'),
+      map.get($button-padding-vertical, 'default') - $button-border-width,
+      map.get($button-padding-horizontal, 'default') - $button-border-width,
       map.get($button-font-size, 'default'),
       0
     );
@@ -122,12 +122,12 @@
     }
   }
 
-  @each $size in (medium, small, mini) {
+  @each $size in (large, small) {
     @include m($size) {
       .#{$namespace}-checkbox-button__inner {
         @include button-size(
-          map.get($button-padding-vertical, $size),
-          map.get($button-padding-horizontal, $size),
+          map.get($button-padding-vertical, $size) - $button-border-width,
+          map.get($button-padding-horizontal, $size) - $button-border-width,
           map.get($button-font-size, $size),
           0
         );

package/theme-chalk/src/checkbox.scss

@@ -7,33 +7,14 @@
 @use 'mixins/utils' as *;
 
 $checkbox-height: () !default;
-$checkbox-height: map.merge(
-  (
-    'default': 40px,
-    'medium': 36px,
-    'small': 32px,
-    'mini': 28px,
-  ),
-  $checkbox-height
-);
-
-$checkbox-bordered-padding: () !default;
-$checkbox-bordered-padding: map.merge(
-  (
-    'default': 0 20px 0 10px,
-    'medium': 0 20px 0 10px,
-    'small': 0 15px 0 10px,
-    'mini': 0 15px 0 10px,
-  ),
-  $checkbox-bordered-padding
-);
+$checkbox-height: map.merge($common-component-size, $checkbox-height);
 
 $checkbox-bordered-input-height: () !default;
 $checkbox-bordered-input-height: map.merge(
   (
-    'medium': 14px,
+    'large': 14px,
+    'default': 12px,
     'small': 12px,
-    'mini': 12px,
   ),
   $checkbox-bordered-input-height
 );
@@ -61,14 +42,15 @@ $checkbox-bordered-input-width: map.merge(
   margin-right: 30px;
   height: map.get($checkbox-height, 'default');
 
-  @each $size in (medium, small, mini) {
+  @each $size in (large, small) {
     &.#{$namespace}-checkbox--#{$size} {
       height: map.get($checkbox-height, $size);
     }
   }
 
   @include when(bordered) {
-    padding: map.get($checkbox-bordered-padding, 'default');
+    padding: 0 map.get($checkbox-bordered-padding-right, 'default')-$border-width-base
+      0 map.get($checkbox-bordered-padding-left, 'default')-$border-width-base;
     border-radius: var(--el-border-radius-base);
     border: var(--el-border-base);
     box-sizing: border-box;
@@ -82,13 +64,13 @@ $checkbox-bordered-input-width: map.merge(
       cursor: not-allowed;
     }
 
-    & + .#{$namespace}-checkbox.is-bordered {
-      margin-left: 10px;
-    }
-
-    @each $size in (medium, small, mini) {
+    @each $size in (large, small) {
       &.#{$namespace}-checkbox--#{$size} {
-        padding: map.get($checkbox-bordered-padding, $size);
+        padding: 0
+          map.get($checkbox-bordered-padding-right, $size)-$border-width-base
+          0
+          map.get($checkbox-bordered-padding-left, $size)-$border-width-base;
+
         border-radius: map.get($button-border-radius, $size);
 
         .#{$namespace}-checkbox__label {
@@ -102,8 +84,7 @@ $checkbox-bordered-input-width: map.merge(
       }
     }
 
-    &.#{$namespace}-checkbox--small,
-    &.#{$namespace}-checkbox--mini {
+    &.#{$namespace}-checkbox--small {
       .#{$namespace}-checkbox__inner {
         &::after {
           height: 6px;
@@ -254,7 +235,7 @@ $checkbox-bordered-input-width: map.merge(
 
   @include e(label) {
     display: inline-block;
-    padding-left: 10px;
+    padding-left: 8px;
     line-height: 1;
     font-size: var(--el-checkbox-font-size);
   }

package/theme-chalk/src/color-picker.scss

@@ -3,6 +3,9 @@
 @use 'mixins/mixins' as *;
 @use 'common/var' as *;
 
+$color-picker-size: () !default;
+$color-picker-size: map.merge($common-component-size, $color-picker-size);
+
 @include b(color-predefine) {
   display: flex;
   font-size: 12px;
@@ -211,7 +214,7 @@
   }
 
   @include e(btns) {
-    margin-top: 6px;
+    margin-top: 12px;
     text-align: right;
   }
 
@@ -228,7 +231,6 @@
   display: inline-block;
   position: relative;
   line-height: normal;
-  height: 40px;
 
   @include when(disabled) {
     .#{$namespace}-color-picker__trigger {
@@ -236,55 +238,26 @@
     }
   }
 
-  @include m(medium) {
-    height: 36px;
+  @each $size in (large, small) {
+    @include m($size) {
+      height: map.get($color-picker-size, $size);
 
-    .#{$namespace}-color-picker__trigger {
-      height: 36px;
-      width: 36px;
-    }
+      .#{$namespace}-color-picker__trigger {
+        height: map.get($color-picker-size, $size);
+        width: map.get($color-picker-size, $size);
+      }
 
-    .#{$namespace}-color-picker__mask {
-      height: 34px;
-      width: 34px;
+      .#{$namespace}-color-picker__mask {
+        height: map.get($color-picker-size, $size)-2px;
+        width: map.get($color-picker-size, $size)-2px;
+      }
     }
   }
 
   @include m(small) {
-    height: 32px;
-
-    .#{$namespace}-color-picker__trigger {
-      height: 32px;
-      width: 32px;
-    }
-
-    .#{$namespace}-color-picker__mask {
-      height: 30px;
-      width: 30px;
-    }
-
-    .#{$namespace}-color-picker__icon,
-    .#{$namespace}-color-picker__empty {
-      transform: translate3d(-50%, -50%, 0) scale(0.8);
-    }
-  }
-
-  @include m(mini) {
-    height: 28px;
-
-    .#{$namespace}-color-picker__trigger {
-      height: 28px;
-      width: 28px;
-    }
-
-    .#{$namespace}-color-picker__mask {
-      height: 26px;
-      width: 26px;
-    }
-
     .#{$namespace}-color-picker__icon,
     .#{$namespace}-color-picker__empty {
-      transform: translate3d(-50%, -50%, 0) scale(0.8);
+      transform: scale(0.8);
     }
   }
 
@@ -301,10 +274,13 @@
   }
 
   @include e(trigger) {
-    display: inline-block;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+
     box-sizing: border-box;
-    height: 40px;
-    width: 40px;
+    height: map.get($color-picker-size, 'default');
+    width: map.get($color-picker-size, 'default');
     padding: 4px;
     border: 1px solid #e6e6e6;
     border-radius: 4px;
@@ -329,31 +305,23 @@
   }
 
   @include e(color-inner) {
-    position: absolute;
-    left: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
   }
 
   @include e(empty) {
     font-size: 12px;
     color: var(--el-text-color-secondary);
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate3d(-50%, -50%, 0);
   }
 
   @include e(icon) {
-    display: inline-block;
-    position: absolute;
-    width: 100%;
-    top: 50%;
-    left: 50%;
-    transform: translate3d(-50%, -50%, 0);
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
     color: $color-white;
-    text-align: center;
     font-size: 12px;
   }