ivue-material-plus
Version:
A high quality UI components Library with Vue.js
1 lines • 7.22 kB
CSS
:root{--ivue-steps-icon-size:20px;--ivue-steps-horizontal-header-padding-left:10px;--ivue-steps-horizontal-header-margin-left:-10px;--ivue-steps-vertical-divider-padding:30px 0 4px 0;--ivue-steps-vertical-divider-left:13px;--ivue-steps-vertical-divider-width:1px;--ivue-steps-vertical-header-content-margin-right:16px;--ivue-steps-vertical-content-slot-padding-bottom:12px;--ivue-steps-title-color:#666666;--ivue-steps-border-color:#cccccc}.ivue-steps{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;font-size:0;line-height:1.5}.ivue-steps .ivue-steps-vertical .ivue-steps-item{display:block}.ivue-steps-icon{font-size:var(--ivue-steps-icon-size);top:2px;width:var(--ivue-steps-icon-size);height:var(--ivue-steps-icon-size)}.ivue-steps.ivue-steps-vertical{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-flow:column;flex-flow:column}.ivue-steps.ivue-steps-vertical .ivue-step-divider{position:absolute;left:var(--ivue-steps-vertical-divider-left);top:0;padding:var(--ivue-steps-vertical-divider-padding);height:100%;width:var(--ivue-steps-vertical-divider-width)}.ivue-steps.ivue-steps-vertical .ivue-step-divider>i{height:100%;width:var(--ivue-steps-vertical-divider-width)}.ivue-steps.ivue-steps-vertical .ivue-step-divider>i:after{height:0;width:100%}.ivue-steps.ivue-steps-vertical .ivue-step-status-finish .ivue-step-divider>i:after{height:100%}.ivue-steps.ivue-steps-vertical .ivue-step-header{float:left}.ivue-steps.ivue-steps-vertical .ivue-step-header-content{margin-right:var(--ivue-steps-vertical-header-content-margin-right)}.ivue-steps.ivue-steps-vertical .ivue-step-content{min-height:47px;overflow:hidden;display:block}.ivue-steps.ivue-steps-vertical .ivue-step-title{line-height:26px}.ivue-steps.ivue-steps-vertical .ivue-step-content-slot{padding-bottom:var(--ivue-steps-vertical-content-slot-padding-bottom);padding-left:0}.ivue-step-item{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex}.ivue-step-item:last-child .ivue-step-divider{display:none}.ivue-step-last{-ms-flex-preferred-size:auto;flex-basis:auto;-ms-flex-negative:0;flex-shrink:0;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0}.ivue-step-custom .ivue-step-header-content{width:inherit;height:inherit;line-height:inherit;border-radius:0;border:0;background:0 0}.ivue-step-custom .ivue-step-header-content .ivue-step-icon{width:auto;min-width:auto;color:var(--ivue-primary-color)}.ivue-step-header{background-color:var(--ivue-white-color)}.ivue-step-divider{position:absolute;left:0;top:13px;padding:0 10px;width:100%}.ivue-step-divider>i{position:relative;display:inline-block;width:100%;height:1px;vertical-align:top;border-radius:1px;background-color:var(--ivue-border-multiple-color)}.ivue-step-divider>i:after{content:"";position:absolute;top:0;opacity:0;width:0;height:100%;background-color:var(--ivue-border-multiple-color);-webkit-transition:all .3s cubic-bezier(.4,0,.2,1);transition:all .3s cubic-bezier(.4,0,.2,1)}.ivue-step-title{display:inline-block;margin-bottom:4px;padding-right:10px;font-size:var(--ivue-font-base-size);font-weight:700;color:var(--ivue-steps-title-color);background-color:var(--ivue-white-color);-webkit-transition:color .4s cubic-bezier(.4,0,.2,1);transition:color .4s cubic-bezier(.4,0,.2,1)}.ivue-step-content,.ivue-step-header{position:relative;display:inline-block;vertical-align:top}.ivue-step-content{display:inline}.ivue-step-header-content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-right:8px;text-align:center;font-size:var(--ivue-font-base-size);border-radius:50%;border:1px solid var(--ivue-steps-border-color);width:26px;height:26px;line-height:24px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition:background-color .3s cubic-bezier(.4,0,.2,1);transition:background-color .3s cubic-bezier(.4,0,.2,1);cursor:pointer}.ivue-step-header-content .ivue-step-icon{font-size:var(--ivue-font-default-size)}.ivue-step-content-slot{font-size:var(--ivue-font-small-size);color:var(--ivue-legend-color);-webkit-transition:color .4s cubic-bezier(.4,0,.2,1);transition:color .4s cubic-bezier(.4,0,.2,1)}.ivue-step-status-finish .ivue-step-header-content{border-color:var(--ivue-primary-color);background-color:var(--ivue-white-color)}.ivue-step-status-finish .ivue-step-header-content .ivue-step-icon{color:var(--ivue-primary-color)}.ivue-step-status-finish .ivue-step-divider>i:after{opacity:1;width:100%;background:var(--ivue-primary-color)}.ivue-step-status-finish .ivue-step-content-slot,.ivue-step-status-finish .ivue-step-title{color:var(--ivue-primary-color)}.ivue-step-status-wait .ivue-step-header-content{background-color:var(--ivue-white-color)}.ivue-step-status-wait .ivue-step-header-content span,.ivue-step-status-wait .ivue-step-header-content>.ivue-step-icon{color:var(--ivue-steps-border-color)}.ivue-step-status-wait .ivue-step-content-slot,.ivue-step-status-wait .ivue-step-title{color:var(--ivue-legend-color)}.ivue-step-status-process .ivue-step-header-content{border-color:var(--ivue-primary-color);background-color:var(--ivue-primary-color)}.ivue-step-status-process .ivue-step-header-content span,.ivue-step-status-process .ivue-step-header-content>.ivue-step-icon{color:var(--ivue-white-color)}.ivue-step-status-process .ivue-step-content-slot,.ivue-step-status-process .ivue-step-title{color:var(--ivue-steps-title-color)}.ivue-step-status-error .ivue-step-header-content{border-color:var(--ivue-error-color);background-color:var(--ivue-error-color)}.ivue-step-status-error .ivue-step-header-content>.ivue-step-icon{color:var(--ivue-white-color)}.ivue-step-status-error .ivue-step-content-slot,.ivue-step-status-error .ivue-step-title{color:var(--ivue-error-color)}.ivue-step .ivue-step-next-error .ivue-step-divider>i,.ivue-step .ivue-step-next-error .ivue-step-divider>i:after{background-color:var(--ivue-error-color)}.ivue-step-text-bottom,.ivue-step-text-bottom-center{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.ivue-step-text-bottom .ivue-step-header,.ivue-step-text-bottom-center .ivue-step-header{padding:0;margin:0;background:0 0;text-align:center}.ivue-step-text-bottom .ivue-step-header-content,.ivue-step-text-bottom-center .ivue-step-header-content{position:relative}.ivue-step-text-bottom .ivue-step-content,.ivue-step-text-bottom-center .ivue-step-content{padding-top:8px}.ivue-step-text-bottom .ivue-step-divider,.ivue-step-text-bottom-center .ivue-step-divider{padding:0}.ivue-step-text-bottom .ivue-step-divider>i:after,.ivue-step-text-bottom-center .ivue-step-divider>i:after{left:0}.ivue-step-bottom-center .ivue-step-header{background:0 0;text-align:center}.ivue-step-bottom-center .ivue-step-header-content{position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.ivue-step-bottom-center .ivue-step-content{text-align:center}.ivue-step-bottom-center .ivue-step-divider{left:50%;right:-50%}