@julingbase/jly-arco-design 0.0.2 → 0.0.3

package/es/upload/style/index.less

@@ -1,515 +1,515 @@
-@import './token.less';
-
-@upload-prefix-cls: ~'@{prefix}-upload';
-
-.@{upload-prefix-cls} {
-  display: inline-block;
-  max-width: 100%;
-  cursor: pointer;
-
-  &&-draggable {
-    width: 100%;
-  }
-
-  &-tip {
-    margin-top: @upload-tip-margin-top;
-    overflow: hidden;
-    color: @upload-tip-color-text;
-    font-size: @upload-tip-font-size;
-    line-height: 1.5;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-
-  &-picture-card {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    min-width: @upload-picture-item-width;
-    height: @upload-picture-item-width;
-    margin-bottom: 0;
-    color: @upload-picture-color-text;
-    text-align: center;
-    background: @upload-picture-color-bg;
-    border: @upload-picture-border-width @upload-picture-border-style
-      @upload-picture-color-border;
-    border-radius: @upload-picture-border-radius;
-    transition: all @transition-duration-1 @transition-timing-function-linear;
-
-    &:hover {
-      color: @upload-picture-color-text_hover;
-      background-color: @upload-picture-color-bg_hover;
-      border-color: @upload-picture-color-border_hover;
-    }
-  }
-
-  &-drag {
-    width: 100%;
-    padding: @upload-drag-padding-vertical 0;
-    color: @upload-drag-color-text;
-    text-align: center;
-    background-color: @upload-drag-color-bg;
-    border: @upload-drag-border-width @upload-drag-border-style
-      @upload-drag-color-border;
-    border-radius: @upload-drag-border-radius;
-    transition: all @transition-duration-2 ease;
-
-    .@{prefix}-icon-plus {
-      margin-bottom: @upload-drag-margin-icon-bottom;
-      color: @upload-drag-color-icon;
-      font-size: @upload-drag-size-icon;
-    }
-
-    &:hover {
-      background-color: @upload-drag-color-bg_hover;
-      border-color: @upload-drag-color-border_hover;
-
-      .@{upload-prefix-cls}-drag-text {
-        color: @upload-drag-color-text_hover;
-      }
-
-      .@{prefix}-icon-plus {
-        color: @upload-drag-color-icon_hover;
-      }
-    }
-
-    &-active {
-      color: @upload-drag-color-text_active;
-      background-color: @upload-drag-color-bg_active;
-      border-color: @upload-drag-color-border_active;
-
-      .@{upload-prefix-cls}-drag-text {
-        color: @upload-drag-color-text_active;
-      }
-
-      .@{prefix}-icon-plus {
-        color: @upload-drag-color-icon_active;
-      }
-    }
-
-    .@{upload-prefix-cls}-tip {
-      margin-top: @upload-drag-tip-margin-top;
-    }
-  }
-
-  &-drag-text {
-    color: @upload-drag-color-text;
-    font-size: @upload-drag-font-size;
-    line-height: 1.5;
-  }
-
-  &-wrapper {
-    width: 100%;
-
-    &&-type-picture-card {
-      display: flex;
-      justify-content: flex-start;
-    }
-  }
-
-  &-drag {
-    width: 100%;
-  }
-
-  &-hide {
-    display: none;
-  }
-
-  &-disabled {
-    .@{upload-prefix-cls}-picture-card,
-    .@{upload-prefix-cls}-picture-card:hover {
-      color: @upload-picture-color-text_disabled;
-      background-color: @upload-picture-color-bg_disabled;
-      border-color: @upload-picture-color-border_disabled;
-      cursor: not-allowed;
-    }
-
-    .@{upload-prefix-cls}-drag,
-    .@{upload-prefix-cls}-drag:hover {
-      background-color: @upload-drag-color-bg_disabled;
-      border-color: @upload-drag-color-border_disabled;
-      cursor: not-allowed;
-
-      .@{prefix}-icon-plus,
-      .@{upload-prefix-cls}-drag-text {
-        color: @upload-drag-color-text_disabled;
-      }
-    }
-
-    .@{upload-prefix-cls}-tip {
-      color: @upload-drag-color-text_disabled;
-    }
-  }
-}
-
-.@{upload-prefix-cls}-icon {
-  cursor: pointer;
-
-  &-error {
-    margin-left: @upload-text-item-margin-error-icon-left;
-    color: @upload-text-item-color-error-icon;
-  }
-
-  &-success {
-    color: @upload-text-item-color-success-icon;
-    font-size: @upload-text-item-size-success-icon;
-    line-height: @upload-text-item-size-success-icon;
-  }
-
-  &-remove {
-    position: relative;
-    font-size: @upload-picture-item-size-operation-icon;
-  }
-
-  &-start,
-  &-cancel {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    color: @upload-text-item-color-status-icon;
-    font-size: @upload-text-item-size-status-icon;
-    transform: translateX(-50%) translateY(-50%);
-  }
-
-  &-upload {
-    color: @upload-text-item-color-reupload-icon;
-    font-size: @upload-text-item-size-reupload-icon;
-    cursor: pointer;
-    transition: all @transition-duration-2 ease;
-
-    &:active,
-    &:hover {
-      color: @upload-text-item-color-reupload-icon_hover;
-    }
-  }
-}
-
-.@{upload-prefix-cls}-list {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-
-  &&-type-text,
-  &&-type-picture {
-    width: 100%;
-
-    .@{upload-prefix-cls}-list-item:first-of-type {
-      margin-top: @upload-list-margin-top;
-    }
-  }
-
-  /*** listtype is text ****/
-  &-item-done &-item-file-icon {
-    color: @upload-text-item-color-file-icon_success;
-  }
-
-  &-item {
-    position: relative;
-    display: flex;
-    align-items: center;
-    box-sizing: border-box;
-    margin-top: @upload-text-item-margin-top;
-
-    &-content {
-      display: flex;
-      flex: 1;
-      flex-wrap: nowrap;
-      align-items: center;
-      box-sizing: border-box;
-      width: 100%;
-      padding: @upload-text-item-padding-vertical 0;
-      padding-right: @upload-text-item-padding-right;
-      padding-left: @upload-text-item-padding-left;
-      overflow: hidden;
-      font-size: @upload-text-item-font-size;
-      background-color: @upload-text-item-color-bg;
-      border-radius: @upload-text-item-border-radius;
-      transition: background-color @transition-duration-1
-        @transition-timing-function-linear;
-    }
-
-    &-file-icon {
-      margin-right: @upload-text-item-margin-file-icon-right;
-      color: @upload-text-item-color-file-icon;
-      font-size: @upload-text-item-size-file-icon;
-      line-height: @upload-text-item-size-file-icon;
-    }
-
-    &-thumbnail {
-      flex-shrink: 0;
-      width: @upload-text-item-thumbnail-width;
-      height: @upload-text-item-thumbnail-width;
-      margin-right: @upload-text-item-margin-thumbnail-right;
-
-      img {
-        width: 100%;
-        height: 100%;
-      }
-    }
-
-    &-name {
-      display: flex;
-      flex: 1;
-      align-items: center;
-      margin-right: @upload-text-item-margin-status-left;
-      overflow: hidden;
-      color: @upload-text-item-color-text;
-      font-size: @upload-text-item-font-size;
-      line-height: 1.4286;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-
-      &-link {
-        overflow: hidden;
-        color: @upload-text-item-color-link;
-        text-decoration: none;
-        text-overflow: ellipsis;
-        cursor: pointer;
-      }
-
-      &-text {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        cursor: pointer;
-      }
-    }
-
-    & .@{upload-prefix-cls}-progress {
-      position: relative;
-      margin-left: auto;
-      line-height: @upload-text-item-size-status-icon;
-
-      &:hover {
-        .@{prefix}-progress-circle-bg {
-          stroke: @upload-text-item-color-progress-bg_hover;
-        }
-
-        .@{prefix}-progress-circle-bar {
-          stroke: @upload-text-item-color-progress-bg_hover_active;
-        }
-      }
-    }
-
-    &-operation {
-      margin-left: @upload-text-item-margin-remove-icon-left;
-      color: @upload-text-item-color-remove-icon;
-      font-size: @upload-text-item-size-operation-icon;
-
-      .@{upload-prefix-cls}-icon-remove {
-        font-size: inherit;
-      }
-    }
-  }
-
-  &-item-error,
-  &-item-done {
-    .@{upload-prefix-cls}-list-status {
-      display: none;
-    }
-  }
-
-  &-type-text {
-    .@{upload-prefix-cls}-list-item-error
-      .@{upload-prefix-cls}-list-item-name-link,
-    .@{upload-prefix-cls}-list-item-error .@{upload-prefix-cls}-list-item-name {
-      color: @upload-text-item-color-text_error;
-    }
-
-    .@{upload-prefix-cls}-list-item-done
-      .@{upload-prefix-cls}-list-item-name
-      when
-      not(@upload-text-item-color-text_success = unset) {
-      color: @upload-text-item-color-text_success;
-    }
-
-    .@{upload-prefix-cls}-list-item-uploading
-      .@{upload-prefix-cls}-list-item-name
-      when
-      not(@upload-text-item-color-text_uploading = unset) {
-      color: @upload-text-item-color-text_uploading;
-    }
-  }
-
-  /*** end ****/
-  &&-type-picture-card {
-    display: flex;
-    flex-wrap: wrap;
-    vertical-align: top;
-
-    .@{upload-prefix-cls}-list-status {
-      top: 50%;
-      margin-left: 0;
-      transform: translateY(-50%);
-    }
-  }
-
-  &-picture {
-    display: inline-block;
-    margin-top: 0;
-    margin-right: @upload-picture-item-margin-right;
-    margin-bottom: @upload-picture-item-margin-bottom;
-    padding-right: 0;
-    overflow: hidden;
-    vertical-align: top;
-    transition: all @transition-duration-2 @transition-timing-function-standard;
-  }
-
-  &-picture-status-error &-picture-mask {
-    opacity: 1;
-  }
-
-  &-picture {
-    position: relative;
-    box-sizing: border-box;
-    width: @upload-picture-item-size-width;
-    height: @upload-picture-item-size-width;
-    overflow: hidden;
-    line-height: @upload-picture-item-size-width;
-    text-align: center;
-    vertical-align: top;
-    border-radius: @upload-picture-item-border-radius;
-
-    img {
-      width: 100%;
-      height: 100%;
-    }
-
-    &-mask {
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      color: @upload-picture-item-color-operation-icon;
-      font-size: @upload-picture-item-size-mask-icon;
-      line-height: @upload-picture-item-size-width;
-      text-align: center;
-      background: @upload-picture-item-color-operation_bg;
-      cursor: pointer;
-      opacity: 0;
-      transition: opacity @transition-duration-1
-        @transition-timing-function-linear;
-    }
-
-    &-operation {
-      display: none;
-      font-size: @upload-picture-item-size-operation-icon;
-
-      .@{upload-prefix-cls}-icon-retry {
-        color: @upload-picture-item-color-operation-icon;
-      }
-    }
-
-    &-error-tip {
-      .@{upload-prefix-cls}-icon-error {
-        color: @upload-picture-item-color-error-icon;
-        font-size: @upload-picture-item-size-error-icon;
-      }
-    }
-
-    &-mask:hover {
-      opacity: 1;
-    }
-
-    &-mask:hover &-operation {
-      display: flex;
-      justify-content: space-evenly;
-    }
-
-    &-mask:hover &-error-tip {
-      display: none;
-    }
-  }
-
-  // picture-list
-  &-type-picture {
-    .@{upload-prefix-cls}-list-item-content {
-      padding-top: @upload-picture-text-item-padding-vertical;
-      padding-bottom: @upload-picture-text-item-padding-vertical;
-    }
-
-    .@{upload-prefix-cls}-list-item-error
-      .@{upload-prefix-cls}-list-item-content {
-      background-color: @upload-picture-text-item-color-bg_error;
-    }
-
-    .@{upload-prefix-cls}-list-item-error
-      .@{upload-prefix-cls}-list-item-name-link,
-    .@{upload-prefix-cls}-list-item-error .@{upload-prefix-cls}-list-item-name {
-      color: @upload-picture-text-item-color-text_error;
-    }
-
-    .@{upload-prefix-cls}-list-item-done
-      .@{upload-prefix-cls}-list-item-name
-      when
-      not(@upload-picture-text-item-color-text_success = unset) {
-      color: @upload-picture-text-item-color-text_success;
-    }
-
-    .@{upload-prefix-cls}-list-item-uploading
-      .@{upload-prefix-cls}-list-item-name
-      when
-      not(@upload-picture-text-item-color-text_uploading = unset) {
-      color: @upload-picture-text-item-color-text_uploading;
-    }
-  }
-}
-
-.@{upload-prefix-cls}-hide + .@{upload-prefix-cls}-list {
-  .@{upload-prefix-cls}-list-item:first-of-type {
-    margin-top: 0;
-  }
-}
-
-.@{upload-prefix-cls}-slide-up-enter {
-  opacity: 0;
-}
-
-.@{upload-prefix-cls}-slide-up-enter-active {
-  opacity: 1;
-  transition: opacity @transition-duration-2
-    @transition-timing-function-standard;
-}
-
-.@{upload-prefix-cls}-slide-up-exit {
-  opacity: 1;
-}
-
-.@{upload-prefix-cls}-slide-up-exit-active {
-  margin: 0;
-  overflow: hidden;
-  opacity: 0;
-  transition: opacity @transition-duration-1 @transition-timing-function-linear,
-    height @transition-duration-3 @transition-timing-function-standard
-      @transition-duration-1,
-    margin @transition-duration-3 @transition-timing-function-standard
-      @transition-duration-1;
-}
-
-.@{upload-prefix-cls}-list-item {
-  &.@{upload-prefix-cls}-slide-inline-enter {
-    opacity: 0;
-  }
-
-  &.@{upload-prefix-cls}-slide-inline-enter-active {
-    opacity: 1;
-    transition: opacity @transition-duration-2
-      @transition-timing-function-linear;
-  }
-
-  &.@{upload-prefix-cls}-slide-inline-exit {
-    opacity: 1;
-  }
-
-  &.@{upload-prefix-cls}-slide-inline-exit-active {
-    margin: 0;
-    overflow: hidden;
-    opacity: 0;
-    transition: opacity @transition-duration-1
-        @transition-timing-function-linear,
-      width @transition-duration-3 @transition-timing-function-standard
-        @transition-duration-1,
-      margin @transition-duration-3 @transition-timing-function-standard
-        @transition-duration-1;
-  }
-}
+@import './token.less';
+
+@upload-prefix-cls: ~'@{prefix}-upload';
+
+.@{upload-prefix-cls} {
+  display: inline-block;
+  max-width: 100%;
+  cursor: pointer;
+
+  &&-draggable {
+    width: 100%;
+  }
+
+  &-tip {
+    margin-top: @upload-tip-margin-top;
+    overflow: hidden;
+    color: @upload-tip-color-text;
+    font-size: @upload-tip-font-size;
+    line-height: 1.5;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  &-picture-card {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    min-width: @upload-picture-item-width;
+    height: @upload-picture-item-width;
+    margin-bottom: 0;
+    color: @upload-picture-color-text;
+    text-align: center;
+    background: @upload-picture-color-bg;
+    border: @upload-picture-border-width @upload-picture-border-style
+      @upload-picture-color-border;
+    border-radius: @upload-picture-border-radius;
+    transition: all @transition-duration-1 @transition-timing-function-linear;
+
+    &:hover {
+      color: @upload-picture-color-text_hover;
+      background-color: @upload-picture-color-bg_hover;
+      border-color: @upload-picture-color-border_hover;
+    }
+  }
+
+  &-drag {
+    width: 100%;
+    padding: @upload-drag-padding-vertical 0;
+    color: @upload-drag-color-text;
+    text-align: center;
+    background-color: @upload-drag-color-bg;
+    border: @upload-drag-border-width @upload-drag-border-style
+      @upload-drag-color-border;
+    border-radius: @upload-drag-border-radius;
+    transition: all @transition-duration-2 ease;
+
+    .@{prefix}-icon-plus {
+      margin-bottom: @upload-drag-margin-icon-bottom;
+      color: @upload-drag-color-icon;
+      font-size: @upload-drag-size-icon;
+    }
+
+    &:hover {
+      background-color: @upload-drag-color-bg_hover;
+      border-color: @upload-drag-color-border_hover;
+
+      .@{upload-prefix-cls}-drag-text {
+        color: @upload-drag-color-text_hover;
+      }
+
+      .@{prefix}-icon-plus {
+        color: @upload-drag-color-icon_hover;
+      }
+    }
+
+    &-active {
+      color: @upload-drag-color-text_active;
+      background-color: @upload-drag-color-bg_active;
+      border-color: @upload-drag-color-border_active;
+
+      .@{upload-prefix-cls}-drag-text {
+        color: @upload-drag-color-text_active;
+      }
+
+      .@{prefix}-icon-plus {
+        color: @upload-drag-color-icon_active;
+      }
+    }
+
+    .@{upload-prefix-cls}-tip {
+      margin-top: @upload-drag-tip-margin-top;
+    }
+  }
+
+  &-drag-text {
+    color: @upload-drag-color-text;
+    font-size: @upload-drag-font-size;
+    line-height: 1.5;
+  }
+
+  &-wrapper {
+    width: 100%;
+
+    &&-type-picture-card {
+      display: flex;
+      justify-content: flex-start;
+    }
+  }
+
+  &-drag {
+    width: 100%;
+  }
+
+  &-hide {
+    display: none;
+  }
+
+  &-disabled {
+    .@{upload-prefix-cls}-picture-card,
+    .@{upload-prefix-cls}-picture-card:hover {
+      color: @upload-picture-color-text_disabled;
+      background-color: @upload-picture-color-bg_disabled;
+      border-color: @upload-picture-color-border_disabled;
+      cursor: not-allowed;
+    }
+
+    .@{upload-prefix-cls}-drag,
+    .@{upload-prefix-cls}-drag:hover {
+      background-color: @upload-drag-color-bg_disabled;
+      border-color: @upload-drag-color-border_disabled;
+      cursor: not-allowed;
+
+      .@{prefix}-icon-plus,
+      .@{upload-prefix-cls}-drag-text {
+        color: @upload-drag-color-text_disabled;
+      }
+    }
+
+    .@{upload-prefix-cls}-tip {
+      color: @upload-drag-color-text_disabled;
+    }
+  }
+}
+
+.@{upload-prefix-cls}-icon {
+  cursor: pointer;
+
+  &-error {
+    margin-left: @upload-text-item-margin-error-icon-left;
+    color: @upload-text-item-color-error-icon;
+  }
+
+  &-success {
+    color: @upload-text-item-color-success-icon;
+    font-size: @upload-text-item-size-success-icon;
+    line-height: @upload-text-item-size-success-icon;
+  }
+
+  &-remove {
+    position: relative;
+    font-size: @upload-picture-item-size-operation-icon;
+  }
+
+  &-start,
+  &-cancel {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    color: @upload-text-item-color-status-icon;
+    font-size: @upload-text-item-size-status-icon;
+    transform: translateX(-50%) translateY(-50%);
+  }
+
+  &-upload {
+    color: @upload-text-item-color-reupload-icon;
+    font-size: @upload-text-item-size-reupload-icon;
+    cursor: pointer;
+    transition: all @transition-duration-2 ease;
+
+    &:active,
+    &:hover {
+      color: @upload-text-item-color-reupload-icon_hover;
+    }
+  }
+}
+
+.@{upload-prefix-cls}-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+
+  &&-type-text,
+  &&-type-picture {
+    width: 100%;
+
+    .@{upload-prefix-cls}-list-item:first-of-type {
+      margin-top: @upload-list-margin-top;
+    }
+  }
+
+  /*** listtype is text ****/
+  &-item-done &-item-file-icon {
+    color: @upload-text-item-color-file-icon_success;
+  }
+
+  &-item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    margin-top: @upload-text-item-margin-top;
+
+    &-content {
+      display: flex;
+      flex: 1;
+      flex-wrap: nowrap;
+      align-items: center;
+      box-sizing: border-box;
+      width: 100%;
+      padding: @upload-text-item-padding-vertical 0;
+      padding-right: @upload-text-item-padding-right;
+      padding-left: @upload-text-item-padding-left;
+      overflow: hidden;
+      font-size: @upload-text-item-font-size;
+      background-color: @upload-text-item-color-bg;
+      border-radius: @upload-text-item-border-radius;
+      transition: background-color @transition-duration-1
+        @transition-timing-function-linear;
+    }
+
+    &-file-icon {
+      margin-right: @upload-text-item-margin-file-icon-right;
+      color: @upload-text-item-color-file-icon;
+      font-size: @upload-text-item-size-file-icon;
+      line-height: @upload-text-item-size-file-icon;
+    }
+
+    &-thumbnail {
+      flex-shrink: 0;
+      width: @upload-text-item-thumbnail-width;
+      height: @upload-text-item-thumbnail-width;
+      margin-right: @upload-text-item-margin-thumbnail-right;
+
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    &-name {
+      display: flex;
+      flex: 1;
+      align-items: center;
+      margin-right: @upload-text-item-margin-status-left;
+      overflow: hidden;
+      color: @upload-text-item-color-text;
+      font-size: @upload-text-item-font-size;
+      line-height: 1.4286;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+
+      &-link {
+        overflow: hidden;
+        color: @upload-text-item-color-link;
+        text-decoration: none;
+        text-overflow: ellipsis;
+        cursor: pointer;
+      }
+
+      &-text {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        cursor: pointer;
+      }
+    }
+
+    & .@{upload-prefix-cls}-progress {
+      position: relative;
+      margin-left: auto;
+      line-height: @upload-text-item-size-status-icon;
+
+      &:hover {
+        .@{prefix}-progress-circle-bg {
+          stroke: @upload-text-item-color-progress-bg_hover;
+        }
+
+        .@{prefix}-progress-circle-bar {
+          stroke: @upload-text-item-color-progress-bg_hover_active;
+        }
+      }
+    }
+
+    &-operation {
+      margin-left: @upload-text-item-margin-remove-icon-left;
+      color: @upload-text-item-color-remove-icon;
+      font-size: @upload-text-item-size-operation-icon;
+
+      .@{upload-prefix-cls}-icon-remove {
+        font-size: inherit;
+      }
+    }
+  }
+
+  &-item-error,
+  &-item-done {
+    .@{upload-prefix-cls}-list-status {
+      display: none;
+    }
+  }
+
+  &-type-text {
+    .@{upload-prefix-cls}-list-item-error
+      .@{upload-prefix-cls}-list-item-name-link,
+    .@{upload-prefix-cls}-list-item-error .@{upload-prefix-cls}-list-item-name {
+      color: @upload-text-item-color-text_error;
+    }
+
+    .@{upload-prefix-cls}-list-item-done
+      .@{upload-prefix-cls}-list-item-name
+      when
+      not(@upload-text-item-color-text_success = unset) {
+      color: @upload-text-item-color-text_success;
+    }
+
+    .@{upload-prefix-cls}-list-item-uploading
+      .@{upload-prefix-cls}-list-item-name
+      when
+      not(@upload-text-item-color-text_uploading = unset) {
+      color: @upload-text-item-color-text_uploading;
+    }
+  }
+
+  /*** end ****/
+  &&-type-picture-card {
+    display: flex;
+    flex-wrap: wrap;
+    vertical-align: top;
+
+    .@{upload-prefix-cls}-list-status {
+      top: 50%;
+      margin-left: 0;
+      transform: translateY(-50%);
+    }
+  }
+
+  &-picture {
+    display: inline-block;
+    margin-top: 0;
+    margin-right: @upload-picture-item-margin-right;
+    margin-bottom: @upload-picture-item-margin-bottom;
+    padding-right: 0;
+    overflow: hidden;
+    vertical-align: top;
+    transition: all @transition-duration-2 @transition-timing-function-standard;
+  }
+
+  &-picture-status-error &-picture-mask {
+    opacity: 1;
+  }
+
+  &-picture {
+    position: relative;
+    box-sizing: border-box;
+    width: @upload-picture-item-size-width;
+    height: @upload-picture-item-size-width;
+    overflow: hidden;
+    line-height: @upload-picture-item-size-width;
+    text-align: center;
+    vertical-align: top;
+    border-radius: @upload-picture-item-border-radius;
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+
+    &-mask {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      color: @upload-picture-item-color-operation-icon;
+      font-size: @upload-picture-item-size-mask-icon;
+      line-height: @upload-picture-item-size-width;
+      text-align: center;
+      background: @upload-picture-item-color-operation_bg;
+      cursor: pointer;
+      opacity: 0;
+      transition: opacity @transition-duration-1
+        @transition-timing-function-linear;
+    }
+
+    &-operation {
+      display: none;
+      font-size: @upload-picture-item-size-operation-icon;
+
+      .@{upload-prefix-cls}-icon-retry {
+        color: @upload-picture-item-color-operation-icon;
+      }
+    }
+
+    &-error-tip {
+      .@{upload-prefix-cls}-icon-error {
+        color: @upload-picture-item-color-error-icon;
+        font-size: @upload-picture-item-size-error-icon;
+      }
+    }
+
+    &-mask:hover {
+      opacity: 1;
+    }
+
+    &-mask:hover &-operation {
+      display: flex;
+      justify-content: space-evenly;
+    }
+
+    &-mask:hover &-error-tip {
+      display: none;
+    }
+  }
+
+  // picture-list
+  &-type-picture {
+    .@{upload-prefix-cls}-list-item-content {
+      padding-top: @upload-picture-text-item-padding-vertical;
+      padding-bottom: @upload-picture-text-item-padding-vertical;
+    }
+
+    .@{upload-prefix-cls}-list-item-error
+      .@{upload-prefix-cls}-list-item-content {
+      background-color: @upload-picture-text-item-color-bg_error;
+    }
+
+    .@{upload-prefix-cls}-list-item-error
+      .@{upload-prefix-cls}-list-item-name-link,
+    .@{upload-prefix-cls}-list-item-error .@{upload-prefix-cls}-list-item-name {
+      color: @upload-picture-text-item-color-text_error;
+    }
+
+    .@{upload-prefix-cls}-list-item-done
+      .@{upload-prefix-cls}-list-item-name
+      when
+      not(@upload-picture-text-item-color-text_success = unset) {
+      color: @upload-picture-text-item-color-text_success;
+    }
+
+    .@{upload-prefix-cls}-list-item-uploading
+      .@{upload-prefix-cls}-list-item-name
+      when
+      not(@upload-picture-text-item-color-text_uploading = unset) {
+      color: @upload-picture-text-item-color-text_uploading;
+    }
+  }
+}
+
+.@{upload-prefix-cls}-hide + .@{upload-prefix-cls}-list {
+  .@{upload-prefix-cls}-list-item:first-of-type {
+    margin-top: 0;
+  }
+}
+
+.@{upload-prefix-cls}-slide-up-enter {
+  opacity: 0;
+}
+
+.@{upload-prefix-cls}-slide-up-enter-active {
+  opacity: 1;
+  transition: opacity @transition-duration-2
+    @transition-timing-function-standard;
+}
+
+.@{upload-prefix-cls}-slide-up-exit {
+  opacity: 1;
+}
+
+.@{upload-prefix-cls}-slide-up-exit-active {
+  margin: 0;
+  overflow: hidden;
+  opacity: 0;
+  transition: opacity @transition-duration-1 @transition-timing-function-linear,
+    height @transition-duration-3 @transition-timing-function-standard
+      @transition-duration-1,
+    margin @transition-duration-3 @transition-timing-function-standard
+      @transition-duration-1;
+}
+
+.@{upload-prefix-cls}-list-item {
+  &.@{upload-prefix-cls}-slide-inline-enter {
+    opacity: 0;
+  }
+
+  &.@{upload-prefix-cls}-slide-inline-enter-active {
+    opacity: 1;
+    transition: opacity @transition-duration-2
+      @transition-timing-function-linear;
+  }
+
+  &.@{upload-prefix-cls}-slide-inline-exit {
+    opacity: 1;
+  }
+
+  &.@{upload-prefix-cls}-slide-inline-exit-active {
+    margin: 0;
+    overflow: hidden;
+    opacity: 0;
+    transition: opacity @transition-duration-1
+        @transition-timing-function-linear,
+      width @transition-duration-3 @transition-timing-function-standard
+        @transition-duration-1,
+      margin @transition-duration-3 @transition-timing-function-standard
+        @transition-duration-1;
+  }
+}