mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
refactor(Button): use flex layout (#6180)
This commit is contained in:
parent
cc23cde154
commit
c885801f32
@ -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 {
|
||||
|
@ -184,6 +184,5 @@
|
||||
&__confirm {
|
||||
height: @calendar-confirm-button-height;
|
||||
margin: @calendar-confirm-button-margin;
|
||||
line-height: @calendar-confirm-button-line-height;
|
||||
}
|
||||
}
|
||||
|
@ -329,7 +329,6 @@
|
||||
height: 40px;
|
||||
font-weight: @font-weight-bold;
|
||||
font-size: @font-size-md;
|
||||
line-height: 34px;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
|
||||
|
@ -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;
|
||||
|
@ -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 {
|
||||
|
Loading…
x
Reference in New Issue
Block a user