@element-plus/nightly 0.0.20220309 → 0.0.20220312

package/theme-chalk/src/carousel.scss

@@ -2,6 +2,7 @@
 
 @use 'mixins/mixins' as *;
 @use 'mixins/var' as *;
+@use 'mixins/utils' as *;
 @use 'common/var' as *;
 
 @include b(carousel) {
@@ -41,6 +42,8 @@
     text-align: center;
     font-size: var(--el-carousel-arrow-font-size);
 
+    @include utils-inline-flex-center;
+
     @include m(left) {
       left: 16px;
     }

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

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

@@ -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

@@ -1100,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

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

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

@@ -31,11 +31,7 @@
 // set all css var for component by map
 @mixin set-component-css-var($name, $variables) {
   @each $attribute, $value in $variables {
-    @if $attribute == '' {
-      #{getCssVarName($name)}: #{$value};
-    } @else {
-      #{getCssVarName($name, $attribute)}: #{$value};
-    }
+    #{getCssVarName($name, $attribute)}: #{$value};
   }
 }
 

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

@@ -63,3 +63,19 @@
 @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/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/pagination.scss

@@ -92,7 +92,7 @@
     }
   }
 
-  .#{$namespace}-pager li.disabled {
+  .#{$namespace}-pager li.is-disabled {
     color: var(--el-text-color-placeholder);
     cursor: not-allowed;
   }
@@ -111,7 +111,7 @@
       min-width: 24px;
     }
 
-    .arrow.disabled {
+    .arrow.is-disabled {
       visibility: hidden;
     }
 
@@ -228,7 +228,7 @@
       min-width: 32px;
       border-radius: 2px;
 
-      &.disabled {
+      &.is-disabled {
         color: var(--el-text-color-placeholder);
         background-color: var(--el-disabled-bg-color);
       }
@@ -253,12 +253,12 @@
       }
     }
 
-    .#{$namespace}-pager li:not(.disabled) {
+    .#{$namespace}-pager li:not(.is-disabled) {
       &:hover {
         color: var(--el-pagination-hover-color);
       }
 
-      &.active {
+      &.is-active {
         background-color: var(--el-color-primary);
         color: var(--el-color-white);
         font-weight: bold;
@@ -311,7 +311,7 @@
       line-height: 32px;
       color: var(--el-pagination-button-color);
 
-      &.disabled {
+      &.is-disabled {
         color: var(--el-text-color-placeholder);
         cursor: not-allowed;
       }
@@ -321,7 +321,7 @@
       }
     }
 
-    &.active + li {
+    &.is-active + li {
       border-left: 0;
     }
 
@@ -333,7 +333,7 @@
       color: var(--el-pagination-hover-color);
     }
 
-    &.active {
+    &.is-active {
       color: var(--el-pagination-hover-color);
       cursor: default;
     }

package/theme-chalk/src/select.scss

@@ -159,6 +159,20 @@
     flex-wrap: wrap;
   }
 
+  @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;
+  }
+
   .#{$namespace}-select__tags {
     .#{$namespace}-tag {
       box-sizing: border-box;

package/theme-chalk/src/slider.scss

@@ -38,7 +38,7 @@ $slider-height: map.merge(
       width: auto;
     }
 
-    &.disabled {
+    &.is-disabled {
       cursor: default;
 
       .#{$namespace}-slider__bar {