mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-07 17:44:35 +08:00
Code Issues Actions 18 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 // mixins for button
// ------------------------ // ------------------------
.button-size(@padding; @font-size; @border-radius) { .button-size(@height; @padding; @font-size; @border-radius) {
padding: @padding; padding: @padding;
font-size: @font-size; font-size: @font-size;
border-radius: @border-radius; border-radius: @border-radius;
height: @height;
} }
.button-disabled() { .button-disabled() {
@ -107,11 +108,11 @@
// size // size
&-lg > .@{btnClassName} { &-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} { &-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} { > .@{iconfont-css-prefix} {
font-size: @font-size-base; font-size: @font-size-base;
} }
@ -131,7 +132,7 @@
border: @border-width-base @border-style-base transparent; border: @border-width-base @border-style-base transparent;
white-space: nowrap; white-space: nowrap;
line-height: @line-height-base; 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; user-select: none;
transition: all .3s @ease-in-out; transition: all .3s @ease-in-out;
position: relative; position: relative;
@ -164,11 +165,11 @@
} }
&-lg { &-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 { &-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 // circle button: the content only contains icon
.btn-circle(@btnClassName: btn) { .btn-circle(@btnClassName: btn) {
.square(@btn-circle-size); .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 { &.@{btnClassName}-lg {
.square(@btn-circle-size-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 { &.@{btnClassName}-sm {
.square(@btn-circle-size-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 { .@{calendar-prefix-cls}-ok-btn {
.btn; .btn;
.btn-primary; .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; position: absolute;
bottom: 8px; bottom: 8px;
right: 9px; right: 9px;

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

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