element-plus 2.0.5 → 2.1.1

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

@@ -23,7 +23,7 @@
     }
 
     &.disabled .cell {
-      background-color: var(--el-bg-color);
+      background-color: getCssVar('fill-color', 'light');
       cursor: not-allowed;
       color: var(--el-text-color-placeholder);
 

package/theme-chalk/src/divider.scss

@@ -9,7 +9,7 @@
     height: 1px;
     width: 100%;
     margin: 24px 0;
-    border-top: 1px var(--el-border-color-base) var(--el-border-style);
+    border-top: 1px getCssVar('border-color') var(--el-border-style);
   }
 
   @include m(vertical) {
@@ -19,7 +19,7 @@
     margin: 0 8px;
     vertical-align: middle;
     position: relative;
-    border-left: 1px var(--el-border-color-base) var(--el-border-style);
+    border-left: 1px getCssVar('border-color') var(--el-border-style);
   }
 
   @include e(text) {

package/theme-chalk/src/dropdown.scss

@@ -112,7 +112,7 @@ $dropdown-divider-width: 1px !default;
     }
 
     &.#{$namespace}-button::before {
-      background: var(--el-border-color-base);
+      background: getCssVar('border-color');
       opacity: 0.5;
     }
 
@@ -158,8 +158,7 @@ $dropdown-menu-padding-vertical: map.merge(
   top: 0;
   left: 0;
   z-index: var(--el-dropdown-menu-index);
-  padding: map.get($dropdown-menu-padding-vertical, 'default')-$border-width-base
-    0;
+  padding: map.get($dropdown-menu-padding-vertical, 'default')-$border-width 0;
   margin: 0;
   background-color: $color-white;
   border: none;
@@ -195,14 +194,13 @@ $dropdown-menu-padding-vertical: map.merge(
 
     @include when(disabled) {
       cursor: not-allowed;
-      color: var(--el-text-color-disabled-base);
+      color: var(--el-text-color-disabled);
     }
   }
 
   @each $size in (large, small) {
     @include m($size) {
-      padding: map.get($dropdown-menu-padding-vertical, $size)-$border-width-base
-        0;
+      padding: map.get($dropdown-menu-padding-vertical, $size)-$border-width 0;
 
       @include e(item) {
         padding: map.get($dropdown-item-padding, $size);

package/theme-chalk/src/image.scss

@@ -18,7 +18,7 @@
 
   @include e(placeholder) {
     @extend %size !optional;
-    background: var(--el-bg-color);
+    background: getCssVar('fill-color', 'light');
   }
 
   @include e(error) {
@@ -27,7 +27,7 @@
     justify-content: center;
     align-items: center;
     font-size: 14px;
-    background: var(--el-bg-color);
+    background: getCssVar('fill-color', 'light');
     color: var(--el-text-color-placeholder);
     vertical-align: middle;
   }

package/theme-chalk/src/input-number.scss

@@ -39,7 +39,7 @@
     bottom: 1px;
 
     width: map.get($input-height, 'default');
-    background: var(--el-bg-color);
+    background: getCssVar('fill-color', 'light');
     color: var(--el-text-color-regular);
     cursor: pointer;
     font-size: 13px;
@@ -67,13 +67,13 @@
   @include e(increase) {
     right: 1px;
     border-radius: 0 var(--el-border-radius-base) var(--el-border-radius-base) 0;
-    border-left: var(--el-border-base);
+    border-left: var(--el-border);
   }
 
   @include e(decrease) {
     left: 1px;
     border-radius: var(--el-border-radius-base) 0 0 var(--el-border-radius-base);
-    border-right: var(--el-border-base);
+    border-right: var(--el-border);
   }
 
   @include when(disabled) {
@@ -144,7 +144,7 @@
       bottom: auto;
       left: auto;
       border-radius: 0 var(--el-border-radius-base) 0 0;
-      border-bottom: var(--el-border-base);
+      border-bottom: var(--el-border);
     }
 
     @include e(decrease) {
@@ -152,7 +152,7 @@
       top: auto;
       left: auto;
       border-right: none;
-      border-left: var(--el-border-base);
+      border-left: var(--el-border);
       border-radius: 0 0 var(--el-border-radius-base) 0;
     }
 

package/theme-chalk/src/input.scss

@@ -81,7 +81,7 @@
 
   & .#{$namespace}-input__count {
     color: var(--el-color-info);
-    background: var(--el-color-white);
+    background: getCssVar('fill-color', 'blank');
     position: absolute;
     font-size: 12px;
     line-height: 14px;
@@ -143,7 +143,7 @@
     font-size: 12px;
 
     .#{$namespace}-input__count-inner {
-      background: $color-white;
+      background: getCssVar('fill-color', 'blank');
       line-height: initial;
       display: inline-block;
       padding: 0 5px;
@@ -166,7 +166,7 @@
     height: map.get($input-height, 'default');
     line-height: map.get($input-height, 'default');
     outline: none;
-    padding: 0 map.get($input-padding-horizontal, 'default')-$border-width-base;
+    padding: 0 map.get($input-padding-horizontal, 'default')-$border-width;
     transition: var(--el-transition-box-shadow);
     width: 100%;
     @include inset-input-border(
@@ -311,7 +311,7 @@
       @include e(inner) {
         height: map.get($input-height, $size);
         line-height: map.get($input-height, $size);
-        padding: 0 map.get($input-padding-horizontal, $size)-$border-width-base;
+        padding: 0 map.get($input-padding-horizontal, $size)-$border-width;
       }
 
       .#{$namespace}-input__icon {
@@ -361,7 +361,7 @@
   }
 
   @include e((append, prepend)) {
-    background-color: var(--el-bg-color);
+    background-color: getCssVar('fill-color', 'light');
     color: var(--el-color-info);
     vertical-align: middle;
     display: table-cell;

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/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/page-header.scss

@@ -19,7 +19,7 @@
       right: -20px;
       top: 50%;
       transform: translateY(-50%);
-      background-color: var(--el-border-color-base);
+      background-color: getCssVar('border-color');
     }
 
     @include e(icon) {

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/radio-button.scss

@@ -21,7 +21,7 @@
     white-space: nowrap;
     vertical-align: middle;
     background: var(--el-button-bg-color, map.get($button, 'bg-color'));
-    border: $border-base;
+    border: getCssVar('border');
     font-weight: var(--el-button-font-weight, map.get($button, 'font-weight'));
     border-left: 0;
     color: var(--el-button-text-color, map.get($button, 'text-color'));
@@ -57,7 +57,7 @@
 
   &:first-child {
     .#{$namespace}-radio-button__inner {
-      border-left: $border-base;
+      border-left: getCssVar('border');
       border-radius: var(--el-border-radius-base) 0 0
         var(--el-border-radius-base);
       box-shadow: none !important;

package/theme-chalk/src/radio.scss

@@ -41,11 +41,11 @@ $radio-font-size: map.merge(
   }
 
   @include when(bordered) {
-    padding: 0 map.get($checkbox-bordered-padding-right, 'default')-$border-width-base
-      0 map.get($checkbox-bordered-padding-left, 'default')-$border-width-base;
+    padding: 0 map.get($checkbox-bordered-padding-right, 'default')-$border-width
+      0 map.get($checkbox-bordered-padding-left, 'default')-$border-width;
 
     border-radius: var(--el-border-radius-base);
-    border: var(--el-border-base);
+    border: var(--el-border);
     box-sizing: border-box;
 
     &.is-checked {
@@ -60,9 +60,9 @@ $radio-font-size: map.merge(
     @each $size in (large, small) {
       &.#{$namespace}-radio--#{$size} {
         padding: 0
-          map.get($checkbox-bordered-padding-right, $size)-$border-width-base
+          map.get($checkbox-bordered-padding-right, $size)-$border-width
           0
-          map.get($checkbox-bordered-padding-left, $size)-$border-width-base;
+          map.get($checkbox-bordered-padding-left, $size)-$border-width;
         border-radius: var(--el-border-radius-base);
 
         .#{$namespace}-radio__label {

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