upload disabled style (#1639)

* feat(Upload): 文件列表支持显示上传失败的原因 * fix: lint error * feat: upload disabled style * fix: lint error * fix: lint error --------- Co-authored-by: sheepluo <[email protected]>
Tencent · Nov 7, 2023 · e82c00e · e82c00e
1 parent 09982eb
commit e82c00e
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 2 deletions.
diff --git a/style/web/components/upload/_index.less b/style/web/components/upload/_index.less
@@ -205,17 +205,23 @@
       border-radius: @upload-card-img-wrap-border-radius;
       .hover-transition(border);
 
-      &:hover {
+      &:hover:not(.@{prefix}-is-disabled) {
         border-color: @upload-card-item-bg-border-color-hover;
         .hover-transition(border-color);
       }
+
+      > .t-icon {
+        color: @upload-icon-color;
+      }
+
       > .t-icon,
       .@{prefix}-loading {
         font-size: @upload-icon-size-large;
         margin-bottom: @upload-card-container-icon-add-margin-bottom;
       }
 
-      > p {
+      > p,
+      .@{prefix}-upload__add-text {
         color: @text-color-placeholder;
         margin: 0;
       }
@@ -683,3 +689,15 @@
   display: flex;
   align-items: center;
 }
+
+.@{prefix}-upload__card-container.@{prefix}-is-disabled {
+  cursor: not-allowed;
+
+  .@{prefix}-upload__add-text {
+    color: @upload-text-disabled-color;
+  }
+
+  .t-icon {
+    color: @upload-icon-disabled-color;
+  }
+}
diff --git a/style/web/components/upload/_var.less b/style/web/components/upload/_var.less
@@ -15,6 +15,7 @@
 @upload-z-index: 2;
 
 // 颜色
+@upload-text-disabled-color: @text-color-disabled;
 @upload-icon-check-circle-filled-color: @success-color;
 @upload-icon-error-circle-filled-color: @error-color;
 @upload-icon-loading-color: @brand-color;
@@ -25,6 +26,7 @@
 @upload-small-color: @text-color-placeholder;
 @upload-placeholder-color: @text-color-placeholder;
 @upload-icon-color: @text-color-placeholder;
+@upload-icon-disabled-color: @text-color-disabled;
 @upload-icon-color-hover: @text-color-secondary;
 @upload-list-file-icon-color: @brand-color;
 @upload-list-item-error-color: @error-color;