diff --git a/style/mobile/components/button/v2/_index.less b/style/mobile/components/button/v2/_index.less index 81c3f38b7d..1022c2880b 100644 --- a/style/mobile/components/button/v2/_index.less +++ b/style/mobile/components/button/v2/_index.less @@ -60,6 +60,46 @@ } } +.ghost-theme(@theme) { + @color: "button-ghost-@{theme}-color"; + @hoverColor: "button-ghost-@{theme}-hover-color"; + @borderColor: "button-ghost-@{theme}-border-color"; + + &.@{button}--@{theme} when (@theme = primary), (@theme = danger) { + color: @@color; + + &::after { + border-color: @@borderColor; + } + + &.@{button}--hover { + color: @@hoverColor; + + &::after { + background-color: transparent; + border-color: @@hoverColor; + } + } + } + + &.@{button}--@{theme} { + + &.@{button}--text.@{button}--hover, + &.@{button}--text.@{button}--hover::after { + background-color: @gray-color-10; + } + + &.@{button}--disabled { + background-color: transparent; + color: @button-ghost-disabled-color; + + &::after { + border-color: @button-ghost-disabled-color; + } + } + } +} + .button-size(extra-small); .button-size(small); .button-size(medium); @@ -165,64 +205,6 @@ } } - &--ghost { - background-color: transparent; - color: @button-ghost-color; - - &::after { - border-color: @button-ghost-border-color; - } - - &.@{button}--hover { - color: @button-ghost-hover-color; - - &::after { - background: none; - } - } - - &.@{button}--primary { - color: @button-ghost-primary-color; - - &.@{button}--hover { - color: @button-ghost-primary-hover-color; - - &::after { - border-color: @button-ghost-primary-hover-color; - } - } - - &::after { - border-color: @button-ghost-primary-border-color; - } - } - - &.@{button}--danger { - color: @button-ghost-danger-color; - - &.@{button}--hover { - color: @button-ghost-danger-hover-color; - - &::after { - border-color: @button-ghost-danger-hover-color; - } - } - - &::after { - border-color: @button-ghost-danger-border-color; - } - } - - &.@{button}--disabled { - background-color: transparent; - color: @button-ghost-disabled-color; - - &::after { - border-color: @button-ghost-disabled-color; - } - } - } - &--dashed, &--outline { color: @button-default-outline-color; @@ -331,6 +313,29 @@ } } + &--ghost { + background-color: transparent; + color: @button-ghost-color; + + &::after { + border-color: @button-ghost-border-color; + } + + &.@{button}--default.@{button}--hover { + color: @button-ghost-hover-color; + + &::after { + background-color: transparent; + border-color: @button-ghost-hover-color; + } + } + + // 不考虑 ghost + light 场景 + .ghost-theme(primary); + .ghost-theme(danger); + .ghost-theme(default); + } + .@{prefix}-loading + &__content:not(:empty), .@{prefix}-icon + &__content:not(:empty), &__content:not(:empty) + .@{prefix}-icon { diff --git a/style/mobile/components/button/v2/_var.less b/style/mobile/components/button/v2/_var.less index 2c0d0ffa9e..c400dc9ef9 100644 --- a/style/mobile/components/button/v2/_var.less +++ b/style/mobile/components/button/v2/_var.less @@ -53,7 +53,7 @@ @button-danger-color: var(--td-button-danger-color, @font-white-1); @button-danger-border-color: var(--td-button-danger-border-color, @error-color); @button-danger-bg-color: var(--td-button-danger-bg-color, @error-color); -@button-danger-disabled-color: var(--td-button-danger-disabled-color, @font-white-1); +@button-danger-disabled-color: var(--td-button-danger-disabled-color, @error-color-disabled); @button-danger-disabled-bg: var(--td-button-danger-disabled-bg, @error-color-3); @button-danger-disabled-border-color: var(--td-button-danger-disabled-border-color, @error-color-3); // default + outline @@ -83,9 +83,9 @@ // light + text @button-light-text-color: var(--td-button-light-text-color, @brand-color); // ghost 优先级高于 theme,固定透明背景,白色边框,白色字体 -@button-ghost-color: var(--td-button-ghost-color, @bg-color-container); +@button-ghost-color: var(--td-button-ghost-color, #fff); @button-ghost-border-color: var(--td-button-ghost-border-color, @button-ghost-color); -@button-ghost-disabled-color: var(--td-button-ghost-disabled-color, rgba(255, 255, 255, .35)); +@button-ghost-disabled-color: var(--td-button-ghost-disabled-color, @font-white-4); @button-ghost-hover-color: var(--td-button-ghost-hover-color, @font-white-2); @button-ghost-primary-color: var(--td-button-ghost-primary-color, @brand-color); @button-ghost-primary-border-color: var(--td-button-ghost-primary-border-color, @brand-color);