Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(Button): support ghost + text button #1952

Merged
merged 3 commits into from
Oct 15, 2024
Merged

feat(Button): support ghost + text button #1952

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
32fd5d9
feat(Button): support ghost + text button
anlyyao Sep 26, 2024
80d6237
fix: fix lint
anlyyao Sep 27, 2024
be4a1d8
fix: fix cr
anlyyao Oct 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
121 changes: 63 additions & 58 deletions style/mobile/components/button/v2/_index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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 {
Expand Down
6 changes: 3 additions & 3 deletions style/mobile/components/button/v2/_var.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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);
Expand Down