element-plus 1.2.0-beta.5 → 1.2.0-beta.6

package/theme-chalk/src/check-tag.scss

@@ -4,7 +4,7 @@
 @use 'common/var' as *;
 
 @include b(check-tag) {
-  background-color: $background-color-base;
+  background-color: var(--el-bg-color);
   border-radius: var(--el-border-radius-base);
   color: var(--el-color-info);
   cursor: pointer;

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

@@ -104,7 +104,7 @@ $border-color: map.merge(
 
 // Background
 /// color|1|Background Color|4
-$background-color-base: #f5f7fa !default;
+$bg-color: #f5f7fa !default;
 
 // Border
 $border-width-base: 1px !default;
@@ -156,7 +156,7 @@ $font-size: map.merge(
 $disabled: () !default;
 $disabled: map.merge(
   (
-    'bg-color': var(--el-bg-color-base),
+    'bg-color': var(--el-bg-color),
     'text-color': var(--el-text-color-placeholder),
     'border-color': var(--el-border-color-light),
   ),
@@ -318,7 +318,7 @@ $select-option: map.merge(
     'text-color': var(--el-text-color-regular),
     'disabled-color': var(--el-text-color-placeholder),
     'height': 34px,
-    'hover-background': var(--el-bg-color-base),
+    'hover-background': var(--el-bg-color),
     'selected-text-color': var(--el-color-primary),
   ),
   $select-option
@@ -506,7 +506,7 @@ $cascader: map.merge(
     'menu-radius': var(--el-border-radius-base),
     'menu-border': solid 1px var(--el-border-color-light),
     'menu-shadow': var(--el-box-shadow-light),
-    'node-background-hover': var(--el-bg-color-base),
+    'node-background-hover': var(--el-bg-color),
     'node-color-disabled': var(--el-text-color-placeholder),
     'color-empty': var(--el-text-color-placeholder),
     'tag-background': #f0f2f5,
@@ -647,7 +647,7 @@ $table: map.merge(
     'border': 1px solid var(--el-table-border-color),
     'text-color': var(--el-text-color-regular),
     'header-text-color': var(--el-text-color-secondary),
-    'row-hover-bg-color': var(--el-bg-color-base),
+    'row-hover-bg-color': var(--el-bg-color),
     'current-row-bg-color': var(--el-color-primary-light-9),
     'header-bg-color': var(--el-color-white),
     'fixed-box-shadow': 0 0 10px rgba(0, 0, 0, 0.12),
@@ -780,7 +780,7 @@ $tag-height: map.merge(
 $tree: () !default;
 $tree: map.merge(
   (
-    'node-hover-bg-color': var(--el-bg-color-base),
+    'node-hover-bg-color': var(--el-bg-color),
     'text-color': var(--el-text-color-regular),
     'expand-icon-color': var(--el-text-color-placeholder),
   ),
@@ -992,7 +992,7 @@ $transfer: map.merge(
     'border-radius': var(--el-border-radius-base),
     'panel-width': 200px,
     'panel-header-height': 40px,
-    'panel-header-bg-color': var(--el-bg-color-base),
+    'panel-header-bg-color': var(--el-bg-color),
     'panel-footer-height': 40px,
     'panel-body-height': 246px,
     'item-height': 30px,

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

@@ -113,7 +113,7 @@
     }
 
     &.disabled .el-date-table-cell {
-      background-color: $background-color-base;
+      background-color: var(--el-bg-color);
       opacity: 1;
       cursor: not-allowed;
       color: var(--el-text-color-placeholder);

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

@@ -27,7 +27,7 @@
     }
 
     &.disabled .cell {
-      background-color: $background-color-base;
+      background-color: var(--el-bg-color);
       cursor: not-allowed;
       color: var(--el-text-color-placeholder);
 

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

@@ -95,7 +95,7 @@
     color: var(--el-text-color-regular);
 
     &:hover:not(.disabled):not(.active) {
-      background: $background-color-base;
+      background: var(--el-bg-color);
       cursor: pointer;
     }
 

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

@@ -23,7 +23,7 @@
     }
 
     &.disabled .cell {
-      background-color: var(--el-bg-color-base);
+      background-color: var(--el-bg-color);
       cursor: not-allowed;
       color: var(--el-text-color-placeholder);
 

package/theme-chalk/src/divider.scss

@@ -2,7 +2,6 @@
 @use 'mixins/mixins' as *;
 
 @include b(divider) {
-  background-color: var(--el-border-color-base);
   position: relative;
 
   @include m(horizontal) {
@@ -10,6 +9,7 @@
     height: 1px;
     width: 100%;
     margin: 24px 0;
+    border-top: 1px var(--el-border-color-base) var(--el-border-style);
   }
 
   @include m(vertical) {
@@ -19,6 +19,7 @@
     margin: 0 8px;
     vertical-align: middle;
     position: relative;
+    border-left: 1px var(--el-border-color-base) var(--el-border-style);
   }
 
   @include e(text) {

package/theme-chalk/src/dropdown.scss

@@ -143,7 +143,6 @@
         content: '';
         height: $divided-offset;
         display: block;
-        margin: 0 -20px;
         background-color: $color-white;
       }
     }
@@ -168,7 +167,6 @@
 
         &:before {
           height: $divided-offset;
-          margin: 0 -17px;
         }
       }
     }
@@ -188,7 +186,6 @@
 
         &:before {
           height: $divided-offset;
-          margin: 0 -15px;
         }
       }
     }
@@ -208,7 +205,6 @@
 
         &:before {
           height: $divided-offset;
-          margin: 0 -10px;
         }
       }
     }

package/theme-chalk/src/icon.scss

@@ -25,7 +25,6 @@
 
 @include b(icon) {
   --color: inherit;
-  --font-size: #{map.get($font-size, 'base')};
   height: 1em;
   width: 1em;
   line-height: 1em;
@@ -34,7 +33,7 @@
   position: relative;
   fill: currentColor;
   color: var(--color);
-  font-size: var(--font-size);
+  font-size: inherit;
 
   @include when(loading) {
     animation: rotating 2s linear infinite;

package/theme-chalk/src/image.scss

@@ -12,22 +12,22 @@
   overflow: hidden;
 
   @include e(inner) {
-    @extend %size;
+    @extend %size !optional;
     vertical-align: top;
   }
 
   @include e(placeholder) {
     @extend %size;
-    background: $background-color-base;
+    background: var(--el-bg-color);
   }
 
   @include e(error) {
-    @extend %size;
+    @extend %size !optional;
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 14px;
-    background: $background-color-base;
+    background: var(--el-bg-color);
     color: var(--el-text-color-placeholder);
     vertical-align: middle;
   }

package/theme-chalk/src/input-number.scss

@@ -38,7 +38,7 @@
     width: map.get($input-height, 'default');
     height: auto;
     text-align: center;
-    background: $background-color-base;
+    background: var(--el-bg-color);
     color: var(--el-text-color-regular);
     cursor: pointer;
     font-size: 13px;

package/theme-chalk/src/input.scss

@@ -212,6 +212,10 @@
     justify-content: center;
     align-items: center;
     transition: all var(--el-transition-duration);
+
+    &.#{$namespace}-icon {
+      display: flex;
+    }
   }
 
   @include e(validateIcon) {
@@ -305,7 +309,7 @@
   }
 
   @include e((append, prepend)) {
-    background-color: var(--el-bg-color-base);
+    background-color: var(--el-bg-color);
     color: var(--el-color-info);
     vertical-align: middle;
     display: table-cell;

package/theme-chalk/src/menu.scss

@@ -162,7 +162,7 @@
         display: none;
       }
 
-      span {
+      > span {
         height: 0;
         width: 0;
         overflow: hidden;

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

@@ -171,7 +171,7 @@
 }
 
 @mixin extend-rule($name) {
-  @extend #{'%shared-' + $name};
+  @extend #{'%shared-' + $name} !optional;
 }
 
 @mixin share-rule($name) {

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

@@ -48,7 +48,7 @@ $input-inline-start: 15px !default;
     @include when(disabled) {
       cursor: not-allowed;
 
-      background-color: var(--el-bg-color-base);
+      background-color: var(--el-bg-color);
       color: var(--el-text-color-placeholder);
       border-color: var(--el-select-disabled-border);
 

package/theme-chalk/src/select.scss

@@ -152,26 +152,30 @@
     margin-top: -2px;
   }
 
-  .#{$namespace}-select__tags .#{$namespace}-tag {
-    box-sizing: border-box;
-    border-color: transparent;
-    margin: 2px 0 2px 6px;
-    background-color: #f0f2f5;
-
-    .#{$namespace}-icon-close {
-      background-color: var(--el-text-color-placeholder);
-      right: -7px;
-      top: 0;
-      color: $color-white;
-
-      &:hover {
-        background-color: var(--el-text-color-secondary);
-      }
+  .#{$namespace}-select__tags {
+    .#{$namespace}-tag {
+      box-sizing: border-box;
+      border-color: transparent;
+      margin: 2px 0 2px 6px;
+
+      .#{$namespace}-icon-close {
+        background-color: var(--el-text-color-placeholder);
+        right: -7px;
+        top: 0;
+        color: $color-white;
+
+        &:hover {
+          background-color: var(--el-text-color-secondary);
+        }
 
-      &::before {
-        display: block;
-        transform: translate(0, 0.5px);
+        &::before {
+          display: block;
+          transform: translate(0, 0.5px);
+        }
       }
     }
+    .#{$namespace}-tag--info {
+      background-color: #f0f2f5;
+    }
   }
 }

package/theme-chalk/src/steps.scss

@@ -7,7 +7,7 @@
   @include m(simple) {
     padding: 13px 8%;
     border-radius: 4px;
-    background: $background-color-base;
+    background: var(--el-bg-color);
   }
 
   @include m(horizontal) {

package/theme-chalk/src/table.scss

@@ -110,7 +110,7 @@
 
     &.is-group {
       th.#{$namespace}-table__cell {
-        background: var(--el-bg-color-base);
+        background: var(--el-bg-color);
       }
     }
   }

package/theme-chalk/src/tabs.scss

@@ -226,7 +226,7 @@
       padding: 15px;
     }
     > .#{$namespace}-tabs__header {
-      background-color: $background-color-base;
+      background-color: var(--el-bg-color);
       border-bottom: 1px solid var(--el-border-color-light);
       margin: 0;
     }

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

@@ -23,7 +23,7 @@
     }
 
     &:hover {
-      background-color: $background-color-base;
+      background-color: var(--el-bg-color);
       font-weight: bold;
       cursor: pointer;
     }

package/theme-chalk/src/upload.scss

@@ -176,7 +176,7 @@
     }
 
     &:hover {
-      background-color: $background-color-base;
+      background-color: var(--el-bg-color);
 
       .#{$namespace}-icon--close {
         display: inline-block;

package/theme-chalk/src/var.scss

@@ -25,7 +25,7 @@
   }
 
   // Background
-  --el-bg-color-base: #{$background-color-base};
+  --el-bg-color: #{$bg-color};
 
   // Border
   --el-border-width-base: #{$border-width-base};