feat(Toast, Loading): Toast, Loading 组件样式调整 (#2265)

This commit is contained in:
Lindy 2019-11-10 10:35:40 +08:00 committed by neverland
parent 44148c81ed
commit 7d7074339a
3 changed files with 14 additions and 13 deletions

View File

@ -404,12 +404,12 @@
@toast-font-size: 14px;
@toast-text-color: @white;
@toast-line-height: 20px;
@toast-border-radius: 4px;
@toast-border-radius: @border-radius-md;
@toast-background-color: rgba(@text-color, .88);
@toast-icon-size: 48px;
@toast-text-min-width: 96px;
@toast-text-padding: 8px 12px;
@toast-default-padding: 15px;
@toast-text-padding: @padding-xs @padding-sm;
@toast-default-padding: @padding-md;
@toast-default-width: 90px;
@toast-default-min-height: 90px;

View File

@ -1,4 +1,5 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
:host {
font-size: 0;
@ -9,17 +10,17 @@
display: inline-flex;
align-items: center;
justify-content: center;
color: @loading-spinner-color;
.theme(color, '@loading-spinner-color');
&__spinner {
position: relative;
box-sizing: border-box;
width: @loading-spinner-size;
.theme(width, '@loading-spinner-size');
// compatible for 0.x, users may set width or height in root element
max-width: 100%;
height: @loading-spinner-size;
max-height: 100%;
animation: van-rotate @loading-spinner-animation-duration linear infinite;
.theme(height, '@loading-spinner-size');
.theme(animation, 'van-rotate @loading-spinner-animation-duration linear infinite');
&--spinner {
animation-timing-function: steps(12);
@ -33,10 +34,10 @@
}
&__text {
margin-left: @padding-xs;
color: @loading-text-color;
font-size: @loading-text-font-size;
line-height: @loading-text-line-height;
.theme(margin-left, '@padding-xs');
.theme(color, '@loading-text-color');
.theme(font-size, '@loading-text-font-size');
.theme(line-height, '@loading-text-line-height');
&:empty {
display: none;
@ -47,7 +48,7 @@
flex-direction: column;
.van-loading__text {
margin: @padding-xs 0 0;
.theme(margin, '@padding-xs 0 0');
}
}

View File

@ -42,7 +42,7 @@
}
.van-toast__text {
padding-top: 5px;
padding-top: @padding-xs;
}
}