element-plus 2.1.1 → 2.1.4

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

@@ -111,7 +111,7 @@ $text-color: map.merge(
     'regular': #606266,
     'secondary': #909399,
     'placeholder': #a8abb2,
-    'disable': #c0c4cc,
+    'disabled': #c0c4cc,
   ),
   $text-color
 );
@@ -253,7 +253,7 @@ $checkbox: map.merge(
     'checked-text-color': var(--el-color-primary),
     'checked-input-border-color': var(--el-color-primary),
     'checked-bg-color': var(--el-color-primary),
-    'checked-icon-color': getCssVar('fill-color'),
+    'checked-icon-color': getCssVar('fill-color', 'blank'),
     'input-border-color-hover': var(--el-color-primary),
   ),
   $checkbox
@@ -578,7 +578,7 @@ $cascader: map.merge(
   (
     'menu-text-color': var(--el-text-color-regular),
     'menu-selected-text-color': var(--el-color-primary),
-    'menu-fill': getCssVar('fill-color'),
+    'menu-fill': getCssVar('fill-color', 'blank'),
     'menu-font-size': var(--el-font-size-base),
     'menu-radius': var(--el-border-radius-base),
     'menu-border': solid 1px var(--el-border-color-light),
@@ -779,7 +779,7 @@ $pagination: map.merge(
     'button-height': 32px,
     'button-disabled-color': var(--el-text-color-placeholder),
     'button-disabled-bg-color': getCssVar('fill-color', 'blank'),
-    'button-bg-color': getCssVar('color', 'primary', 'light-9'),
+    'button-bg-color': getCssVar('fill-color'),
     'hover-color': var(--el-color-primary),
     'height-extra-small': 24px,
     'line-height-extra-small': var(--el-pagination-height-extra-small),
@@ -904,8 +904,12 @@ $dropdown: map.merge(
 $drawer: () !default;
 $drawer: map.merge(
   (
-    'bg-color': var(--el-dialog-bg-color),
-    'padding-primary': var(--el-dialog-padding-primary, 20px),
+    'bg-color':
+      var(
+        #{getCssVarName('dialog', 'bg-color')},
+        #{getCssVar('color', 'white')}
+      ),
+    'padding-primary': var(#{getCssVarName('dialog', 'padding-primary')}, 20px),
   ),
   $drawer
 );
@@ -945,7 +949,7 @@ $slider: map.merge(
     'main-bg-color': var(--el-color-primary),
     'runway-bg-color': var(--el-border-color-light),
     'stop-bg-color': var(--el-color-white),
-    'disable-color': var(--el-text-color-placeholder),
+    'disabled-color': var(--el-text-color-placeholder),
     'border-radius': 3px,
     'height': 6px,
     'button-size': 20px,
@@ -981,11 +985,12 @@ $rate: map.merge(
     'font-size': var(--el-font-size-base),
     'icon-size': 18px,
     'icon-margin': 6px,
-    'icon-color': var(--el-text-color-placeholder),
-    'void-color': #c6d1de,
-    'star-color': #f7ba2a,
-    'disable-void-color': #eff2f7,
-    'text-color': #1f2d3d,
+    // seems not be used, to remove
+    // 'icon-color': var(--el-text-color-placeholder),
+    'void-color': getCssVar('border-color', 'darker'),
+    'fill-color': #f7ba2a,
+    'disabled-void-color': getCssVar('fill-color'),
+    'text-color': getCssVar('text-color', 'primary'),
   ),
   $rate
 );

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

@@ -53,7 +53,7 @@ $text-color: map.merge(
     'regular': rgba($text-color-base, 0.85),
     'secondary': rgba($text-color-base, 0.65),
     'placeholder': rgba($text-color-base, 0.55),
-    'disable': rgba($text-color-base, 0.4),
+    'disabled': rgba($text-color-base, 0.4),
   ),
   $text-color
 );

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

@@ -121,6 +121,11 @@
       padding-left: 1px;
     }
 
+    &.#{$namespace}-icon {
+      // 防止 el-icon 的position样式覆盖
+      position: absolute;
+    }
+
     + .#{$namespace}-message-box__message {
       padding-left: 36px;
       padding-right: 12px;

package/theme-chalk/src/mixins/_var.scss

@@ -4,6 +4,14 @@
 @use 'function' as *;
 @use '../common/var' as *;
 
+// set css var value, because we need translate value to string
+// for example:
+// @include set-css-var-value(('color', 'primary'), red);
+// --el-color-primary: red;
+@mixin set-css-var-value($name, $value) {
+  #{joinVarName($name)}: #{$value};
+}
+
 @mixin set-css-color-type-light($type, $i) {
   #{getCssVarName('color', $type, 'light', $i)}: #{map.get(
       $colors,
@@ -37,8 +45,12 @@
 
 @mixin set-css-color-rgb($type) {
   $color: map.get($colors, $type, 'base');
-  #{getCssVarName('color', $type, 'rgb')}: #{red($color)}, #{green($color)},
-    #{blue($color)};
+  @include set-css-var-value(
+    ('color', $type, 'rgb'),
+    #{red($color),
+    green($color),
+    blue($color)}
+  );
 }
 
 // generate css var from existing css var

package/theme-chalk/src/mixins/mixins.scss

@@ -1,7 +1,9 @@
 @use 'function' as *;
 @use '../common/var' as *;
+// forward mixins
 @forward 'config';
 @forward 'function';
+@forward '_var';
 @use 'config' as *;
 
 // Break-points

package/theme-chalk/src/rate.scss

@@ -29,19 +29,21 @@ $rate-height: map.merge(
   }
 
   @include e(item) {
+    cursor: pointer;
     display: inline-block;
     position: relative;
     font-size: 0;
     vertical-align: middle;
+    color: var(--el-rate-void-color);
   }
 
-  & .#{$namespace}-rate__icon {
+  & .#{bem('rate', 'icon')} {
     position: relative;
     display: inline-block;
     font-size: var(--el-rate-icon-size);
     margin-right: var(--el-rate-icon-margin);
-    color: var(--el-rate-icon-color);
     transition: var(--el-transition-duration);
+
     &.hover {
       transform: scale(1.15);
     }
@@ -51,6 +53,10 @@ $rate-height: map.merge(
       left: 0;
       top: 0;
     }
+
+    @include when(active) {
+      color: getCssVar('rate', 'fill-color');
+    }
   }
 
   @include e(decimal) {
@@ -59,11 +65,13 @@ $rate-height: map.merge(
     left: 0;
     display: inline-block;
     overflow: hidden;
+    color: getCssVar('rate', 'fill-color');
   }
 
   @include e(text) {
     font-size: var(--el-rate-font-size);
     vertical-align: middle;
+    color: getCssVar('rate', 'text-color');
   }
 
   @each $size in (large, small) {
@@ -71,4 +79,11 @@ $rate-height: map.merge(
       height: map.get($rate-height, $size);
     }
   }
+
+  @include when(disabled) {
+    @include e(item) {
+      cursor: auto;
+      color: getCssVar('rate', 'disabled-void-color');
+    }
+  }
 }

package/theme-chalk/src/slider.scss

@@ -42,11 +42,11 @@ $slider-height: map.merge(
       cursor: default;
 
       .#{$namespace}-slider__bar {
-        background-color: var(--el-slider-disable-color);
+        background-color: var(--el-slider-disabled-color);
       }
 
       .#{$namespace}-slider__button {
-        border-color: var(--el-slider-disable-color);
+        border-color: var(--el-slider-disabled-color);
       }
 
       .#{$namespace}-slider__button-wrapper {

package/theme-chalk/src/table.scss

@@ -42,6 +42,8 @@
 
   // when data is empty
   @include e(empty-block) {
+    position: sticky;
+    left: 0;
     min-height: 60px;
     text-align: center;
     width: 100%;

package/theme-chalk/src/upload.scss

@@ -28,7 +28,7 @@
 
   /* Picture Card for Wall */
   @include m(picture-card) {
-    #{getCssVarName('upload', 'picture-card', 'size')}: 148px;
+    @include set-css-var-value(('upload', 'picture-card', 'size'), 148px);
 
     background-color: #fbfdff;
     border: 1px dashed #c0ccda;
@@ -288,11 +288,11 @@
 
   // upload-list
   @include m(picture-card) {
+    @include set-css-var-value(('upload-list', 'picture-card', 'size'), 148px);
+
     display: inline-flex;
     flex-wrap: wrap;
-
     margin: 0;
-    #{getCssVarName('upload-list', 'picture-card', 'size')}: 148px;
 
     .#{bem('upload-list', 'item')} {
       overflow: hidden;