element-plus 2.0.2 → 2.0.5

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,15 @@
     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'));
+    @include inset-input-border(
+      var(--el-input-border-color, map.get($input, 'border-color'))
+    );
     border-radius: var(
       --el-input-border-radius,
       map.get($input, 'border-radius')
     );
-    transition: var(--el-transition-border);
+    transition: var(--el-transition-box-shadow);
+    border: none;
 
     &::placeholder {
       color: var(
@@ -42,18 +70,12 @@
     }
 
     &:hover {
-      border-color: var(
-        --el-input-hover-border,
-        map.get($input, 'hover-border')
-      );
+      @include inset-input-border(var(--el-input-hover-border-color));
     }
 
     &:focus {
       outline: none;
-      border-color: var(
-        --el-input-focus-border,
-        map.get($input, 'focus-border')
-      );
+      @include inset-input-border(var(--el-input-focus-border-color));
     }
   }
 
@@ -106,6 +128,7 @@
     font-size: map.get($input-font-size, 'default');
     cursor: pointer;
     transition: var(--el-transition-color);
+    margin-left: 8px;
 
     &:hover {
       color: var(--el-input-clear-hover-color);
@@ -128,6 +151,7 @@
   }
 
   @include e(inner) {
+    position: relative;
     -webkit-appearance: none;
     background-color: var(--el-input-bg-color, map.get($input, 'bg-color'));
     background-image: none;
@@ -135,7 +159,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;
@@ -144,9 +167,12 @@
     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%;
-
+    @include inset-input-border(
+      var(--el-input-border-color, map.get($input, 'border-color'))
+    );
+    border: none;
     &::placeholder {
       color: var(
         --el-input-placeholder-color,
@@ -155,18 +181,16 @@
     }
 
     &:hover {
-      border-color: var(
-        --el-input-hover-border,
-        map.get($input, 'hover-border')
-      );
+      @include inset-input-border(var(--el-input-hover-border-color));
     }
 
     &:focus {
       outline: none;
-      border-color: var(
-        --el-input-focus-border,
-        map.get($input, 'focus-border')
-      );
+      @include inset-input-border(var(--el-input-focus-border-color));
+    }
+    // override edge default style
+    &[type='password']::-ms-reveal {
+      display: none;
     }
   }
 
@@ -220,17 +244,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;
 
@@ -246,7 +268,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 {
@@ -257,20 +279,22 @@
   }
 
   $input-padding-size-with-extra-icon: calc(
-    5px + map.get($input-font-size, 'default') +
-      map.get($input-padding-horizontal, 'default')
+    5px + #{map.get($input-font-size, 'default')} + #{map.get(
+        $input-padding-horizontal,
+        'default'
+      )}
   );
 
   @include m(suffix) {
+    .#{$namespace}-input__inner {
+      padding-right: $input-padding-size-with-extra-icon;
+    }
+
     @include m(password-clear) {
       .#{$namespace}-input__inner {
         padding-right: 55px;
       }
     }
-
-    .#{$namespace}-input__inner {
-      padding-right: $input-padding-size-with-extra-icon;
-    }
   }
 
   @include m(prefix) {
@@ -295,8 +319,10 @@
       }
 
       $input-padding-size-with-extra-icon: calc(
-        5px + map.get($input-font-size, $size) +
-          map.get($input-padding-horizontal, $size)
+        5px + #{map.get($input-font-size, $size)} + #{map.get(
+            $input-padding-horizontal,
+            $size
+          )}
       );
 
       &.#{$namespace}-input--prefix {
@@ -340,7 +366,6 @@
     vertical-align: middle;
     display: table-cell;
     position: relative;
-    border: $border-base;
     border-radius: var(--el-input-border-radius);
     padding: 0 20px;
     width: 1px;
@@ -353,7 +378,7 @@
     .#{$namespace}-select,
     .#{$namespace}-button {
       display: inline-block;
-      margin: -10px -20px;
+      margin: 0 -20px;
     }
 
     button.#{$namespace}-button,
@@ -363,8 +388,6 @@
       border-color: transparent;
       background-color: transparent;
       color: inherit;
-      border-top: 0;
-      border-bottom: 0;
     }
 
     .#{$namespace}-button,
@@ -377,35 +400,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/menu.scss

@@ -191,7 +191,6 @@
         border-radius: var(--el-border-radius-small);
         box-shadow: var(--el-box-shadow-light);
       }
-
       &.is-opened {
         > .#{$namespace}-sub-menu__title .#{$namespace}-sub-menu__icon-arrow {
           transform: none;
@@ -211,6 +210,10 @@
     border-radius: var(--el-border-radius-small);
     box-shadow: var(--el-box-shadow-light);
   }
+
+  .#{$namespace}-icon {
+    flex-shrink: 0;
+  }
 }
 
 @include b(menu-item) {
@@ -229,6 +232,17 @@
       color: inherit;
     }
   }
+  .#{$namespace}-menu-tooltip__trigger {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    width: 100%;
+    display: inline-flex;
+    align-items: center;
+    box-sizing: border-box;
+    padding: 0 20px;
+  }
 }
 
 @include b(sub-menu) {

package/theme-chalk/src/message-box.scss

@@ -188,8 +188,8 @@
       margin-left: 0;
     }
 
-    @include e((btns, content)) {
-      text-align: center;
+    @include e(btns) {
+      justify-content: center;
     }
 
     @include e(content) {
@@ -197,6 +197,8 @@
 
       padding-left: $padding-horizontal;
       padding-right: $padding-horizontal;
+
+      text-align: center;
     }
   }
 }

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

@@ -1,35 +1,139 @@
 @use 'sass:map';
 
+@use '../mixins/var' as *;
+@use '../mixins/function' as *;
 @use '../common/var' as *;
 
 @mixin button-plain($color, $type) {
-  --el-button-text-color: var(--el-color-#{$type});
-  --el-button-bg-color: #{map.get($colors, $type, 'light-9')};
-  --el-button-border-color: #{map.get($colors, $type, 'light-6')};
+  $button-color-types: (
+    '': (
+      'text-color': (
+        'color',
+        $type,
+      ),
+      'bg-color': (
+        'color',
+        $type,
+        'light-9',
+      ),
+      'border-color': (
+        'color',
+        $type,
+        'light-5',
+      ),
+    ),
+    'hover': (
+      'text-color': (
+        'color',
+        'white',
+      ),
+      'bg-color': (
+        'color',
+        $type,
+      ),
+      'border-color': (
+        'color',
+        $type,
+      ),
+    ),
+    'active': (
+      'text-color': (
+        'color',
+        'white',
+      ),
+      'border-color': (
+        'color',
+        $type,
+      ),
+    ),
+  );
 
-  --el-button-hover-text-color: var(--el-color-white);
-  --el-button-hover-bg-color: var(--el-color-#{$type});
-  --el-button-hover-border-color: var(--el-color-#{$type});
-
-  --el-button-active-text-color: var(--el-color-white);
-  --el-button-active-border-color: var(--el-color-#{$type});
+  @each $type, $typeMap in $button-color-types {
+    @each $typeColor, $list in $typeMap {
+      @include css-var-from-global(('button', $type, $typeColor), $list);
+    }
+  }
 
   &.is-disabled {
     &,
     &:hover,
     &:focus,
     &:active {
-      color: map.get($colors, $type, 'light-4');
-      background-color: map.get($colors, $type, 'light-9');
-      border-color: map.get($colors, $type, 'light-8');
+      color: getCssVar('color', $type, 'light-5');
+      background-color: getCssVar('color', $type, 'light-9');
+      border-color: getCssVar('color', $type, 'light-8');
     }
   }
 }
 
 @mixin button-variant($type) {
-  --el-button-text-color: var(--el-color-white);
-  --el-button-hover-text-color: var(--el-color-white);
-  --el-button-disabled-text-color: var(--el-color-white);
+  $button-color-types: (
+    '': (
+      'text-color': (
+        'color',
+        'white',
+      ),
+      'bg-color': (
+        'color',
+        $type,
+      ),
+      'border-color': (
+        'color',
+        $type,
+      ),
+    ),
+    'hover': (
+      'text-color': (
+        'color',
+        'white',
+      ),
+      'bg-color': (
+        'color',
+        $type,
+        'light-3',
+      ),
+      'border-color': (
+        'color',
+        $type,
+        'light-3',
+      ),
+    ),
+    'active': (
+      'bg-color': (
+        'color',
+        $type,
+        'dark-2',
+      ),
+      'border-color': (
+        'color',
+        $type,
+        'dark-2',
+      ),
+    ),
+    'disabled': (
+      'text-color': (
+        'color',
+        'white',
+      ),
+      'bg-color': (
+        'color',
+        $type,
+        'light-5',
+      ),
+      'border-color': (
+        'color',
+        $type,
+        'light-5',
+      ),
+    ),
+  );
+
+  @each $type, $typeMap in $button-color-types {
+    @each $typeColor, $list in $typeMap {
+      @include css-var-from-global(('button', $type, $typeColor), $list);
+    }
+  }
+
   &.is-plain {
     @include button-plain(var(--el-button-bg-color), $type);
   }

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

@@ -1,5 +1,7 @@
 @use 'sass:map';
 
+@use 'config';
+@use 'function' as *;
 @use '../common/var' as *;
 
 @mixin set-css-color-type-light($type, $i) {
@@ -8,14 +10,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 +26,18 @@
     --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)};
+}
+
+// generate css var from existing css var
+// for example:
+// @include css-var-from-global(('button', 'text-color'), ('color', $type))
+// --el-button-text-color: var(--el-color-#{$type});
+@mixin css-var-from-global($var, $gVar) {
+  $varName: joinVarName($var);
+  $gVarName: joinVarName($gVar);
+  #{$varName}: var(#{$gVarName});
+}

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

@@ -41,3 +41,20 @@
   @return containsModifier($selector) or containWhenFlag($selector) or
     containPseudoClass($selector);
 }
+
+// join var name
+// joinVarName('button', 'text-color') => '--el-button-text-color'
+@function joinVarName($list) {
+  $name: '--' + config.$namespace;
+  @each $item in $list {
+    @if $item != '' {
+      $name: $name + '-' + $item;
+    }
+  }
+  @return $name;
+}
+
+// getCssVar('button', 'text-color') => var(--el-button-text-color)
+@function getCssVar($args...) {
+  @return var(#{joinVarName($args)});
+}

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/option-item.scss

@@ -47,12 +47,12 @@
   }
 
   @include when(multiple) {
-    .el-select-dropdown__option-item {
+    .#{$namespace}-select-dropdown__option-item {
       &.is-selected {
         color: map.get($select-option, 'selected-text-color');
         background-color: map.get($select-dropdown, 'bg-color');
 
-        & .el-icon {
+        & .#{$namespace}-icon {
           position: absolute;
           right: 20px;
           top: 0;

package/theme-chalk/src/page-header.scss

@@ -28,7 +28,7 @@
       display: flex;
       align-items: center;
 
-      .el-icon {
+      .#{$namespace}-icon {
         font-size: inherit;
       }
     }