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-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
// -----------------------------
.@{btn-prefix-cls} {
@ -69,6 +80,10 @@
.btn-danger;
}
&-link {
.btn-link;
}
&-round {
.btn-round(@btn-prefix-cls);
}
@ -162,6 +177,11 @@
.button-variant-ghost(@btn-danger-color);
}
&-background-ghost&-link {
.button-variant-ghost(@primary-color; transparent);
color: @component-background;
}
&-two-chinese-chars::first-letter {
letter-spacing: 0.34em;
}

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

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