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

package/theme-chalk/src/common/var.scss

@@ -163,6 +163,16 @@ $disabled: map.merge(
   $disabled
 );
 
+$common-component-size: () !default;
+$common-component-size: map.merge(
+  (
+    'large': 40px,
+    'default': 32px,
+    'small': 24px,
+  ),
+  $common-component-size
+);
+
 // Checkbox
 // css3 var in packages/theme-chalk/src/checkbox.scss
 $checkbox: () !default;
@@ -201,6 +211,26 @@ $checkbox-button: map.merge(
   $checkbox-button
 );
 
+$checkbox-bordered-padding-left: () !default;
+$checkbox-bordered-padding-left: map.merge(
+  (
+    'large': 12px,
+    'default': 10px,
+    'small': 8px,
+  ),
+  $checkbox-bordered-padding-left
+);
+
+$checkbox-bordered-padding-right: () !default;
+$checkbox-bordered-padding-right: map.merge(
+  (
+    'large': 20px,
+    'default': 16px,
+    'small': 12px,
+  ),
+  $checkbox-bordered-padding-right
+);
+
 // Radio
 /// fontSize||Font|1
 $radio: () !default;
@@ -221,15 +251,7 @@ $radio: map.merge(
 );
 
 $radio-height: () !default;
-$radio-height: map.merge(
-  (
-    'default': 40px,
-    'medium': 36px,
-    'small': 32px,
-    'mini': 28px,
-  ),
-  $radio-height
-);
+$radio-height: map.merge($common-component-size, $radio-height);
 
 $radio-button: () !default;
 $radio-button: map.merge(
@@ -265,23 +287,12 @@ $radio-checked: map.merge(
   $radio-checked
 );
 
-$radio-bordered-padding: () !default;
-$radio-bordered-padding: map.merge(
-  (
-    'default': 0 20px 0 10px,
-    'medium': 0 20px 0 10px,
-    'small': 0 15px 0 10px,
-    'mini': 0 15px 0 10px,
-  ),
-  $radio-bordered-padding
-);
-
 $radio-bordered-input-height: () !default;
 $radio-bordered-input-height: map.merge(
   (
-    'medium': 14px,
+    'large': 14px,
+    'default': 12px,
     'small': 12px,
-    'mini': 12px,
   ),
   $radio-bordered-input-height
 );
@@ -289,9 +300,9 @@ $radio-bordered-input-height: map.merge(
 $radio-bordered-input-width: () !default;
 $radio-bordered-input-width: map.merge(
   (
-    'medium': 14px,
+    'large': 14px,
+    'default': 12px,
     'small': 12px,
-    'mini': 12px,
   ),
   $radio-bordered-input-width
 );
@@ -455,45 +466,39 @@ $input-disabled: map.merge(
 $input-font-size: () !default;
 $input-font-size: map.merge(
   (
-    'default': var(--el-font-size-base, map.get($font-size, 'base')),
-    'medium': 14px,
-    'small': 13px,
-    'mini': 12px,
+    'large': 14px,
+    'default': 14px,
+    'small': 12px,
   ),
   $input-font-size
 );
 
 $input-height: () !default;
-$input-height: map.merge(
-  (
-    'default': 40px,
-    'medium': 36px,
-    'small': 32px,
-    'mini': 28px,
-  ),
-  $input-height
-);
+$input-height: map.merge($common-component-size, $input-height);
 
 $input-line-height: () !default;
-$input-line-height: map.merge(
-  (
-    'medium': 28px,
-    'small': 24px,
-    'mini': 20px,
-  ),
-  $input-line-height
-);
+$input-line-height: map.merge($common-component-size, $input-line-height);
 
 $input-number-width: () !default;
 $input-number-width: map.merge(
   (
-    'medium': 200px,
-    'small': 130px,
-    'mini': 130px,
+    'large': 180px,
+    'default': 150px,
+    'small': 120px,
   ),
   $input-number-width
 );
 
+$input-padding-horizontal: () !default;
+$input-padding-horizontal: map.merge(
+  (
+    'large': 16px,
+    'default': 12px,
+    'small': 8px,
+  ),
+  $input-padding-horizontal
+);
+
 // Cascader
 // css3 var in packages/theme-chalk/src/cascader.scss
 $cascader: () !default;
@@ -527,7 +532,7 @@ $button: map.merge(
     'disabled-bg-color': var(--el-color-white),
     'disabled-border-color': var(--el-border-color-light),
     'divide-border-color': rgba($color-white, 0.5),
-    'hover-text-color': var(--el-color-white),
+    'hover-text-color': var(--el-color-primary),
     'hover-bg-color': var(--el-color-primary-light-9),
     'hover-border-color': var(--el-color-primary-light-7),
     'active-text-color': var(--el-button-hover-text-color),
@@ -537,6 +542,8 @@ $button: map.merge(
   $button
 );
 
+$button-border-width: $border-width-base !default;
+
 // need mix, so do not use css var
 $button-hover-tint-percent: 20%;
 $button-active-shade-percent: 10%;
@@ -564,10 +571,9 @@ $button-text-color: () !default;
 $button-font-size: () !default;
 $button-font-size: map.merge(
   (
+    'large': var(--el-font-size-base, map.get($font-size, 'base')),
     'default': var(--el-font-size-base, map.get($font-size, 'base')),
-    'medium': var(--el-font-size-base, map.get($font-size, 'base')),
     'small': 12px,
-    'mini': 12px,
   ),
   $button-font-size
 );
@@ -575,10 +581,9 @@ $button-font-size: map.merge(
 $button-border-radius: () !default;
 $button-border-radius: map.merge(
   (
+    'large': var(--el-border-radius-base),
     'default': var(--el-border-radius-base),
-    'medium': var(--el-border-radius-base),
     'small': calc(var(--el-border-radius-base) - 1px),
-    'mini': calc(var(--el-border-radius-base) - 1px),
   ),
   $button-border-radius
 );
@@ -586,10 +591,9 @@ $button-border-radius: map.merge(
 $button-padding-vertical: () !default;
 $button-padding-vertical: map.merge(
   (
-    'default': 12px,
-    'medium': 10px,
-    'small': 9px,
-    'mini': 7px,
+    'large': 13px,
+    'default': 9px,
+    'small': 6px,
   ),
   $button-padding-vertical
 );
@@ -597,10 +601,9 @@ $button-padding-vertical: map.merge(
 $button-padding-horizontal: () !default;
 $button-padding-horizontal: map.merge(
   (
-    'default': 20px,
-    'medium': 20px,
-    'small': 15px,
-    'mini': 15px,
+    'large': 20px,
+    'default': 16px,
+    'small': 12px,
   ),
   $button-padding-horizontal
 );
@@ -658,6 +661,36 @@ $table: map.merge(
   $table
 );
 
+$table-font-size: () !default;
+$table-font-size: map.merge(
+  (
+    'large': var(--el-font-size-base, map.get($font-size, 'base')),
+    'default': 14px,
+    'small': 12px,
+  ),
+  $table-font-size
+);
+
+$table-padding: () !default;
+$table-padding: map.merge(
+  (
+    'large': 12px 0,
+    'default': 8px 0,
+    'small': 4px 0,
+  ),
+  $table-padding
+);
+
+$table-cell-padding: () !default;
+$table-cell-padding: map.merge(
+  (
+    'large': 0 16px,
+    'default': 0 12px,
+    'small': 0 8px,
+  ),
+  $table-cell-padding
+);
+
 // Pagination
 // css3 var in packages/theme-chalk/src/pagination.scss
 $pagination: () !default;
@@ -748,7 +781,6 @@ $tag: map.merge(
   (
     'font-size': 12px,
     'border-radius': 4px,
-    'padding': 0 10px,
   ),
   $tag
 );
@@ -758,14 +790,33 @@ $tag-color: () !default;
 $tag-height: () !default;
 $tag-height: map.merge(
   (
-    'default': 32px,
-    'medium': 28px,
-    'small': 24px,
-    'mini': 20px,
+    'large': 32px,
+    'default': 24px,
+    'small': 20px,
   ),
   $tag-height
 );
 
+$tag-padding: () !default;
+$tag-padding: map.merge(
+  (
+    'large': 12px,
+    'default': 10px,
+    'small': 8px,
+  ),
+  $tag-padding
+);
+
+$tag-icon-size: () !default;
+$tag-icon-size: map.merge(
+  (
+    'large': 14px,
+    'default': 14px,
+    'small': 12px,
+  ),
+  $tag-icon-size
+);
+
 @each $type in $types {
   $tag-color: map.merge(
     (
@@ -874,6 +925,7 @@ $menu: map.merge(
     'hover-text-color': var(--el-text-color-primary),
     'bg-color': var(--el-color-white),
     'hover-bg-color': var(--el-color-primary-light-9),
+    'item-height': 56px,
     'item-font-size': var(--el-font-size-base),
     'item-hover-fill': var(--el-color-primary-light-9),
     'border-color': #e6e6e6,
@@ -1081,16 +1133,23 @@ $avatar: map.merge(
   (
     'text-color': #fff,
     'bg-color': #c0c4cc,
-    'text-font-size': 14px,
-    'icon-font-size': 18px,
+    'text-size': 14px,
+    'icon-size': 18px,
     'border-radius': var(--el-border-radius-base),
-    'large-size': 40px,
-    'medium-size': 36px,
-    'small-size': 28px,
   ),
   $avatar
 );
 
+$avatar-size: () !default;
+$avatar-size: map.merge(
+  (
+    'large': 56px,
+    'default': 40px,
+    'small': 24px,
+  ),
+  $avatar-size
+);
+
 // Empty
 
 // css3 var in packages/theme-chalk/src/empty.scss
@@ -1111,10 +1170,8 @@ $empty: map.merge(
 $descriptions: () !default;
 $descriptions: map.merge(
   (
-    'header-margin-bottom': 20px,
-    'title-font-size': 16px,
     'table-border': 1px solid var(--el-border-color-lighter),
-    'item-bordered-label-background': #fafafa,
+    'item-bordered-label-background': #f5f7fa,
   ),
   $descriptions
 );

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

@@ -70,7 +70,6 @@
   .#{$namespace}-range__icon {
     height: inherit;
     font-size: 14px;
-    margin-left: -5px;
     color: var(--el-text-color-placeholder);
     float: left;
 
@@ -99,12 +98,12 @@
 
   .#{$namespace}-range-separator {
     flex: 1;
-    display: inline-block;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
     height: 100%;
     padding: 0 5px;
     margin: 0;
-    text-align: center;
-    line-height: 32px;
     font-size: 14px;
     word-break: keep-all;
     color: var(--el-text-color-primary);
@@ -151,7 +150,7 @@
     }
   }
 
-  @each $size in (medium, small, mini) {
+  @each $size in (large, small) {
     @include m($size) {
       line-height: map.get($input-height, $size);
 

package/theme-chalk/src/descriptions-item.scss

@@ -1,19 +1,73 @@
+@use 'sass:map';
+
 @use 'mixins/mixins' as *;
 @use 'common/var' as *;
 
+$descriptions-item-label-margin-right: () !default;
+$descriptions-item-label-margin-right: map.merge(
+  (
+    'large': 16px,
+    'default': 16px,
+    'small': 12px,
+  ),
+  $descriptions-item-label-margin-right
+);
+
+$descriptions-item-vertical-label-padding-bottom: () !default;
+$descriptions-item-vertical-label-padding-bottom: map.merge(
+  (
+    'large': 8px,
+    'default': 6px,
+    'small': 4px,
+  ),
+  $descriptions-item-vertical-label-padding-bottom
+);
+
 @include b(descriptions) {
   @include e(label) {
     &.#{$namespace}-descriptions__cell.is-bordered-label {
       font-weight: bold;
-      color: var(--el-text-color-secondary);
+      color: var(--el-text-color-regular);
       background: var(--el-descriptions-item-bordered-label-background);
     }
 
     &:not(.is-bordered-label) {
-      margin-right: 10px;
+      color: var(--el-text-color-primary);
+      margin-right: map.get($descriptions-item-label-margin-right, 'default');
+    }
+
+    &.#{$namespace}-descriptions__cell:not(.is-bordered-label).is-vertical-label {
+      padding-bottom: map.get(
+        $descriptions-item-vertical-label-padding-bottom,
+        'default'
+      );
     }
   }
 
   @include e(content) {
+    &.#{$namespace}-descriptions__cell.is-bordered-content {
+      color: var(--el-text-color-primary);
+    }
+
+    &:not(.is-bordered-label) {
+      color: var(--el-text-color-regular);
+    }
+  }
+
+  @each $size in (large, small) {
+    @include m($size) {
+      @include e(label) {
+        &:not(.is-bordered-label) {
+          margin-right: map.get($descriptions-item-label-margin-right, $size);
+        }
+
+        &.#{$namespace}-descriptions__cell:not(.is-bordered-label).is-vertical-label {
+          padding-bottom: map.get(
+            $descriptions-item-vertical-label-padding-bottom,
+            $size
+          );
+        }
+      }
+    }
   }
 }

package/theme-chalk/src/descriptions.scss

@@ -1,7 +1,59 @@
+@use 'sass:map';
+
 @use 'mixins/mixins' as *;
 @use 'mixins/var' as *;
 @use 'common/var' as *;
 
+$descriptions-header-margin-bottom: () !default;
+$descriptions-header-margin-bottom: map.merge(
+  (
+    'large': 20px,
+    'default': 16px,
+    'small': 12px,
+  ),
+  $descriptions-header-margin-bottom
+);
+
+$descriptions-title-font-size: () !default;
+$descriptions-title-font-size: map.merge(
+  (
+    'large': 16px,
+    'default': 16px,
+    'small': 14px,
+  ),
+  $descriptions-title-font-size
+);
+
+$descriptions-cell-padding-bottom: () !default;
+$descriptions-cell-padding-bottom: map.merge(
+  (
+    'large': 16px,
+    'default': 12px,
+    'small': 8px,
+  ),
+  $descriptions-cell-padding-bottom
+);
+
+$descriptions-bordered-cell-padding: () !default;
+$descriptions-bordered-cell-padding: map.merge(
+  (
+    'large': 12px 15px,
+    'default': 8px 11px,
+    'small': 4px 7px,
+  ),
+  $descriptions-bordered-cell-padding
+);
+
+$descriptions-cell-font-size: () !default;
+$descriptions-cell-font-size: map.merge(
+  (
+    'large': 14px,
+    'default': 14px,
+    'small': 12px,
+  ),
+  $descriptions-cell-font-size
+);
+
 @include b(descriptions) {
   @include set-component-css-var('descriptions', $descriptions);
 
@@ -13,16 +65,16 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: var(--el-descriptions-header-margin-bottom);
+    margin-bottom: map.get($descriptions-header-margin-bottom, 'default');
 
     @include e(title) {
-      font-size: var(--el-descriptions-title-font-size);
+      color: var(--el-text-color-primary);
+      font-size: map.get($descriptions-title-font-size, 'default');
       font-weight: bold;
     }
   }
 
   @include e(body) {
-    color: var(--el-text-color-regular);
     background-color: $color-white;
 
     .#{$namespace}-descriptions__table {
@@ -33,7 +85,8 @@
         box-sizing: border-box;
         text-align: left;
         font-weight: normal;
-        line-height: 1.5;
+        line-height: 23px;
+        font-size: map.get($descriptions-cell-font-size, 'default');
 
         @include when(left) {
           text-align: left;
@@ -47,64 +100,52 @@
           text-align: right;
         }
       }
-    }
-  }
 
-  .is-bordered {
-    .#{$namespace}-descriptions__cell {
-      border: var(--el-descriptions-table-border);
-      padding: 12px 10px;
-    }
-  }
-
-  :not(.is-bordered) {
-    .#{$namespace}-descriptions__cell {
-      padding-bottom: 12px;
-    }
-  }
-
-  @include m(medium) {
-    &.is-bordered {
-      .#{$namespace}-descriptions__cell {
-        padding: 10px;
+      &.is-bordered {
+        .#{$namespace}-descriptions__cell {
+          border: var(--el-descriptions-table-border);
+          padding: map.get($descriptions-bordered-cell-padding, 'default');
+        }
       }
-    }
 
-    &:not(.is-bordered) {
-      .#{$namespace}-descriptions__cell {
-        padding-bottom: 10px;
+      &:not(.is-bordered) {
+        .#{$namespace}-descriptions__cell {
+          padding-bottom: map.get($descriptions-cell-padding-bottom, 'default');
+        }
       }
     }
   }
 
-  @include m(small) {
-    font-size: 12px;
+  @each $size in (large, small) {
+    @include m($size) {
+      font-size: map.get($input-font-size, $size);
 
-    &.is-bordered {
-      .#{$namespace}-descriptions__cell {
-        padding: 8px 10px;
-      }
-    }
-
-    &:not(.is-bordered) {
-      .#{$namespace}-descriptions__cell {
-        padding-bottom: 8px;
-      }
-    }
-  }
-
-  @include m(mini) {
-    font-size: 12px;
+      @include e(header) {
+        margin-bottom: map.get($descriptions-header-margin-bottom, $size);
 
-    &.is-bordered {
-      .#{$namespace}-descriptions__cell {
-        padding: 6px 10px;
+        @include e(title) {
+          font-size: map.get($descriptions-title-font-size, $size);
+        }
       }
-    }
 
-    &:not(.is-bordered) {
-      .#{$namespace}-descriptions__cell {
-        padding-bottom: 6px;
+      @include e(body) {
+        .#{$namespace}-descriptions__table {
+          .#{$namespace}-descriptions__cell {
+            font-size: map.get($descriptions-cell-font-size, $size);
+          }
+
+          &.is-bordered {
+            .#{$namespace}-descriptions__cell {
+              padding: map.get($descriptions-bordered-cell-padding, $size);
+            }
+          }
+
+          &:not(.is-bordered) {
+            .#{$namespace}-descriptions__cell {
+              padding-bottom: map.get($descriptions-cell-padding-bottom, $size);
+            }
+          }
+        }
       }
     }
   }

package/theme-chalk/src/drawer.scss

@@ -66,6 +66,7 @@ $directions: rtl, ltr, ttb, btt;
   &__body {
     flex: 1;
     padding: var(--el-drawer-padding-primary);
+    overflow: auto;
     & > * {
       box-sizing: border-box;
     }