Toast: use flex layout, support loading with text, improve performance

This commit is contained in:
陈嘉涵
2017-09-06 14:26:15 +08:00
parent 44a08889f3
commit 018122f2e2
5 changed files with 203 additions and 249 deletions

View File

@@ -2,16 +2,19 @@
.van-toast {
position: fixed;
z-index: 3001;
border-radius: 5px;
background-color: rgb(39, 39, 39, .7);
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
font-size: 12px;
display: flex;
color: $white;
text-align: center;
line-height: 12px;
z-index: 3001;
font-size: 12px;
line-height: 1.2;
border-radius: 5px;
align-items: center;
justify-content: center;
flex-direction: column;
transform: translate3d(-50%, -50%, 0);
background-color: rgb(39, 39, 39, .7);
&-wrapper {
transition: opacity .2s;
@@ -19,16 +22,12 @@
&__overlay {
position: fixed;
left: 0;
top: 0;
background: transparent;
height: 100%;
left: 0;
width: 100%;
height: 100%;
z-index: 3000;
}
&--loading {
padding: 45px;
background: transparent;
}
&--text {
@@ -37,18 +36,21 @@
}
&--default {
width: 120px;
height: 120px;
width: 90px;
min-height: 90px;
padding: 15px;
.van-toast__icon {
padding-top: 20px;
font-size: 50px;
}
.van-loading {
margin: 10px 0 5px;
}
.van-toast__text {
padding: 15px 0 20px;
font-size: 14px;
line-height: 1.2;
padding-top: 10px;
}
}
}