element-plus 2.2.25 → 2.2.27

package/theme-chalk/src/carousel.scss

@@ -108,6 +108,7 @@
         width: auto;
         padding: 2px 18px;
         font-size: 12px;
+        color: $color-black;
       }
 
       .#{$namespace}-carousel__indicator {

package/theme-chalk/src/cascader.scss

@@ -59,10 +59,6 @@
     .#{$namespace}-input__inner {
       text-overflow: ellipsis;
       cursor: pointer;
-
-      &::selection {
-        outline: none;
-      }
     }
 
     .#{$namespace}-input__suffix-inner {

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

@@ -244,6 +244,20 @@ $color-picker-size: map.merge($common-component-size, $color-picker-size);
   display: inline-block;
   position: relative;
   line-height: normal;
+  outline: none;
+
+  &:hover:not(.is-disabled) {
+    .#{$namespace}-color-picker__trigger {
+      border: 1px solid getCssVar('border-color-hover');
+    }
+  }
+
+  &:focus-visible:not(.is-disabled) {
+    .#{$namespace}-color-picker__trigger {
+      outline: 2px solid getCssVar('color-primary');
+      outline-offset: 1px;
+    }
+  }
 
   @include when(disabled) {
     .#{$namespace}-color-picker__trigger {
@@ -275,8 +289,8 @@ $color-picker-size: map.merge($common-component-size, $color-picker-size);
   }
 
   @include e(mask) {
-    height: 38px;
-    width: 38px;
+    height: map.get($color-picker-size, 'default')-2px;
+    width: map.get($color-picker-size, 'default')-2px;
     border-radius: 4px;
     position: absolute;
     top: 1px;

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

@@ -622,7 +622,20 @@ $cascader: map.merge(
   ),
   $cascader
 );
-
+//statistic
+// css3 var in packages/theme-chalk/src/statistic.scss
+$statistic: () !default;
+$statistic: map.merge(
+  (
+    'title-font-weight': 400,
+    'title-font-size': getCssVar('font-size', 'extra-small'),
+    'title-color': getCssVar('text-color', 'regular'),
+    'content-font-weight': 400,
+    'content-font-size': getCssVar('font-size', 'extra-large'),
+    'content-color': getCssVar('text-color', 'primary'),
+  ),
+  $statistic
+);
 // Button
 // css3 var in packages/theme-chalk/src/button.scss
 $button: () !default;

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

@@ -111,10 +111,6 @@
     &::placeholder {
       color: getCssVar('text-color', 'placeholder');
     }
-
-    &::selection {
-      outline: none;
-    }
   }
 
   .#{$namespace}-range-separator {

package/theme-chalk/src/index.scss

@@ -102,3 +102,4 @@
 @use './option.scss';
 @use './option-group.scss';
 @use './option-item.scss';
+@use './statistic.scss';

package/theme-chalk/src/menu.scss

@@ -127,13 +127,6 @@
           background-color: getCssVar('bg-color', 'overlay');
         }
       }
-
-      & .#{$namespace}-sub-menu__icon-arrow {
-        position: static;
-        vertical-align: middle;
-        margin-left: 8px;
-        margin-top: -3px;
-      }
     }
     & .#{$namespace}-menu {
       & .#{$namespace}-menu-item,
@@ -173,7 +166,8 @@
     );
 
     > .#{$namespace}-menu-item,
-    > .#{$namespace}-sub-menu > .#{$namespace}-sub-menu__title {
+    > .#{$namespace}-sub-menu > .#{$namespace}-sub-menu__title,
+    > .#{$namespace}-menu-item-group > ul > .#{$namespace}-sub-menu > .#{$namespace}-sub-menu__title {
       [class^='#{$namespace}-icon'] {
         margin: 0;
         vertical-align: middle;
@@ -201,25 +195,6 @@
     .#{$namespace}-menu .#{$namespace}-sub-menu {
       min-width: 200px;
     }
-
-    .#{$namespace}-sub-menu {
-      position: relative;
-
-      & .#{$namespace}-menu {
-        position: absolute;
-        margin-left: 5px;
-        top: 0;
-        left: 100%;
-        z-index: 10;
-        border: 1px solid getCssVar('border-color-light');
-        border-radius: getCssVar('border-radius-small');
-        box-shadow: getCssVar('box-shadow-light');
-      }
-
-      &.is-active .#{$namespace}-sub-menu__title {
-        color: getCssVar('menu-active-color');
-      }
-    }
   }
   @include m(popup) {
     z-index: 100;
@@ -271,6 +246,9 @@
 
   @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');
@@ -282,7 +260,6 @@
   & .#{$namespace}-menu-item {
     height: getCssVar('menu-sub-item-height');
     line-height: getCssVar('menu-sub-item-height');
-    min-width: 200px;
   }
   @include e(hide-arrow) {
     .#{$namespace}-sub-menu__icon-arrow {
@@ -317,7 +294,7 @@
     position: absolute;
     top: 50%;
     right: getCssVar('menu-base-level-padding');
-    margin-top: -7px;
+    margin-top: -6px;
     transition: transform getCssVar('transition-duration');
     font-size: 12px;
     margin-right: 0;

package/theme-chalk/src/select.scss

@@ -104,10 +104,6 @@
 
   .#{$namespace}-input__inner {
     cursor: pointer;
-
-    &::selection {
-      outline: none;
-    }
   }
 
   .#{$namespace}-input {

package/theme-chalk/src/statistic.scss

@@ -0,0 +1,35 @@
+@use 'mixins/mixins' as *;
+@use 'mixins/var' as *;
+@use 'common/var' as *;
+
+@include b(statistic) {
+  @include set-component-css-var('statistic', $statistic);
+
+  @include e(head) {
+    font-weight: getCssVar('statistic-title-font-weight');
+    font-size: getCssVar('statistic-title-font-size');
+    color: getCssVar('statistic-title-color');
+    line-height: 20px;
+    margin-bottom: 4px;
+  }
+
+  @include e(content) {
+    font-weight: getCssVar('statistic-content-font-weight');
+    font-size: getCssVar('statistic-content-font-size');
+    color: getCssVar('statistic-content-color');
+
+    @include e(value) {
+      display: inline-block;
+    }
+
+    @include e(prefix) {
+      margin-right: 4px;
+      display: inline-block;
+    }
+
+    @include e(suffix) {
+      margin-left: 4px;
+      display: inline-block;
+    }
+  }
+}

package/theme-chalk/src/tree.scss

@@ -12,6 +12,7 @@
   cursor: default;
   background: getCssVar('fill-color', 'blank');
   color: getCssVar('tree-text-color');
+  font-size: getCssVar('font-size', 'base');
 
   @include e(empty-block) {
     position: relative;
@@ -107,10 +108,6 @@
     }
   }
 
-  @include e(label) {
-    font-size: getCssVar('font-size', 'base');
-  }
-
   @include e(loading-icon) {
     margin-right: 8px;
     font-size: getCssVar('font-size', 'base');