element-plus 2.0.4 → 2.1.0

package/theme-chalk/src/pagination.scss

@@ -10,7 +10,7 @@
     margin-left: 0;
   }
 
-  & + .el-pager {
+  & + .#{$namespace}-pager {
     .number {
       &:first-child {
         margin-left: 0;
@@ -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;
     }
 
@@ -144,7 +144,7 @@
       line-height: var(--el-pagination-line-height-extra-small);
       .#{$namespace}-input__suffix-inner {
         line-height: var(--el-pagination-line-height-extra-small);
-        i.el-select__caret {
+        i.#{$namespace}-select__caret {
           line-height: var(--el-pagination-line-height-extra-small);
         }
       }
@@ -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-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-v2.scss

@@ -70,6 +70,14 @@ $input-inline-start: map.get($input-padding-horizontal, 'default') !default;
         opacity: 1;
         user-select: none;
       }
+
+      #{$selector}__caret {
+        cursor: not-allowed;
+      }
+
+      #{$selector}__combobox-input {
+        cursor: not-allowed;
+      }
     }
 
     #{$selector}__input-wrapper {

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);
+        }
+      }
     }
   }
 
@@ -148,8 +159,18 @@
     flex-wrap: wrap;
   }
 
-  .#{$namespace}-tag__close {
-    margin-top: -2px;
+  @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 {

package/theme-chalk/src/slider.scss

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

package/theme-chalk/src/table.scss

@@ -63,6 +63,7 @@
     .cell {
       padding: 0;
       text-align: center;
+      user-select: none;
     }
   }
 
@@ -353,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;
             }
@@ -366,7 +367,7 @@
           &.is-last-column {
             &::before {
               right: -10px;
-              box-shadow: inset 10px 0 10px -10px rgb(0 0 0 / 15%);
+              box-shadow: none;
             }
           }
         }
@@ -396,16 +397,16 @@
 
   @include e((header-wrapper, body-wrapper)) {
     .#{$namespace}-table-column--selection {
-      .el-checkbox {
+      .#{$namespace}-checkbox {
         height: unset;
       }
     }
   }
 
   @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 {
@@ -420,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 {
@@ -434,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/tabs.scss

@@ -21,16 +21,19 @@
     list-style: none;
   }
   @include e(new-tab) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
     float: right;
     border: 1px solid #d3dce6;
-    height: 18px;
-    width: 18px;
-    line-height: 18px;
-    margin: 10px;
+    height: 20px;
+    width: 20px;
+    line-height: 20px;
+    margin: 10px 0 10px 10px;
     border-radius: 3px;
     text-align: center;
     font-size: 12px;
-    color: #d3dce6;
+    color: var(--el-text-color-primary);
     cursor: pointer;
     transition: all 0.15s;
 

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