element-plus 2.0.4 → 2.1.0

package/theme-chalk/src/cascader-panel.scss

@@ -33,7 +33,7 @@
 
   @include e(wrap) {
     // Raise the priority
-    &.el-scrollbar__wrap {
+    &.#{$namespace}-scrollbar__wrap {
       height: 204px;
     }
   }

package/theme-chalk/src/cascader.scss

@@ -149,6 +149,20 @@
     }
   }
 
+  @include e(collapse-tags) {
+    white-space: normal;
+    z-index: var(--el-index-normal);
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+
+  @include e(collapse-tag) {
+    line-height: inherit;
+    height: inherit;
+    display: flex;
+  }
+
   @include e(suggestion-panel) {
     border-radius: var(--el-cascader-menu-radius);
   }
@@ -196,7 +210,7 @@
     flex: 1;
     height: 24px;
     min-width: 60px;
-    margin: 2px 0 2px 15px;
+    margin: 2px 0 2px map.get($input-padding-horizontal, 'default')-$border-width-base;
     padding: 0;
     color: var(--el-cascader-menu-text-color);
     border: none;

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

@@ -1,7 +1,6 @@
 @use 'sass:map';
 
 @use 'mixins/mixins' as *;
-@use 'mixins/function' as *;
 @use 'common/var' as *;
 
 @include b(check-tag) {

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

@@ -87,8 +87,8 @@
     var(--el-transition-duration) padding-bottom ease-in-out;
 }
 
-.el-collapse-transition-leave-active,
-.el-collapse-transition-enter-active {
+.#{$namespace}-collapse-transition-leave-active,
+.#{$namespace}-collapse-transition-enter-active {
   transition: var(--el-transition-duration) max-height ease-in-out,
     var(--el-transition-duration) padding-top ease-in-out,
     var(--el-transition-duration) padding-bottom ease-in-out;
@@ -104,12 +104,17 @@
 .#{$namespace}-list-leave-active {
   transition: all 1s;
 }
+
 .#{$namespace}-list-enter-from,
-.#{$namespace}-list-leave-active {
+.#{$namespace}-list-leave-to {
   opacity: 0;
   transform: translateY(-30px);
 }
 
+.#{$namespace}-list-leave-active {
+  position: absolute !important;
+}
+
 .#{$namespace}-opacity-transition {
   transition: opacity var(--el-transition-duration)
     cubic-bezier(0.55, 0, 0.1, 1);

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

@@ -381,6 +381,16 @@ $select-dropdown: map.merge(
   $select-dropdown
 );
 
+$select-tags-prefix-padding: () !default;
+$select-tags-prefix-padding: map.merge(
+  (
+    'large': 8px,
+    'default': 6px,
+    'small': 4px,
+  ),
+  $select-tags-prefix-padding
+);
+
 // Alert
 // css3 var in packages/theme-chalk/src/alert.scss
 $alert: () !default;
@@ -422,6 +432,7 @@ $message: map.merge(
   (
     'min-width': 380px,
     'bg-color': #edf2fc,
+    'border-color': var(--el-border-color-lighter),
     'padding': 15px 15px 15px 20px,
     'close-size': 16px,
     'close-icon-color': var(--el-text-color-placeholder),
@@ -661,6 +672,7 @@ $dialog: map.merge(
     'content-font-size': 14px,
     'font-line-height': var(--el-font-line-height-primary),
     'padding-primary': 20px,
+    'border-radius': var(--el-border-radius-small),
   ),
   $dialog
 );
@@ -681,6 +693,8 @@ $table: map.merge(
     'bg-color': var(--el-color-white),
     'tr-bg-color': var(--el-color-white),
     'expanded-cell-bg-color': var(--el-color-white),
+    'fixed-left-column': inset 10px 0 10px -10px rgb(0 0 0 / 15%),
+    'fixed-right-column': inset -10px 0 10px -10px rgb(0 0 0 / 15%),
   ),
   $table
 );
@@ -1086,8 +1100,8 @@ $link: map.merge(
   (
     'font-size': var(--el-font-size-base),
     'font-weight': var(--el-font-weight-primary),
-    'default-text-color': var(--el-text-color-regular),
-    'default-active-color': var(--el-color-primary),
+    'text-color': var(--el-text-color-regular),
+    'hover-text-color': var(--el-color-primary),
     'disabled-text-color': var(--el-text-color-placeholder),
   ),
   $link
@@ -1232,7 +1246,7 @@ $transition: map.merge(
 $transition-duration: () !default;
 $transition-duration: map.merge(
   (
-    'default': 0.3s,
+    '': 0.3s,
     'fast': 0.2s,
   ),
   $transition-duration

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

@@ -8,25 +8,25 @@
   @include when(week-mode) {
     .#{$namespace}-date-table__row {
       &:hover {
-        .el-date-table-cell {
+        .#{$namespace}-date-table-cell {
           background-color: var(--el-datepicker-inrange-bg-color);
         }
         td.available:hover {
           color: var(--el-datepicker-text-color);
         }
-        td:first-child .el-date-table-cell {
+        td:first-child .#{$namespace}-date-table-cell {
           margin-left: 5px;
           border-top-left-radius: 15px;
           border-bottom-left-radius: 15px;
         }
-        td:last-child .el-date-table-cell {
+        td:last-child .#{$namespace}-date-table-cell {
           margin-right: 5px;
           border-top-right-radius: 15px;
           border-bottom-right-radius: 15px;
         }
       }
 
-      &.current .el-date-table-cell {
+      &.current .#{$namespace}-date-table-cell {
         background-color: var(--el-datepicker-inrange-bg-color);
       }
     }

package/theme-chalk/src/dialog.scss

@@ -12,7 +12,7 @@
   position: relative;
   margin: var(--el-dialog-margin-top, 15vh) auto 50px;
   background: var(--el-dialog-bg-color);
-  border-radius: var(--el-border-radius-small);
+  border-radius: var(--el-dialog-border-radius);
   box-shadow: var(--el-dialog-box-shadow);
   box-sizing: border-box;
   width: var(--el-dialog-width, 50%);

package/theme-chalk/src/dropdown.scss

@@ -49,6 +49,11 @@ $dropdown-divider-width: 1px !default;
   line-height: 1;
   vertical-align: top;
 
+  &.is-disabled {
+    color: var(--el-text-color-placeholder);
+    cursor: not-allowed;
+  }
+
   @include e(popper) {
     @include set-component-css-var('dropdown', $dropdown);
 
@@ -160,6 +165,7 @@ $dropdown-menu-padding-vertical: map.merge(
   border: none;
   border-radius: var(--el-border-radius-base);
   box-shadow: none;
+  list-style: none;
 
   @include e(item) {
     display: flex;

package/theme-chalk/src/input.scss

@@ -188,6 +188,10 @@
       outline: none;
       @include inset-input-border(var(--el-input-focus-border-color));
     }
+    // override edge default style
+    &[type='password']::-ms-reveal {
+      display: none;
+    }
   }
 
   @include e(suffix) {
@@ -275,8 +279,10 @@
   }
 
   $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) {
@@ -313,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 {

package/theme-chalk/src/link.scss

@@ -2,6 +2,7 @@
 
 @use 'mixins/mixins' as *;
 @use 'mixins/var' as *;
+@use 'mixins/utils' as *;
 @use 'common/var' as *;
 
 @include b(link) {
@@ -19,8 +20,14 @@
   outline: none;
   cursor: pointer;
   padding: 0;
-  font-size: var(--el-link-font-size);
-  font-weight: var(--el-link-font-weight);
+  font-size: getCssVar('link', 'font-size');
+  font-weight: getCssVar('link', 'font-weight');
+
+  color: getCssVar('link', 'text-color');
+
+  &:hover {
+    color: getCssVar('link', 'hover-text-color');
+  }
 
   @include when(underline) {
     &:hover:after {
@@ -30,11 +37,12 @@
       right: 0;
       height: 0;
       bottom: 0;
-      border-bottom: 1px solid var(--el-link-default-active-color);
+      border-bottom: 1px solid getCssVar('link', 'hover-text-color');
     }
   }
 
   @include when(disabled) {
+    color: getCssVar('link', 'disabled-text-color');
     cursor: not-allowed;
   }
 
@@ -45,40 +53,36 @@
   }
 
   &.#{$namespace}-link--default {
-    color: var(--el-link-default-text-color);
-
-    &:hover {
-      color: var(--el-link-default-active-color);
-    }
-
     &:after {
-      border-color: var(--el-link-default-active-color);
+      border-color: getCssVar('link', 'hover-text-color');
     }
+  }
 
-    @include when(disabled) {
-      color: var(--el-link-disabled-text-color);
-    }
+  @include e(inner) {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
   }
 
   @each $type in $types {
     &.#{$namespace}-link--#{$type} {
-      --el-link-text-color: var(--el-color-#{$type});
-      color: var(--el-link-text-color);
-
-      &:hover {
-        color: mix(map.get($link-text-color, $type), $color-white, 80%);
-      }
+      @include css-var-from-global(('link', 'text-color'), ('color', $type));
+      @include css-var-from-global(
+        ('link', 'hover-text-color'),
+        ('color', $type, 'light-3')
+      );
+      @include css-var-from-global(
+        ('link', 'disabled-text-color'),
+        ('color', $type, 'light-5')
+      );
 
       &:after {
-        border-color: var(--el-link-text-color);
+        border-color: getCssVar('link', 'text-color');
       }
 
-      @include when(disabled) {
-        color: mix(map.get($link-text-color, $type), $color-white, 50%);
-      }
       @include when(underline) {
         &:hover:after {
-          border-color: var(--el-link-text-color);
+          border-color: getCssVar('link', 'text-color');
         }
       }
     }

package/theme-chalk/src/menu.scss

@@ -129,6 +129,10 @@
         color: var(--el-menu-text-color);
       }
 
+      & .#{$namespace}-sub-menu__title {
+        padding-right: 40px;
+      }
+
       & .#{$namespace}-menu-item.is-active,
       & .#{$namespace}-sub-menu.is-active > .#{$namespace}-sub-menu__title {
         color: var(--el-menu-active-color);
@@ -191,7 +195,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 +214,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 +236,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/message.scss

@@ -9,21 +9,20 @@
 }
 
 @include b(message) {
-  min-width: var(--el-message-min-width);
+  min-width: getCssVar('message', 'min-width');
   box-sizing: border-box;
   border-radius: var(--el-border-radius-base);
   border-width: var(--el-border-width-base);
   border-style: var(--el-border-style-base);
-  border-color: var(--el-border-color-lighter);
+  border-color: getCssVar('message', 'border-color');
   position: fixed;
   left: 50%;
   top: 20px;
   transform: translateX(-50%);
-  background-color: var(--el-message-bg-color);
   transition: opacity 0.3s, transform 0.4s, top 0.4s;
-  background-color: var(--el-message-bg-color);
+  background-color: getCssVar('message', 'bg-color');
   transition: opacity var(--el-transition-duration), transform 0.4s, top 0.4s;
-  padding: var(--el-message-padding);
+  padding: getCssVar('message', 'padding');
   display: flex;
   align-items: center;
 
@@ -41,23 +40,26 @@
     margin: 0;
   }
 
-  @include m(info) {
-    .#{$namespace}-message__content {
-      color: var(--el-message-info-text-color);
-    }
-  }
-
   @each $type in (success, info, warning, error) {
     @include m($type) {
-      background-color: map.get($colors, $type, 'light-9');
-      border-color: map.get($colors, $type, 'light-8');
-
-      --el-message-text-color: var(--el-color-#{$type});
+      @include css-var-from-global(
+        ('message', 'bg-color'),
+        ('color', $type, 'light-9')
+      );
+      @include css-var-from-global(
+        ('message', 'border-color'),
+        ('color', $type, 'light-8')
+      );
+      @include css-var-from-global(('message', 'text-color'), ('color', $type));
 
       .#{$namespace}-message__content {
-        color: var(--el-message-text-color);
+        color: getCssVar('message', 'text-color');
       }
     }
+
+    & .#{$namespace}-message-icon--#{$type} {
+      color: getCssVar('message', 'text-color');
+    }
   }
 
   @include e(icon) {
@@ -85,21 +87,14 @@
     right: 15px;
     transform: translateY(-50%);
     cursor: pointer;
-    color: var(--el-message-close-icon-color);
-    font-size: var(--el-message-close-size, map.get($message, 'close-size'));
+    color: getCssVar('message', 'close-icon-color');
+    font-size: getCssVar('message', 'close-size');
 
     &:focus {
       outline-width: 0;
     }
     &:hover {
-      color: var(--el-message-close-hover-color);
-    }
-  }
-
-  @each $type in (success, info, warning, error) {
-    & .#{$namespace}-message-icon--#{$type} {
-      --el-message-text-color: var(--el-color-#{$type});
-      color: var(--el-message-text-color);
+      color: getCssVar('message', 'close-hover-color');
     }
   }
 }

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

@@ -5,31 +5,40 @@
 @use '../common/var' as *;
 
 @mixin set-css-color-type-light($type, $i) {
-  --el-color-#{$type}-light-#{$i}: #{map.get($colors, $type, 'light-#{$i}')};
+  #{getCssVarName('color', $type, 'light', $i)}: #{map.get(
+      $colors,
+      $type,
+      'light-#{$i}'
+    )};
 }
 
 @mixin set-css-color-type($type) {
-  --el-color-#{$type}: #{map.get($colors, $type, 'base')};
+  #{getCssVarName('color', $type)}: #{map.get($colors, $type, 'base')};
   @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')};
+  #{getCssVarName('color', $type, 'dark-2')}: #{map.get(
+      $colors,
+      $type,
+      'dark-2'
+    )};
 }
 
 @mixin set-css-var-type($name, $type, $variables) {
-  --el-#{$name}-#{$type}: #{map.get($variables, $type)};
+  #{getCssVarName($name, $type)}: #{map.get($variables, $type)};
 }
 
 // set all css var for component by map
 @mixin set-component-css-var($name, $variables) {
   @each $attribute, $value in $variables {
-    --el-#{$name}-#{$attribute}: #{$value};
+    #{getCssVarName($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)};
+  #{getCssVarName('color', $type, 'rgb')}: #{red($color)}, #{green($color)},
+    #{blue($color)};
 }
 
 // generate css var from existing css var

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

@@ -1,4 +1,5 @@
 $namespace: 'el';
+$common-separator: '-';
 $element-separator: '__';
 $modifier-separator: '--';
 $state-prefix: 'is-';

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

@@ -43,7 +43,7 @@
 }
 
 // join var name
-// joinVarName('button', 'text-color') => '--el-button-text-color'
+// joinVarName(('button', 'text-color')) => '--el-button-text-color'
 @function joinVarName($list) {
   $name: '--' + config.$namespace;
   @each $item in $list {
@@ -54,7 +54,28 @@
   @return $name;
 }
 
+// getCssVarName('button', 'text-color') => '--el-button-text-color'
+@function getCssVarName($args...) {
+  @return joinVarName($args);
+}
+
 // getCssVar('button', 'text-color') => var(--el-button-text-color)
 @function getCssVar($args...) {
   @return var(#{joinVarName($args)});
 }
+
+// bem('block', 'element', 'modifier') => 'el-block__element--modifier'
+@function bem($block, $element: '', $modifier: '') {
+  $name: config.$namespace + config.$common-separator + $block;
+
+  @if $element != '' {
+    $name: $name + config.$element-separator + $element;
+  }
+
+  @if $modifier != '' {
+    $name: $name + config.$modifier-separator + $modifier;
+  }
+
+  // @debug $name;
+  @return $name;
+}

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

@@ -1,6 +1,7 @@
 @use 'function' as *;
 @use '../common/var' as *;
 @forward 'config';
+@forward 'function';
 @use 'config' as *;
 
 // Break-points

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

@@ -31,3 +31,9 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+@mixin utils-inline-flex-center {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+}

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;
       }
     }