element-plus 2.1.10 → 2.1.11

package/theme-chalk/src/autocomplete.scss

@@ -10,15 +10,15 @@
 
   @include e(popper) {
     @include picker-popper(
-      $color-white,
-      1px solid var(--el-border-color-light),
-      var(--el-box-shadow-light)
+      getCssVar('bg-color', 'overlay'),
+      1px solid getCssVar('border-color', 'light'),
+      getCssVar('box-shadow', 'light')
     );
   }
 }
 
 @include b(autocomplete-suggestion) {
-  border-radius: var(--el-border-radius-base);
+  border-radius: getCssVar('border-radius', 'base');
   box-sizing: border-box;
 
   @include e(wrap) {
@@ -37,8 +37,8 @@
     margin: 0;
     line-height: 34px;
     cursor: pointer;
-    color: var(--el-text-color-regular);
-    font-size: var(--el-font-size-base);
+    color: getCssVar('text-color', 'regular');
+    font-size: getCssVar('font-size', 'base');
     list-style: none;
     text-align: left;
     white-space: nowrap;
@@ -55,7 +55,7 @@
 
     &.divider {
       margin-top: 6px;
-      border-top: 1px solid var(--el-color-black);
+      border-top: 1px solid getCssVar('color', 'black');
     }
 
     &.divider:last-child {
@@ -69,11 +69,11 @@
       height: 100px;
       line-height: 100px;
       font-size: 20px;
-      color: var(--el-text-color-secondary);
+      color: getCssVar('text-color', 'secondary');
       @include utils-vertical-center;
 
       &:hover {
-        background-color: var(--el-color-white);
+        background-color: getCssVar('bg-color', 'overlay');
       }
     }
 

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

@@ -5,14 +5,14 @@
 
 @include b(check-tag) {
   background-color: getCssVar('color', 'info', 'light-9');
-  border-radius: var(--el-border-radius-base);
-  color: var(--el-color-info);
+  border-radius: getCssVar('border-radius', 'base');
+  color: getCssVar('color', 'info');
   cursor: pointer;
   display: inline-block;
-  font-size: var(--el-font-size-base);
-  line-height: var(--el-font-size-base);
+  font-size: getCssVar('font-size', 'base');
+  line-height: getCssVar('font-size', 'base');
   padding: 7px 15px;
-  transition: var(--el-transition-all);
+  transition: getCssVar('transition', 'all');
   font-weight: bold;
 
   &:hover {

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

@@ -174,15 +174,15 @@ $empty: () !default;
 $empty: map.merge(
   (
     'fill-color-0': getCssVar('color-black'),
-    'fill-color-1': #262629,
-    'fill-color-2': #34363b,
+    'fill-color-1': #4b4b52,
+    'fill-color-2': #36383d,
     'fill-color-3': #1e1e20,
-    'fill-color-4': #171719,
+    'fill-color-4': #262629,
     'fill-color-5': #202124,
-    'fill-color-6': #373a3e,
-    'fill-color-7': #191c1f,
-    'fill-color-8': #202225,
-    'fill-color-9': #202225,
+    'fill-color-6': #212224,
+    'fill-color-7': #1b1c1f,
+    'fill-color-8': #1c1d1f,
+    'fill-color-9': #18181a,
   ),
   $empty
 );

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

@@ -28,8 +28,6 @@
       box-sizing: border-box;
       padding-top: 6px;
       text-align: left;
-      border-top: 1px solid var(--el-border-color-light);
-      border-bottom: 1px solid var(--el-border-color-light);
     }
 
     &::after {
@@ -42,6 +40,8 @@
       padding-left: 50%;
       margin-right: 12%;
       margin-left: 12%;
+      border-top: 1px solid var(--el-border-color-light);
+      border-bottom: 1px solid var(--el-border-color-light);
     }
 
     &.has-seconds {

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

@@ -7,7 +7,7 @@
   border-collapse: collapse;
 
   .#{$namespace}-icon {
-    color: var(--el-datepicker-icon-color);
+    color: getCssVar('datepicker', 'icon-color');
   }
 
   td {
@@ -17,7 +17,7 @@
 
     &.today {
       .cell {
-        color: var(--el-color-primary);
+        color: getCssVar('color', 'primary');
         font-weight: bold;
       }
     }

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

@@ -12,7 +12,6 @@
 
   .#{$namespace}-input {
     &__wrapper {
-      display: block;
       padding-left: #{map.get($input-height, 'default') + 10};
       padding-right: #{map.get($input-height, 'default') + 10};
     }

package/theme-chalk/src/input.scss

@@ -130,8 +130,6 @@
     color: var(--el-input-icon-color);
     font-size: map.get($input-font-size, 'default');
     cursor: pointer;
-    transition: var(--el-transition-color) !important;
-    margin-left: 8px;
 
     &:hover {
       color: var(--el-input-clear-hover-color);
@@ -149,7 +147,7 @@
       background: getCssVar('fill-color', 'blank');
       line-height: initial;
       display: inline-block;
-      padding: 0 5px;
+      padding-left: 8px;
     }
   }
 
@@ -191,6 +189,7 @@
     outline: none;
     border: none;
     background: none;
+    box-sizing: border-box;
 
     &:focus {
       outline: none;
@@ -232,6 +231,13 @@
         > :last-child {
           margin-right: 8px;
         }
+
+        > :first-child {
+          &,
+          &.#{$namespace}-input__icon {
+            margin-left: 0;
+          }
+        }
       } @else {
         > :first-child {
           margin-left: 8px;
@@ -246,6 +252,7 @@
     justify-content: center;
     align-items: center;
     transition: all var(--el-transition-duration);
+    margin-left: 8px;
   }
 
   @include e(validateIcon) {
@@ -317,7 +324,7 @@
 @include b(input-group) {
   display: inline-flex;
   width: 100%;
-  align-items: center;
+  align-items: stretch;
 
   @include e((append, prepend)) {
     background-color: getCssVar('fill-color', 'light');
@@ -326,7 +333,7 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    height: 100%;
+    min-height: 100%;
     border-radius: var(--el-input-border-radius);
     padding: 0 20px;
     white-space: nowrap;

package/theme-chalk/src/pagination.scss

@@ -276,6 +276,12 @@
         min-width: 24px;
       }
     }
+
+    @include e(sizes) {
+      @include when(last) {
+        margin-left: 16px;
+      }
+    }
   }
 }
 

package/theme-chalk/src/step.scss

@@ -62,7 +62,7 @@
     height: 24px;
     font-size: 14px;
     box-sizing: border-box;
-    background: getCssVar('bg-color', 'overlay');
+    background: getCssVar('fill-color', 'blank');
     transition: 0.15s ease-out;
 
     @include when(text) {

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

@@ -110,6 +110,28 @@
     overflow: hidden;
   }
 
+  @include e('footer') {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    overflow: hidden;
+  }
+
+  @include e('empty') {
+    position: absolute;
+    left: 0;
+  }
+
+  @include e('overlay') {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    z-index: 9999;
+  }
+
   @include e('header-row') {
     display: flex;
     border-bottom: getCssVar('table', 'border');
@@ -161,12 +183,6 @@
       overflow: hidden;
       @include center-flex;
       @include cell-padding;
-
-      @include e('cell-text') {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
       @include cell-alignment;
     }
 
@@ -186,4 +202,12 @@
       }
     }
   }
+
+  &:not(.is-dynamic) {
+    @include e('cell-text') {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
 }

package/theme-chalk/src/tabs.scss

@@ -209,7 +209,7 @@
         }
       }
       &.is-active {
-        border-bottom-color: $color-white;
+        border-bottom-color: getCssVar('bg-color');
 
         &.is-closable {
           padding-left: 20px;

package/theme-chalk/src/upload.scss

@@ -209,7 +209,7 @@
       display: inline-flex;
       justify-content: center;
       flex-direction: column;
-      width: 100%;
+      width: calc(100% - 30px);
       margin-left: 4px;
     }
 
@@ -264,10 +264,7 @@
 
     padding: 0 4px;
 
-    overflow: hidden;
-    text-overflow: ellipsis;
     transition: color var(--el-transition-duration);
-    white-space: nowrap;
     font-size: var(--el-font-size-base);
 
     .#{$namespace}-icon {
@@ -276,6 +273,12 @@
     }
   }
 
+  @include e(item-file-name) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
   @include e(item-status-label) {
     position: absolute;
     right: 5px;