drip-ui/es/drip-css/picker.css

Lightweight Mobile UI Components built on Vue

.picker{overflow:hidden}.picker-toolbar{height:40PX}.picker-items{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;padding:0;text-align:right;font-size:24PX;position:relative}.picker-center-highlight{box-sizing:border-box;position:absolute;left:0;width:100%;top:50%;margin-top:-18PX;pointer-events:none}.picker-center-highlight:after,.picker-center-highlight:before{content:'';position:absolute;height:1PX;width:100%;background-color:#eaeaea;display:block;z-index:15;-webkit-transform:scaleY(.5);transform:scaleY(.5)}.picker-center-highlight:before{left:0;top:0;bottom:auto;right:auto}.picker-center-highlight:after{left:0;bottom:0;right:auto;top:auto}.picker-slot{overflow:hidden;position:relative;max-height:100%}.picker-slot-mark_top{position:absolute;top:0;z-index:1;left:0;width:100%;pointer-events:none;-webkit-transform:translateZ(0);transform:translateZ(0);background:-webkit-linear-gradient(bottom,hsla(0,0%,100%,.4),hsla(0,0%,100%,.8));background:linear-gradient(0deg,hsla(0,0%,100%,.4),hsla(0,0%,100%,.8))}.picker-slot-mark_bottom{position:absolute;bottom:0;z-index:1;left:0;width:100%;pointer-events:none;-webkit-transform:translateZ(0);transform:translateZ(0);background:-webkit-linear-gradient(top,hsla(0,0%,100%,.4),hsla(0,0%,100%,.8));background:linear-gradient(180deg,hsla(0,0%,100%,.4),hsla(0,0%,100%,.8))}.picker-slot.picker-slot-left{text-align:left}.picker-slot.picker-slot-center{text-align:center}.picker-slot.picker-slot-right{text-align:right}.picker-slot.picker-slot-divider{color:#000;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.picker-slot-wrapper{-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;-webkit-backface-visibility:hidden;backface-visibility:hidden}.picker-slot-wrapper.dragging,.picker-slot-wrapper.dragging .picker-item{-webkit-transition-duration:0s;transition-duration:0s}.picker-item{height:36PX;line-height:36PX;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;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-backface-visibility:hidden;backface-visibility:hidden;font-size:14PX}.picker-slot-absolute .picker-item{position:absolute}.picker-item.picker-item-far{pointer-events:none}.picker-item.picker-selected{height:50PX!important;line-height:50PX!important;color:#000;background:#fff;font-size:20PX;-webkit-transform:translate3d(0,0,0) rotateX(0);transform:translate3d(0,0,0) rotateX(0)}.picker-3d .picker-items{overflow:hidden;-webkit-perspective:700PX;perspective:700PX}.picker-3d .picker-item,.picker-3d .picker-slot,.picker-3d .picker-slot-wrapper{-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.picker-3d .picker-slot{overflow:visible}.picker-3d .picker-item{-webkit-transform-origin:center center;transform-origin:center center;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out}