.vue-scroll-picker{position:relative;width:100%;height:10em;overflow:hidden}.vue-scroll-picker-list{position:absolute;left:0;right:0;top:0;bottom:0}.vue-scroll-picker-list-rotator{position:absolute;left:0;right:0;top:calc(50% - .6em)}.vue-scroll-picker-list-rotator.-transition{transition:top ease 200ms}.vue-scroll-picker-item{text-align:center;height:1.2em;line-height:1.2em}.vue-scroll-picker-item.-placeholder{color:#aaa}.vue-scroll-picker-layer{position:absolute;left:0;right:0;top:0;bottom:0}.vue-scroll-picker-layer .top,.vue-scroll-picker-layer .middle,.vue-scroll-picker-layer .bottom{position:absolute}.vue-scroll-picker-layer .top{box-sizing:border-box;border-bottom:1px solid #c8c7cc;background:linear-gradient(180deg, #fff 10%, rgba(255,255,255,0.7));top:0;left:0;right:0;height:calc(50% - 1em);cursor:pointer}.vue-scroll-picker-layer .middle{top:calc(50% - 1em);left:0;right:0;bottom:calc(50% - 1em)}.vue-scroll-picker-layer .bottom{border-top:1px solid #c8c7cc;background:linear-gradient(0deg, #fff 10%, rgba(255,255,255,0.7));bottom:0;left:0;right:0;height:calc(50% - 1em);cursor:pointer}
|
