feat(Picker): add @picker-loading-icon-color var (#4787)

This commit is contained in:
neverland 2019-10-19 21:25:30 +08:00 committed by GitHub
parent 9945d93bde
commit 4c2cf8e2cb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 9 additions and 10 deletions

View File

@ -2,6 +2,7 @@
.van-loading {
position: relative;
color: @loading-spinner-color;
font-size: 0;
vertical-align: middle;
@ -13,7 +14,6 @@
max-width: 100%;
height: @loading-spinner-size;
max-height: 100%;
color: @loading-spinner-color;
vertical-align: middle;
animation: van-rotate @loading-spinner-animation-duration linear infinite;

View File

@ -2,7 +2,7 @@ import { createNamespace } from '../utils';
import { preventDefault } from '../utils/dom/event';
import { deepClone } from '../utils/deep-clone';
import { pickerProps } from './shared';
import { BLUE, BORDER_TOP_BOTTOM, BORDER_UNSET_TOP_BOTTOM } from '../utils/constant';
import { BORDER_TOP_BOTTOM, BORDER_UNSET_TOP_BOTTOM } from '../utils/constant';
import Loading from '../loading';
import PickerColumn from './PickerColumn';
@ -182,7 +182,7 @@ export default createComponent({
return (
<div class={bem()}>
{this.toolbarPosition === 'top' ? Toolbar : h()}
{this.loading ? <Loading class={bem('loading')} color={BLUE} /> : h()}
{this.loading ? <Loading class={bem('loading')} /> : h()}
{this.slots('columns-top')}
<div class={bem('columns')} style={columnsStyle} onTouchmove={preventDefault}>
{columns.map((item, index) => (

View File

@ -48,10 +48,10 @@
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(255, 255, 255, .9);
color: @picker-loading-icon-color;
background-color: @picker-loading-mask-color;
}
&__loading .van-loading,
&__frame {
position: absolute;
top: 50%;

View File

@ -115,7 +115,7 @@ exports[`renders demo correctly 1`] = `
</div>
<div>
<div class="van-picker">
<div class="van-loading van-loading--circular van-picker__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="color: rgb(25, 137, 250);"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
<div class="van-loading van-loading--circular van-picker__loading"><span class="van-loading__spinner van-loading__spinner--circular"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
<div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column column1">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">

View File

@ -461,6 +461,8 @@
@picker-option-font-size: @font-size-lg;
@picker-option-text-color: @black;
@picker-option-disabled-opacity: .3;
@picker-loading-icon-color: @blue;
@picker-loading-mask-color: rgba(255, 255, 255, .9);
// Popup
@popup-background-color: @white;

View File

@ -62,10 +62,7 @@
&__loading {
padding: @padding-base;
.van-loading__spinner {
color: @toast-loading-icon-color;
}
color: @toast-loading-icon-color;
}
&__text {