@element-plus/nightly 0.0.20220220 → 0.0.20220222

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/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-5);
     }
     &: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(
@@ -439,15 +461,18 @@ $input: () !default;
 $input: map.merge(
   (
     'text-color': var(--el-text-color-regular),
-    'border': var(--el-border-base),
+    'border': 0 0 0 1px var(--el-input-border-color) inset,
+    'hover-border': 0 0 0 1px var(--el-input-hover-border-color) inset,
+    'focus-border': 0 0 0 1px var(--el-input-focus-border-color) inset,
+    '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
 );
@@ -830,7 +855,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 +1232,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 +1300,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/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;
       }
     }
 

package/theme-chalk/src/input.scss

@@ -4,6 +4,30 @@
 @use 'mixins/var' as *;
 @use 'common/var' as *;
 
+@mixin inset-prepend-border($color) {
+  box-shadow: 1px 0 0 0 $color inset, 0 1px 0 0 $color inset,
+    0 -1px 0 0 $color inset;
+}
+
+@mixin inset-append-border($color) {
+  box-shadow: 0 1px 0 0 $color inset, 0 -1px 0 0 $color inset,
+    -1px 0 0 0 $color inset;
+}
+
+@mixin inset-prepend-input-border($color) {
+  box-shadow: 1px 0 0 0px $color inset, 1px 0 0 0px $color,
+    0px 1px 0 0px $color inset, 0px -1px 0 0px $color inset !important;
+}
+
+@mixin inset-append-input-border($color) {
+  box-shadow: -1px 0 0 0px $color, -1px 0 0 0px $color inset,
+    0px 1px 0 0px $color inset, 0px -1px 0 0px $color inset !important;
+}
+
+@mixin mixed-input-border($color) {
+  box-shadow: 0 0 0 1px $color inset;
+}
+
 @include b(textarea) {
   @include set-component-css-var('input', $input);
 }
@@ -16,6 +40,7 @@
   font-size: var(--el-font-size-base);
 
   @include e(inner) {
+    position: relative;
     display: block;
     resize: vertical;
     padding: 5px 15px;
@@ -27,12 +52,12 @@
     color: var(--el-input-text-color, map.get($input, 'text-color'));
     background-color: var(--el-input-bg-color, map.get($input, 'bg-color'));
     background-image: none;
-    border: var(--el-input-border, map.get($input, 'border'));
+    box-shadow: var(--el-input-border, map.get($input, 'border'));
     border-radius: var(
       --el-input-border-radius,
       map.get($input, 'border-radius')
     );
-    transition: var(--el-transition-border);
+    transition: var(--el-transition-box-shadow);
 
     &::placeholder {
       color: var(
@@ -42,18 +67,12 @@
     }
 
     &:hover {
-      border-color: var(
-        --el-input-hover-border,
-        map.get($input, 'hover-border')
-      );
+      box-shadow: var(--el-input-hover-border);
     }
 
     &:focus {
       outline: none;
-      border-color: var(
-        --el-input-focus-border,
-        map.get($input, 'focus-border')
-      );
+      box-shadow: var(--el-input-focus-border);
     }
   }
 
@@ -129,6 +148,7 @@
   }
 
   @include e(inner) {
+    position: relative;
     -webkit-appearance: none;
     background-color: var(--el-input-bg-color, map.get($input, 'bg-color'));
     background-image: none;
@@ -136,7 +156,6 @@
       --el-input-border-radius,
       map.get($input, 'border-radius')
     );
-    border: var(--el-input-border, map.get($input, 'border'));
     box-sizing: border-box;
     color: var(--el-input-text-color, map.get($input, 'text-color'));
     display: inline-block;
@@ -145,8 +164,9 @@
     line-height: map.get($input-height, 'default');
     outline: none;
     padding: 0 map.get($input-padding-horizontal, 'default')-$border-width-base;
-    transition: var(--el-transition-border);
+    transition: var(--el-transition-box-shadow);
     width: 100%;
+    box-shadow: var(--el-input-border, map.get($input, 'border'));
 
     &::placeholder {
       color: var(
@@ -156,18 +176,12 @@
     }
 
     &:hover {
-      border-color: var(
-        --el-input-hover-border,
-        map.get($input, 'hover-border')
-      );
+      box-shadow: var(--el-input-hover-border);
     }
 
     &:focus {
       outline: none;
-      border-color: var(
-        --el-input-focus-border,
-        map.get($input, 'focus-border')
-      );
+      box-shadow: var(--el-input-focus-border);
     }
   }
 
@@ -221,17 +235,15 @@
   @include when(active) {
     .#{$namespace}-input__inner {
       outline: none;
-      border-color: var(
-        --el-input-focus-border,
-        map.get($input, 'focus-color')
-      );
+      box-shadow: 0 0 0 1px
+        var(--el-input-focus-border, map.get($input, 'focus-color')) inset;
     }
   }
 
   @include when(disabled) {
     .#{$namespace}-input__inner {
       background-color: map.get($input-disabled, 'fill');
-      border-color: map.get($input-disabled, 'border');
+      box-shadow: 0 0 0 1px map.get($input-disabled, 'border') inset;
       color: map.get($input-disabled, 'text-color');
       cursor: not-allowed;
 
@@ -247,7 +259,7 @@
 
   @include when(exceed) {
     .#{$namespace}-input__inner {
-      border-color: var(--el-color-danger);
+      box-shadow: 0 0 0 1px var(--el-color-danger) inset;
     }
 
     .#{$namespace}-input__suffix {
@@ -341,7 +353,6 @@
     vertical-align: middle;
     display: table-cell;
     position: relative;
-    border: $border-base;
     border-radius: var(--el-input-border-radius);
     padding: 0 20px;
     width: 1px;
@@ -354,7 +365,7 @@
     .#{$namespace}-select,
     .#{$namespace}-button {
       display: inline-block;
-      margin: -10px -20px;
+      margin: 0 -20px;
     }
 
     button.#{$namespace}-button,
@@ -364,8 +375,6 @@
       border-color: transparent;
       background-color: transparent;
       color: inherit;
-      border-top: 0;
-      border-bottom: 0;
     }
 
     .#{$namespace}-button,
@@ -378,35 +387,127 @@
     border-right: 0;
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
+    @include inset-prepend-border(var(--el-input-border-color));
   }
 
   @include e(append) {
     border-left: 0;
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
+    @include inset-append-border(var(--el-input-border-color));
   }
 
   @include m(prepend) {
     .#{$namespace}-input__inner {
+      box-shadow: 1px 0 0 0px var(--el-input-border-color) inset,
+        0px 1px 0 0px var(--el-input-border-color) inset,
+        0px -1px 0 0px var(--el-input-border-color) inset;
+    }
+
+    > .#{$namespace}-input__inner {
       border-top-left-radius: 0;
       border-bottom-left-radius: 0;
+      @include mixed-input-border(var(--el-input-border-color));
+      &:hover {
+        z-index: 1;
+        @include mixed-input-border(var(--el-input-hover-border-color));
+      }
+
+      &:focus {
+        outline: none;
+        z-index: 2;
+        @include mixed-input-border(var(--el-input-focus-border-color));
+      }
     }
-    .#{$namespace}-select
-      .#{$namespace}-input.is-focus
-      .#{$namespace}-input__inner {
-      border-color: transparent;
+
+    @include e(prepend) {
+      .#{$namespace}-select {
+        .#{$namespace}-input {
+          .#{$namespace}-input__inner {
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+            &:focus {
+              outline: none;
+              z-index: 2;
+              @include inset-prepend-input-border(
+                var(--el-input-focus-border-color)
+              );
+            }
+          }
+          &.is-focus {
+            .#{$namespace}-input__inner {
+              @include inset-prepend-input-border(
+                var(--el-input-focus-border-color)
+              );
+              z-index: 2;
+              &:focus {
+                outline: none;
+                z-index: 2;
+                @include inset-prepend-input-border(
+                  var(--el-input-focus-border-color)
+                );
+              }
+            }
+          }
+        }
+        &:hover {
+          .#{$namespace}-input__inner {
+            z-index: 1;
+            @include inset-prepend-input-border(
+              var(--el-input-hover-border-color)
+            );
+          }
+        }
+      }
     }
   }
 
   @include m(append) {
-    .#{$namespace}-input__inner {
+    > .#{$namespace}-input__inner {
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
     }
-    .#{$namespace}-select
-      .#{$namespace}-input.is-focus
-      .#{$namespace}-input__inner {
-      border-color: transparent;
+    @include e(append) {
+      .#{$namespace}-select {
+        .#{$namespace}-input {
+          .#{$namespace}-input__inner {
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+            @include inset-append-input-border(var(--el-input-border-color));
+            &:focus {
+              outline: none;
+              z-index: 2;
+              @include inset-append-input-border(
+                var(--el-input-focus-border-color)
+              );
+            }
+          }
+          &.is-focus {
+            .#{$namespace}-input__inner {
+              outline: none;
+              z-index: 2;
+              @include inset-append-input-border(
+                var(--el-input-focus-border-color)
+              );
+              &:focus {
+                outline: none;
+                z-index: 2;
+                @include inset-append-input-border(
+                  var(--el-input-focus-border-color)
+                );
+              }
+            }
+          }
+        }
+        &:hover {
+          .#{$namespace}-input__inner {
+            z-index: 1;
+            @include inset-append-input-border(
+              var(--el-input-hover-border-color)
+            );
+          }
+        }
+      }
     }
   }
 }

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

@@ -19,7 +19,7 @@
     &:hover,
     &:focus,
     &:active {
-      color: map.get($colors, $type, 'light-4');
+      color: map.get($colors, $type, 'light-5');
       background-color: map.get($colors, $type, 'light-9');
       border-color: map.get($colors, $type, 'light-8');
     }

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

@@ -8,14 +8,10 @@
 
 @mixin set-css-color-type($type) {
   --el-color-#{$type}: #{map.get($colors, $type, 'base')};
-  --el-color-#{$type}-light: #{map.get($colors, $type, 'light-8')};
-  --el-color-#{$type}-lighter: #{map.get($colors, $type, 'light-9')};
-
-  // need to be considered
-  // may be we do not need add it to css var
-  // @each $i in (2, 4, 5, 6, 8, 9) {
-  //   @include set-css-color-type-light($type, $i);
-  // }
+  @each $i in (3, 5, 7, 8, 9) {
+    @include set-css-color-type-light($type, $i);
+  }
+  --el-color-#{$type}-dark-2: #{map.get($colors, $type, 'dark-2')};
 }
 
 @mixin set-css-var-type($name, $type, $variables) {
@@ -28,3 +24,8 @@
     --el-#{$name}-#{$attribute}: #{$value};
   }
 }
+
+@mixin set-css-color-rgb($type) {
+  $color: map.get($colors, $type, 'base');
+  --el-color-#{$type}-rgb: #{red($color)}, #{green($color)}, #{blue($color)};
+}

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

@@ -222,3 +222,11 @@
     }
   }
 }
+
+@mixin inset-input-border($color, $important: false) {
+  @if $important == true {
+    box-shadow: 0 0 0 1px $color inset !important;
+  } @else {
+    box-shadow: 0 0 0 1px $color inset;
+  }
+}

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/select-v2.scss

@@ -137,6 +137,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 +202,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
+      );
     }
   }