element-plus 2.2.12 → 2.2.15

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

@@ -1006,8 +1006,6 @@ $menu: map.merge(
     'base-level-padding': 20px,
     'level-padding': 20px,
     'icon-width': 24px,
-    'icon-transform-closed': 'none',
-    'icon-transform-open': 'rotateZ(180deg)',
   ),
   $menu
 );

package/theme-chalk/src/form.scss

@@ -193,12 +193,23 @@ $form-item-label-top-margin-bottom: map.merge(
 
   @include when(required) {
     @include pseudo('not(.is-no-asterisk)') {
-      > .#{$namespace}-form-item__label:before,
-      > .#{$namespace}-form-item__label-wrap
-        > .#{$namespace}-form-item__label:before {
-        content: '*';
-        color: getCssVar('color-danger');
-        margin-right: 4px;
+      &.asterisk-left {
+        > .#{$namespace}-form-item__label:before,
+        > .#{$namespace}-form-item__label-wrap
+          > .#{$namespace}-form-item__label:before {
+          content: '*';
+          color: getCssVar('color-danger');
+          margin-right: 4px;
+        }
+      }
+      &.asterisk-right {
+        > .#{$namespace}-form-item__label:after,
+        > .#{$namespace}-form-item__label-wrap
+          > .#{$namespace}-form-item__label:after {
+          content: '*';
+          color: getCssVar('color-danger');
+          margin-left: 4px;
+        }
       }
     }
   }

package/theme-chalk/src/input.scss

@@ -317,6 +317,7 @@
 
     .#{$namespace}-input__inner {
       color: map.get($input-disabled, 'text-color');
+      -webkit-text-fill-color: map.get($input-disabled, 'text-color');
       cursor: not-allowed;
 
       &::placeholder {

package/theme-chalk/src/menu.scss

@@ -215,11 +215,6 @@
         border-radius: getCssVar('border-radius-small');
         box-shadow: getCssVar('box-shadow-light');
       }
-      &.is-opened {
-        > .#{$namespace}-sub-menu__title .#{$namespace}-sub-menu__icon-arrow {
-          transform: getCssVar('menu-icon-transform-closed');
-        }
-      }
 
       &.is-active .#{$namespace}-sub-menu__title {
         color: getCssVar('menu-active-color');
@@ -299,11 +294,6 @@
       border-bottom-color: getCssVar('menu-active-color');
     }
   }
-  @include when(opened) {
-    > .#{$namespace}-sub-menu__title .#{$namespace}-sub-menu__icon-arrow {
-      transform: getCssVar('menu-icon-transform-open');
-    }
-  }
   @include when(disabled) {
     .#{$namespace}-sub-menu__title,
     .#{$namespace}-menu-item {
@@ -328,7 +318,6 @@
     top: 50%;
     right: getCssVar('menu-base-level-padding');
     margin-top: -7px;
-    transform: getCssVar('menu-icon-transform-closed');
     transition: transform getCssVar('transition-duration');
     font-size: 12px;
     margin-right: 0;

package/theme-chalk/src/message.scss

@@ -9,6 +9,7 @@
 }
 
 @include b(message) {
+  width: fit-content;
   max-width: calc(100% - 32px);
   box-sizing: border-box;
   border-radius: getCssVar('border-radius-base');

package/theme-chalk/src/page-header.scss

@@ -2,40 +2,50 @@
 @use 'common/var' as *;
 
 @include b(page-header) {
-  display: flex;
-  line-height: 24px;
+  @include when(contentful) {
+    @include e('main') {
+      border-top: 1px solid getCssVar('border-color', 'light');
+      margin-top: 16px;
+    }
+  }
 
-  @include e(left) {
+  @include e(header) {
     display: flex;
-    cursor: pointer;
-    margin-right: 40px;
-    position: relative;
-
-    &::after {
-      content: '';
-      position: absolute;
-      width: 1px;
-      height: 16px;
-      right: -20px;
-      top: 50%;
-      transform: translateY(-50%);
-      background-color: getCssVar('border-color');
-    }
+    align-items: center;
+    justify-content: space-between;
+    line-height: 24px;
 
-    @include e(icon) {
-      font-size: 18px;
-      margin-right: 6px;
+    @include e(left) {
       display: flex;
       align-items: center;
+      margin-right: 40px;
+      position: relative;
 
-      .#{$namespace}-icon {
-        font-size: inherit;
+      @include e('back') {
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+      }
+
+      .#{$namespace}-divider--vertical {
+        margin: 0 16px;
       }
-    }
 
-    @include e(title) {
-      font-size: 14px;
-      font-weight: 500;
+      @include e(icon) {
+        font-size: 16px;
+        margin-right: 10px;
+        display: flex;
+        align-items: center;
+
+        .#{$namespace}-icon {
+          font-size: inherit;
+        }
+      }
+
+      @include e(title) {
+        font-size: 14px;
+        font-weight: 500;
+      }
     }
   }
 
@@ -43,4 +53,8 @@
     font-size: 18px;
     color: getCssVar('text-color', 'primary');
   }
+
+  @include e(breadcrumb) {
+    margin-bottom: 16px;
+  }
 }

package/theme-chalk/src/popover.scss

@@ -18,6 +18,7 @@
     font-size: getCssVar('popover-font-size');
     box-shadow: getCssVar('box-shadow-light');
     word-break: break-all;
+    box-sizing: border-box;
 
     @include m(plain) {
       padding: getCssVar('popover-padding-large');
@@ -37,6 +38,13 @@
       }
     }
 
+    @include when(dark) {
+      @include set-css-var-value(
+        'popover-title-text-color',
+        var(#{getCssVarName('bg-color')})
+      );
+    }
+
     &:focus:active,
     &:focus {
       outline-width: 0;

package/theme-chalk/src/rate.scss

@@ -25,7 +25,7 @@ $rate-height: map.merge(
 
   &:focus,
   &:active {
-    outline-width: 0;
+    outline: none;
   }
 
   @include e(item) {

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

@@ -1,12 +1,10 @@
 @use '../mixins/mixins' as *;
+@use '../mixins/utils' as *;
 
 // same style in select & select-v2
 @mixin select-common($name) {
   .#{$namespace}-#{$name}__tags-text {
-    text-overflow: ellipsis;
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    overflow: hidden;
+    display: inline-block;
+    @include utils-ellipsis;
   }
 }

package/theme-chalk/src/select.scss

@@ -22,6 +22,7 @@
 @include b(select) {
   display: inline-block;
   position: relative;
+  vertical-align: middle;
   line-height: map.get($input-height, 'default');
 
   @include e(popper) {

package/theme-chalk/src/table.scss

@@ -36,9 +36,10 @@
   }
 
   &.has-footer {
-    .#{$namespace}-table__inner-wrapper {
-      &::before {
-        bottom: 0;
+    &.#{$namespace}-table--scrollable-y,
+    &.#{$namespace}-table--fluid-height {
+      tr:last-child td.#{$namespace}-table__cell {
+        border-bottom-color: transparent;
       }
     }
   }
@@ -211,16 +212,8 @@
     user-select: none;
     background-color: getCssVar('table-header-bg-color');
 
-    > .cell {
-      display: inline-block;
-      box-sizing: border-box;
-      position: relative;
-      vertical-align: middle;
-      width: 100%;
-
-      &.highlight {
-        color: getCssVar('color-primary');
-      }
+    > .cell.highlight {
+      color: getCssVar('color-primary');
     }
 
     &.required > div::before {
@@ -245,6 +238,10 @@
     }
   }
 
+  @include e((footer-wrapper)) {
+    border-top: getCssVar('table-border');
+  }
+
   // 拥有多级表头
   @include m((group, border)) {
     @include e((inner-wrapper, footer-wrapper)) {
@@ -257,9 +254,6 @@
         }
       }
     }
-    @include e((footer-wrapper)) {
-      border-top: getCssVar('table-border');
-    }
 
     @include share-rule(border-pseudo) {
       content: '';
@@ -310,15 +304,6 @@
       flex-shrink: 0;
     }
 
-    @include e(footer-wrapper) {
-      margin-top: -2px;
-    }
-
-    // fix: #1013
-    // &.#{$namespace}-loading-parent--relative {
-    //   border-color: transparent;
-    // }
-
     .#{$namespace}-table__cell {
       border-right: getCssVar('table-border');
     }
@@ -412,6 +397,11 @@
 
   @include e((header-wrapper, body-wrapper)) {
     .#{$namespace}-table-column--selection {
+      > .cell {
+        display: inline-flex;
+        align-items: center;
+        height: 23px;
+      }
       .#{$namespace}-checkbox {
         height: unset;
       }