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

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

@ -60,11 +60,26 @@
// Button // Button
@button-default-color: @text-color; @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-background-color: @white;
@button-default-border-color: @border-color; @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-color: @white;
@button-primary-background-color: @green; @button-primary-background-color: @green;
@button-primary-border-color: @green; @button-primary-border-color: @green;
@button-plain-background-color: @white;
@button-info-color: @white; @button-info-color: @white;
@button-info-background-color: @blue; @button-info-background-color: @blue;
@button-info-border-color: @blue; @button-info-border-color: @blue;
@ -80,6 +95,7 @@
@button-bottom-action-primary-background-color: @red; @button-bottom-action-primary-background-color: @red;
@button-border-radius: 2px; @button-border-radius: 2px;
@button-round-border-radius: 10em; @button-round-border-radius: 10em;
@button-disabled-opacity: .5;
// Card // Card
@card-padding: @padding-xs @padding-md; @card-padding: @padding-xs @padding-md;