mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-29 05:29:37 +08:00
Code Issues Actions 22 Packages Projects Releases Wiki Activity

Use height over padding for button size, close #5256

Browse Source
This commit is contained in:
afc163 2017-04-16 19:01:46 +08:00
parent 03e9a97e2b
commit 6b1cec2bf6
3 changed files with 21 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,9 +1,10 @@
// mixins for button
// ------------------------
.button-size(@padding; @font-size; @border-radius) {
.button-size(@height; @padding; @font-size; @border-radius) {
padding: @padding;
font-size: @font-size;
border-radius: @border-radius;
height: @height;
}
.button-disabled() {
@ -107,11 +108,11 @@
// size
&-lg > .@{btnClassName} {
.button-size(@btn-padding-lg; @btn-font-size-lg; @btn-border-radius-base);
.button-size(@btn-height-lg; @btn-padding-lg; @btn-font-size-lg; @btn-border-radius-base);
}
&-sm > .@{btnClassName} {
.button-size(@btn-padding-sm; @font-size-base; @btn-border-radius-sm);
.button-size(@btn-height-sm; @btn-padding-sm; @font-size-base; @btn-border-radius-sm);
> .@{iconfont-css-prefix} {
font-size: @font-size-base;
}
@ -131,7 +132,7 @@
border: @border-width-base @border-style-base transparent;
white-space: nowrap;
line-height: @line-height-base;
.button-size(@btn-padding-base; @font-size-base; @btn-border-radius-base);
.button-size(@btn-height-base; @btn-padding-base; @font-size-base; @btn-border-radius-base);
user-select: none;
transition: all .3s @ease-in-out;
position: relative;
@ -164,11 +165,11 @@
}
&-lg {
.button-size(@btn-padding-lg; @btn-font-size-lg; @btn-border-radius-base);
.button-size(@btn-height-lg; @btn-padding-lg; @btn-font-size-lg; @btn-border-radius-base);
}
&-sm {
.button-size(@btn-padding-sm; @font-size-base; @btn-border-radius-sm);
.button-size(@btn-height-sm; @btn-padding-sm; @font-size-base; @btn-border-radius-sm);
}
}
@ -207,16 +208,16 @@
// circle button: the content only contains icon
.btn-circle(@btnClassName: btn) {
.square(@btn-circle-size);
.button-size(0; @font-size-base + 2; 50%);
.button-size(@btn-circle-size; 0; @font-size-base + 2; 50%);
&.@{btnClassName}-lg {
.square(@btn-circle-size-lg);
.button-size(0; @btn-font-size-lg + 2; 50%);
.button-size(@btn-circle-size-lg; 0; @btn-font-size-lg + 2; 50%);
}
&.@{btnClassName}-sm {
.square(@btn-circle-size-sm);
.button-size(0; @font-size-base; 50%);
.button-size(@btn-circle-size-sm; 0; @font-size-base; 50%);
}
}

2
components/date-picker/style/Calendar.less
View File

@ -293,7 +293,7 @@
.@{calendar-prefix-cls}-ok-btn {
.btn;
.btn-primary;
.button-size(@btn-padding-sm; @font-size-base; @border-radius-base);
.button-size(@btn-height-sm; @btn-padding-sm; @font-size-base; @border-radius-base);
position: absolute;
bottom: 8px;
right: 9px;

16
components/style/themes/default.less
View File

@ -115,14 +115,18 @@
@btn-disable-bg : @background-color-base;
@btn-disable-border : @border-color-base;
@btn-padding-base : 4px 15px;
@btn-padding-base : 0 15px;
@btn-font-size-lg : @font-size-lg;
@btn-padding-lg : 4px 15px 5px 15px;
@btn-padding-sm : 1px 7px;
@btn-padding-lg : @btn-padding-base;
@btn-padding-sm : 0 7px;
@btn-circle-size : 28px;
@btn-circle-size-lg : 32px;
@btn-circle-size-sm : 22px;
@btn-height-base : 28px;
@btn-height-lg : 32px;
@btn-height-sm : 22px;
@btn-circle-size : @btn-height-base;
@btn-circle-size-lg : @btn-height-lg;
@btn-circle-size-sm : @btn-height-sm;
@btn-group-border : @primary-7;