github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: add link button

pull/1272/head
tangjinzhou 2019-10-11 22:05:02 +08:00
parent 6c9de7146c
commit f7a57fe170
2 changed files with 37 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
components/button/style/index.less
View File

@ -9,6 +9,17 @@
@btn-ghost-bg: transparent; @btn-ghost-bg: transparent;
@btn-ghost-border: @border-color-base; @btn-ghost-border: @border-color-base;
.btn-link() {
.button-variant-other(@primary-color, transparent, transparent);
box-shadow: none;
&:hover,
&:focus,
&:active {
border-color: transparent;
}
.button-disabled(@disabled-color; transparent; transparent);
}
// Button styles // Button styles
// ----------------------------- // -----------------------------
.@{btn-prefix-cls} { .@{btn-prefix-cls} {
@ -69,6 +80,10 @@
.btn-danger; .btn-danger;
} }
&-link {
.btn-link;
}
&-round { &-round {
.btn-round(@btn-prefix-cls); .btn-round(@btn-prefix-cls);
} }
@ -162,6 +177,11 @@
.button-variant-ghost(@btn-danger-color); .button-variant-ghost(@btn-danger-color);
} }
&-background-ghost&-link {
.button-variant-ghost(@primary-color; transparent);
color: @component-background;
}
&-two-chinese-chars::first-letter { &-two-chinese-chars::first-letter {
letter-spacing: 0.34em; letter-spacing: 0.34em;
} }

19
components/button/style/mixin.less
View File

@ -7,7 +7,7 @@
border-radius: @border-radius; border-radius: @border-radius;
} }
.button-disabled() { .button-disabled(@color: @btn-disable-color; @background: @btn-disable-bg; @border: @btn-disable-border) {
&-disabled, &-disabled,
&.disabled, &.disabled,
&[disabled] { &[disabled] {
@ -16,7 +16,8 @@
&:focus, &:focus,
&:active, &:active,
&.active { &.active {
.button-color(@btn-disable-color; @btn-disable-bg; @btn-disable-border); .button-color(@color; @background; @border);
text-shadow: none; text-shadow: none;
box-shadow: none; box-shadow: none;
} }
@ -84,17 +85,27 @@
} }
.button-disabled(); .button-disabled();
} }
.button-variant-ghost(@color) { .button-variant-ghost(@color; @border: @color) {
.button-color(@color; transparent; @color); .button-color(@color; transparent; @border);
text-shadow: none; text-shadow: none;
&:hover, &:hover,
&:focus { &:focus {
& when (@border = transparent) {
.button-color(~`colorPalette('@{color}', 5) `; transparent; transparent);
}
& when not(@border = transparent) {
.button-color(~`colorPalette('@{color}', 5) `; transparent; ~`colorPalette('@{color}', 5) `); .button-color(~`colorPalette('@{color}', 5) `; transparent; ~`colorPalette('@{color}', 5) `);
} }
}
&:active, &:active,
&.active { &.active {
& when (@border = transparent) {
.button-color(~`colorPalette('@{color}', 7) `; transparent; transparent);
}
& when not(@border = transparent) {
.button-color(~`colorPalette('@{color}', 7) `; transparent; ~`colorPalette('@{color}', 7) `); .button-color(~`colorPalette('@{color}', 7) `; transparent; ~`colorPalette('@{color}', 7) `);
} }
}
.button-disabled(); .button-disabled();
} }
.button-color(@color; @background; @border) { .button-color(@color; @background; @border) {