neverland 1a7889590f
perf: remove CSS variables polyfill (#4487)
* perf: remove CSS variables polyfill

* style: fix missing calc value

* perf: reduce some useless css vars
2021-09-23 17:31:28 +08:00

97 lines
2.1 KiB
Plaintext

@import '../common/style/var';
.van-picker {
position: relative;
overflow: hidden;
-webkit-text-size-adjust: 100%; /* avoid iOS text size adjust */
user-select: none;
background-color: var(--picker-background-color, @picker-background-color);
&__toolbar {
display: flex;
justify-content: space-between;
height: var(--picker-toolbar-height, @picker-toolbar-height);
line-height: var(--picker-toolbar-height, @picker-toolbar-height);
}
&__cancel,
&__confirm {
padding: var(--picker-action-padding, @picker-action-padding);
font-size: var(--picker-action-font-size, @picker-action-font-size);
&--hover {
opacity: @active-opacity;
}
}
&__confirm {
color: var(--picker-confirm-action-color, @picker-confirm-action-color);
}
&__cancel {
color: var(--picker-cancel-action-color, @picker-cancel-action-color);
}
&__title {
max-width: 50%;
text-align: center;
font-weight: var(--font-weight-bold, @font-weight-bold);
font-size: var(--picker-option-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;
background-color: var(
--picker-loading-mask-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;
}
}