@element-plus/nightly 0.0.20220306 → 0.0.20220309

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/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),
@@ -682,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
 );
@@ -1233,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/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,44 @@
 @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};
+    @if $attribute == '' {
+      #{getCssVarName($name)}: #{$value};
+    } @else {
+      #{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/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,6 +54,11 @@
   @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)});

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

@@ -3,6 +3,27 @@
 @use 'mixins/mixins' as *;
 @use 'common/var' as *;
 
+$checked-icon: "data:image/svg+xml;utf8,%3Csvg class='icon' width='200' height='200' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='currentColor' d='M406.656 706.944L195.84 496.256a32 32 0 10-45.248 45.248l256 256 512-512a32 32 0 00-45.248-45.248L406.592 706.944z'%3E%3C/path%3E%3C/svg%3E";
+
+@mixin checked-icon {
+  content: '';
+  position: absolute;
+  top: 50%;
+  right: 20px;
+  border-top: none;
+  border-right: none;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-color: map.get($select-option, 'selected-text-color');
+  mask: url('#{$checked-icon}') no-repeat;
+  mask-size: 100% 100%;
+  -webkit-mask: url('#{$checked-icon}') no-repeat;
+  -webkit-mask-size: 100% 100%;
+  transform: translateY(-50%);
+  width: 12px;
+  height: 12px;
+}
+
 @include b(select-dropdown) {
   z-index: calc(var(--el-index-top) + 1);
   border-radius: var(--el-border-radius-base);
@@ -17,21 +38,18 @@
         background-color: map.get($select-option, 'hover-background');
       }
 
-      & .el-icon {
-        position: absolute;
-        right: 20px;
-        top: 0;
-        height: inherit;
-        font-size: 12px;
-
-        svg {
-          height: inherit;
-          vertical-align: middle;
-        }
+      &::after {
+        @include checked-icon;
       }
     }
   }
 
+  & .#{$namespace}-select-dropdown__option-item.is-selected {
+    &::after {
+      @include checked-icon;
+    }
+  }
+
   .#{$namespace}-scrollbar.is-empty .#{$namespace}-select-dropdown__list {
     padding: 0;
   }

package/theme-chalk/src/select.scss

@@ -24,9 +24,20 @@
     );
   }
 
+  .#{$namespace}-select-tags-wrapper {
+    &.has-prefix {
+      margin-left: map.get($select-tags-prefix-padding, 'default');
+    }
+  }
+
   @each $size in (large, small) {
     @include m($size) {
       line-height: map.get($input-height, $size);
+      .#{$namespace}-select-tags-wrapper {
+        &.has-prefix {
+          margin-left: map.get($select-tags-prefix-padding, $size);
+        }
+      }
     }
   }
 

package/theme-chalk/src/table.scss

@@ -354,7 +354,7 @@
               bottom: -1px;
               overflow-x: hidden;
               overflow-y: hidden;
-              box-shadow: inset -10px 0 10px -10px rgb(0 0 0 / 15%);
+              box-shadow: none;
               touch-action: none;
               pointer-events: none;
             }
@@ -367,7 +367,7 @@
           &.is-last-column {
             &::before {
               right: -10px;
-              box-shadow: inset 10px 0 10px -10px rgb(0 0 0 / 15%);
+              box-shadow: none;
             }
           }
         }
@@ -404,9 +404,9 @@
   }
 
   @include when(scrolling-left) {
-    .#{$namespace}-table-fixed-column--left.is-last-column {
+    .#{$namespace}-table-fixed-column--right.is-first-column {
       &::before {
-        box-shadow: none;
+        box-shadow: var(--el-table-fixed-right-column);
       }
     }
     &.#{$namespace}-table--border {
@@ -421,9 +421,9 @@
   }
 
   @include when(scrolling-right) {
-    .#{$namespace}-table-fixed-column--right.is-first-column {
+    .#{$namespace}-table-fixed-column--left.is-last-column {
       &::before {
-        box-shadow: none;
+        box-shadow: var(--el-table-fixed-left-column);
       }
     }
     .#{$namespace}-table-fixed-column--left.is-last-column.#{$namespace}-table__cell {
@@ -435,6 +435,16 @@
     .#{$namespace}-table-fixed-column--left.is-last-column.#{$namespace}-table__cell {
       border-right: none;
     }
+    .#{$namespace}-table-fixed-column--right.is-first-column {
+      &::before {
+        box-shadow: var(--el-table-fixed-right-column);
+      }
+    }
+    .#{$namespace}-table-fixed-column--left.is-last-column {
+      &::before {
+        box-shadow: var(--el-table-fixed-left-column);
+      }
+    }
   }
 
   @include when(scrolling-none) {

package/theme-chalk/src/tag.scss

@@ -1,7 +1,6 @@
 @use 'sass:map';
 
 @use 'mixins/mixins' as *;
-@use 'mixins/function' as *;
 @use 'mixins/var' as *;
 @use 'common/var' as *;
 

package/theme-chalk/src/var.scss

@@ -74,8 +74,7 @@
 -------------------------- */
   // 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)
-  --el-transition-duration: #{map.get($transition-duration, 'default')};
-  --el-transition-duration-fast: #{map.get($transition-duration, 'fast')};
+  @include set-component-css-var('transition-duration', $transition-duration);
 
   @include set-component-css-var('transition-function', $transition-function);
   @include set-component-css-var('transition', $transition);