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

[improvement] Button: add less vars (#3093)

Browse Source
This commit is contained in:
neverland 2019-04-04 17:50:10 +08:00 committed by GitHub
parent 861357c015
commit 19f5ec81ba
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 40 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
packages/button/index.less
View File

@ -1,15 +1,15 @@
@import '../style/var'; @import '../style/var';
.van-button { .van-button {
display: inline-block;
position: relative; position: relative;
padding: 0; padding: 0;
display: inline-block; height: @button-default-height;
height: 44px; line-height: @button-default-line-height;
line-height: 42px; font-size: @button-default-font-size;
font-size: 16px; border-radius: @button-border-radius;
text-align: center; text-align: center;
box-sizing: border-box; box-sizing: border-box;
border-radius: @button-border-radius;
-webkit-appearance: none; -webkit-appearance: none;
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
@ -42,35 +42,35 @@
&--default { &--default {
color: @button-default-color; color: @button-default-color;
background-color: @button-default-background-color; background-color: @button-default-background-color;
border: 1px solid @button-default-border-color; border: @button-border-width solid @button-default-border-color;
} }
&--primary { &--primary {
color: @button-primary-color; color: @button-primary-color;
background-color: @button-primary-background-color; background-color: @button-primary-background-color;
border: 1px solid @button-primary-border-color; border: @button-border-width solid @button-primary-border-color;
} }
&--info { &--info {
color: @button-info-color; color: @button-info-color;
background-color: @button-info-background-color; background-color: @button-info-background-color;
border: 1px solid @button-info-border-color; border: @button-border-width solid @button-info-border-color;
} }
&--danger { &--danger {
color: @button-danger-color; color: @button-danger-color;
background-color: @button-danger-background-color; background-color: @button-danger-background-color;
border: 1px solid @button-danger-border-color; border: @button-border-width solid @button-danger-border-color;
} }
&--warning { &--warning {
color: @button-warning-color; color: @button-warning-color;
background-color: @button-warning-background-color; background-color: @button-warning-background-color;
border: 1px solid @button-warning-border-color; border: @button-border-width solid @button-warning-border-color;
} }
&--plain { &--plain {
background-color: @white; background-color: @button-plain-background-color;
&.van-button--primary { &.van-button--primary {
color: @button-primary-background-color; color: @button-primary-background-color;
@ -91,21 +91,21 @@
&--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 {
height: 30px;
padding: 0 8px; padding: 0 8px;
min-width: 60px; height: @button-small-height;
font-size: 12px; min-width: @button-small-min-width;
line-height: 28px; font-size: @button-small-font-size;
line-height: @button-small-line-height;
} }
&--loading { &--loading {
@ -116,10 +116,10 @@
&--mini { &--mini {
display: inline-block; display: inline-block;
width: 50px; height: @button-mini-height;
height: 22px; min-width: @button-mini-min-width;
line-height: 20px; font-size: @button-mini-font-size;
font-size: 10px; line-height: @button-mini-line-height;
& + .van-button--mini { & + .van-button--mini {
margin-left: 5px; margin-left: 5px;
@ -147,7 +147,7 @@
} }
&--disabled { &--disabled {
opacity: .5; opacity: @button-disabled-opacity;
} }
&--round { &--round {

17
packages/style/var.less
View File

@ -33,6 +33,20 @@
@action-sheet-close-icon-color: @gray-dark; @action-sheet-close-icon-color: @gray-dark;
// Button // Button
@button-mini-height: 22px;
@button-mini-min-width: 50px;
@button-mini-font-size: 10px;
@button-mini-line-height: 20px;
@button-small-height: 30px;
@button-small-font-size: 12px;
@button-small-min-width: 60px;
@button-small-line-height: 28px;
@button-normal-font-size: 14px;
@button-large-height: 50px;
@button-large-line-height: 48px;
@button-default-height: 44px;
@button-default-line-height: 42px;
@button-default-font-size: 16px;
@button-default-color: @text-color; @button-default-color: @text-color;
@button-default-background-color: @white; @button-default-background-color: @white;
@button-default-border-color: @border-color; @button-default-border-color: @border-color;
@ -52,8 +66,11 @@
@button-bottom-action-default-background-color: @orange; @button-bottom-action-default-background-color: @orange;
@button-bottom-action-primary-color: @white; @button-bottom-action-primary-color: @white;
@button-bottom-action-primary-background-color: @red; @button-bottom-action-primary-background-color: @red;
@button-border-width: 1px;
@button-border-radius: 2px; @button-border-radius: 2px;
@button-round-border-radius: 10em; @button-round-border-radius: 10em;
@button-plain-background-color: @white;
@button-disabled-opacity: .5;
// Checkbox // Checkbox
@checkbox-size: 20px; @checkbox-size: 20px;