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

package/theme-chalk/src/dropdown.scss

@@ -4,10 +4,35 @@
 @use 'mixins/var' as *;
 @use 'common/var' as *;
 
+$dropdown-item-line-height: () !default;
+$dropdown-item-line-height: map.merge(
+  (
+    'large': 22px,
+    'default': 22px,
+    'small': 20px,
+  ),
+  $dropdown-item-line-height
+);
+
+$dropdown-item-padding: () !default;
+$dropdown-item-padding: map.merge(
+  (
+    'large': 7px 20px,
+    'default': 5px 16px,
+    'small': 2px 12px,
+  ),
+  $dropdown-item-padding
+);
+
+$dropdown-caret-width: () !default;
+$dropdown-caret-width: map.merge($common-component-size, $dropdown-caret-width);
+
+$dropdown-divider-width: 1px !default;
+
 @include b(dropdown) {
   @include set-component-css-var('dropdown', $dropdown);
 
-  display: inline-block;
+  display: inline-flex;
   position: relative;
   color: var(--el-text-color-regular);
   font-size: var(--el-font-size-base);
@@ -44,20 +69,19 @@
     }
   }
 
-  .#{$namespace}-button-group {
-    display: block;
-
-    .#{$namespace}-button {
-      float: none;
-    }
-  }
-
   & .#{$namespace}-dropdown__caret-button {
-    padding-left: 5px;
-    padding-right: 5px;
-    position: relative;
+    padding-left: 0;
+    padding-right: 0;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    width: map.get($dropdown-caret-width, 'default');
     border-left: none;
 
+    > span {
+      display: inline-flex;
+    }
+
     &::before {
       $gap: 5px;
 
@@ -68,11 +92,11 @@
       top: $gap;
       bottom: $gap;
       left: 0;
-      background: mix(white, transparent, 50%);
+      background: rgba(0, 0, 0, 0.5);
     }
 
-    &.#{$namespace}-button--default::before {
-      background: var(--el-default-border-color);
+    &.#{$namespace}-button::before {
+      background: var(--el-border-color-base);
       opacity: 0.5;
     }
 
@@ -97,14 +121,33 @@
     // 自定义
     outline: none;
   }
+
+  @each $size in (large, small) {
+    @include m($size) {
+      .#{$namespace}-dropdown__caret-button {
+        width: map.get($dropdown-caret-width, $size);
+      }
+    }
+  }
 }
 
+$dropdown-menu-padding-vertical: () !default;
+$dropdown-menu-padding-vertical: map.merge(
+  (
+    'large': 8px,
+    'default': 6px,
+    'small': 4px,
+  ),
+  $dropdown-menu-padding-vertical
+);
+
 @include b(dropdown-menu) {
   position: relative;
   top: 0;
   left: 0;
   z-index: var(--el-dropdown-menu-index);
-  padding: 10px 0;
+  padding: map.get($dropdown-menu-padding-vertical, 'default')-$border-width-base
+    0;
   margin: 0;
   background-color: $color-white;
   border: none;
@@ -115,8 +158,8 @@
     display: flex;
     align-items: center;
     list-style: none;
-    line-height: 36px;
-    padding: 0 20px;
+    line-height: map.get($dropdown-item-line-height, 'default');
+    padding: map.get($dropdown-item-padding, 'default');
     margin: 0;
     font-size: var(--el-font-size-base);
     color: var(--el-text-color-regular);
@@ -153,58 +196,23 @@
     }
   }
 
-  @include m(medium) {
-    padding: 6px 0;
-
-    @include e(item) {
-      line-height: 30px;
-      padding: 0 17px;
-      font-size: 14px;
-
-      &.#{$namespace}-dropdown-menu__item--divided {
-        $divided-offset: 6px;
-        margin-top: $divided-offset;
-
-        &:before {
-          height: $divided-offset;
-        }
-      }
-    }
-  }
-
-  @include m(small) {
-    padding: 6px 0;
-
-    @include e(item) {
-      line-height: 27px;
-      padding: 0 15px;
-      font-size: 13px;
-
-      &.#{$namespace}-dropdown-menu__item--divided {
-        $divided-offset: 4px;
-        margin-top: $divided-offset;
-
-        &:before {
-          height: $divided-offset;
-        }
-      }
-    }
-  }
-
-  @include m(mini) {
-    padding: 3px 0;
+  @each $size in (large, small) {
+    @include m($size) {
+      padding: map.get($dropdown-menu-padding-vertical, $size)-$border-width-base
+        0;
 
-    @include e(item) {
-      line-height: 24px;
-      padding: 0 10px;
-      font-size: 12px;
+      @include e(item) {
+        padding: map.get($dropdown-item-padding, $size);
+        line-height: map.get($dropdown-item-line-height, $size);
+        font-size: map.get($input-font-size, $size);
 
-      &.#{$namespace}-dropdown-menu__item--divided {
-        $divided-offset: 3px;
-        margin-top: $divided-offset;
+        &.#{$namespace}-dropdown-menu__item--divided {
+          $divided-offset: 3px;
+          margin-top: $divided-offset;
 
-        &:before {
-          height: $divided-offset;
+          &:before {
+            height: $divided-offset;
+          }
         }
       }
     }

package/theme-chalk/src/form.scss

@@ -1,3 +1,5 @@
+@use 'sass:map';
+
 @use 'mixins/mixins' as *;
 @use 'mixins/utils' as *;
 @use 'mixins/var' as *;
@@ -41,7 +43,8 @@
 
 @include b(form-item) {
   display: flex;
-  margin-bottom: 22px;
+  --font-size: #{map.get($input-font-size, 'default')};
+  margin-bottom: calc(var(--font-size) + 8px);
 
   & .#{$namespace}-form-item {
     margin-bottom: 0;
@@ -51,40 +54,10 @@
     display: none;
   }
 
-  @include m(medium) {
-    .#{$namespace}-form-item__label {
-      line-height: 36px;
-    }
-    .#{$namespace}-form-item__content {
-      line-height: 36px;
-    }
-  }
-  @include m(small) {
-    .#{$namespace}-form-item__label {
-      line-height: 32px;
-    }
-    .#{$namespace}-form-item__content {
-      line-height: 32px;
-    }
-    &.#{$namespace}-form-item {
-      margin-bottom: 18px;
-    }
-    .#{$namespace}-form-item__error {
-      padding-top: 2px;
-    }
-  }
-  @include m(mini) {
-    .#{$namespace}-form-item__label {
-      line-height: 28px;
-    }
-    .#{$namespace}-form-item__content {
-      line-height: 28px;
-    }
-    &.#{$namespace}-form-item {
-      margin-bottom: 18px;
-    }
-    .#{$namespace}-form-item__error {
-      padding-top: 1px;
+  @each $size in (large, default, small) {
+    @include m($size) {
+      --font-size: #{map.get($input-font-size, $size)};
+      --el-form-label-font-size: var(--font-size);
     }
   }
 
@@ -99,15 +72,18 @@
     text-align: right;
     font-size: var(--el-form-label-font-size);
     color: var(--el-text-color-regular);
-    line-height: 40px;
+    line-height: calc(var(--el-form-label-font-size) * 2 + 4px);
     padding: 0 12px 0 0;
     box-sizing: border-box;
   }
   @include e(content) {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
     flex: 1;
-    line-height: 40px;
+    line-height: calc(var(--font-size) * 2 + 4px);
     position: relative;
-    font-size: 14px;
+    font-size: var(--font-size);
     min-width: 0;
 
     .#{$namespace}-input-group {
@@ -146,6 +122,7 @@
   }
 
   @include when(error) {
+    & .#{$namespace}-select-v2__wrapper,
     & .#{$namespace}-input__inner,
     & .#{$namespace}-textarea__inner {
       &,

package/theme-chalk/src/icon.scss

@@ -28,8 +28,9 @@
   height: 1em;
   width: 1em;
   line-height: 1em;
-  text-align: center;
-  display: inline-block;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
   position: relative;
   fill: currentColor;
   color: var(--color);

package/theme-chalk/src/image.scss

@@ -17,7 +17,7 @@
   }
 
   @include e(placeholder) {
-    @extend %size;
+    @extend %size !optional;
     background: var(--el-bg-color);
   }
 

package/theme-chalk/src/input-number.scss

@@ -7,7 +7,7 @@
 @include b(input-number) {
   position: relative;
   display: inline-block;
-  width: 180px;
+  width: map.get($input-number-width, 'default');
   line-height: #{map.get($input-height, 'default') - 2};
 
   .#{$namespace}-input {
@@ -27,17 +27,18 @@
     }
   }
 
-  .#{$namespace}-icon {
-    vertical-align: text-bottom;
-  }
-
   @include e((increase, decrease)) {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: auto;
+
     position: absolute;
     z-index: 1;
     top: 1px;
+    bottom: 1px;
+
     width: map.get($input-height, 'default');
-    height: auto;
-    text-align: center;
     background: var(--el-bg-color);
     color: var(--el-text-color-regular);
     cursor: pointer;
@@ -85,7 +86,7 @@
     }
   }
 
-  @each $size in (medium, small, mini) {
+  @each $size in (large, small) {
     @include m($size) {
       width: map.get($input-number-width, $size);
       line-height: #{map.get($input-height, $size) - 2};
@@ -110,14 +111,6 @@
     }
   }
 
-  @include m(mini) {
-    @include e((increase, decrease)) {
-      [class*='#{$namespace}-icon'] {
-        transform: scale(0.8);
-      }
-    }
-  }
-
   @include when(without-controls) {
     .#{$namespace}-input__inner {
       padding-left: 15px;
@@ -155,7 +148,7 @@
       border-radius: 0 0 var(--el-border-radius-base) 0;
     }
 
-    @each $size in (medium, small, mini) {
+    @each $size in (large, small) {
       &[class*='#{$size}'] {
         [class*='increase'],
         [class*='decrease'] {

package/theme-chalk/src/input.scss

@@ -143,7 +143,7 @@
     height: map.get($input-height, 'default');
     line-height: map.get($input-height, 'default');
     outline: none;
-    padding: 0 15px;
+    padding: 0 map.get($input-padding-horizontal, 'default')-$border-width-base;
     transition: var(--el-transition-border);
     width: 100%;
 
@@ -175,7 +175,7 @@
 
     position: absolute;
     height: 100%;
-    right: 5px;
+    right: map.get($input-padding-horizontal, 'default');
     top: 0;
     text-align: center;
     color: var(--el-input-icon-color, map.get($input, 'icon-color'));
@@ -193,7 +193,7 @@
 
     position: absolute;
     height: 100%;
-    left: 5px;
+    left: map.get($input-padding-horizontal, 'default');
     top: 0;
     text-align: center;
     color: var(--el-input-icon-color, map.get($input, 'icon-color'));
@@ -206,7 +206,6 @@
   }
 
   @include e(icon) {
-    width: 25px;
     height: inherit;
     display: flex;
     justify-content: center;
@@ -261,6 +260,11 @@
     }
   }
 
+  $input-padding-size-with-extra-icon: calc(
+    5px + map.get($input-font-size, 'default') +
+      map.get($input-padding-horizontal, 'default')
+  );
+
   @include m(suffix) {
     @include m(password-clear) {
       .#{$namespace}-input__inner {
@@ -269,17 +273,17 @@
     }
 
     .#{$namespace}-input__inner {
-      padding-right: 30px;
+      padding-right: $input-padding-size-with-extra-icon;
     }
   }
 
   @include m(prefix) {
     .#{$namespace}-input__inner {
-      padding-left: 30px;
+      padding-left: $input-padding-size-with-extra-icon;
     }
   }
 
-  @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) - 2;
@@ -287,11 +291,37 @@
       @include e(inner) {
         height: map.get($input-height, $size);
         line-height: map.get($input-height, $size);
+        padding: 0 map.get($input-padding-horizontal, $size)-$border-width-base;
       }
 
       .#{$namespace}-input__icon {
         line-height: map.get($input-height, $size);
       }
+
+      $input-padding-size-with-extra-icon: calc(
+        5px + map.get($input-font-size, $size) +
+          map.get($input-padding-horizontal, $size)
+      );
+
+      &.#{$namespace}-input--prefix {
+        .#{$namespace}-input__inner {
+          padding-left: $input-padding-size-with-extra-icon;
+        }
+      }
+
+      &.#{$namespace}-input--suffix {
+        .#{$namespace}-input__inner {
+          padding-right: $input-padding-size-with-extra-icon;
+        }
+      }
+
+      @include e(prefix) {
+        left: map.get($input-padding-horizontal, $size);
+      }
+
+      @include e(suffix) {
+        right: map.get($input-padding-horizontal, $size);
+      }
     }
   }
 }

package/theme-chalk/src/menu.scss

@@ -7,8 +7,8 @@
 @mixin menu-item {
   display: flex;
   align-items: center;
-  height: 56px;
-  line-height: 56px;
+  height: var(--el-menu-item-height);
+  line-height: var(--el-menu-item-height);
   font-size: var(--el-menu-item-font-size);
   color: var(--el-menu-text-color);
   padding: 0 20px;
@@ -67,7 +67,7 @@
       justify-content: center;
       align-items: center;
 
-      height: 60px;
+      height: 100%;
       margin: 0;
       border-bottom: 2px solid transparent;
       color: var(--el-menu-text-color);
@@ -102,8 +102,7 @@
       }
 
       & .#{$namespace}-sub-menu__title {
-        height: 60px;
-        line-height: 60px;
+        height: 100%;
         border-bottom: 2px solid transparent;
         color: var(--el-menu-text-color);
 

package/theme-chalk/src/mixins/_button.scss

@@ -28,6 +28,7 @@
 
 @mixin button-variant($type) {
   --el-button-text-color: var(--el-color-white);
+  --el-button-hover-text-color: var(--el-color-white);
   --el-button-disabled-text-color: var(--el-color-white);
   &.is-plain {
     @include button-plain(var(--el-button-bg-color), $type);

package/theme-chalk/src/pagination.scss

@@ -8,6 +8,9 @@
 @include b(pagination) {
   @include set-component-css-var('pagination', $pagination);
 
+  display: inline-flex;
+  align-items: center;
+
   white-space: nowrap;
   padding: 2px 5px;
   color: var(--el-pagination-text-color);
@@ -16,7 +19,9 @@
 
   span:not([class*='suffix']),
   button {
-    display: inline-block;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
     font-size: var(--el-pagination-font-size);
     min-width: var(--el-pagination-button-width);
     height: var(--el-pagination-button-height);
@@ -134,7 +139,7 @@
     }
 
     .#{$namespace}-input__inner,
-    .#{$namespace}-input--mini {
+    .#{$namespace}-input--small {
       height: var(--el-pagination-height-extra-small) !important;
       line-height: var(--el-pagination-line-height-extra-small);
     }
@@ -269,7 +274,9 @@
     padding: 0 4px;
     background: var(--el-pagination-bg-color);
     vertical-align: top;
-    display: inline-block;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
     font-size: var(--el-pagination-font-size);
     min-width: var(--el-pagination-button-width);
     height: var(--el-pagination-button-height);

package/theme-chalk/src/popper.scss

@@ -9,7 +9,7 @@
 @include b(popper) {
   position: absolute;
   border-radius: var(--el-popper-border-radius);
-  padding: 10px;
+  padding: 12px;
   z-index: 2000;
   font-size: 12px;
   line-height: 1.2;

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

@@ -36,8 +36,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
     );
@@ -129,12 +129,12 @@
     }
   }
 
-  @each $size in (medium, small, mini) {
+  @each $size in (large, small) {
     @include m($size) {
       & .#{$namespace}-radio-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/radio-group.scss

@@ -2,6 +2,8 @@
 @use 'common/var' as *;
 
 @include b(radio-group) {
+  display: inline-flex;
+  align-items: center;
+  flex-wrap: wrap;
   font-size: 0;
-  display: inline-block;
 }

package/theme-chalk/src/radio.scss

@@ -21,18 +21,20 @@
   outline: none;
   font-size: var(--el-font-size-base);
   user-select: none;
-  margin-right: 30px;
+  margin-right: 32px;
   height: map.get($radio-height, 'default');
   user-select: none;
 
-  @each $size in (medium, small, mini) {
+  @each $size in (large, small) {
     &.#{$namespace}-radio--#{$size} {
       height: map.get($radio-height, $size);
     }
   }
 
   @include when(bordered) {
-    padding: map.get($radio-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;
@@ -46,13 +48,12 @@
       border-color: var(--el-border-color-lighter);
     }
 
-    & + .#{$namespace}-radio.is-bordered {
-      margin-left: 10px;
-    }
-
-    @each $size in (medium, small, mini) {
+    @each $size in (large, small) {
       &.#{$namespace}-radio--#{$size} {
-        padding: map.get($radio-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: var(--el-border-radius-base);
 
         .#{$namespace}-radio__label {
@@ -181,6 +182,6 @@
 
   @include e(label) {
     font-size: var(--el-radio-font-size);
-    padding-left: 10px;
+    padding-left: 8px;
   }
 }

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

@@ -0,0 +1,12 @@
+@use '../mixins/mixins' as *;
+
+// same style in select & selevt-v2
+@mixin select-common($name) {
+  .#{$namespace}-#{$name}__tags-text {
+    text-overflow: ellipsis;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+  }
+}