@element-plus/nightly 0.0.20220506 → 0.0.20220509

package/theme-chalk/src/button.scss

@@ -182,7 +182,9 @@ $button-icon-span-gap: map.merge(
         }
       }
     }
+  }
 
+  @include e(text) {
     @include m(expand) {
       letter-spacing: 0.3em;
       margin-right: -0.3em;

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

@@ -10,7 +10,7 @@
   .#{$namespace}-time-panel {
     margin: 5px 0;
     border: solid 1px getCssVar('datepicker-border-color');
-    background-color: getCssVar('color-white');
+    background-color: getCssVar('bg-color', 'overlay');
     box-shadow: getCssVar('box-shadow-light');
   }
 

package/theme-chalk/src/form.scss

@@ -140,18 +140,20 @@ $form-item-label-top-margin-bottom: map.merge(
 
   @include e(label-wrap) {
     display: flex;
-
-    .#{$namespace}-form-item__label {
-      display: inline-block;
-    }
   }
 
   @include e(label) {
+    display: inline-flex;
+    justify-content: flex-end;
+    align-items: flex-start;
+
     flex: 0 0 auto;
-    text-align: right;
     font-size: getCssVar('form-label-font-size');
     color: getCssVar('text-color', 'regular');
+
+    height: #{map.get($form-item-line-height, 'default')};
     line-height: #{map.get($form-item-line-height, 'default')};
+
     padding: 0 12px 0 0;
     box-sizing: border-box;
   }

package/theme-chalk/src/input.scss

@@ -43,7 +43,7 @@
     position: relative;
     display: block;
     resize: vertical;
-    padding: 5px 15px;
+    padding: 5px map.get($input-padding-horizontal, 'default')-$border-width;
     line-height: 1.5;
     box-sizing: border-box;
     width: 100%;
@@ -125,12 +125,16 @@
 
 @include b(input) {
   @include set-component-css-var('input', $input);
+}
+
+@include b(input) {
+  @include css-var-from-global('input-height', 'component-size');
 
   position: relative;
   font-size: getCssVar('font-size', 'base');
   display: inline-flex;
   width: 100%;
-  line-height: map.get($input-height, 'default');
+  line-height: getCssVar('input-height');
   box-sizing: border-box;
   @include scroll-bar;
 
@@ -165,7 +169,7 @@
     flex-grow: 1;
     align-items: center;
     justify-content: center;
-    padding: 0 map.get($input-padding-horizontal, 'default')-$border-width;
+    padding: $border-width map.get($input-padding-horizontal, 'default')-$border-width;
     background-color: var(
       #{getCssVarName('input-bg-color')},
       map.get($input, 'bg-color')
@@ -193,6 +197,17 @@
   }
 
   @include e(inner) {
+    // use map.get as default value for date picker range
+    @include set-css-var-value(
+      'input-inner-height',
+      calc(
+        var(
+            #{getCssVarName('input-height')},
+            #{map.get($input-height, 'default')}
+          ) - $border-width * 2
+      )
+    );
+
     width: 100%;
     flex-grow: 1;
     -webkit-appearance: none;
@@ -201,8 +216,8 @@
       map.get($input, 'text-color')
     );
     font-size: inherit;
-    height: map.get($input-height, 'default');
-    line-height: map.get($input-height, 'default');
+    height: getCssVar('input-inner-height');
+    line-height: getCssVar('input-inner-height');
     padding: 0;
     outline: none;
     border: none;
@@ -269,6 +284,7 @@
 
   & .#{$namespace}-input__icon {
     height: inherit;
+    line-height: inherit;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -326,20 +342,24 @@
 
   @each $size in (large, small) {
     @include m($size) {
+      @include css-var-from-global('input-height', ('component-size', $size));
+
       font-size: map.get($input-font-size, $size);
-      line-height: map.get($input-height, $size) - 2;
 
       @include e(wrapper) {
-        padding: 0 map.get($input-padding-horizontal, $size)-$border-width;
+        padding: $border-width map.get($input-padding-horizontal, $size)-$border-width;
       }
 
       @include e(inner) {
-        height: map.get($input-height, $size);
-        line-height: map.get($input-height, $size);
-      }
-
-      .#{$namespace}-input__icon {
-        line-height: map.get($input-height, $size);
+        @include set-css-var-value(
+          'input-inner-height',
+          calc(
+            var(
+                #{getCssVarName('input-height', $size)},
+                #{map.get($input-height, $size)}
+              ) - $border-width * 2
+          )
+        );
       }
     }
   }

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

@@ -37,7 +37,11 @@
 // set all css var for component by map
 @mixin set-component-css-var($name, $variables) {
   @each $attribute, $value in $variables {
-    #{getCssVarName($name, $attribute)}: #{$value};
+    @if $attribute == 'default' {
+      #{getCssVarName($name)}: #{$value};
+    } @else {
+      #{getCssVarName($name, $attribute)}: #{$value};
+    }
   }
 }
 

package/theme-chalk/src/table-v2.scss

@@ -52,6 +52,7 @@
 }
 
 @include b('table-v2') {
+  font-size: 14px;
   * {
     box-sizing: border-box;
   }
@@ -180,6 +181,10 @@
       background-color: getCssVar('table-row', 'hover-bg-color');
     }
 
+    &:hover {
+      background-color: getCssVar('table-row', 'hover-bg-color');
+    }
+
     @include e('row-cell') {
       height: 100%;
       overflow: hidden;

package/theme-chalk/src/var.scss

@@ -39,6 +39,9 @@
 
   @include set-component-css-var('transition-function', $transition-function);
   @include set-component-css-var('transition', $transition);
+
+  // common component size
+  @include set-component-css-var('component-size', $common-component-size);
 }
 
 // for light