@element-plus/nightly 0.0.20220106 → 0.0.20220110

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/checkbox.scss

@@ -19,6 +19,15 @@ $checkbox-bordered-input-height: map.merge(
   $checkbox-bordered-input-height
 );
 
+$checkbox-font-size: () !default;
+$checkbox-font-size: map.merge(
+  (
+    'large': 14px,
+    'small': 12px,
+  ),
+  $checkbox-font-size
+);
+
 $checkbox-bordered-input-width: () !default;
 $checkbox-bordered-input-width: map.merge(
   $checkbox-bordered-input-height,
@@ -42,12 +51,6 @@ $checkbox-bordered-input-width: map.merge(
   margin-right: 30px;
   height: map.get($checkbox-height, 'default');
 
-  @each $size in (large, small) {
-    &.#{$namespace}-checkbox--#{$size} {
-      height: map.get($checkbox-height, $size);
-    }
-  }
-
   @include when(bordered) {
     padding: 0 map.get($checkbox-bordered-padding-right, 'default')-$border-width-base
       0 map.get($checkbox-bordered-padding-left, 'default')-$border-width-base;
@@ -240,6 +243,37 @@ $checkbox-bordered-input-width: map.merge(
     font-size: var(--el-checkbox-font-size);
   }
 
+  @each $size in (large, small) {
+    &.#{$namespace}-checkbox--#{$size} {
+      height: map.get($checkbox-height, $size);
+      @include e(label) {
+        font-size: map.get($checkbox-font-size, $size);
+      }
+      @include e(inner) {
+        width: map.get($checkbox-font-size, $size);
+        height: map.get($checkbox-font-size, $size);
+      }
+    }
+  }
+
+  &.#{$namespace}-checkbox--small {
+    @include e(input) {
+      @include when(indeterminate) {
+        @include e(inner) {
+          &::before {
+            top: 4px;
+          }
+        }
+      }
+    }
+    @include e(inner) {
+      &::after {
+        width: 2px;
+        height: 6px;
+      }
+    }
+  }
+
   &:last-of-type {
     margin-right: 0;
   }

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

@@ -615,7 +615,6 @@ $switch: map.merge(
   (
     'on-color': var(--el-color-primary),
     'off-color': var(--el-border-color-base),
-    'font-size': var(--el-font-size-base),
     'core-border-radius': 10px,
     'width': 40px,
     'height': 20px,
@@ -810,7 +809,7 @@ $tag-padding: map.merge(
 $tag-icon-size: () !default;
 $tag-icon-size: map.merge(
   (
-    'large': 14px,
+    'large': 16px,
     'default': 14px,
     'small': 12px,
   ),
@@ -905,7 +904,6 @@ $slider: map.merge(
     'runway-bg-color': var(--el-border-color-light),
     'stop-bg-color': var(--el-color-white),
     'disable-color': var(--el-text-color-placeholder),
-    'margin': 16px 0,
     'border-radius': 3px,
     'height': 6px,
     'button-size': 20px,
@@ -1046,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-panel.scss

@@ -29,7 +29,7 @@
 
   @include e(footer) {
     border-top: 1px solid var(--el-datepicker-inner-border-color);
-    padding: 4px;
+    padding: 4px 12px;
     text-align: right;
     background-color: $color-white;
     position: relative;

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/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/radio.scss

@@ -6,6 +6,15 @@
 @use 'mixins/button' as *;
 @use 'common/var' as *;
 
+$radio-font-size: () !default;
+$radio-font-size: map.merge(
+  (
+    'large': 14px,
+    'small': 12px,
+  ),
+  $radio-font-size
+);
+
 @include b(radio) {
   @include set-component-css-var('radio', $radio);
 }
@@ -184,4 +193,16 @@
     font-size: var(--el-radio-font-size);
     padding-left: 8px;
   }
+
+  @each $size in (large, small) {
+    &.#{$namespace}-radio--#{$size} {
+      @include e(label) {
+        font-size: map.get($radio-font-size, $size);
+      }
+      @include e(inner) {
+        width: map.get($radio-font-size, $size);
+        height: map.get($radio-font-size, $size);
+      }
+    }
+  }
 }

package/theme-chalk/src/rate.scss

@@ -4,13 +4,24 @@
 @use 'mixins/var' as *;
 @use 'common/var' as *;
 
+$rate-height: () !default;
+$rate-height: map.merge(
+  (
+    'large': 40px,
+    'default': 32px,
+    'small': 24px,
+  ),
+  $rate-height
+);
+
 @include b(rate) {
   @include set-component-css-var('rate', $rate);
 }
 
 @include b(rate) {
-  height: var(--el-rate-height);
-  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  height: map.get($rate-height, 'default');
 
   &:focus,
   &:active {
@@ -54,4 +65,10 @@
     font-size: var(--el-rate-font-size);
     vertical-align: middle;
   }
+
+  @each $size in (large, small) {
+    @include m($size) {
+      height: map.get($rate-height, $size);
+    }
+  }
 }

package/theme-chalk/src/slider.scss

@@ -5,25 +5,36 @@
 @use 'mixins/var' as *;
 @use 'common/var' as *;
 
+$slider-height: () !default;
+$slider-height: map.merge(
+  (
+    'large': 40px,
+    'default': 32px,
+    'small': 24px,
+  ),
+  $slider-height
+);
+
 @include b(slider) {
   @include set-component-css-var('slider', $slider);
 }
 
 @include b(slider) {
-  @include utils-clearfix;
+  width: 100%;
+  height: map.get($slider-height, 'default');
+  display: flex;
+  align-items: center;
 
   @include e(runway) {
-    width: 100%;
+    flex: 1;
     height: var(--el-slider-height);
-    margin: var(--el-slider-margin);
     background-color: var(--el-slider-runway-bg-color);
     border-radius: var(--el-slider-border-radius);
     position: relative;
     cursor: pointer;
-    vertical-align: middle;
 
     &.show-input {
-      margin-right: 160px;
+      margin-right: 30px;
       width: auto;
     }
 
@@ -69,17 +80,8 @@
   }
 
   @include e(input) {
-    float: right;
-    margin-top: 3px;
+    flex-shrink: 0;
     width: 130px;
-
-    &.#{$namespace}-input-number--large {
-      margin-top: -2px;
-    }
-
-    &.#{$namespace}-input-number--small {
-      margin-top: 5px;
-    }
   }
 
   @include e(bar) {
@@ -168,6 +170,9 @@
 
   @include when(vertical) {
     position: relative;
+    height: 100%;
+    flex: 0;
+
     .#{$namespace}-slider__runway {
       width: var(--el-slider-height);
       height: 100%;
@@ -186,68 +191,6 @@
     .#{$namespace}-slider__stop {
       transform: translateY(50%);
     }
-    &.#{$namespace}-slider--with-input {
-      padding-bottom: #{map.get($input-height, 'default') + 22px};
-      .#{$namespace}-slider__input {
-        overflow: visible;
-        float: none;
-        position: absolute;
-        bottom: 22px;
-        width: 36px;
-        margin-top: 15px;
-        .#{$namespace}-input__inner {
-          text-align: center;
-          padding-left: 5px;
-          padding-right: 5px;
-        }
-        .#{$namespace}-input-number__decrease,
-        .#{$namespace}-input-number__increase {
-          top: map.get($input-height, 'small');
-          margin-top: -1px;
-          border: var(--el-input-border, map.get($input, 'border'));
-          line-height: 20px;
-          box-sizing: border-box;
-          transition: var(--el-transition-border);
-        }
-        .#{$namespace}-input-number__decrease {
-          width: 18px;
-          right: 18px;
-          border-bottom-left-radius: var(
-            --el-input-border-radius,
-            map.get($input, 'border-radius')
-          );
-        }
-        .#{$namespace}-input-number__increase {
-          width: 19px;
-          border-bottom-right-radius: var(
-            --el-input-border-radius,
-            map.get($input, 'border-radius')
-          );
-          & ~ .#{$namespace}-input .#{$namespace}-input__inner {
-            border-bottom-left-radius: 0;
-            border-bottom-right-radius: 0;
-          }
-        }
-        &:hover {
-          .#{$namespace}-input-number__decrease,
-          .#{$namespace}-input-number__increase {
-            border-color: var(
-              --el-input-hover-border,
-              map.get($input, 'hover-border')
-            );
-          }
-        }
-        &:active {
-          .#{$namespace}-input-number__decrease,
-          .#{$namespace}-input-number__increase {
-            border-color: var(
-              --el-input-focus-border,
-              map.get($input, 'focus-border')
-            );
-          }
-        }
-      }
-    }
 
     @include e(marks-text) {
       margin-top: 0;
@@ -255,4 +198,12 @@
       transform: translateY(50%);
     }
   }
+
+  @each $size in (large, small) {
+    @include m($size) {
+      height: map.get($slider-height, $size);
+      @include e(runway) {
+      }
+    }
+  }
 }

package/theme-chalk/src/switch.scss

@@ -4,6 +4,26 @@
 @use 'mixins/var' as *;
 @use 'common/var' as *;
 
+$switch-height: () !default;
+$switch-height: map.merge(
+  (
+    'large': 40px,
+    'default': 32px,
+    'small': 24px,
+  ),
+  $switch-height
+);
+
+$switch-font-size: () !default;
+$switch-font-size: map.merge(
+  (
+    'large': 14px,
+    'default': 14px,
+    'small': 12px,
+  ),
+  $switch-font-size
+);
+
 @include b(switch) {
   @include set-component-css-var('switch', $switch);
 }
@@ -12,9 +32,9 @@
   display: inline-flex;
   align-items: center;
   position: relative;
-  font-size: var(--el-switch-font-size);
+  font-size: map.get($switch-font-size, 'default');
   line-height: var(--el-switch-height);
-  height: var(--el-switch-height);
+  height: map.get($switch-height, 'default');
   vertical-align: middle;
   @include when(disabled) {
     & .#{$namespace}-switch__core,
@@ -27,7 +47,7 @@
     transition: var(--el-transition-duration-fast);
     height: var(--el-switch-height);
     display: inline-block;
-    font-size: var(--el-switch-font-size);
+    font-size: map.get($switch-font-size, 'default');
     font-weight: 500;
     cursor: pointer;
     vertical-align: middle;
@@ -45,11 +65,12 @@
     }
     & * {
       line-height: 1;
-      font-size: var(--el-switch-font-size);
+      font-size: map.get($switch-font-size, 'default');
       display: inline-block;
     }
     .#{$namespace}-icon {
       height: inherit;
+
       svg {
         vertical-align: middle;
       }
@@ -140,11 +161,13 @@
     .#{$namespace}-switch__core {
       border-color: var(--el-switch-on-color);
       background-color: var(--el-switch-on-color);
+
       .#{$namespace}-switch__action {
         left: 100%;
         margin-left: calc(-1px - var(--el-switch-button-size));
         color: var(--el-switch-on-color);
       }
+
       .#{$namespace}-switch__inner {
         left: 50%;
         margin-left: calc(-1px - var(--el-switch-button-size));
@@ -163,6 +186,7 @@
           left: 10px;
         }
       }
+
       &.#{$namespace}-switch__label--right {
         span {
           right: 10px;
@@ -175,4 +199,19 @@
   & .label-fade-leave-active {
     opacity: 0;
   }
+
+  @each $size in (large, small) {
+    @include m($size) {
+      font-size: map.get($switch-font-size, $size);
+      height: map.get($switch-height, $size);
+
+      @include e(label) {
+        font-size: map.get($switch-font-size, $size);
+
+        & * {
+          font-size: map.get($switch-font-size, $size);
+        }
+      }
+    }
+  }
 }