mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
feat(Picker): add @picker-loading-icon-color var (#4787)
This commit is contained in:
parent
9945d93bde
commit
4c2cf8e2cb
@ -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;
|
||||
|
||||
|
@ -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) => (
|
||||
|
@ -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%;
|
||||
|
@ -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;">
|
||||
|
@ -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;
|
||||
|
@ -62,10 +62,7 @@
|
||||
|
||||
&__loading {
|
||||
padding: @padding-base;
|
||||
|
||||
.van-loading__spinner {
|
||||
color: @toast-loading-icon-color;
|
||||
}
|
||||
color: @toast-loading-icon-color;
|
||||
}
|
||||
|
||||
&__text {
|
||||
|
Loading…
x
Reference in New Issue
Block a user