element-plus 2.1.7 → 2.1.10

package/theme-chalk/src/upload.scss

@@ -2,6 +2,23 @@
 @use 'mixins/utils' as *;
 @use 'common/var' as *;
 
+@mixin upload-success($color: null) {
+  right: -15px;
+  top: -6px;
+  width: 40px;
+  height: 24px;
+  background: var(--el-color-success);
+  text-align: center;
+  transform: rotate(45deg);
+
+  i {
+    font-size: 12px;
+    margin-top: 11px;
+    transform: rotate(-45deg);
+    color: $color;
+  }
+}
+
 @include b(upload) {
   @include utils-inline-flex-center;
 
@@ -297,7 +314,7 @@
     .#{bem('upload-list', 'item')} {
       overflow: hidden;
       background-color: getCssVar('fill-color', 'blank');
-      border: 1px solid #c0ccda;
+      border: 1px solid getCssVar('border-color');
       border-radius: 6px;
       box-sizing: border-box;
       width: getCssVar('upload-list', 'picture-card', 'size');
@@ -341,20 +358,7 @@
     }
 
     .#{bem('upload-list', 'item-status-label')} {
-      position: absolute;
-      right: -15px;
-      top: -6px;
-      width: 40px;
-      height: 24px;
-      background: var(--el-color-success);
-      text-align: center;
-      transform: rotate(45deg);
-
-      i {
-        font-size: 12px;
-        margin-top: 11px;
-        transform: rotate(-45deg);
-      }
+      @include upload-success();
     }
 
     .#{bem('upload-list', 'item-actions')} {
@@ -416,7 +420,7 @@
       overflow: hidden;
       z-index: 0;
       background-color: getCssVar('fill-color', 'blank');
-      border: 1px solid #c0ccda;
+      border: 1px solid getCssVar('border-color');
       border-radius: 6px;
       box-sizing: border-box;
       margin-top: 10px;
@@ -510,21 +514,7 @@
   }
 
   @include e(label) {
-    position: absolute;
-    right: -15px;
-    top: -6px;
-    width: 40px;
-    height: 24px;
-    background: var(--el-color-success);
-    text-align: center;
-    transform: rotate(45deg);
-
-    i {
-      font-size: 12px;
-      margin-top: 11px;
-      transform: rotate(-45deg);
-      color: #fff;
-    }
+    @include upload-success(#fff);
   }
 
   @include e(progress) {

package/theme-chalk/src/var.scss

@@ -8,30 +8,49 @@
 // do not need that, since this could introduce recalculation overhead for rendering.
 // https://lisilinhart.info/posts/css-variables-performance/
 
+// common
 :root {
-  color-scheme: light;
-
   @include set-css-var-value('color-white', $color-white);
   @include set-css-var-value('color-black', $color-black);
-  @include set-css-var-value('color-primary', $color-primary);
 
   // get rgb
   @each $type in (primary, success, warning, danger, error, info) {
     @include set-css-color-rgb($type);
   }
 
-  @for $i from 1 through 9 {
-    @include set-css-color-type-light('primary', $i);
-  }
-  @include set-css-var-value(
-    ('color-primary', 'dark-2'),
-    map.get($colors, 'primary', 'dark-2')
-  );
+  // Typography
+  @include set-component-css-var('font-size', $font-size);
+  @include set-component-css-var('font-family', $font-family);
+
+  @include set-css-var-value('font-weight-primary', 500);
+  @include set-css-var-value('font-line-height-primary', 24px);
+
+  // z-index --el-index-#{$type}
+  @include set-component-css-var('index', $z-index);
+
+  // --el-border-radius-#{$type}
+  @include set-component-css-var('border-radius', $border-radius);
+
+  // 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)
+  @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);
+}
+
+// for light
+:root {
+  color-scheme: light;
+
+  @include set-css-var-value('color-white', $color-white);
+  @include set-css-var-value('color-black', $color-black);
 
   // --el-color-#{$type}
   // --el-color-#{$type}-light-{$i}
-  @each $type in (success, warning, danger, error, info) {
-    @include set-css-color-type($type);
+  @each $type in (primary, success, warning, danger, error, info) {
+    @include set-css-color-type($colors, $type);
   }
 
   // color-scheme
@@ -44,18 +63,12 @@
   // Fill --el-fill-color-#{$type}
   @include set-component-css-var('fill-color', $fill-color);
 
-  // --el-border-radius-#{$type}
-  @include set-component-css-var('border-radius', $border-radius);
-  // Typography
-  @include set-component-css-var('font-size', $font-size);
-  @include set-component-css-var('font-family', $font-family);
   // Box-shadow
   // --el-box-shadow-#{$type}
   @include set-component-css-var('box-shadow', $box-shadow);
   // Disable base
   @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);
@@ -71,18 +84,4 @@
 
   // Svg
   @include css-var-from-global('svg-monochrome-grey', 'border-color');
-
-  @include set-css-var-value('font-weight-primary', 500);
-  @include set-css-var-value('font-line-height-primary', 24px);
-
-  // z-index
-
-  /* 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)
-  @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);
 }

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

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