diff --git a/packages/button/index.less b/packages/button/index.less index a1f3dba7..a247f70c 100644 --- a/packages/button/index.less +++ b/packages/button/index.less @@ -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 { diff --git a/packages/common/style/var.less b/packages/common/style/var.less index 845b63eb..dc986b16 100644 --- a/packages/common/style/var.less +++ b/packages/common/style/var.less @@ -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;