fix(Tag): resolve disabled style error

Tencent · Apr 17, 2024 · f2b746b · f2b746b
1 parent bcd1481
commit f2b746b
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 8 deletions.
diff --git a/style/mobile/components/tag/v2/_index.less b/style/mobile/components/tag/v2/_index.less
@@ -61,7 +61,8 @@
       }
 
       .@{prefix}-tag__icon:not(:empty) + .@{prefix}-tag__text:not(:empty),
-      .@{prefix}-tag__text:not(:empty) + .@{prefix}-tag__icon-close:not(:empty) {
+      .@{prefix}-tag__text:not(:empty)
+        + .@{prefix}-tag__icon-close:not(:empty) {
         margin-left: 2px;
       }
     }
@@ -150,13 +151,52 @@
       border-color: @component-border;
     }
   }
+}
 
-  &.@{prefix}-tag--closable {
-    &.@{prefix}-tag--disabled {
-      cursor: not-allowed;
-      color: @tag-disabled-color;
-      background-color: @tag-disabled-background-color;
-      border-color: @tag-disabled-border-color;
-    }
+.@{prefix}-tag--disabled.@{prefix}-tag--default {
+  cursor: not-allowed;
+
+  &.@{prefix}-tag--dark,
+  &.@{prefix}-tag--light,
+  &.@{prefix}-tag--light-outline,
+  &.@{prefix}-tag--outline {
+    color: @tag-disabled-color;
+  }
+
+  &.@{prefix}-tag--dark,
+  &.@{prefix}-tag--light,
+  &.@{prefix}-tag--light-outline {
+    background-color: @tag-disabled-background-color;
+  }
+
+  &.@{prefix}-tag--light-outline,
+  &.@{prefix}-tag--outline {
+    border-color: @tag-disabled-border-color;
+  }
+}
+
+.@{prefix}-tag--checked.@{prefix}-tag--disabled.@{prefix}-tag--primary {
+  cursor: not-allowed;
+
+  &.@{prefix}-tag--light,
+  &.@{prefix}-tag--light-outline,
+  &.@{prefix}-tag--outline {
+    color: @tag-checked-disabled-color;
+  }
+
+  &.@{prefix}-tag--dark {
+    color: @tag-checked-dark-disabled-color;
+    background-color: @tag-checked-disabled-background-color;
+  }
+
+  &.@{prefix}-tag--light,
+  &.@{prefix}-tag--light-outline {
+    background-color: @tag-checked-light-disabled-background-color;
+  }
+
+  &.@{prefix}-tag--dark,
+  &.@{prefix}-tag--light-outline,
+  &.@{prefix}-tag--outline {
+    border-color: @tag-checked-disabled-border-color;
   }
 }
diff --git a/style/mobile/components/tag/v2/_var.less b/style/mobile/components/tag/v2/_var.less
@@ -45,3 +45,10 @@
 @tag-mark-border-radius: var(--td-tag-mark-border-radius, @tag-round-border-radius);
 
 @tag-close-icon-color: var(--td-tag-close-icon-color, @text-color-placeholder);
+
+
+@tag-checked-disabled-color: var(--td-tag-checked-disabled-color, @brand-color-disabled);
+@tag-checked-disabled-background-color: var(--td-tag-checked-disabled-background-color, @brand-color-disabled);
+@tag-checked-disabled-border-color: var(--td-tag-checked-disabled-border-color, @brand-color-disabled);
+@tag-checked-dark-disabled-color: var(--td-tag-checked-dark-disabled-color, @font-white-2);
+@tag-checked-light-disabled-background-color: var(--td-tag-checked-light-disabled-background-color, @brand-color-light);