@element-plus/nightly 0.0.20220321 → 0.0.20220324

package/theme-chalk/src/button.scss

@@ -6,10 +6,6 @@
 @use 'mixins/utils' as *;
 @use 'mixins/var' as *;
 
-@include b(button) {
-  @include set-component-css-var('button', $button);
-}
-
 $button-icon-span-gap: () !default;
 $button-icon-span-gap: map.merge(
   (
@@ -20,6 +16,10 @@ $button-icon-span-gap: map.merge(
   $button-icon-span-gap
 );
 
+@include b(button) {
+  @include set-component-css-var('button', $button);
+}
+
 @include b(button) {
   display: inline-flex;
   justify-content: center;
@@ -30,20 +30,16 @@ $button-icon-span-gap: map.merge(
   height: map.get($input-height, 'default');
   white-space: nowrap;
   cursor: pointer;
-  background-color: var(--el-button-bg-color, #{map.get($button, 'bg-color')});
-  border: var(--el-border);
-  border-color: var(
-    --el-button-border-color,
-    #{map.get($button, 'border-color')}
-  );
-  color: var(--el-button-text-color, #{map.get($button, 'text-color')});
+  background-color: getCssVar('button', 'bg-color');
+  border: getCssVar('border');
+  border-color: getCssVar('button', 'border-color');
+  color: getCssVar('button', 'text-color');
   -webkit-appearance: none;
   text-align: center;
   box-sizing: border-box;
   outline: none;
-  margin: 0;
   transition: 0.1s;
-  font-weight: var(--el-button-font-weight);
+  font-weight: getCssVar('button', 'font-weight');
   user-select: none;
   vertical-align: middle;
 
@@ -65,25 +61,16 @@ $button-icon-span-gap: map.merge(
 
   &:hover,
   &:focus {
-    color: var(--el-button-hover-text-color);
-    border-color: var(
-      --el-button-hover-border-color,
-      var(--el-button-hover-bg-color)
-    );
-    background-color: var(--el-button-hover-bg-color);
+    color: getCssVar('button', 'hover', 'text-color');
+    border-color: getCssVar('button', 'hover', 'border-color');
+    background-color: getCssVar('button', 'hover', 'bg-color');
     outline: none;
   }
 
   &:active {
-    color: var(--el-button-active-text-color);
-    border-color: var(
-      --el-button-active-border-color,
-      var(--el-button-active-bg-color)
-    );
-    background-color: var(
-      --el-button-active-bg-color,
-      var(--el-button-bg-color)
-    );
+    color: getCssVar('button', 'active', 'text-color');
+    border-color: getCssVar('button', 'active', 'border-color');
+    background-color: getCssVar('button', 'active', 'bg-color');
     outline: none;
   }
 
@@ -101,32 +88,24 @@ $button-icon-span-gap: map.merge(
   }
 
   @include when(plain) {
-    --el-button-active-text-color: #{mix(
-        $color-black,
-        $color-primary,
-        $button-active-shade-percent
-      )};
-    --el-button-active-border-color: #{mix(
-        $color-black,
-        $color-primary,
-        $button-active-shade-percent
-      )};
-
-    --el-button-hover-text-color: var(--el-color-primary);
+    @include css-var-from-global(
+      ('button', 'hover', 'text-color'),
+      ('color', 'primary')
+    );
     @include css-var-from-global(
       ('button', 'hover-bg-color'),
       ('fill-color', 'blank')
     );
-    --el-button-hover-border-color: var(--el-color-primary);
+    @include css-var-from-global(
+      ('button', 'hover-border-color'),
+      ('color', 'primary')
+    );
   }
 
   @include when(active) {
-    color: var(--el-button-active-text-color);
-    border-color: var(
-      --el-button-active-border-color,
-      --el-button-active-bg-color
-    );
-    background-color: var(--el-button-active-bg-color);
+    color: getCssVar('button', 'active', 'text-color');
+    border-color: getCssVar('button', 'active', 'border-color');
+    background-color: getCssVar('button', 'active', 'bg-color');
     outline: none;
   }
 
@@ -134,25 +113,11 @@ $button-icon-span-gap: map.merge(
     &,
     &:hover,
     &:focus {
-      color: var(--el-button-disabled-text-color);
+      color: getCssVar('button', 'disabled', 'text-color');
       cursor: not-allowed;
       background-image: none;
-      background-color: var(--el-button-disabled-bg-color);
-      border-color: var(--el-button-disabled-border-color);
-    }
-
-    &.#{$namespace}-button--text {
-      background-color: transparent;
-    }
-
-    &.is-plain {
-      &,
-      &:hover,
-      &:focus {
-        background-color: getCssVar('fill-color', 'blank');
-        border-color: var(--el-button-disabled-border-color);
-        color: var(--el-button-disabled-text-color);
-      }
+      background-color: getCssVar('button', 'disabled', 'bg-color');
+      border-color: getCssVar('button', 'disabled', 'border-color');
     }
   }
 
@@ -173,7 +138,7 @@ $button-icon-span-gap: map.merge(
     }
   }
   @include when(round) {
-    border-radius: var(--el-border-radius-round);
+    border-radius: getCssVar('border-radius', 'round');
   }
   @include when(circle) {
     border-radius: 50%;
@@ -187,12 +152,6 @@ $button-icon-span-gap: map.merge(
     }
   }
 
-  @include m(default) {
-    --el-button-text-color: var(--el-text-color-regular);
-    --el-button-hover-text-color: var(--el-color-primary);
-    --el-button-disabled-text-color: var(--el-text-color-placeholder);
-  }
-
   @each $type in (primary, success, warning, danger, info) {
     @include m($type) {
       @include button-variant($type);
@@ -201,8 +160,12 @@ $button-icon-span-gap: map.merge(
 
   @each $size in (large, small) {
     @include m($size) {
-      --el-button-size: #{map.get($input-height, $size)};
-      height: var(--el-button-size);
+      @include set-css-var-value(
+        ('button', 'size'),
+        map.get($input-height, $size)
+      );
+
+      height: getCssVar('button', 'size');
 
       & [class*='#{$namespace}-icon'] {
         & + span {
@@ -218,7 +181,7 @@ $button-icon-span-gap: map.merge(
       );
 
       @include when(circle) {
-        width: var(--el-button-size);
+        width: getCssVar('button', 'size');
         padding: map.get($button-padding-vertical, $size) - $button-border-width;
       }
     }
@@ -226,19 +189,19 @@ $button-icon-span-gap: map.merge(
 
   @include m(text) {
     border-color: transparent;
-    color: var(--el-color-primary);
+    color: getCssVar('color', 'primary');
     background: transparent;
     padding-left: 0;
     padding-right: 0;
 
     &:hover,
     &:focus {
-      color: var(--el-color-primary-light-3);
+      color: getCssVar('color', 'primary', 'light-3');
       border-color: transparent;
       background-color: transparent;
     }
     &:active {
-      color: mix($color-black, $color-primary, $button-active-shade-percent);
+      color: getCssVar('color', 'primary', 'dark-2');
       border-color: transparent;
       background-color: transparent;
     }

package/theme-chalk/src/cascader-panel.scss

@@ -61,8 +61,13 @@
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    text-align: center;
+    display: flex;
+    align-items: center;
     color: var(--el-cascader-color-empty);
+
+    .is-loading {
+      margin-right: 2px;
+    }
   }
 }