element-plus 2.1.9 → 2.1.10

package/theme-chalk/src/badge.scss

@@ -13,22 +13,24 @@
   display: inline-block;
 
   @include e(content) {
-    background-color: var(--el-badge-bg-color);
-    border-radius: var(--el-badge-radius);
-    color: var(--el-color-white);
-    display: inline-block;
-    font-size: var(--el-badge-font-size);
-    height: var(--el-badge-size);
-    line-height: var(--el-badge-size);
-    padding: 0 var(--el-badge-padding);
-    text-align: center;
+    background-color: getCssVar('badge', 'bg-color');
+    border-radius: getCssVar('badge', 'radius');
+    color: getCssVar('color', 'white');
+
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+
+    font-size: getCssVar('badge', 'font-size');
+    height: getCssVar('badge', 'size');
+    padding: 0 getCssVar('badge', 'padding');
     white-space: nowrap;
-    border: 1px solid var(--el-color-white);
+    border: 1px solid getCssVar('bg-color');
 
     @include when(fixed) {
       position: absolute;
       top: 0;
-      right: calc(1px + var(--el-badge-size) / 2);
+      right: calc(1px + #{getCssVar('badge', 'size')} / 2);
       transform: translateY(-50%) translateX(100%);
 
       @include when(dot) {
@@ -46,7 +48,7 @@
 
     @each $type in (primary, success, warning, info, danger) {
       @include m($type) {
-        background-color: var(--el-color-#{$type});
+        background-color: getCssVar('color', $type);
       }
     }
   }

package/theme-chalk/src/cascader.scss

@@ -14,7 +14,7 @@
   outline: none;
 
   &:not(.is-disabled):hover {
-    .#{$namespace}-input__inner {
+    .#{$namespace}-input__wrapper {
       cursor: pointer;
       box-shadow: 0 0 0 1px var(--el-input-hover-border-color) inset;
     }
@@ -25,15 +25,7 @@
 
     .#{$namespace}-input__inner {
       text-overflow: ellipsis;
-
-      &:focus {
-        box-shadow: 0 0 0 1px
-          var(
-            --el-input-focus-border-color,
-            map.get($input, 'focus-border-color')
-          )
-          inset;
-      }
+      cursor: pointer;
     }
 
     .#{$namespace}-input__suffix-inner {
@@ -63,7 +55,7 @@
     }
 
     @include when(focus) {
-      .#{$namespace}-input__inner {
+      .#{$namespace}-input__wrapper {
         box-shadow: 0 0 0 1px
           var(
             --el-input-focus-border-color,
@@ -212,13 +204,16 @@
     min-width: 60px;
     margin: 2px 0 2px map.get($input-padding-horizontal, 'default')-$border-width;
     padding: 0;
-    color: var(--el-cascader-menu-text-color);
+    color: getCssVar('cascader', 'menu-text-color');
     border: none;
     outline: none;
     box-sizing: border-box;
 
+    background: transparent;
+
     &::placeholder {
-      color: var(--el-text-color-placeholder);
+      // two input overlap
+      color: transparent;
     }
   }
 }

package/theme-chalk/src/check-tag.scss

@@ -21,7 +21,7 @@
 
   @include when(checked) {
     background-color: getCssVar('color', 'primary', 'light-8');
-    color: getCssVar('color', 'primary', 'light-1');
+    color: getCssVar('color', 'primary');
     &:hover {
       background-color: getCssVar('color', 'primary', 'light-7');
     }

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

@@ -21,9 +21,9 @@ $color-picker-size: map.merge($common-component-size, $color-picker-size);
   z-index: 1;
 }
 
-@mixin bar-background {
+@mixin bar-background($side: right) {
   background: linear-gradient(
-    to right,
+    to $side,
     #f00 0%,
     #ff0 17%,
     #0f0 33%,
@@ -98,7 +98,7 @@ $color-picker-size: map.merge($common-component-size, $color-picker-size);
     padding: 2px 0;
 
     .#{$namespace}-color-hue-slider__bar {
-      @include bar-background;
+      @include bar-background(bottom);
     }
 
     .#{$namespace}-color-hue-slider__thumb {
@@ -146,19 +146,44 @@ $color-picker-size: map.merge($common-component-size, $color-picker-size);
   }
 }
 
+@mixin alpha-bg {
+  background-image: linear-gradient(
+      45deg,
+      getCssVar('color-picker', 'alpha-bg-a') 25%,
+      getCssVar('color-picker', 'alpha-bg-b') 25%
+    ),
+    linear-gradient(
+      135deg,
+      getCssVar('color-picker', 'alpha-bg-a') 25%,
+      getCssVar('color-picker', 'alpha-bg-b') 25%
+    ),
+    linear-gradient(
+      45deg,
+      getCssVar('color-picker', 'alpha-bg-b') 75%,
+      getCssVar('color-picker', 'alpha-bg-a') 75%
+    ),
+    linear-gradient(
+      135deg,
+      getCssVar('color-picker', 'alpha-bg-b') 75%,
+      getCssVar('color-picker', 'alpha-bg-a') 75%
+    );
+  background-size: 12px 12px;
+  background-position: 0 0, 6px 0, 6px -6px, 0 6px;
+}
+
 @include b(color-alpha-slider) {
   position: relative;
   box-sizing: border-box;
   width: 280px;
   height: 12px;
-  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
+  @include alpha-bg;
 
   @include e(bar) {
     position: relative;
     background: linear-gradient(
       to right,
       rgba(255, 255, 255, 0) 0%,
-      rgba(255, 255, 255, 1) 100%
+      getCssVar('bg-color') 100%
     );
     height: 100%;
   }
@@ -288,7 +313,8 @@ $color-picker-size: map.merge($common-component-size, $color-picker-size);
     text-align: center;
 
     @include when(alpha) {
-      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
+      @include alpha-bg;
+      // background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
     }
   }
 
@@ -326,3 +352,16 @@ $color-picker-size: map.merge($common-component-size, $color-picker-size);
     }
   }
 }
+
+.#{bem('color-picker')},
+.#{bem('color-picker', 'panel')} {
+  @include set-css-var-value(('color-picker', 'alpha-bg-a'), '#ccc');
+  @include set-css-var-value(('color-picker', 'alpha-bg-b'), 'transparent');
+}
+
+.dark {
+  .#{bem('color-picker')},
+  .#{bem('color-picker', 'panel')} {
+    @include set-css-var-value(('color-picker', 'alpha-bg-a'), '#333333');
+  }
+}

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

@@ -1235,7 +1235,6 @@ $avatar-size: map.merge(
 );
 
 // Empty
-
 // css3 var in packages/theme-chalk/src/empty.scss
 $empty: () !default;
 $empty: map.merge(
@@ -1259,7 +1258,6 @@ $empty: map.merge(
 );
 
 // Descriptions
-
 // css3 var in packages/theme-chalk/src/descriptions.scss
 $descriptions: () !default;
 $descriptions: map.merge(

package/theme-chalk/src/dark/css-vars.scss

@@ -35,3 +35,7 @@ html.dark {
 @include dark(card) {
   @include set-component-css-var('card', $card);
 }
+
+@include dark(empty) {
+  @include set-component-css-var('empty', $empty);
+}

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

@@ -167,3 +167,22 @@ $card: map.merge(
   ),
   $card
 );
+
+// Empty
+// css3 var in packages/theme-chalk/src/empty.scss
+$empty: () !default;
+$empty: map.merge(
+  (
+    'fill-color-0': getCssVar('color-black'),
+    'fill-color-1': #262629,
+    'fill-color-2': #34363b,
+    'fill-color-3': #1e1e20,
+    'fill-color-4': #171719,
+    'fill-color-5': #202124,
+    'fill-color-6': #373a3e,
+    'fill-color-7': #191c1f,
+    'fill-color-8': #202225,
+    'fill-color-9': #202225,
+  ),
+  $empty
+);

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

@@ -23,6 +23,18 @@
   display: inline-block;
   text-align: left;
 
+  &.#{$namespace}-input__inner {
+    border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
+
+    @include inset-input-border(
+      var(--el-input-border-color, map.get($input, 'border-color'))
+    );
+
+    &:hover {
+      @include inset-input-border(var(--el-input-hover-border-color));
+    }
+  }
+
   &.#{$namespace}-input,
   &.#{$namespace}-input__inner {
     width: var(--el-date-editor-width);

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

@@ -30,7 +30,7 @@
       }
 
       .#{$namespace}-time-spinner__item:hover:not(.is-disabled):not(.is-active) {
-        background: $color-white;
+        background: getCssVar('fill-color', 'light');
         cursor: default;
       }
     }

package/theme-chalk/src/form.scss

@@ -200,16 +200,18 @@ $form-item-label-top-margin-bottom: map.merge(
 
   @include when(error) {
     .#{$namespace}-select-v2__wrapper,
-    .#{$namespace}-input__inner,
     .#{$namespace}-textarea__inner {
       &,
       &:focus {
         box-shadow: 0 0 0 1px var(--el-color-danger) inset;
       }
     }
+    .#{$namespace}-input__wrapper {
+      box-shadow: 0 0 0 1px var(--el-color-danger) inset;
+    }
     .#{$namespace}-input-group__append,
     .#{$namespace}-input-group__prepend {
-      .#{$namespace}-input__inner {
+      .#{$namespace}-input__wrapper {
         box-shadow: 0 0 0 1px transparent inset;
       }
     }

package/theme-chalk/src/index.scss

@@ -82,6 +82,7 @@
 @use './tab-pane.scss';
 @use './table-column.scss';
 @use './table.scss';
+@use './table-v2.scss';
 @use './tabs.scss';
 @use './tag.scss';
 @use './time-picker.scss';

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

@@ -11,7 +11,11 @@
   line-height: #{map.get($input-height, 'default') - 2};
 
   .#{$namespace}-input {
-    display: block;
+    &__wrapper {
+      display: block;
+      padding-left: #{map.get($input-height, 'default') + 10};
+      padding-right: #{map.get($input-height, 'default') + 10};
+    }
 
     &__inner {
       -webkit-appearance: none;
@@ -21,8 +25,6 @@
         margin: 0;
         -webkit-appearance: none;
       }
-      padding-left: #{map.get($input-height, 'default') + 10};
-      padding-right: #{map.get($input-height, 'default') + 10};
       text-align: center;
     }
   }
@@ -48,7 +50,7 @@
     &:hover {
       color: var(--el-color-primary);
 
-      & ~ .#{$namespace}-input:not(.is-disabled) .#{$namespace}-input__inner {
+      & ~ .#{$namespace}-input:not(.is-disabled) .#{$namespace}-input_wrapper {
         box-shadow: 0 0 0 1px
           var(
             --el-input-focus-border-color,
@@ -98,7 +100,7 @@
         font-size: map.get($input-font-size, $size);
       }
 
-      .#{$namespace}-input__inner {
+      .#{$namespace}-input__wrapper {
         padding-left: #{map.get($input-height, $size) + 7};
         padding-right: #{map.get($input-height, $size) + 7};
       }
@@ -114,14 +116,14 @@
   }
 
   @include when(without-controls) {
-    .#{$namespace}-input__inner {
+    .#{$namespace}-input__wrapper {
       padding-left: 15px;
       padding-right: 15px;
     }
   }
 
   @include when(controls-right) {
-    .#{$namespace}-input__inner {
+    .#{$namespace}-input__wrapper {
       padding-left: 15px;
       padding-right: #{map.get($input-height, 'default') + 10};
     }