mand-mobile
Version:
A Vue.js 2.0 Mobile UI Toolkit
1 lines • 2.68 kB
CSS
.md-picker-column{position:relative;width:100%;padding:0 40px;background:#fff;box-sizing:border-box;-webkit-transform:translateZ(0);transform:translateZ(0)}.md-picker-column-container{height:100%}.md-picker-column-masker{position:absolute;z-index:2;left:40px;right:40px;-webkit-transform:translateZ(0);transform:translateZ(0)}.md-picker-column-masker.top{top:0}.md-picker-column-masker.top:before{content:"";position:absolute;z-index:2;-webkit-transform-origin:100% 50%;transform-origin:100% 50%;-webkit-transform:scaleY(.5) translateY(100%);transform:scaleY(.5) translateY(100%);bottom:0;left:0;right:auto;top:auto;width:100%;border-bottom:3px solid #e2e4ea;-webkit-transform-origin:50% 100%;transform-origin:50% 100%}@media (-webkit-min-device-pixel-ratio:3),(min-resolution:3dppx){.md-picker-column-masker.top:before{-webkit-transform:scaleY(.33) translateY(100%);transform:scaleY(.33) translateY(100%)}}.md-picker-column-masker.bottom{bottom:0}.md-picker-column-masker.bottom:after{content:"";position:absolute;z-index:2;-webkit-transform-origin:100% 50%;transform-origin:100% 50%;-webkit-transform:scaleY(.5) translateY(-100%);transform:scaleY(.5) translateY(-100%);top:0;left:0;right:auto;bottom:auto;width:100%;border-top:3px solid #e2e4ea;-webkit-transform-origin:50% 0;transform-origin:50% 0}@media (-webkit-min-device-pixel-ratio:3),(min-resolution:3dppx){.md-picker-column-masker.bottom:after{-webkit-transform:scaleY(.33) translateY(-100%);transform:scaleY(.33) translateY(-100%)}}.md-picker-column-hooks{display:-webkit-box;display:-webkit-flex;display:flex;position:absolute;z-index:3;top:0;right:0;bottom:0;left:0;padding:0 40px}.md-picker-column-hook{-webkit-box-flex:1;-webkit-flex:1;flex:1}.md-picker-column-hook,.md-picker-column-list{display:-webkit-box;display:-webkit-flex;display:flex;height:100%}.md-picker-column-item{position:relative;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-flex:1;-webkit-flex:1;flex:1;overflow:hidden}.md-picker-column-item:after{content:"";display:table;clear:both}.md-picker-column-item .column-list{position:absolute;top:0;left:0;-webkit-transform-origin:left top;transform-origin:left top;-webkit-transform:translateZ(0);transform:translateZ(0)}.md-picker-column-item .column-list,.md-picker-column-item .column-list .column-item{width:100%;box-sizing:border-box}.md-picker-column-item .column-list .column-item{float:left;padding:0 20px;color:#d9e0e7;font-size:32px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.md-picker-column-item .column-list .column-item.active{color:#198cff;font-weight:500}.md-picker-column-item .column-list .column-item.disabled{opacity:.2}