diff --git a/style/mobile/components/tag/v2/_index.less b/style/mobile/components/tag/v2/_index.less index 2e844b14c1..600760149c 100644 --- 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 index 52948e1a9b..ed2fa7713f 100644 --- 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);