element-plus 2.3.14 → 2.4.1

package/theme-chalk/src/button.scss

@@ -148,6 +148,7 @@ $button-icon-span-gap: map.merge(
     border-radius: getCssVar('border-radius', 'round');
   }
   @include when(circle) {
+    width: map.get($input-height, 'default');
     border-radius: 50%;
     padding: map.get($button-padding-vertical, 'default') - $button-border-width;
   }

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

@@ -246,9 +246,9 @@ $color-picker-size: map.merge($common-component-size, $color-picker-size);
   line-height: normal;
   outline: none;
 
-  &:hover:not(.is-disabled) {
+  &:hover:not(.is-disabled, .is-focused) {
     .#{$namespace}-color-picker__trigger {
-      border: 1px solid getCssVar('border-color-hover');
+      border-color: getCssVar('border-color-hover');
     }
   }
 
@@ -259,6 +259,12 @@ $color-picker-size: map.merge($common-component-size, $color-picker-size);
     }
   }
 
+  @include when(focused) {
+    .#{$namespace}-color-picker__trigger {
+      border-color: getCssVar('color-primary');
+    }
+  }
+
   @include when(disabled) {
     .#{$namespace}-color-picker__trigger {
       cursor: not-allowed;

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

@@ -772,10 +772,11 @@ $table: map.merge(
     'header-bg-color': getCssVar('bg-color'),
     'fixed-box-shadow': getCssVar('box-shadow', 'light'),
     'bg-color': getCssVar('fill-color', 'blank'),
-    'tr-bg-color': getCssVar('fill-color', 'blank'),
+    'tr-bg-color': getCssVar('bg-color'),
     'expanded-cell-bg-color': getCssVar('fill-color', 'blank'),
     'fixed-left-column': inset 10px 0 10px -10px rgb(0 0 0 / 15%),
     'fixed-right-column': inset -10px 0 10px -10px rgb(0 0 0 / 15%),
+    'index': getCssVar('index-normal')
   ),
   $table
 );
@@ -1037,6 +1038,7 @@ $menu: map.merge(
     'hover-bg-color': getCssVar('color-primary-light-9'),
     'item-height': 56px,
     'sub-item-height': calc(#{getCssVar('menu-item-height')} - 6px),
+    'horizontal-height': 60px,
     'horizontal-sub-item-height': 36px,
     'item-font-size': getCssVar('font-size-base'),
     'item-hover-fill': getCssVar('color-primary-light-9'),

package/theme-chalk/src/menu.scss

@@ -73,11 +73,24 @@
     }
   }
 
+  &:not(.#{$namespace}-menu--collapse) .#{$namespace}-sub-menu__title {
+    padding-right: calc(
+      #{getCssVar('menu-base-level-padding')} + #{getCssVar('menu-icon-width')}
+    );
+  }
+
   @include m(horizontal) {
+    // reset menu-item popup height
+    &.#{$namespace}-menu--popup-container {
+      height: unset;
+    }
+
     display: flex;
     flex-wrap: nowrap;
     border-right: none;
 
+    height: getCssVar('menu-horizontal-height');
+
     &.#{$namespace}-menu {
       border-bottom: solid 1px getCssVar('menu-border-color');
     }
@@ -122,7 +135,7 @@
         color: getCssVar('menu-text-color');
 
         &:hover {
-          background-color: getCssVar('bg-color', 'overlay');
+          background-color: getCssVar('menu-bg-color');
         }
       }
     }
@@ -248,9 +261,6 @@
 
   @include e(title) {
     @include menu-item;
-    padding-right: calc(
-      #{getCssVar('menu-base-level-padding')} + #{getCssVar('menu-icon-width')}
-    );
 
     &:hover {
       background-color: getCssVar('menu-hover-bg-color');

package/theme-chalk/src/message-box.scss

@@ -244,15 +244,3 @@
     opacity: 1;
   }
 }
-
-@keyframes msgbox-fade-out {
-  0% {
-    transform: translate3d(0, 0, 0);
-    opacity: 1;
-  }
-
-  100% {
-    transform: translate3d(0, -20px, 0);
-    opacity: 0;
-  }
-}

package/theme-chalk/src/table.scss

@@ -141,6 +141,13 @@
     }
   }
 
+  tfoot {
+    td.#{$namespace}-table__cell {
+      background-color: getCssVar('table-row-hover-bg-color');
+      color: getCssVar('table-text-color');
+    }
+  }
+
   .#{$namespace}-table__cell {
     padding: map.get($table-padding, 'default');
     min-width: 0;
@@ -149,7 +156,7 @@
     vertical-align: middle;
     position: relative;
     text-align: left;
-    z-index: 1;
+    z-index: getCssVar('table-index');
     @include when(center) {
       text-align: center;
     }
@@ -246,17 +253,13 @@
     }
   }
 
-  @include e((footer-wrapper)) {
-    border-top: getCssVar('table-border');
-  }
-
   // 拥有多级表头
   @include m((group, border)) {
     @include share-rule(border-pseudo) {
       content: '';
       position: absolute;
       background-color: getCssVar('table-border-color');
-      z-index: 3;
+      z-index: calc(getCssVar('table-index') + 2);
     }
   }
 
@@ -269,6 +272,7 @@
         top: 0;
         width: 100%;
         height: 1px;
+        z-index: calc(getCssVar('table-index') + 2);
       }
     }
 
@@ -324,8 +328,8 @@
         &.#{$namespace}-table-fixed-column--left,
         &.#{$namespace}-table-fixed-column--right {
           position: sticky !important;
-          z-index: 2;
-          background: getCssVar('bg-color');
+          background: inherit;
+          z-index: calc(getCssVar('table-index') + 1);
           &.is-last-column,
           &.is-first-column {
             &::before {
@@ -355,7 +359,7 @@
         }
         &.#{$namespace}-table__fixed-right-patch {
           position: sticky !important;
-          z-index: 2;
+          z-index: calc(getCssVar('table-index') + 1);
           background: #fff;
           right: 0;
         }
@@ -380,7 +384,7 @@
     border-collapse: separate;
   }
 
-  @include e((header-wrapper, footer-wrapper)) {
+  @include e((header-wrapper)) {
     overflow: hidden;
 
     & tbody td.#{$namespace}-table__cell {
@@ -389,6 +393,11 @@
     }
   }
 
+  @include e((footer-wrapper)) {
+    overflow: hidden;
+    flex-shrink: 0;
+  }
+
   @include e((header-wrapper, body-wrapper)) {
     .#{$namespace}-table-column--selection {
       > .cell {
@@ -474,7 +483,7 @@
     position: relative;
     flex: 1;
     .#{$namespace}-scrollbar__bar {
-      z-index: 2;
+      z-index: calc(getCssVar('table-index') + 2);
     }
   }
 
@@ -554,6 +563,20 @@
     }
   }
 
+  &.#{$namespace}-table--scrollable-y {
+    @include e(body-header) {
+      position: sticky;
+      top: 0;
+      z-index: calc(getCssVar('table-index') + 2);
+    }
+
+    @include e(body-footer) {
+      position: sticky;
+      bottom: 0;
+      z-index: calc(getCssVar('table-index') + 2);
+    }
+  }
+
   @include e(column-resize-proxy) {
     position: absolute;
     left: 200px;
@@ -561,7 +584,7 @@
     bottom: 0;
     width: 0;
     border-left: getCssVar('table-border');
-    z-index: 10;
+    z-index: calc(getCssVar('table-index') + 9);
   }
 
   @include e(column-filter-trigger) {
@@ -580,7 +603,7 @@
     left: 0;
     width: 1px;
     height: 100%;
-    z-index: 3;
+    z-index: calc(getCssVar('table-index') + 2);
     position: absolute;
     background-color: getCssVar('table-border-color');
   }
@@ -588,7 +611,7 @@
   @include e(border-bottom-patch) {
     left: 0;
     height: 1px;
-    z-index: 3;
+    z-index: calc(getCssVar('table-index') + 2);
     position: absolute;
     background-color: getCssVar('table-border-color');
   }
@@ -597,7 +620,7 @@
     top: 0;
     height: 100%;
     width: 1px;
-    z-index: 3;
+    z-index: calc(getCssVar('table-index') + 2);
     position: absolute;
     background-color: getCssVar('table-border-color');
   }

package/theme-chalk/src/text.scss

@@ -24,6 +24,12 @@
     overflow: hidden;
   }
 
+  @include when(line-clamp) {
+    display: -webkit-inline-box;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
   @each $size in (large, default, small) {
     @include m($size) {
       @include set-css-var-value(

package/theme-chalk/src/upload.scss

@@ -62,7 +62,7 @@
 
     @include utils-inline-flex-center;
 
-    i {
+    > i {
       font-size: 28px;
       color: getCssVar('text-color', 'secondary');
     }