mand-mobile
Version:
A Vue.js 2.0 Mobile UI Toolkit
1 lines • 4.4 kB
CSS
.md-steps{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-justify-content:space-around;justify-content:space-around;font-size:3.73333vw}.md-steps.md-steps-horizontal{-webkit-box-align:center;-webkit-align-items:center;align-items:center;padding:5.33333vw 13.33333vw 13.33333vw}.md-steps.md-steps-horizontal .step-wrapper{margin:0 0.53333vw;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column}.md-steps.md-steps-horizontal .step-wrapper.reached .text-wrapper .name{color:#41485d}.md-steps.md-steps-horizontal .step-wrapper.current .text-wrapper .name{color:#198cff}.md-steps.md-steps-horizontal .text-wrapper{top:100%;padding-top:2.66667vw;text-align:center}.md-steps.md-steps-horizontal .text-wrapper .name{color:#858b9c}.md-steps.md-steps-horizontal .text-wrapper .desc{margin-top:1.33333vw;color:#858b9c}.md-steps.md-steps-horizontal.no-current .reached:last-of-type{display:none }.md-steps.md-steps-vertical{-webkit-box-align:start;-webkit-align-items:flex-start;align-items:flex-start;padding:5.33333vw;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column}.md-steps.md-steps-vertical.vertical-adaptive{-webkit-box-pack:normal;-webkit-justify-content:normal;justify-content:normal;padding:5.33333vw 5.33333vw 1.06667vw}.md-steps.md-steps-vertical.vertical-adaptive .bar.vertical-bar{-webkit-box-flex:1;-webkit-flex:1;flex:1}.md-steps.md-steps-vertical .step-wrapper{width:100%;margin:0.53333vw 0;-webkit-box-align:stretch;-webkit-align-items:stretch;align-items:stretch}.md-steps.md-steps-vertical .step-wrapper .icon-wrapper{position:relative}.md-steps.md-steps-vertical .step-wrapper .icon-wrapper .step-node-default{min-width:4.26667vw;min-height:4.26667vw}.md-steps.md-steps-vertical .step-wrapper .text-wrapper{left:4.26667vw;padding-left:5.33333vw}.md-steps.md-steps-vertical .step-wrapper .text-wrapper .desc,.md-steps.md-steps-vertical .step-wrapper .text-wrapper .name{white-space:normal}.md-steps.md-steps-vertical .step-wrapper .text-wrapper .name{color:#41485d}.md-steps.md-steps-vertical .step-wrapper .text-wrapper .desc{margin-top:2.4vw;color:#858b9c}.md-steps .icon-wrapper{color:#e2e4ea}.md-steps .icon-wrapper,.md-steps .icon-wrapper>div{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.md-steps .icon-wrapper:nth-child(2){display:none}.md-steps .icon-wrapper .step-node-default-icon{background:#e2e4ea}.md-steps .step-wrapper{display:-webkit-box;display:-webkit-flex;display:flex;position:relative}.md-steps .step-wrapper,.md-steps .step-wrapper .icon-wrapper{min-width:4.26667vw;min-height:4.26667vw}.md-steps .step-wrapper .icon-wrapper .md-icon{width:4.26667vw;height:4.26667vw;font-size:4.26667vw;line-height:4.26667vw}.md-steps .step-wrapper .text-wrapper{position:absolute}.md-steps .step-wrapper .text-wrapper .desc,.md-steps .step-wrapper .text-wrapper .name{white-space:nowrap}.md-steps .step-wrapper .text-wrapper .name{line-height:3.73333vw;font-size:3.73333vw}.md-steps .step-wrapper .text-wrapper .desc{line-height:3.73333vw;font-size:3.46667vw}.md-steps .step-wrapper.current .icon-wrapper,.md-steps .step-wrapper.reached .icon-wrapper{color:#198cff}.md-steps .step-wrapper.current .icon-wrapper .step-node-default-icon,.md-steps .step-wrapper.reached .icon-wrapper .step-node-default-icon{background:#198cff}.md-steps .bar{position:relative;background-color:#e2e4ea;overflow:hidden}.md-steps .bar .bar-inner{z-index:10;position:absolute;top:0;left:0;display:block;content:"";-webkit-transition:all 1s linear;transition:all 1s linear}.md-steps .bar.horizontal-bar{-webkit-box-flex:1;-webkit-flex:1;flex:1;height:1px}.md-steps .bar.horizontal-bar .bar-inner{width:100%;height:1px;background-color:#198cff}.md-steps .bar.vertical-bar{left:2.13333vw;width:1px;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.md-steps .bar.vertical-bar .bar-inner{width:1px;height:100%;background-color:#198cff}.md-steps .bar:last-of-type.horizontal-bar{display:none}.md-steps .bar:last-of-type.vertical-bar{visibility:hidden}