95 lines
1.9 KiB
Plaintext

@import '../common/style/var';
@import '../common/style/theme.less';
.van-picker {
position: relative;
overflow: hidden;
-webkit-text-size-adjust: 100%; /* avoid iOS text size adjust */
user-select: none;
.theme(background-color, '@picker-background-color');
&__toolbar {
display: flex;
justify-content: space-between;
.theme(height, '@picker-toolbar-height');
.theme(line-height, '@picker-toolbar-height');
}
&__cancel,
&__confirm {
.theme(padding, '@picker-action-padding');
.theme(font-size, '@picker-action-font-size');
&--hover {
opacity: @active-opacity;
}
}
&__confirm {
.theme(color, '@picker-confirm-action-color');
}
&__cancel {
.theme(color, '@picker-cancel-action-color');
}
&__title {
max-width: 50%;
text-align: center;
.theme(font-weight, '@font-weight-bold');
.theme(font-size, '@picker-option-font-size');
}
&__columns {
position: relative;
display: flex;
}
&__column {
flex: 1 1;
width: 0;
}
&__loading {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 4;
display: flex;
align-items: center;
justify-content: center;
.theme(background-color, '@picker-loading-mask-color');
}
&__mask {
position: absolute;
top: 0;
left: 0;
z-index: 2;
width: 100%;
height: 100%;
background-image: linear-gradient(
180deg,
hsla(0, 0%, 100%, 0.9),
hsla(0, 0%, 100%, 0.4)
),
linear-gradient(0deg, hsla(0, 0%, 100%, 0.9), hsla(0, 0%, 100%, 0.4));
background-repeat: no-repeat;
background-position: top, bottom;
backface-visibility: hidden;
pointer-events: none;
}
&__frame {
position: absolute;
top: 50%;
right: @padding-md;
left: @padding-md;
z-index: 1;
transform: translateY(-50%);
pointer-events: none;
}
}