element-plus 2.0.2 → 2.0.3

package/theme-chalk/src/button.scss

@@ -230,7 +230,7 @@ $button-icon-span-gap: map.merge(
 
     &:hover,
     &:focus {
-      color: var(--el-color-primary-light-2);
+      color: var(--el-color-primary-light-3);
       border-color: transparent;
       background-color: transparent;
     }

package/theme-chalk/src/cascader.scss

@@ -16,10 +16,7 @@
   &:not(.is-disabled):hover {
     .#{$namespace}-input__inner {
       cursor: pointer;
-      border-color: var(
-        --el-input-hover-border,
-        map.get($input, 'hover-border')
-      );
+      box-shadow: 0 0 0 1px var(--el-input-hover-border-color) inset;
     }
   }
 
@@ -30,10 +27,12 @@
       text-overflow: ellipsis;
 
       &:focus {
-        border-color: var(
-          --el-input-focus-border,
-          map.get($input, 'focus-border')
-        );
+        box-shadow: 0 0 0 1px
+          var(
+            --el-input-focus-border-color,
+            map.get($input, 'focus-border-color')
+          )
+          inset;
       }
     }
 
@@ -65,10 +64,12 @@
 
     @include when(focus) {
       .#{$namespace}-input__inner {
-        border-color: var(
-          --el-input-focus-border,
-          map.get($input, 'focus-border')
-        );
+        box-shadow: 0 0 0 1px
+          var(
+            --el-input-focus-border-color,
+            map.get($input, 'focus-border-color')
+          )
+          inset;
       }
     }
   }

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

@@ -1,10 +1,11 @@
 @use 'sass:map';
 
 @use 'mixins/mixins' as *;
+@use 'mixins/function' as *;
 @use 'common/var' as *;
 
 @include b(check-tag) {
-  background-color: var(--el-bg-color);
+  background-color: getCssVar('color', 'info', 'light-9');
   border-radius: var(--el-border-radius-base);
   color: var(--el-color-info);
   cursor: pointer;
@@ -14,15 +15,16 @@
   padding: 7px 15px;
   transition: var(--el-transition-all);
   font-weight: bold;
+
   &:hover {
-    background-color: rgb(220, 223, 230);
+    background-color: getCssVar('color', 'info', 'light-7');
   }
 
   @include when(checked) {
-    background-color: #deedfc;
-    color: map.get($colors, 'primary', 'light-1');
+    background-color: getCssVar('color', 'primary', 'light-8');
+    color: getCssVar('color', 'primary', 'light-1');
     &:hover {
-      background-color: map.get($colors, 'primary', 'light-7');
+      background-color: getCssVar('color', 'primary', 'light-7');
     }
   }
 }

package/theme-chalk/src/checkbox-button.scss

@@ -67,7 +67,7 @@
       color: var(--el-checkbox-button-checked-text-color);
       background-color: var(--el-checkbox-button-checked-bg-color);
       border-color: var(--el-checkbox-button-checked-border-color);
-      box-shadow: -1px 0 0 0 var(--el-color-primary-light-4);
+      box-shadow: -1px 0 0 0 var(--el-color-primary-light-7);
     }
     &:first-child .#{$namespace}-checkbox-button__inner {
       border-left-color: var(--el-checkbox-button-checked-border-color);

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

@@ -47,6 +47,7 @@ $color-error: map.get($colors, 'error', 'base') !default;
 $color-info: map.get($colors, 'info', 'base') !default;
 
 // https://sass-lang.com/documentation/values/maps#immutability
+// mix color with white
 @mixin set-color-type-light($type, $number) {
   $colors: map.deep-merge(
     (
@@ -63,6 +64,23 @@ $color-info: map.get($colors, 'info', 'base') !default;
   ) !global;
 }
 
+// mix color with black
+@mixin set-color-type-dark($type, $number) {
+  $colors: map.deep-merge(
+    (
+      $type: (
+        'dark-#{$number}':
+          mix(
+            $color-black,
+            map.get($colors, $type, 'base'),
+            math.percentage(math.div($number, 10))
+          ),
+      ),
+    ),
+    $colors
+  ) !global;
+}
+
 // $colors.primary.light-i
 // --el-color-primary-light-i
 // 10% 53a8ff
@@ -79,6 +97,10 @@ $color-info: map.get($colors, 'info', 'base') !default;
     @include set-color-type-light($type, $i);
   }
 }
+// --el-color-primary-dark-2
+@each $type in $types {
+  @include set-color-type-dark($type, 2);
+}
 
 $text-color: () !default;
 $text-color: map.merge(
@@ -440,14 +462,17 @@ $input: map.merge(
   (
     'text-color': var(--el-text-color-regular),
     'border': var(--el-border-base),
+    'hover-border': var(--el-border-color-hover),
+    'focus-border': var(--el-color-primary),
+    'transparent-border': 0 0 0 1px transparent inset,
     'border-color': var(--el-border-color-base),
     'border-radius': var(--el-border-radius-base),
     'bg-color': var(--el-color-white),
     'icon-color': var(--el-text-color-placeholder),
     'placeholder-color': var(--el-text-color-placeholder),
-    'hover-border': var(--el-border-color-hover),
+    'hover-border-color': var(--el-border-color-hover),
     'clear-hover-color': var(--el-text-color-secondary),
-    'focus-border': var(--el-color-primary),
+    'focus-border-color': var(--el-color-primary),
   ),
   $input
 );
@@ -770,8 +795,6 @@ $tag: map.merge(
   $tag
 );
 
-$tag-color: () !default;
-
 $tag-height: () !default;
 $tag-height: map.merge(
   (
@@ -802,15 +825,6 @@ $tag-icon-size: map.merge(
   $tag-icon-size
 );
 
-@each $type in $types {
-  $tag-color: map.merge(
-    (
-      $type: map.get($colors, $type, 'base'),
-    ),
-    $tag-color
-  ) !global;
-}
-
 // Tree
 // css3 var in packages/theme-chalk/src/tree.scss
 $tree: () !default;
@@ -830,7 +844,7 @@ $dropdown: map.merge(
   (
     'menu-box-shadow': var(--el-box-shadow-light),
     'menuItem-hover-fill': var(--el-color-primary-light-9),
-    'menuItem-hover-color': var(--el-color-primary-light-2),
+    'menuItem-hover-color': var(--el-color-primary-light-3),
     'menu-index': 10,
   ),
   $dropdown
@@ -1207,6 +1221,8 @@ $transition: map.merge(
     'fade-linear': opacity var(--el-transition-duration-fast) linear,
     'border': border-color var(--el-transition-duration-fast)
       var(--el-transition-function-ease-in-out-bezier),
+    'box-shadow': box-shadow var(--el-transition-duration-fast)
+      var(--el-transition-function-ease-in-out-bezier),
     'color': color var(--el-transition-duration-fast)
       var(--el-transition-function-ease-in-out-bezier),
   ),
@@ -1273,15 +1289,15 @@ $breakpoints: (
 ) !default;
 
 $breakpoints-spec: (
-  'xs-only': '(max-width: #{$sm})',
+  'xs-only': '(max-width: #{$sm - 1})',
   'sm-and-up': '(min-width: #{$sm})',
-  'sm-only': '(min-width: #{$sm}) and (max-width: #{$md})',
-  'sm-and-down': '(max-width: #{$md})',
+  'sm-only': '(min-width: #{$sm}) and (max-width: #{$md - 1})',
+  'sm-and-down': '(max-width: #{$md - 1})',
   'md-and-up': '(min-width: #{$md})',
-  'md-only': '(min-width: #{$md}) and (max-width: #{$lg})',
-  'md-and-down': '(max-width: #{$lg})',
+  'md-only': '(min-width: #{$md}) and (max-width: #{$lg - 1})',
+  'md-and-down': '(max-width: #{$lg - 1})',
   'lg-and-up': '(min-width: #{$lg})',
-  'lg-only': '(min-width: #{$lg}) and (max-width: #{$xl})',
-  'lg-and-down': '(max-width: #{$xl})',
+  'lg-only': '(min-width: #{$lg}) and (max-width: #{$xl - 1})',
+  'lg-and-down': '(max-width: #{$xl - 1})',
   'xl-only': '(min-width: #{$xl})',
 ) !default;

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

@@ -0,0 +1,6 @@
+html.dark {
+  --el-bg-color: #1a1a1a;
+
+  // border
+  --el-border-color-base: #434343;
+}

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

@@ -65,12 +65,12 @@
 
     &.today {
       position: relative;
-      .el-date-table-cell__text {
+      .#{$namespace}-date-table-cell__text {
         color: var(--el-color-primary);
         font-weight: bold;
       }
-      &.start-date .el-date-table-cell__text,
-      &.end-date .el-date-table-cell__text {
+      &.start-date .#{$namespace}-date-table-cell__text,
+      &.end-date .#{$namespace}-date-table-cell__text {
         color: $color-white;
       }
     }
@@ -79,47 +79,47 @@
       color: var(--el-datepicker-hover-text-color);
     }
 
-    &.in-range .el-date-table-cell {
+    &.in-range .#{$namespace}-date-table-cell {
       background-color: var(--el-datepicker-inrange-bg-color);
       &:hover {
         background-color: var(--el-datepicker-inrange-hover-bg-color);
       }
     }
 
-    &.current:not(.disabled) .el-date-table-cell__text {
+    &.current:not(.disabled) .#{$namespace}-date-table-cell__text {
       color: $color-white;
       background-color: var(--el-datepicker-active-color);
     }
-    &.start-date .el-date-table-cell,
-    &.end-date .el-date-table-cell {
+    &.start-date .#{$namespace}-date-table-cell,
+    &.end-date .#{$namespace}-date-table-cell {
       color: $color-white;
     }
 
-    &.start-date .el-date-table-cell__text,
-    &.end-date .el-date-table-cell__text {
+    &.start-date .#{$namespace}-date-table-cell__text,
+    &.end-date .#{$namespace}-date-table-cell__text {
       background-color: var(--el-datepicker-active-color);
     }
 
-    &.start-date .el-date-table-cell {
+    &.start-date .#{$namespace}-date-table-cell {
       margin-left: 5px;
       border-top-left-radius: 15px;
       border-bottom-left-radius: 15px;
     }
 
-    &.end-date .el-date-table-cell {
+    &.end-date .#{$namespace}-date-table-cell {
       margin-right: 5px;
       border-top-right-radius: 15px;
       border-bottom-right-radius: 15px;
     }
 
-    &.disabled .el-date-table-cell {
+    &.disabled .#{$namespace}-date-table-cell {
       background-color: var(--el-bg-color);
       opacity: 1;
       cursor: not-allowed;
       color: var(--el-text-color-placeholder);
     }
 
-    &.selected .el-date-table-cell {
+    &.selected .#{$namespace}-date-table-cell {
       margin-left: 5px;
       margin-right: 5px;
       background-color: var(--el-datepicker-inrange-bg-color);
@@ -129,7 +129,7 @@
       }
     }
 
-    &.selected .el-date-table-cell__text {
+    &.selected .#{$namespace}-date-table-cell__text {
       background-color: var(--el-datepicker-active-color);
       color: $color-white;
       border-radius: 15px;

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

@@ -18,7 +18,7 @@
 
 @include b(date-editor) {
   @include set-component-css-var('date-editor', $date-editor);
-
+  @include set-component-css-var('input', $input);
   position: relative;
   display: inline-block;
   text-align: left;
@@ -144,10 +144,9 @@
   }
 
   @include when(active) {
-    border-color: var(--el-color-primary);
-
+    @include inset-input-border(var(--el-input-focus-border-color));
     &:hover {
-      border-color: var(--el-color-primary);
+      @include inset-input-border(var(--el-input-focus-border-color));
     }
   }
 

package/theme-chalk/src/dialog.scss

@@ -45,13 +45,17 @@
   @include e(header) {
     padding: var(--el-dialog-padding-primary);
     padding-bottom: 10px;
+    margin-right: 16px;
+    word-break: break-all;
   }
 
   @include e(headerbtn) {
     position: absolute;
-    top: var(--el-dialog-padding-primary);
-    right: var(--el-dialog-padding-primary);
+    top: 6px;
+    right: 0;
     padding: 0;
+    width: 54px;
+    height: 54px;
     background: transparent;
     border: none;
     outline: none;

package/theme-chalk/src/form.scss

@@ -204,13 +204,13 @@ $form-item-label-top-margin-bottom: map.merge(
     .#{$namespace}-textarea__inner {
       &,
       &:focus {
-        border-color: var(--el-color-danger);
+        box-shadow: 0 0 0 1px var(--el-color-danger) inset;
       }
     }
     .#{$namespace}-input-group__append,
     .#{$namespace}-input-group__prepend {
       .#{$namespace}-input__inner {
-        border-color: transparent;
+        box-shadow: 0 0 0 1px transparent inset;
       }
     }
     .#{$namespace}-input__validateIcon {

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

@@ -49,10 +49,12 @@
       color: var(--el-color-primary);
 
       & ~ .#{$namespace}-input:not(.is-disabled) .#{$namespace}-input__inner {
-        border-color: var(
-          --el-input-focus-border,
-          map.get($input, 'focus-border')
-        );
+        box-shadow: 0 0 0 1px
+          var(
+            --el-input-focus-border-color,
+            map.get($input, 'focus-border-color')
+          )
+          inset;
       }
     }