@element-plus/nightly 0.0.20220310 → 0.0.20220311

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/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/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/upload.scss

@@ -115,24 +115,20 @@
 }
 
 @include b(upload-list) {
-  margin: 0;
+  margin: 10px 0 0;
   padding: 0;
   list-style: none;
-
+  position: relative;
   @include e(item) {
     transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
     font-size: 14px;
     color: var(--el-text-color-regular);
-    margin-top: 4px;
+    margin-bottom: 5px;
     position: relative;
     box-sizing: border-box;
     border-radius: 4px;
     width: 100%;
 
-    display: inline-flex;
-    align-items: center;
-    padding: 1px;
-
     .#{bem('progress')} {
       position: absolute;
       top: 20px;
@@ -150,10 +146,6 @@
       padding-right: 0;
     }
 
-    &:first-child {
-      margin-top: 8px;
-    }
-
     & .#{bem('icon', '', 'upload-success')} {
       color: var(--el-color-success);
     }
@@ -162,10 +154,12 @@
       display: none;
       position: absolute;
       right: 5px;
+      top: 50%;
       cursor: pointer;
       opacity: 0.75;
       color: var(--el-text-color-regular);
       transition: opacity var(--el-transition-duration);
+      transform: translateY(-50%);
 
       &:hover {
         opacity: 1;
@@ -181,6 +175,7 @@
       cursor: pointer;
       opacity: 1;
       color: var(--el-color-primary);
+      transform: translateY(-50%);
     }
 
     &:hover {
@@ -295,7 +290,7 @@
 
   @include m(picture-card) {
     display: inline-flex;
-
+    margin: 0;
     #{getCssVarName('upload-list', 'picture-card', 'size')}: 148px;
 
     .#{bem('upload-list', 'item')} {
@@ -426,7 +421,6 @@
       box-sizing: border-box;
       margin-top: 10px;
       padding: 10px;
-      height: 92px;
 
       .#{bem('icon', '' ,'check')},
       .#{bem('icon', '' ,'circle-check')} {
@@ -450,10 +444,11 @@
             display: none;
           }
         }
+      }
 
-        .#{bem('icon', '' ,'close')} {
-          top: 5px;
-        }
+      & .#{bem('icon', '' ,'close')} {
+        top: 5px;
+        transform: translateY(0);
       }
     }