mand-mobile/lib-vw/codebox/style/index.css

A Vue.js 2.0 Mobile UI Toolkit

.md-codebox-wrapper .md-codebox-input{position:absolute;left:-1333.2vw;opacity:0}.md-codebox{position:relative;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center}.md-codebox.is-justify .md-codebox-box{-webkit-box-flex:1;-webkit-flex:1 1 0%;flex:1 1 0%}.md-codebox-box{position:relative;-webkit-box-flex:0;-webkit-flex:0 1 8.8vw;flex:0 1 8.8vw;width:8.8vw;height:9.33333vw;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;color:#01080f;font-family:DINPro-Medium,DIN Alternate,Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,微软雅黑,Arial,sans-serif;font-size:6.66667vw;font-weight:400;line-height:1.2;margin-left:1.2vw;margin-right:1.2vw}.md-codebox-box: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:2px solid #c5cad5;-webkit-transform-origin:50% 100%;transform-origin:50% 100%}@media (-webkit-min-device-pixel-ratio:3),(min-resolution:3dppx){.md-codebox-box:before{-webkit-transform:scaleY(.33) translateY(100%);transform:scaleY(.33) translateY(100%)}}.md-codebox-box:first-child{margin-left:0}.md-codebox-box:last-child{margin-right:0}.md-codebox-box.is-active,.md-codebox-box.is-filled{border-color:#01080f}.md-codebox-blink{height:7.46667vw;width:2px;-webkit-animation:md-codebox-flash 1s steps(2) infinite;animation:md-codebox-flash 1s steps(2) infinite}.md-codebox-blink,.md-codebox-dot{display:block;background-color:#01080f}.md-codebox-dot{height:1.33333vw;width:1.33333vw;border-radius:0.66667vw}.md-codebox-holder{pointer-events:none;height:9.33333vw;line-height:9.33333vw;padding:0 1.6vw;width:100%;text-align:center;font-size:6.66667vw;outline:none;color:#01080f;letter-spacing:.1em;border-radius:0;border:solid #c5cad5;border-width:0 0 2px;background:none;box-shadow:none;box-sizing:border-box;-webkit-appearance:none;-webkit-text-fill-color:#01080f}.md-codebox-holder[disabled],.md-codebox-holder[readonly]{opacity:1;color:#01080f;border-color:#c5cad5}.md-codebox-holder.is-active{border-color:#01080f}.md-codebox.is-disabled .md-codebox-box{color:#d9e0e7;border-color:#d9e0e7}.md-codebox.is-disabled .md-codebox-blink{display:none}.md-codebox.is-disabled .md-codebox-dot{background-color:#d9e0e7}.md-codebox.is-disabled .md-codebox-holder{color:#d9e0e7;border-color:#d9e0e7}@-webkit-keyframes md-codebox-flash{0%{opacity:0}to{opacity:1}}@keyframes md-codebox-flash{0%{opacity:0}to{opacity:1}}