fix(Tag): resolve disabled style error

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

Hide file tree

Showing 2 changed files with 53 additions and 7 deletions.
diff --git a/style/mobile/components/tag/v2/_index.less b/style/mobile/components/tag/v2/_index.less
@@ -150,13 +150,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);
+