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

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

View File

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

View File

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

View File

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

View File

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

View File

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