element-plus 2.0.4 → 2.1.0

package/theme-chalk/src/upload.scss

@@ -3,8 +3,8 @@
 @use 'common/var' as *;
 
 @include b(upload) {
-  display: inline-block;
-  text-align: center;
+  @include utils-inline-flex-center;
+
   cursor: pointer;
   outline: none;
   @include e(input) {
@@ -26,19 +26,22 @@
     filter: alpha(opacity=0);
   }
 
-  /* 照片墙模式 */
+  /* Picture Card for Wall */
   @include m(picture-card) {
+    #{getCssVarName('upload', 'picture-card', 'size')}: 148px;
+
     background-color: #fbfdff;
     border: 1px dashed #c0ccda;
     border-radius: 6px;
     box-sizing: border-box;
-    width: 148px;
-    height: 148px;
+    width: getCssVar('upload', 'picture-card', 'size');
+    height: getCssVar('upload', 'picture-card', 'size');
     cursor: pointer;
     vertical-align: top;
 
+    @include utils-inline-flex-center;
+
     i {
-      margin-top: 59px; /* (148px - 28px) / 2 - 1px */
       font-size: 28px;
       color: #8c939d;
     }
@@ -48,6 +51,7 @@
       color: var(--el-color-primary);
     }
   }
+
   &:focus {
     border-color: var(--el-color-primary);
     color: var(--el-color-primary);
@@ -70,24 +74,24 @@
   position: relative;
   overflow: hidden;
 
-  .#{$namespace}-icon--upload {
+  .#{bem('icon', '', 'upload')} {
     font-size: 67px;
     color: var(--el-text-color-placeholder);
     margin: 40px 0 16px;
     line-height: 50px;
   }
 
-  + .#{$namespace}-upload__tip {
+  + .#{bem('upload', 'tip')} {
     text-align: center;
   }
 
-  ~ .#{$namespace}-upload__files {
+  ~ .#{bem('upload', 'files')} {
     border-top: $border-base;
     margin-top: 7px;
     padding-top: 5px;
   }
 
-  .#{$namespace}-upload__text {
+  .#{bem('upload', 'text')} {
     color: var(--el-text-color-regular);
     font-size: 14px;
     text-align: center;
@@ -109,91 +113,96 @@
 }
 
 @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);
-    line-height: 1.8;
-    margin-top: 5px;
+    margin-bottom: 5px;
     position: relative;
     box-sizing: border-box;
     border-radius: 4px;
     width: 100%;
 
-    .#{$namespace}-progress {
+    .#{bem('progress')} {
       position: absolute;
       top: 20px;
       width: 100%;
     }
 
-    .#{$namespace}-progress__text {
+    .#{bem('progress', 'text')} {
       position: absolute;
       right: 0;
       top: -13px;
     }
 
-    .#{$namespace}-progress-bar {
+    .#{bem('progress-bar')} {
       margin-right: 0;
       padding-right: 0;
     }
 
-    &:first-child {
-      margin-top: 10px;
-    }
-
-    & .#{$namespace}-icon--upload-success {
+    & .#{bem('icon', '', 'upload-success')} {
       color: var(--el-color-success);
     }
 
-    .#{$namespace}-icon--close {
+    .#{bem('icon', '', 'close')} {
       display: none;
       position: absolute;
-      top: 5px;
       right: 5px;
+      top: 50%;
       cursor: pointer;
       opacity: 0.75;
       color: var(--el-text-color-regular);
-      //transform: scale(.7);
+      transition: opacity var(--el-transition-duration);
+      transform: translateY(-50%);
 
       &:hover {
         opacity: 1;
+        color: var(--el-color-primary);
       }
     }
 
-    & .#{$namespace}-icon--close-tip {
+    & .#{bem('icon', '', 'close-tip')} {
       display: none;
       position: absolute;
-      top: 5px;
       right: 5px;
       font-size: 12px;
       cursor: pointer;
       opacity: 1;
       color: var(--el-color-primary);
+      transform: translateY(-50%);
     }
 
     &:hover {
       background-color: var(--el-bg-color);
 
-      .#{$namespace}-icon--close {
-        display: inline-block;
+      .#{bem('icon', '', 'close')} {
+        display: inline-flex;
       }
 
-      .#{$namespace}-progress__text {
+      .#{bem('progress', 'text')} {
         display: none;
       }
     }
 
+    .#{bem('upload-list', 'item-info')} {
+      display: inline-flex;
+      justify-content: center;
+      flex-direction: column;
+      width: 100%;
+      margin-left: 4px;
+    }
+
     @include when(success) {
-      .#{$namespace}-upload-list__item-status-label {
-        display: block;
+      .#{bem('upload-list', 'item-status-label')} {
+        display: inline-flex;
       }
 
-      .#{$namespace}-upload-list__item-name:hover,
-      .#{$namespace}-upload-list__item-name:focus {
+      .#{bem('upload-list', 'item-name')}:hover,
+      .#{bem('upload-list', 'item-name')}:focus {
         color: var(--el-color-primary);
         cursor: pointer;
       }
@@ -214,39 +223,39 @@
         }
       }
 
-      &:hover,
-      &:focus {
-        .#{$namespace}-upload-list__item-status-label {
+      &:hover {
+        .#{bem('upload-list', 'item-status-label')} {
           display: none;
+          opacity: 0;
         }
       }
     }
   }
 
   @include when(disabled) {
-    .#{$namespace}-upload-list__item:hover
-      .#{$namespace}-upload-list__item-status-label {
+    .#{bem('upload-list', 'item')}:hover,
+    .#{bem('upload-list', 'item-status-label')} {
       display: block;
     }
   }
 
   @include e(item-name) {
     color: var(--el-text-color-regular);
-    display: block;
-    margin-right: 40px;
+    display: inline-flex;
+    text-align: center;
+    align-items: center;
+
+    padding: 0 4px;
+
     overflow: hidden;
-    padding-left: 4px;
     text-overflow: ellipsis;
     transition: color var(--el-transition-duration);
     white-space: nowrap;
+    font-size: var(--el-font-size-base);
 
-    & .#{$namespace}-icon {
-      margin-right: 7px;
+    .#{$namespace}-icon {
+      margin-right: 6px;
       color: var(--el-text-color-secondary);
-
-      svg {
-        vertical-align: text-bottom;
-      }
     }
   }
 
@@ -256,6 +265,12 @@
     top: 0;
     line-height: inherit;
     display: none;
+
+    height: 100%;
+    justify-content: center;
+    align-items: center;
+
+    transition: opacity var(--el-transition-duration);
   }
 
   @include e(item-delete) {
@@ -271,33 +286,40 @@
     }
   }
 
+  // upload-list
   @include m(picture-card) {
+    display: inline-flex;
+    flex-wrap: wrap;
+
     margin: 0;
-    display: inline;
-    vertical-align: top;
+    #{getCssVarName('upload-list', 'picture-card', 'size')}: 148px;
 
-    .#{$namespace}-upload-list__item {
+    .#{bem('upload-list', 'item')} {
       overflow: hidden;
       background-color: #fff;
       border: 1px solid #c0ccda;
       border-radius: 6px;
       box-sizing: border-box;
-      width: 148px;
-      height: 148px;
+      width: getCssVar('upload-list', 'picture-card', 'size');
+      height: getCssVar('upload-list', 'picture-card', 'size');
       margin: 0 8px 8px 0;
-      display: inline-block;
+      padding: 0;
 
-      .#{$namespace}-icon--check,
-      .#{$namespace}-icon--circle-check {
+      display: inline-flex;
+
+      .#{bem('icon', '' ,'check')},
+      .#{bem('icon', '' ,'circle-check')} {
         color: $color-white;
       }
 
-      .#{$namespace}-icon--close {
+      .#{bem('icon', '', 'close')} {
         display: none;
       }
       &:hover {
-        .#{$namespace}-upload-list__item-status-label {
-          display: none;
+        .#{bem('upload-list', 'item-status-label')} {
+          opacity: 0;
+          // for fade out
+          display: block;
         }
 
         .#{$namespace}-progress__text {
@@ -306,23 +328,25 @@
       }
     }
 
-    .#{$namespace}-upload-list__item-name {
-      display: none;
+    .#{bem('upload-list', 'item')} {
+      .#{bem('upload-list', 'item-name')} {
+        display: none;
+      }
     }
 
-    .#{$namespace}-upload-list__item-thumbnail {
+    .#{bem('upload-list', 'item-thumbnail')} {
       width: 100%;
       height: 100%;
       object-fit: contain;
     }
 
-    .#{$namespace}-upload-list__item-status-label {
+    .#{bem('upload-list', 'item-status-label')} {
       position: absolute;
       right: -15px;
       top: -6px;
       width: 40px;
       height: 24px;
-      background: #13ce66;
+      background: var(--el-color-success);
       text-align: center;
       transform: rotate(45deg);
       box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2);
@@ -334,25 +358,23 @@
       }
     }
 
-    .#{$namespace}-upload-list__item-actions {
+    .#{bem('upload-list', 'item-actions')} {
       position: absolute;
       width: 100%;
       height: 100%;
       left: 0;
       top: 0;
       cursor: default;
-      text-align: center;
+
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+
       color: #fff;
       opacity: 0;
       font-size: 20px;
       background-color: rgba(0, 0, 0, 0.5);
       transition: opacity var(--el-transition-duration);
-      &::after {
-        display: inline-block;
-        content: '';
-        height: 100%;
-        vertical-align: middle;
-      }
 
       span {
         display: none;
@@ -360,10 +382,10 @@
       }
 
       span + span {
-        margin-left: 15px;
+        margin-left: 1rem;
       }
 
-      .#{$namespace}-upload-list__item-delete {
+      .#{bem('upload-list', 'item-delete')} {
         position: static;
         font-size: inherit;
         color: inherit;
@@ -372,12 +394,12 @@
       &:hover {
         opacity: 1;
         span {
-          display: inline-block;
+          display: inline-flex;
         }
       }
     }
 
-    .#{$namespace}-progress {
+    .#{bem('progress')} {
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
@@ -391,7 +413,7 @@
   }
 
   @include m(picture) {
-    .#{$namespace}-upload-list__item {
+    .#{bem('upload-list', 'item')} {
       overflow: hidden;
       z-index: 0;
       background-color: #fff;
@@ -399,73 +421,63 @@
       border-radius: 6px;
       box-sizing: border-box;
       margin-top: 10px;
-      padding: 10px 10px 10px 90px;
-      height: 92px;
+      padding: 10px;
 
-      .#{$namespace}-icon--check,
-      .#{$namespace}-icon--circle-check {
+      .#{bem('icon', '' ,'check')},
+      .#{bem('icon', '' ,'circle-check')} {
         color: $color-white;
       }
 
       &:hover {
-        .#{$namespace}-upload-list__item-status-label {
-          background: transparent;
-          box-shadow: none;
-          top: -2px;
-          right: -12px;
+        .#{bem('upload-list', 'item-status-label')} {
+          opacity: 0;
+          display: block;
         }
 
-        .#{$namespace}-progress__text {
+        .#{bem('progress', 'text')} {
           display: block;
         }
       }
 
       &.is-success {
-        .#{$namespace}-upload-list__item-name {
-          line-height: 70px;
-          margin-top: 0;
+        .#{bem('upload-list', 'item-name')} {
           i {
             display: none;
           }
         }
       }
-    }
 
-    .#{$namespace}-upload-list__item-thumbnail {
-      vertical-align: middle;
-      display: inline-block;
-      width: 70px;
-      height: 70px;
-      float: left;
-      position: relative;
-      z-index: 1;
-      margin-left: -80px;
-      background-color: $color-white;
+      & .#{bem('icon', '' ,'close')} {
+        top: 5px;
+        transform: translateY(0);
+      }
     }
 
-    .#{$namespace}-upload-list__item-name {
-      display: block;
-      margin-top: 20px;
+    .#{bem('upload-list', 'item-thumbnail')} {
+      $item-thumbnail-size: 70px;
 
-      i {
-        font-size: 70px;
-        line-height: 1;
-        position: absolute;
-        left: 9px;
-        top: 10px;
-      }
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+
+      width: $item-thumbnail-size;
+      height: $item-thumbnail-size;
+      object-fit: contain;
+
+      position: relative;
+      z-index: 1;
+      background-color: var(--el-color-white);
     }
 
-    .#{$namespace}-upload-list__item-status-label {
+    .#{bem('upload-list', 'item-status-label')} {
       position: absolute;
       right: -17px;
       top: -7px;
       width: 46px;
       height: 26px;
-      background: #13ce66;
+      background: var(--el-color-success);
       text-align: center;
       transform: rotate(45deg);
-      box-shadow: 0 1px 1px #ccc;
 
       i {
         font-size: 12px;
@@ -504,10 +516,10 @@
     top: -6px;
     width: 40px;
     height: 24px;
-    background: #13ce66;
+    background: var(--el-color-success);
     text-align: center;
     transform: rotate(45deg);
-    box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 0 16px 1px rgba(0, 0, 0, 0.2);
 
     i {
       font-size: 12px;
@@ -523,7 +535,7 @@
     position: static;
     width: 243px;
 
-    + .#{$namespace}-upload__inner {
+    + .#{bem('upload', 'inner')} {
       opacity: 0;
     }
   }
@@ -604,7 +616,7 @@
     color: var(--el-text-color-primary);
   }
 
-  + .#{$namespace}-upload__inner {
+  + .#{bem('upload', 'inner')} {
     opacity: 0;
     position: relative;
     z-index: 1;

package/theme-chalk/src/var.scss

@@ -74,8 +74,7 @@
 -------------------------- */
   // 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)
-  --el-transition-duration: #{map.get($transition-duration, 'default')};
-  --el-transition-duration-fast: #{map.get($transition-duration, 'fast')};
+  @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);