element-plus 2.0.2 → 2.0.5

package/theme-chalk/src/pagination.scss

@@ -10,7 +10,7 @@
     margin-left: 0;
   }
 
-  & + .el-pager {
+  & + .#{$namespace}-pager {
     .number {
       &:first-child {
         margin-left: 0;
@@ -144,7 +144,7 @@
       line-height: var(--el-pagination-line-height-extra-small);
       .#{$namespace}-input__suffix-inner {
         line-height: var(--el-pagination-line-height-extra-small);
-        i.el-select__caret {
+        i.#{$namespace}-select__caret {
           line-height: var(--el-pagination-line-height-extra-small);
         }
       }

package/theme-chalk/src/reset.scss

@@ -15,7 +15,7 @@ a {
 
   &:hover,
   &:focus {
-    color: var(--el-color-primary-light-2);
+    color: var(--el-color-primary-light-3);
   }
 
   &:active {

package/theme-chalk/src/row.scss

@@ -20,7 +20,9 @@
   @include when(justify-space-around) {
     justify-content: space-around;
   }
-
+  @include when(justify-space-evenly) {
+    justify-content: space-evenly;
+  }
   @include when(align-middle) {
     align-items: center;
   }

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

@@ -70,6 +70,14 @@ $input-inline-start: map.get($input-padding-horizontal, 'default') !default;
         opacity: 1;
         user-select: none;
       }
+
+      #{$selector}__caret {
+        cursor: not-allowed;
+      }
+
+      #{$selector}__combobox-input {
+        cursor: not-allowed;
+      }
     }
 
     #{$selector}__input-wrapper {
@@ -137,6 +145,7 @@ $input-inline-start: map.get($input-padding-horizontal, 'default') !default;
       }
       @include e(placeholder) {
         font-size: map.get($input-font-size, $size);
+        line-height: map.get($input-line-height, $size);
       }
     }
   }
@@ -201,7 +210,7 @@ $input-inline-start: map.get($input-padding-horizontal, 'default') !default;
     display: inline-flex;
     position: absolute;
     right: 12px;
-    height: 40px;
+    height: 32px;
     top: 50%;
     transform: translateY(-50%);
     color: var(--el-input-icon-color, map.get($input, 'icon-color'));

package/theme-chalk/src/select.scss

@@ -36,7 +36,7 @@
 
   &:hover:not(.#{$namespace}-select--disabled) {
     .#{$namespace}-input__inner {
-      border-color: var(--el-select-border-color-hover);
+      box-shadow: 0 0 0 1px var(--el-select-border-color-hover) inset;
     }
   }
 
@@ -47,7 +47,10 @@
     display: inline-flex;
 
     &:focus {
-      border-color: var(--el-select-input-focus-border-color) !important;
+      @include inset-input-border(
+        var(--el-select-input-focus-border-color),
+        true
+      );
     }
   }
 
@@ -79,7 +82,9 @@
       }
 
       &.#{$namespace}-icon {
+        position: relative;
         height: inherit;
+        z-index: 2;
       }
     }
 
@@ -88,7 +93,7 @@
         cursor: not-allowed;
 
         &:hover {
-          border-color: var(--el-select-disabled-border);
+          @include inset-input-border(var(--el-select-disabled-border));
         }
       }
       & .#{$namespace}-select__caret {
@@ -97,7 +102,10 @@
     }
 
     &.is-focus .#{$namespace}-input__inner {
-      border-color: var(--el-select-input-focus-border-color) !important;
+      @include inset-input-border(
+        var(--el-select-input-focus-border-color),
+        true
+      );
     }
   }
 
@@ -140,15 +148,14 @@
     flex-wrap: wrap;
   }
 
-  .#{$namespace}-tag__close {
-    margin-top: -2px;
-  }
-
   .#{$namespace}-select__tags {
     .#{$namespace}-tag {
       box-sizing: border-box;
       border-color: transparent;
       margin: 2px 6px 2px 0;
+      &:last-child {
+        margin-right: 0;
+      }
 
       .#{$namespace}-icon-close {
         background-color: var(--el-text-color-placeholder);

package/theme-chalk/src/switch.scss

@@ -112,6 +112,7 @@ $switch-font-size: map.merge(
       justify-content: center;
       align-items: center;
       left: 50%;
+      white-space: nowrap;
 
       .is-icon,
       .is-text {
@@ -170,6 +171,7 @@ $switch-font-size: map.merge(
 
       .#{$namespace}-switch__inner {
         left: 50%;
+        white-space: nowrap;
         margin-left: calc(-1px - var(--el-switch-button-size));
       }
     }

package/theme-chalk/src/table.scss

@@ -63,6 +63,7 @@
     .cell {
       padding: 0;
       text-align: center;
+      user-select: none;
     }
   }
 
@@ -396,7 +397,7 @@
 
   @include e((header-wrapper, body-wrapper)) {
     .#{$namespace}-table-column--selection {
-      .el-checkbox {
+      .#{$namespace}-checkbox {
         height: unset;
       }
     }

package/theme-chalk/src/tabs.scss

@@ -21,16 +21,19 @@
     list-style: none;
   }
   @include e(new-tab) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
     float: right;
     border: 1px solid #d3dce6;
-    height: 18px;
-    width: 18px;
-    line-height: 18px;
-    margin: 10px;
+    height: 20px;
+    width: 20px;
+    line-height: 20px;
+    margin: 10px 0 10px 10px;
     border-radius: 3px;
     text-align: center;
     font-size: 12px;
-    color: #d3dce6;
+    color: var(--el-text-color-primary);
     cursor: pointer;
     transition: all 0.15s;
 

package/theme-chalk/src/tag.scss

@@ -1,6 +1,7 @@
 @use 'sass:map';
 
 @use 'mixins/mixins' as *;
+@use 'mixins/function' as *;
 @use 'mixins/var' as *;
 @use 'common/var' as *;
 
@@ -20,39 +21,63 @@ $tag-icon-span-gap: map.merge(
   $tag-icon-span-gap
 );
 
+@function returnVarList($var, $type: 'primary') {
+  $list: ('color', 'white');
+  @if $var != false {
+    $list: ('color', $type, $var);
+  }
+  @return $list;
+}
+// false mean --el-color-white
 @mixin genTheme(
   $backgroundColorWeight,
   $borderColorWeight,
   $textColorWeight,
   $hoverColorWeight
 ) {
-  --el-tag-bg-color: #{mix(
-      map.get($tag-color, 'primary'),
-      $color-white,
-      $backgroundColorWeight
-    )};
-  --el-tag-border-color: #{mix(
-      map.get($tag-color, 'primary'),
-      $color-white,
-      $borderColorWeight
-    )};
-  --el-tag-text-color: #{mix(
-      map.get($tag-color, 'primary'),
-      $color-white,
-      $textColorWeight
-    )};
-  --el-tag-hover-color: #{mix(
-      map.get($tag-color, 'primary'),
-      $color-white,
-      $hoverColorWeight
-    )};
+  @include css-var-from-global(
+    ('tag', 'bg-color'),
+    returnVarList($backgroundColorWeight)
+  );
+  @include css-var-from-global(
+    ('tag', 'border-color'),
+    returnVarList($borderColorWeight)
+  );
+  @include css-var-from-global(
+    ('tag', 'text-color'),
+    returnVarList($textColorWeight)
+  );
+  @include css-var-from-global(
+    ('tag', 'hover-color'),
+    returnVarList($hoverColorWeight)
+  );
 
-  background-color: var(--el-tag-bg-color);
-  border-color: var(--el-tag-border-color);
-  color: var(--el-tag-text-color);
+  @each $type in $types {
+    &.#{$namespace}-tag--#{$type} {
+      @include css-var-from-global(
+        ('tag', 'bg-color'),
+        returnVarList($backgroundColorWeight, $type)
+      );
+      @include css-var-from-global(
+        ('tag', 'border-color'),
+        returnVarList($borderColorWeight, $type)
+      );
+      @include css-var-from-global(
+        ('tag', 'text-color'),
+        returnVarList($textColorWeight, $type)
+      );
+      @include css-var-from-global(
+        ('tag', 'hover-color'),
+        returnVarList($hoverColorWeight, $type)
+      );
+    }
+  }
+}
 
+@include b(tag) {
+  @include genTheme('light-9', 'light-8', '', '');
   @include when(hit) {
-    border-color: map.get($tag-color, 'primary');
+    border-color: getCssVar('color', 'primary');
   }
 
   .#{$namespace}-tag__close {
@@ -63,38 +88,10 @@ $tag-icon-span-gap: map.merge(
     }
   }
 
-  @each $type in $types {
-    &.#{$namespace}-tag--#{$type} {
-      --el-tag-bg-color: #{mix(
-          map.get($tag-color, $type),
-          $color-white,
-          $backgroundColorWeight
-        )};
-      --el-tag-border-color: #{mix(
-          map.get($tag-color, $type),
-          $color-white,
-          $borderColorWeight
-        )};
-      --el-tag-text-color: #{mix(
-          map.get($tag-color, $type),
-          $color-white,
-          $textColorWeight
-        )};
-      --el-tag-hover-color: #{mix(
-          map.get($tag-color, $type),
-          $color-white,
-          $hoverColorWeight
-        )};
-
-      @include when(hit) {
-        border-color: map.get($tag-color, $type);
-      }
-    }
-  }
-}
+  background-color: var(--el-tag-bg-color);
+  border-color: var(--el-tag-border-color);
+  color: var(--el-tag-text-color);
 
-@include b(tag) {
-  @include genTheme(10%, 20%, 100%, 100%);
   display: inline-flex;
   justify-content: center;
   align-items: center;
@@ -111,21 +108,14 @@ $tag-icon-span-gap: map.merge(
 
   --el-icon-size: 14px;
 
+  $svg-margin-size: 1px;
   .#{$namespace}-icon {
     border-radius: 50%;
-    text-align: center;
-    position: relative;
     cursor: pointer;
 
-    font-size: calc(var(--el-icon-size) - 1px);
-
+    font-size: calc(var(--el-icon-size) - #{$svg-margin-size * 2});
     height: var(--el-icon-size);
     width: var(--el-icon-size);
-    line-height: var(--el-icon-size);
-
-    svg {
-      margin: 1px;
-    }
   }
 
   .#{$namespace}-tag__close {
@@ -133,11 +123,11 @@ $tag-icon-span-gap: map.merge(
   }
 
   @include m(dark) {
-    @include genTheme(100%, 100%, 0, 80%);
+    @include genTheme('', '', false, 'light-3');
   }
 
   @include m(plain) {
-    @include genTheme(0, 40%, 100%, 100%);
+    @include genTheme(false, 'light-5', '', '');
   }
 
   &.is-closable {
@@ -166,4 +156,12 @@ $tag-icon-span-gap: map.merge(
       transform: scale(0.8);
     }
   }
+
+  @each $type in $types {
+    &.#{$namespace}-tag--#{$type} {
+      @include when(hit) {
+        border-color: getCssVar('color', $type);
+      }
+    }
+  }
 }

package/theme-chalk/src/var.scss

@@ -14,9 +14,15 @@
 
   --el-color-primary: #{$color-primary};
 
+  // get rgb
+  @each $type in (primary, success, warning, danger, error, info) {
+    @include set-css-color-rgb($type);
+  }
+
   @for $i from 1 through 9 {
     @include set-css-color-type-light('primary', $i);
   }
+  --el-color-primary-dark-2: #{map.get($colors, 'primary', 'dark-2')};
 
   // --el-color-#{$type}
   // --el-color-#{$type}-light-{$i}