style(Button): add some less vars (#8281)

This commit is contained in:
neverland 2021-03-04 20:57:38 +08:00 committed by GitHub
parent 6d8ed45608
commit 391ccd4240
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 16 additions and 4 deletions

View File

@ -149,10 +149,13 @@ How to use: [Custom Theme](#/en-US/theme).
| Name | Default Value | Description |
| -------------------------------- | -------------------- | ----------- |
| @button-mini-height | `24px` | - |
| @button-mini-padding | `0 @padding-base` | - |
| @button-mini-font-size | `@font-size-xs` | - |
| @button-small-height | `32px` | - |
| @button-small-padding | `0 @padding-xs` | - |
| @button-small-font-size | `@font-size-sm` | - |
| @button-normal-font-size | `@font-size-md` | - |
| @button-normal-padding | `0 15px` | - |
| @button-large-height | `50px` | - |
| @button-default-height | `44px` | - |
| @button-default-line-height | `1.2` | - |
@ -177,3 +180,4 @@ How to use: [Custom Theme](#/en-US/theme).
| @button-round-border-radius | `@border-radius-max` | - |
| @button-plain-background-color | `@white` | - |
| @button-disabled-opacity | `@disabled-opacity` | - |
| @button-icon-size | `1.2em` | - |

View File

@ -176,10 +176,13 @@ app.use(Button);
| 名称 | 默认值 | 描述 |
| -------------------------------- | -------------------- | ---- |
| @button-mini-height | `24px` | - |
| @button-mini-padding | `0 @padding-base` | - |
| @button-mini-font-size | `@font-size-xs` | - |
| @button-small-height | `32px` | - |
| @button-small-padding | `0 @padding-xs` | - |
| @button-small-font-size | `@font-size-sm` | - |
| @button-normal-font-size | `@font-size-md` | - |
| @button-normal-padding | `0 15px` | - |
| @button-large-height | `50px` | - |
| @button-default-height | `44px` | - |
| @button-default-line-height | `1.2` | - |
@ -204,3 +207,4 @@ app.use(Button);
| @button-round-border-radius | `@border-radius-max` | - |
| @button-plain-background-color | `@white` | - |
| @button-disabled-opacity | `@disabled-opacity` | - |
| @button-icon-size | `1.2em` | - |

View File

@ -97,13 +97,13 @@
}
&--normal {
padding: 0 15px;
padding: @button-normal-padding;
font-size: @button-normal-font-size;
}
&--small {
height: @button-small-height;
padding: 0 @padding-xs;
padding: @button-small-padding;
font-size: @button-small-font-size;
}
@ -114,7 +114,7 @@
&--mini {
height: @button-mini-height;
padding: 0 @padding-base;
padding: @button-mini-padding;
font-size: @button-mini-font-size;
& + .van-button--mini {
@ -160,7 +160,7 @@
}
&__icon {
font-size: 1.2em;
font-size: @button-icon-size;
line-height: inherit;
}

View File

@ -127,9 +127,12 @@
// Button
@button-mini-height: 24px;
@button-mini-padding: 0 @padding-base;
@button-mini-font-size: @font-size-xs;
@button-small-height: 32px;
@button-small-padding: 0 @padding-xs;
@button-small-font-size: @font-size-sm;
@button-normal-padding: 0 15px;
@button-normal-font-size: @font-size-md;
@button-large-height: 50px;
@button-default-height: 44px;
@ -155,6 +158,7 @@
@button-round-border-radius: @border-radius-max;
@button-plain-background-color: @white;
@button-disabled-opacity: @disabled-opacity;
@button-icon-size: 1.2em;
// Calendar
@calendar-background-color: @white;