vant/packages/zanui-css/src/picker.css
2017-02-28 17:12:02 +08:00

111 lines
1.9 KiB
CSS

@component-namespace zan {
@b picker {
overflow: hidden;
@e toolbar {
height: 40px;
}
@e columns {
position: relative;
overflow: hidden;
@m 1 {
.zan-picker-column {
width: 100%;
}
}
@m 2 {
.zan-picker-column {
width: 50%;
}
}
@m 3 {
.zan-picker-column {
width: 33.333%;
}
}
}
}
.zan-picker-center-highlight {
box-sizing: border-box;
position: absolute;
left: 0;
width: 100%;
top: 50%;
margin-top: -18px;
pointer-events: none;
}
.zan-picker-center-highlight:before,
.zan-picker-center-highlight:after {
content: '';
position: absolute;
height: 1px;
width: 100%;
background-color: #eaeaea;
display: block;
zan-index: 15;
transform: scaleY(0.5);
}
.zan-picker-center-highlight:before {
left: 0;
top: 0;
bottom: auto;
right: auto;
}
.zan-picker-center-highlight:after {
left: 0;
bottom: 0;
right: auto;
top: auto;
}
@b picker-column {
font-size: 18px;
overflow: hidden;
position: relative;
max-height: 100%;
float: left;
text-align: center;
@e item {
height: 44px;
line-height: 44px;
padding: 0 10px;
white-space: nowrap;
position: relative;
overflow: hidden;
text-overflow: ellipsis;
color: #707274;
left: 0;
top: 0;
width: 100%;
box-sizing: border-box;
transition-duration: .3s;
backface-visibility: hidden;
@m selected {
color: #000;
transform: translate3d(0, 0, 0) rotateX(0);
}
}
}
.picker-column-wrapper {
transition-duration: 0.3s;
transition-timing-function: ease-out;
backface-visibility: hidden;
}
.picker-column-wrapper.dragging,
.picker-column-wrapper.dragging .picker-item {
transition-duration: 0s;
}
}