element-plus 2.1.5 → 2.1.8

package/theme-chalk/src/avatar.scss

@@ -8,6 +8,11 @@
   @include set-component-css-var('avatar', $avatar);
   @include set-component-css-var('avatar-size', $avatar-size);
 
+  @include set-css-var-value(
+    ('avatar', 'size'),
+    map.get($avatar-size, 'default')
+  );
+
   display: inline-flex;
   justify-content: center;
   align-items: center;
@@ -37,9 +42,12 @@
     font-size: var(--el-avatar-icon-size);
   }
 
-  @each $size in (small, default, large) {
+  @each $size in (small, large) {
     @include m($size) {
-      --el-avatar-size: #{map.get($avatar-size, $size)};
+      @include set-css-var-value(
+        ('avatar', 'size'),
+        map.get($avatar-size, $size)
+      );
     }
   }
 }

package/theme-chalk/src/backtop.scss

@@ -6,21 +6,21 @@
   @include set-component-css-var('backtop', $backtop);
 
   position: fixed;
-  background-color: var(--el-backtop-bg-color);
+  background-color: getCssVar('backtop', 'bg-color');
   width: 40px;
   height: 40px;
   border-radius: 50%;
-  color: var(--el-backtop-text-color);
+  color: getCssVar('backtop', 'text-color');
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 20px;
-  box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
+  box-shadow: getCssVar('box-shadow', 'lighter');
   cursor: pointer;
   z-index: 5;
 
   &:hover {
-    background-color: var(--el-backtop-hover-bg-color);
+    background-color: getCssVar('backtop', 'hover-bg-color');
   }
 
   @include e(icon) {

package/theme-chalk/src/button.scss

@@ -134,7 +134,7 @@ $button-icon-span-gap: map.merge(
       right: -1px;
       bottom: -1px;
       border-radius: inherit;
-      background-color: rgba(255, 255, 255, 0.35);
+      background-color: getCssVar('mask-color', 'extra-light');
     }
   }
   @include when(round) {

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

@@ -174,11 +174,21 @@ $border-radius: map.merge(
 $box-shadow: () !default;
 $box-shadow: map.merge(
   (
-    'base': (
-      0 2px 4px rgba(0, 0, 0, 0.12),
-      0 0 6px rgba(0, 0, 0, 0.04),
+    '': (
+      0px 12px 32px 4px rgba(0, 0, 0, 0.04),
+      0px 8px 20px rgba(0, 0, 0, 0.08),
+    ),
+    'light': (
+      0px 0px 12px rgba(0, 0, 0, 0.12),
+    ),
+    'lighter': (
+      0px 0px 6px rgba(0, 0, 0, 0.12),
+    ),
+    'dark': (
+      0px 16px 48px 16px rgba(0, 0, 0, 0.08),
+      0px 12px 32px rgba(0, 0, 0, 0.12),
+      0px 8px 16px -8px rgba(0, 0, 0, 0.16),
     ),
-    'light': 0 2px 12px 0 rgba(0, 0, 0, 0.1),
   ),
   $box-shadow
 );
@@ -239,6 +249,27 @@ $common-component-size: map.merge(
   $common-component-size
 );
 
+// overlay
+$overlay-color: () !default;
+$overlay-color: map.merge(
+  (
+    '': rgba(0, 0, 0, 0.8),
+    'light': rgba(0, 0, 0, 0.7),
+    'lighter': rgba(0, 0, 0, 0.5),
+  ),
+  $overlay-color
+);
+
+// mask
+$mask-color: () !default;
+$mask-color: map.merge(
+  (
+    '': rgba(255, 255, 255, 0.9),
+    'extra-light': rgba(255, 255, 255, 0.3),
+  ),
+  $mask-color
+);
+
 // Components
 // ---
 // Checkbox
@@ -716,7 +747,7 @@ $dialog: map.merge(
     'width': 50%,
     'margin-top': 15vh,
     'bg-color': getCssVar('color-white'),
-    'box-shadow': 0 1px 3px rgba(0, 0, 0, 0.3),
+    'box-shadow': getCssVar('box-shadow'),
     'title-font-size': getCssVar('font-size-large'),
     'content-font-size': 14px,
     'font-line-height': getCssVar('font-line-height-primary'),
@@ -738,7 +769,7 @@ $table: map.merge(
     'row-hover-bg-color': getCssVar('fill-color', 'light'),
     'current-row-bg-color': getCssVar('color-primary-light-9'),
     'header-bg-color': getCssVar('fill-color', 'blank'),
-    'fixed-box-shadow': 0 0 10px rgba(0, 0, 0, 0.12),
+    'fixed-box-shadow': getCssVar('box-shadow', 'light'),
     'bg-color': getCssVar('fill-color', 'blank'),
     'tr-bg-color': getCssVar('fill-color', 'blank'),
     'expanded-cell-bg-color': getCssVar('fill-color', 'blank'),
@@ -855,6 +886,7 @@ $tag: map.merge(
   (
     'font-size': 12px,
     'border-radius': 4px,
+    'border-radius-rounded': 9999px,
   ),
   $tag
 );

package/theme-chalk/src/drawer.scss

@@ -14,8 +14,7 @@ $directions: rtl, ltr, ttb, btt;
   background-color: var(--el-drawer-bg-color);
   display: flex;
   flex-direction: column;
-  box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2),
-    0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12);
+  box-shadow: getCssVar('box-shadow', 'dark');
   overflow: hidden;
 
   transition: all var(--el-transition-duration);

package/theme-chalk/src/dropdown.scss

@@ -108,7 +108,7 @@ $dropdown-divider-width: 1px !default;
       top: $gap;
       bottom: $gap;
       left: 0;
-      background: rgba(0, 0, 0, 0.5);
+      background: getCssVar('overlay-color', 'lighter');
     }
 
     &.#{$namespace}-button::before {

package/theme-chalk/src/index.scss

@@ -89,8 +89,10 @@
 @use './timeline-item.scss';
 @use './timeline.scss';
 @use './tooltip.scss';
+@use './tooltip-v2.scss';
 @use './transfer.scss';
 @use './tree.scss';
+@use './tree-select.scss';
 @use './upload.scss';
 @use './virtual-list.scss';
 @use './popper.scss';

package/theme-chalk/src/input.scss

@@ -423,13 +423,11 @@
       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));
       }
     }

package/theme-chalk/src/loading.scss

@@ -21,7 +21,7 @@
 @include b(loading-mask) {
   position: absolute;
   z-index: 2000;
-  background-color: rgba(255, 255, 255, 0.9);
+  background-color: getCssVar('mask-color');
   margin: 0;
   top: 0;
   right: 0;

package/theme-chalk/src/overlay.scss

@@ -12,6 +12,6 @@
   left: 0;
   z-index: 2000;
   height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: getCssVar('overlay-color', 'lighter');
   overflow: auto;
 }

package/theme-chalk/src/table.scss

@@ -383,6 +383,17 @@
     }
   }
 
+  @include e(header-wrapper) {
+    tr {
+      th {
+        &.#{$namespace}-table-fixed-column--left,
+        &.#{$namespace}-table-fixed-column--right {
+          background-color: var(--el-table-header-bg-color);
+        }
+      }
+    }
+  }
+
   @include e((header, body, footer)) {
     table-layout: fixed;
     border-collapse: separate;
@@ -420,6 +431,9 @@
         }
       }
     }
+    th.#{$namespace}-table-fixed-column--left {
+      background-color: var(--el-table-header-bg-color);
+    }
   }
 
   @include when(scrolling-right) {
@@ -431,6 +445,9 @@
     .#{$namespace}-table-fixed-column--left.is-last-column.#{$namespace}-table__cell {
       border-right: none;
     }
+    th.#{$namespace}-table-fixed-column--right {
+      background-color: var(--el-table-header-bg-color);
+    }
   }
 
   @include when(scrolling-middle) {
@@ -459,6 +476,11 @@
         }
       }
     }
+
+    th.#{$namespace}-table-fixed-column--left,
+    th.#{$namespace}-table-fixed-column--right {
+      background-color: var(--el-table-header-bg-color);
+    }
   }
 
   @include e(body-wrapper) {

package/theme-chalk/src/tabs.scss

@@ -225,7 +225,6 @@
   @include m(border-card) {
     background: $color-white;
     border: 1px solid getCssVar('border-color');
-    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
 
     > .#{$namespace}-tabs__content {
       padding: 15px;

package/theme-chalk/src/tag.scss

@@ -78,6 +78,9 @@ $tag-icon-span-gap: map.merge(
   @include when(hit) {
     border-color: getCssVar('color', 'primary');
   }
+  @include when(round) {
+    border-radius: getCssVar('tag', 'border-radius-rounded');
+  }
 
   .#{$namespace}-tag__close {
     color: var(--el-tag-text-color);

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

@@ -0,0 +1,91 @@
+@use 'mixins/mixins' as *;
+@use 'mixins/var' as *;
+@use 'common/var' as *;
+
+@include b(tooltip-v2) {
+  @include e(content) {
+    --el-tooltip-v2-padding: 5px 10px;
+    --el-tooltip-v2-border-radius: 4px;
+    --#{$namespace}-tooltip-v2-border-color: var(--el-border-color);
+
+    border-radius: var(--el-tooltip-v2-border-radius);
+    color: var(--el-color-black);
+    background-color: var(--el-color-white);
+    padding: var(--el-tooltip-v2-padding);
+    border: 1px solid var(--el-border-color);
+
+    $content-selector: &;
+
+    $sides: (
+      'top': 'bottom',
+      'bottom': 'top',
+      'left': 'right',
+      'right': 'left',
+    );
+
+    @include e(arrow) {
+      position: absolute;
+      color: var(--el-color-white);
+      width: var(--#{$namespace}-tooltip-v2-arrow-width);
+      height: var(--#{$namespace}-tooltip-v2-arrow-height);
+      pointer-events: none;
+      left: var(--#{$namespace}-tooltip-v2-arrow-x);
+      top: var(--#{$namespace}-tooltip-v2-arrow-y);
+
+      &::before {
+        content: '';
+        width: 0;
+        height: 0;
+        border: var(--#{$namespace}-tooltip-v2-arrow-border-width) solid
+          transparent;
+        position: absolute;
+      }
+
+      &::after {
+        content: '';
+        width: 0;
+        height: 0;
+        border: var(--#{$namespace}-tooltip-v2-arrow-border-width) solid
+          transparent;
+        position: absolute;
+      }
+
+      @each $side, $opposite in $sides {
+        #{$content-selector}[data-side^='#{$side}'] & {
+          #{$opposite}: 0;
+        }
+
+        #{$content-selector}[data-side^='#{$side}'] &::before {
+          border-#{$side}-color: var(--#{$namespace}-color-white);
+          border-#{$side}-width: var(
+            --#{$namespace}-tooltip-v2-arrow-border-width
+          );
+          border-#{$opposite}: 0;
+          #{$side}: calc(100% - 1px);
+        }
+
+        #{$content-selector}[data-side^='#{$side}'] &::after {
+          border-#{$side}-color: var(--#{$namespace}-border-color);
+          border-#{$side}-width: var(
+            --#{$namespace}-tooltip-v2-arrow-border-width
+          );
+          border-#{$opposite}: 0;
+          #{$side}: 100%;
+          z-index: -1;
+        }
+      }
+    }
+
+    &.is-dark {
+      --#{$namespace}-tooltip-v2-border-color: transparent;
+      background-color: var(--el-color-black);
+      color: var(--el-color-white);
+      border-color: transparent;
+
+      @include e(arrow) {
+        background-color: var(--el-color-black);
+        border-color: transparent;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,36 @@
+@use 'mixins/mixins' as *;
+@use 'mixins/var' as *;
+@use 'common/var' as *;
+
+@include b(tree-select) {
+  @include set-component-css-var('tree', $tree);
+}
+
+@include b(tree-select) {
+  @include e(popper) {
+    // padding-left same with select option
+    .#{$namespace}-tree-node__expand-icon {
+      margin-left: 8px;
+    }
+
+    // remove icon when show checkbox
+    .#{$namespace}-tree-node.is-checked
+      > .#{$namespace}-tree-node__content
+      .#{$namespace}-select-dropdown__item.selected::after {
+      content: none;
+    }
+
+    .#{$namespace}-select-dropdown__item {
+      flex: 1;
+      background: transparent !important;
+
+      // padding-left move to `el-tree-node__expand-icon`
+      padding-left: 0;
+
+      // fix: select height > tree node height
+      // https://github.com/yujinpan/el-select-tree/pull/33
+      height: 20px;
+      line-height: 20px;
+    }
+  }
+}

package/theme-chalk/src/upload.scss

@@ -372,7 +372,7 @@
       color: #fff;
       opacity: 0;
       font-size: 20px;
-      background-color: rgba(0, 0, 0, 0.5);
+      background-color: getCssVar('overlay-color', 'lighter');
       transition: opacity var(--el-transition-duration);
 
       span {
@@ -518,7 +518,6 @@
     background: var(--el-color-success);
     text-align: center;
     transform: rotate(45deg);
-    box-shadow: 0 0 16px 1px rgba(0, 0, 0, 0.2);
 
     i {
       font-size: 12px;
@@ -553,7 +552,7 @@
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: rgba(#000, 0.72);
+    background-color: getCssVar('overlay-color', 'light');
     text-align: center;
 
     .btn {

package/theme-chalk/src/var.scss

@@ -56,6 +56,9 @@
   @include set-component-css-var('disabled', $disabled);
   // z-index --el-index-#{$type}
   @include set-component-css-var('index', $z-index);
+  // overlay & mask
+  @include set-component-css-var('overlay-color', $overlay-color);
+  @include set-component-css-var('mask-color', $mask-color);
 
   // Border
   @include set-css-var-value('border-width', $border-width);
@@ -77,7 +80,7 @@
   /* Transition
 -------------------------- */
   // refer to this website to get the bezier motion function detail
-  //  https://cubic-bezier.com/#p1,p2,p3,p4 (change px as your function parameter)
+  // https://cubic-bezier.com/#p1,p2,p3,p4 (change px as your function parameter)
   @include set-component-css-var('transition-duration', $transition-duration);
 
   @include set-component-css-var('transition-function', $transition-function);

package/theme-chalk/src/virtual-list.scss

@@ -18,6 +18,13 @@
     }
   }
 }
+
+.#{$namespace}-vl__window {
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
 @include b(virtual-scrollbar) {
   opacity: 0;
   transition: opacity 340ms ease-out;