Skip to content

Commit f7a57fe

Browse files
committed
feat: add link button
1 parent 6c9de71 commit f7a57fe

File tree

2 files changed

+37
-6
lines changed

2 files changed

+37
-6
lines changed

components/button/style/index.less

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,17 @@
99
@btn-ghost-bg: transparent;
1010
@btn-ghost-border: @border-color-base;
1111

12+
.btn-link() {
13+
.button-variant-other(@primary-color, transparent, transparent);
14+
box-shadow: none;
15+
&:hover,
16+
&:focus,
17+
&:active {
18+
border-color: transparent;
19+
}
20+
.button-disabled(@disabled-color; transparent; transparent);
21+
}
22+
1223
// Button styles
1324
// -----------------------------
1425
.@{btn-prefix-cls} {
@@ -69,6 +80,10 @@
6980
.btn-danger;
7081
}
7182

83+
&-link {
84+
.btn-link;
85+
}
86+
7287
&-round {
7388
.btn-round(@btn-prefix-cls);
7489
}
@@ -162,6 +177,11 @@
162177
.button-variant-ghost(@btn-danger-color);
163178
}
164179

180+
&-background-ghost&-link {
181+
.button-variant-ghost(@primary-color; transparent);
182+
color: @component-background;
183+
}
184+
165185
&-two-chinese-chars::first-letter {
166186
letter-spacing: 0.34em;
167187
}

components/button/style/mixin.less

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
border-radius: @border-radius;
88
}
99

10-
.button-disabled() {
10+
.button-disabled(@color: @btn-disable-color; @background: @btn-disable-bg; @border: @btn-disable-border) {
1111
&-disabled,
1212
&.disabled,
1313
&[disabled] {
@@ -16,7 +16,8 @@
1616
&:focus,
1717
&:active,
1818
&.active {
19-
.button-color(@btn-disable-color; @btn-disable-bg; @btn-disable-border);
19+
.button-color(@color; @background; @border);
20+
2021
text-shadow: none;
2122
box-shadow: none;
2223
}
@@ -84,16 +85,26 @@
8485
}
8586
.button-disabled();
8687
}
87-
.button-variant-ghost(@color) {
88-
.button-color(@color; transparent; @color);
88+
.button-variant-ghost(@color; @border: @color) {
89+
.button-color(@color; transparent; @border);
8990
text-shadow: none;
9091
&:hover,
9192
&:focus {
92-
.button-color(~`colorPalette('@{color}', 5) `; transparent; ~`colorPalette('@{color}', 5) `);
93+
& when (@border = transparent) {
94+
.button-color(~`colorPalette('@{color}', 5) `; transparent; transparent);
95+
}
96+
& when not(@border = transparent) {
97+
.button-color(~`colorPalette('@{color}', 5) `; transparent; ~`colorPalette('@{color}', 5) `);
98+
}
9399
}
94100
&:active,
95101
&.active {
96-
.button-color(~`colorPalette('@{color}', 7) `; transparent; ~`colorPalette('@{color}', 7) `);
102+
& when (@border = transparent) {
103+
.button-color(~`colorPalette('@{color}', 7) `; transparent; transparent);
104+
}
105+
& when not(@border = transparent) {
106+
.button-color(~`colorPalette('@{color}', 7) `; transparent; ~`colorPalette('@{color}', 7) `);
107+
}
97108
}
98109
.button-disabled();
99110
}

0 commit comments

Comments
 (0)