@element-plus/nightly 0.0.20220107 → 0.0.20220111

package/theme-chalk/src/cascader.scss

@@ -100,6 +100,10 @@
       var(--el-cascader-menu-border),
       var(--el-cascader-menu-shadow)
     );
+
+    &.#{$namespace}-popper {
+      box-shadow: var(--el-cascader-menu-shadow);
+    }
   }
 
   @include e(tags) {

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

@@ -809,7 +809,7 @@ $tag-padding: map.merge(
 $tag-icon-size: () !default;
 $tag-icon-size: map.merge(
   (
-    'large': 14px,
+    'large': 16px,
     'default': 14px,
     'small': 12px,
   ),
@@ -1044,7 +1044,7 @@ $transfer: map.merge(
     'panel-header-height': 40px,
     'panel-header-bg-color': var(--el-bg-color),
     'panel-footer-height': 40px,
-    'panel-body-height': 246px,
+    'panel-body-height': 278px,
     'item-height': 30px,
     'filter-height': 32px,
   ),

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

@@ -7,6 +7,7 @@
 
 @include b(picker) {
   @include e(popper) {
+    @include set-css-var-type('datepicker', 'border-color', $datepicker);
     @include picker-popper(
       var(--el-color-white),
       1px solid var(--el-datepicker-border-color),

package/theme-chalk/src/dropdown.scss

@@ -24,6 +24,16 @@ $dropdown-item-padding: map.merge(
   $dropdown-item-padding
 );
 
+$dropdown-item-divided-margin: () !default;
+$dropdown-item-divided-margin: map.merge(
+  (
+    'large': 8px 0,
+    'default': 6px 0,
+    'small': 4px 0,
+  ),
+  $dropdown-item-divided-margin
+);
+
 $dropdown-caret-width: () !default;
 $dropdown-caret-width: map.merge($common-component-size, $dropdown-caret-width);
 
@@ -175,18 +185,8 @@ $dropdown-menu-padding-vertical: map.merge(
     }
 
     @include m(divided) {
-      $divided-offset: 6px;
-
-      position: relative;
-      margin-top: $divided-offset;
+      margin: map.get($dropdown-item-divided-margin, 'default');
       border-top: 1px solid var(--el-border-color-lighter);
-
-      &:before {
-        content: '';
-        height: $divided-offset;
-        display: block;
-        background-color: $color-white;
-      }
     }
 
     @include when(disabled) {
@@ -205,13 +205,8 @@ $dropdown-menu-padding-vertical: map.merge(
         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;
-
-          &:before {
-            height: $divided-offset;
-          }
+        @include m(divided) {
+          margin: map.get($dropdown-item-divided-margin, $size);
         }
       }
     }

package/theme-chalk/src/form.scss

@@ -5,29 +5,81 @@
 @use 'mixins/var' as *;
 @use 'common/var' as *;
 
+$form-item-margin-bottom: () !default;
+$form-item-margin-bottom: map.merge(
+  (
+    'large': 22px,
+    'default': 18px,
+    'small': 18px,
+  ),
+  $form-item-margin-bottom
+);
+
+$form-item-line-height: () !default;
+$form-item-line-height: map.merge(
+  (
+    'large': 40px,
+    'default': 32px,
+    'small': 24px,
+  ),
+  $form-item-line-height
+);
+
+$form-item-error-padding-top: () !default;
+$form-item-error-padding-top: map.merge(
+  (
+    'large': 4px,
+    'default': 2px,
+    'small': 2px,
+  ),
+  $form-item-error-padding-top
+);
+
+$form-item-label-top-line-height: () !default;
+$form-item-label-top-line-height: map.merge(
+  (
+    'large': 22px,
+    'default': 22px,
+    'small': 20px,
+  ),
+  $form-item-label-top-line-height
+);
+
+$form-item-label-top-margin-bottom: () !default;
+$form-item-label-top-margin-bottom: map.merge(
+  (
+    'large': 12px,
+    'default': 8px,
+    'small': 4px,
+  ),
+  $form-item-label-top-margin-bottom
+);
+
 @include b(form) {
   @include set-component-css-var('form', $form);
 
   @include m(label-left) {
-    & .#{$namespace}-form-item__label {
+    .#{$namespace}-form-item__label {
       text-align: left;
     }
   }
   @include m(label-top) {
-    & .#{$namespace}-form-item {
+    .#{$namespace}-form-item {
       display: block;
-    }
-    & .#{$namespace}-form-item__label {
-      display: block;
-      text-align: left;
-      padding: 0 0 10px 0;
+
+      .#{$namespace}-form-item__label {
+        display: block;
+        text-align: left;
+        margin-bottom: #{map.get($form-item-label-top-margin-bottom, 'default')};
+        line-height: #{map.get($form-item-label-top-line-height, 'default')};
+      }
     }
   }
   @include m(inline) {
-    & .#{$namespace}-form-item {
+    .#{$namespace}-form-item {
       display: inline-flex;
       vertical-align: middle;
-      margin-right: 10px;
+      margin-right: 32px;
     }
 
     &.#{$namespace}-form--label-top {
@@ -39,18 +91,31 @@
       }
     }
   }
+
+  @each $size in (large, default, small) {
+    @include m($size) {
+      &.#{$namespace}-form--label-top {
+        .#{$namespace}-form-item {
+          .#{$namespace}-form-item__label {
+            margin-bottom: #{map.get($form-item-label-top-margin-bottom, $size)};
+            line-height: #{map.get($form-item-label-top-line-height, $size)};
+          }
+        }
+      }
+    }
+  }
 }
 
 @include b(form-item) {
   display: flex;
   --font-size: #{map.get($input-font-size, 'default')};
-  margin-bottom: calc(var(--font-size) + 8px);
+  margin-bottom: #{map.get($form-item-margin-bottom, 'default')};
 
-  & .#{$namespace}-form-item {
+  .#{$namespace}-form-item {
     margin-bottom: 0;
   }
 
-  & .#{$namespace}-input__validateIcon {
+  .#{$namespace}-input__validateIcon {
     display: none;
   }
 
@@ -58,10 +123,23 @@
     @include m($size) {
       --font-size: #{map.get($input-font-size, $size)};
       --el-form-label-font-size: var(--font-size);
+      margin-bottom: #{map.get($form-item-margin-bottom, $size)};
+
+      @include e(label) {
+        line-height: #{map.get($form-item-line-height, $size)};
+      }
+      @include e(content) {
+        line-height: #{map.get($form-item-line-height, $size)};
+      }
+      @include e(error) {
+        padding-top: #{map.get($form-item-error-padding-top, $size)};
+      }
     }
   }
 
   @include e(label-wrap) {
+    display: flex;
+
     .#{$namespace}-form-item__label {
       display: inline-block;
     }
@@ -72,7 +150,7 @@
     text-align: right;
     font-size: var(--el-form-label-font-size);
     color: var(--el-text-color-regular);
-    line-height: calc(var(--el-form-label-font-size) * 2 + 4px);
+    line-height: #{map.get($form-item-line-height, 'default')};
     padding: 0 12px 0 0;
     box-sizing: border-box;
   }
@@ -81,7 +159,7 @@
     flex-wrap: wrap;
     align-items: center;
     flex: 1;
-    line-height: calc(var(--font-size) * 2 + 4px);
+    line-height: #{map.get($form-item-line-height, 'default')};
     position: relative;
     font-size: var(--font-size);
     min-width: 0;
@@ -94,7 +172,7 @@
     color: var(--el-color-danger);
     font-size: 12px;
     line-height: 1;
-    padding-top: 4px;
+    padding-top: #{map.get($form-item-error-padding-top, 'default')};
     position: absolute;
     top: 100%;
     left: 0;
@@ -110,9 +188,8 @@
 
   @include when(required) {
     @include pseudo('not(.is-no-asterisk)') {
-      & > .#{$namespace}-form-item__label:before,
-      &
-        > .#{$namespace}-form-item__label-wrap
+      > .#{$namespace}-form-item__label:before,
+      > .#{$namespace}-form-item__label-wrap
         > .#{$namespace}-form-item__label:before {
         content: '*';
         color: var(--el-color-danger);
@@ -122,17 +199,17 @@
   }
 
   @include when(error) {
-    & .#{$namespace}-select-v2__wrapper,
-    & .#{$namespace}-input__inner,
-    & .#{$namespace}-textarea__inner {
+    .#{$namespace}-select-v2__wrapper,
+    .#{$namespace}-input__inner,
+    .#{$namespace}-textarea__inner {
       &,
       &:focus {
         border-color: var(--el-color-danger);
       }
     }
-    & .#{$namespace}-input-group__append,
-    & .#{$namespace}-input-group__prepend {
-      & .#{$namespace}-input__inner {
+    .#{$namespace}-input-group__append,
+    .#{$namespace}-input-group__prepend {
+      .#{$namespace}-input__inner {
         border-color: transparent;
       }
     }

package/theme-chalk/src/pagination.scss

@@ -8,9 +8,6 @@
 @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);

package/theme-chalk/src/tabs.scss

@@ -14,8 +14,10 @@
     height: 2px;
     background-color: var(--el-color-primary);
     z-index: 1;
-    transition: transform var(--el-transition-duration)
-      cubic-bezier(0.645, 0.045, 0.355, 1);
+    transition: width var(--el-transition-duration)
+        var(--el-transition-function-ease-in-out-bezier),
+      transform var(--el-transition-duration)
+        var(--el-transition-function-ease-in-out-bezier);
     list-style: none;
   }
   @include e(new-tab) {
@@ -120,7 +122,7 @@
       border-radius: 50%;
       text-align: center;
       transition: all var(--el-transition-duration)
-        cubic-bezier(0.645, 0.045, 0.355, 1);
+        var(--el-transition-function-ease-in-out-bezier);
       margin-left: 5px;
       &:before {
         transform: scale(0.9);
@@ -187,9 +189,9 @@
       border-bottom: 1px solid transparent;
       border-left: 1px solid var(--el-border-color-light);
       transition: color var(--el-transition-duration)
-          cubic-bezier(0.645, 0.045, 0.355, 1),
+          var(--el-transition-function-ease-in-out-bezier),
         padding var(--el-transition-duration)
-          cubic-bezier(0.645, 0.045, 0.355, 1);
+          var(--el-transition-function-ease-in-out-bezier);
       &:first-child {
         border-left: none;
       }
@@ -235,7 +237,7 @@
     }
     > .#{$namespace}-tabs__header .#{$namespace}-tabs__item {
       transition: all var(--el-transition-duration)
-        cubic-bezier(0.645, 0.045, 0.355, 1);
+        var(--el-transition-function-ease-in-out-bezier);
       border: 1px solid transparent;
       margin-top: -1px;
       color: var(--el-text-color-secondary);

package/theme-chalk/src/tag.scss

@@ -117,14 +117,14 @@ $tag-icon-span-gap: map.merge(
     position: relative;
     cursor: pointer;
 
-    font-size: calc(var(--el-icon-size) - 2px);
+    font-size: calc(var(--el-icon-size) - 1px);
 
     height: var(--el-icon-size);
     width: var(--el-icon-size);
     line-height: var(--el-icon-size);
 
     svg {
-      margin: 2px;
+      margin: 1px;
     }
   }
 
@@ -144,7 +144,7 @@ $tag-icon-span-gap: map.merge(
     padding-right: map.get($tag-icon-span-gap, 'default') - $border-width-base;
   }
 
-  @each $size in (large, small) {
+  @each $size in (large, default, small) {
     @include m($size) {
       padding: 0 map.get($tag-padding, $size) - $tag-border-width;
       height: map.get($tag-height, $size);

package/theme-chalk/src/transfer.scss

@@ -20,9 +20,7 @@
   }
 
   @include e(button) {
-    &:first-child {
-      margin-bottom: 10px;
-    }
+    vertical-align: top;
 
     &:nth-child(2) {
       margin: 0 0 0 10px;
@@ -40,8 +38,6 @@
 }
 
 @include b(transfer-panel) {
-  border: 1px solid var(--el-transfer-border-color);
-  border-radius: var(--el-transfer-border-radius);
   overflow: hidden;
   background: var(--el-color-white);
   display: inline-block;
@@ -54,9 +50,16 @@
 
   @include e(body) {
     height: var(--el-transfer-panel-body-height);
-
-    @include when(with-footer) {
-      padding-bottom: var(--el-transfer-panel-footer-height);
+    border-left: 1px solid var(--el-transfer-border-color);
+    border-right: 1px solid var(--el-transfer-border-color);
+    border-bottom: 1px solid var(--el-transfer-border-color);
+    border-bottom-left-radius: var(--el-transfer-border-radius);
+    border-bottom-right-radius: var(--el-transfer-border-radius);
+    overflow: hidden;
+    @include when('with-footer') {
+      border-bottom: none;
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
     }
   }
 
@@ -67,12 +70,8 @@
     height: var(--el-transfer-panel-body-height);
     overflow: auto;
     box-sizing: border-box;
-
     @include when(filterable) {
-      height: calc(
-        var(--el-transfer-panel-body-height) - var(--el-transfer-filter-height) -
-          20px
-      );
+      height: calc(100% - var(--el-transfer-filter-height) - 30px);
       padding-top: 0;
     }
   }
@@ -100,7 +99,7 @@
       @include utils-ellipsis;
       display: block;
       box-sizing: border-box;
-      padding-left: 24px;
+      padding-left: 22px;
       line-height: var(--el-transfer-item-height);
     }
 
@@ -114,7 +113,6 @@
     text-align: center;
     margin: 15px;
     box-sizing: border-box;
-    display: block;
     width: auto;
 
     .#{$namespace}-input__inner {
@@ -124,12 +122,6 @@
       display: inline-block;
       box-sizing: border-box;
       border-radius: calc(var(--el-transfer-filter-height) / 2);
-      padding-right: 10px;
-      padding-left: 30px;
-    }
-
-    .#{$namespace}-input__icon {
-      margin-left: 5px;
     }
 
     .#{$namespace}-icon-circle-close {
@@ -138,18 +130,23 @@
   }
 
   .#{$namespace}-transfer-panel__header {
+    display: flex;
+    align-items: center;
     height: var(--el-transfer-panel-header-height);
-    line-height: var(--el-transfer-panel-header-height);
     background: var(--el-transfer-panel-header-bg-color);
     margin: 0;
     padding-left: 15px;
-    border-bottom: 1px solid var(--el-transfer-border-color);
+    border: 1px solid var(--el-transfer-border-color);
+    border-top-left-radius: var(--el-transfer-border-radius);
+    border-top-right-radius: var(--el-transfer-border-radius);
     box-sizing: border-box;
     color: var(--el-color-black);
 
     .#{$namespace}-checkbox {
-      display: block;
-      line-height: 40px;
+      position: relative;
+      display: flex;
+      width: 100%;
+      align-items: center;
 
       .#{$namespace}-checkbox__label {
         font-size: 16px;
@@ -159,6 +156,8 @@
         span {
           position: absolute;
           right: 15px;
+          top: 50%;
+          transform: translate3d(0, -50%, 0);
           color: var(--el-text-color-secondary);
           font-size: 12px;
           font-weight: normal;
@@ -172,12 +171,9 @@
     background: var(--el-color-white);
     margin: 0;
     padding: 0;
-    border-top: 1px solid var(--el-transfer-border-color);
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    z-index: var(--el-index-normal);
+    border: 1px solid var(--el-transfer-border-color);
+    border-bottom-left-radius: var(--el-transfer-border-radius);
+    border-bottom-right-radius: var(--el-transfer-border-radius);
     @include utils-vertical-center;
 
     .#{$namespace}-checkbox {

package/theme-chalk/src/tree.scss

@@ -63,7 +63,8 @@
     cursor: pointer;
 
     & > .#{$namespace}-tree-node__expand-icon {
-      margin: 6px;
+      padding: 6px;
+      box-sizing: content-box;
     }
     & > label.#{$namespace}-checkbox {
       margin-right: 8px;