blackteay/vant-weapp
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant-weapp.git synced 2025-04-06 03:58:05 +08:00
Code Issues Projects Releases Wiki Activity

feat(Button): add some less vars (#2170)

Browse Source
This commit is contained in:
Lindy 2019-10-21 16:53:23 +08:00 committed by neverland
parent 5f8983104d
commit 3c4d2e63d8
2 changed files with 33 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
packages/button/index.less
View File

@ -5,10 +5,10 @@
position: relative;
display: inline-block;
box-sizing: border-box;
height: 44px;
height: @button-default-height;
padding: 0;
font-size: 16px;
line-height: 42px;
font-size: @button-default-font-size;
line-height: @button-default-line-height;
text-align: center;
vertical-align: middle;
transition: opacity @animation-duration-fast;
@ -77,7 +77,7 @@
}
&--plain {
.theme(background-color, '@white');
.theme(background-color, '@button-plain-background-color');
&.van-button--primary {
.theme(color, '@button-primary-background-color');
@ -98,30 +98,30 @@
&--large {
width: 100%;
height: 50px;
line-height: 48px;
height: @button-large-height;
line-height: @button-large-line-height;
}
&--normal {
padding: 0 15px;
font-size: 14px;
font-size: @button-normal-font-size;
}
&--small {
min-width: 60px;
height: 30px;
padding: 0 8px;
font-size: 12px;
line-height: 28px;
min-width: @button-small-min-width;
height: @button-small-height;
padding: 0 @padding-xs;
font-size: @button-small-font-size;
line-height: @button-small-line-height;
}
/* mini图标默认宽度50px，文字不能超过4个 */
&--mini {
display: inline-block;
width: 50px;
height: 22px;
font-size: 10px;
line-height: 20px;
width: @button-mini-min-width;
height: @button-mini-height;
font-size: @button-mini-font-size;
line-height: @button-mini-line-height;
& + .van-button--mini {
margin-left: 5px;
@ -142,7 +142,7 @@
}
&--disabled {
opacity: 0.5;
opacity: @button-disabled-opacity;
}
&__text {

16
packages/common/style/var.less
View File

@ -60,11 +60,26 @@
// Button
@button-default-color: @text-color;
@button-default-height: 44px;
@button-default-line-height: 42px;
@button-default-font-size: @font-size-lg;
@button-default-background-color: @white;
@button-default-border-color: @border-color;
@button-large-height: 50px;
@button-large-line-height: 48px;
@button-small-height: 30px;
@button-small-font-size: @font-size-sm;
@button-small-min-width: 60px;
@button-small-line-height: 28px;
@button-mini-height: 22px;
@button-mini-min-width: 50px;
@button-mini-font-size: @font-size-xs;
@button-mini-line-height: 20px;
@button-normal-font-size: @font-size-md;
@button-primary-color: @white;
@button-primary-background-color: @green;
@button-primary-border-color: @green;
@button-plain-background-color: @white;
@button-info-color: @white;
@button-info-background-color: @blue;
@button-info-border-color: @blue;
@ -80,6 +95,7 @@
@button-bottom-action-primary-background-color: @red;
@button-border-radius: 2px;
@button-round-border-radius: 10em;
@button-disabled-opacity: .5;
// Card
@card-padding: @padding-xs @padding-md;