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

refactor(Button): use flex layout (#6180)

Browse Source
This commit is contained in:
neverland 2020-04-29 21:31:35 +08:00 committed by GitHub
parent cc23cde154
commit c885801f32
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 5 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/button/index.less
View File

@ -2,7 +2,9 @@
.van-button { .van-button {
position: relative; position: relative;
display: inline-block; display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box; box-sizing: border-box;
height: @button-default-height; height: @button-default-height;
margin: 0; margin: 0;
@ -14,7 +16,6 @@
cursor: pointer; cursor: pointer;
transition: opacity @animation-duration-fast; transition: opacity @animation-duration-fast;
-webkit-appearance: none; -webkit-appearance: none;
-webkit-text-size-adjust: 100%;
&::before { &::before {
position: absolute; position: absolute;
@ -95,7 +96,6 @@
&--large { &--large {
width: 100%; width: 100%;
height: @button-large-height; height: @button-large-height;
line-height: @button-large-line-height;
} }
&--normal { &--normal {
@ -108,21 +108,16 @@
height: @button-small-height; height: @button-small-height;
padding: 0 @padding-xs; padding: 0 @padding-xs;
font-size: @button-small-font-size; font-size: @button-small-font-size;
line-height: @button-small-line-height;
} }
&__loading { &__loading {
display: inline-block;
color: inherit; color: inherit;
vertical-align: top;
} }
&--mini { &--mini {
display: inline-block;
min-width: @button-mini-min-width; min-width: @button-mini-min-width;
height: @button-mini-height; height: @button-mini-height;
font-size: @button-mini-font-size; font-size: @button-mini-font-size;
line-height: @button-mini-line-height;
& + .van-button--mini { & + .van-button--mini {
margin-left: @padding-base; margin-left: @padding-base;
@ -130,7 +125,7 @@
} }
&--block { &--block {
display: block; display: flex;
width: 100%; width: 100%;
} }
@ -155,14 +150,11 @@
min-width: 1em; min-width: 1em;
font-size: 1.2em; font-size: 1.2em;
line-height: inherit; line-height: inherit;
vertical-align: top;
} }
&__icon + &__text, &__icon + &__text,
&__loading + &__text { &__loading + &__text {
display: inline-block;
margin-left: 5px; margin-left: 5px;
vertical-align: top;
} }
&--hairline { &--hairline {

1
src/calendar/index.less
View File

@ -184,6 +184,5 @@
&__confirm { &__confirm {
height: @calendar-confirm-button-height; height: @calendar-confirm-button-height;
margin: @calendar-confirm-button-margin; margin: @calendar-confirm-button-margin;
line-height: @calendar-confirm-button-line-height;
} }
} }

1
src/sku/index.less
View File

@ -329,7 +329,6 @@
height: 40px; height: 40px;
font-weight: @font-weight-bold; font-weight: @font-weight-bold;
font-size: @font-size-md; font-size: @font-size-md;
line-height: 34px;
border: none; border: none;
border-radius: 0; border-radius: 0;

6
src/style/var.less
View File

@ -110,16 +110,13 @@
@button-mini-height: 22px; @button-mini-height: 22px;
@button-mini-min-width: 50px; @button-mini-min-width: 50px;
@button-mini-font-size: @font-size-xs; @button-mini-font-size: @font-size-xs;
@button-mini-line-height: 20px;
@button-small-height: 30px; @button-small-height: 30px;
@button-small-font-size: @font-size-sm; @button-small-font-size: @font-size-sm;
@button-small-min-width: 60px; @button-small-min-width: 60px;
@button-small-line-height: 28px;
@button-normal-font-size: @font-size-md; @button-normal-font-size: @font-size-md;
@button-large-height: 50px; @button-large-height: 50px;
@button-large-line-height: 48px;
@button-default-height: 44px; @button-default-height: 44px;
@button-default-line-height: 42px; @button-default-line-height: 1.5;
@button-default-font-size: @font-size-lg; @button-default-font-size: @font-size-lg;
@button-default-color: @text-color; @button-default-color: @text-color;
@button-default-background-color: @white; @button-default-background-color: @white;
@ -168,7 +165,6 @@
@calendar-day-disabled-color: @gray-5; @calendar-day-disabled-color: @gray-5;
@calendar-confirm-button-height: 36px; @calendar-confirm-button-height: 36px;
@calendar-confirm-button-margin: 7px 0; @calendar-confirm-button-margin: 7px 0;
@calendar-confirm-button-line-height: 34px;
// Card // Card
@card-padding: @padding-xs @padding-md; @card-padding: @padding-xs @padding-md;

1
src/submit-bar/index.less
View File

@ -69,7 +69,6 @@
width: @submit-bar-button-width; width: @submit-bar-button-width;
height: @submit-bar-button-height; height: @submit-bar-button-height;
font-weight: @font-weight-bold; font-weight: @font-weight-bold;
line-height: @submit-bar-button-height;
border: none; border: none;
&--danger { &--danger {