@mijadesign/mjui-react-taro/dist/esm/Steps/style/style.css

京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序

.nut-step{position:relative;display:flex}.nut-step-last .nut-step-line{display:none}.nut-step-head{display:flex;align-items:center;height:var(--nutui-steps-base-head-height, 14px);position:relative;z-index:1}.nut-step-head-text{height:var(--nutui-steps-base-head-text-size, 12px);width:var(--nutui-steps-base-head-text-size, 12px);background-color:var(--nutui-steps-base-head-background-color, var(--nutui-color-background, #f8f8f8));color:var(--nutui-steps-base-head-color, var(--nutui-color-text, #666666));font-size:var(--nutui-steps-base-icon-size, var(--nutui-font-size-0, 11px))}.nut-step-head-icon{height:var(--nutui-steps-base-head-icon-size, 16px);width:var(--nutui-steps-base-head-icon-size, 16px);background-color:var(--nutui-steps-base-head-background-color, var(--nutui-color-background, #f8f8f8))}.nut-step-head-icon .nut-icon{color:#fff}.nut-step-head-dot{height:var(--nutui-steps-base-head-dot-size, 6px);width:var(--nutui-steps-base-head-dot-size, 6px);background-color:var(--nutui-steps-base-head-dot-background-color, var(--nutui-color-text-disabled, #999999))}.nut-step-head-dot,.nut-step-head-icon,.nut-step-head-text{display:flex;align-items:center;justify-content:center;border-radius:50%;box-sizing:border-box;border:var(--nutui-steps-base-head-border, none)}.nut-step-line{position:absolute;z-index:0;display:flex;align-items:center;justify-content:center}.nut-step-line-inner{display:flex;flex:1;height:var(--nutui-steps-base-line-height, 1px);background:var(--nutui-steps-base-line-background, var(--nutui-color-border, #e6e6e6))}.nut-step-main{position:relative;display:flex;flex-direction:column;justify-content:center;min-height:var(--nutui-steps-base-head-height, 14px)}.nut-step-line,.nut-step-title{background-color:#fff}.nut-step-title{position:relative;z-index:1}.nut-step-title{height:14px;line-height:14px;font-size:var(--nutui-steps-base-title-font-size, var(--nutui-font-size-1, 13px));color:var(--nutui-steps-base-title-color, var(--nutui-color-title, #0d0d0d));overflow:hidden;white-space:nowrap}.nut-step-description{height:16px;line-height:16px;margin-top:var(--nutui-steps-base-title-margin-bottom, 2px);font-size:var(--nutui-steps-base-description-font-size, var(--nutui-font-size-0, 11px));color:var(--nutui-steps-base-description-color, var(--nutui-color-text-help, var(--nutui-color-text-disabled, #999999)));overflow:hidden}.nut-step.nut-step-process .nut-step-head-icon,.nut-step.nut-step-process .nut-step-head-text,.nut-step.nut-step-process .nut-step-head-dot{background-color:var(--nutui-steps-process-head-background-color, var(--nutui-color-primary, #006dfc))}.nut-step.nut-step-process .nut-step-head-text{color:var(--nutui-steps-process-color, #ffffff)}.nut-step.nut-step-wait .nut-step-head-icon .nut-icon{color:var(--nutui-steps-wait-icon-color, var(--nutui-color-text-help, var(--nutui-color-text-disabled, #999999)))}.nut-step.nut-step-finish .nut-step-head-icon .nut-icon{color:var(--nutui-steps-finish-icon-color, var(--nutui-color-text-help, var(--nutui-color-text-disabled, #999999)))}.nut-step.nut-step-business .nut-step-head-text{color:var(--nutui-steps-business-head-text-color, var(--nutui-color-service-pressed))}.nut-step.nut-step-business .nut-step-title{color:var(--nutui-steps-business-title-color, var(--nutui-color-service-pressed))}.nut-step.nut-step-business .nut-step-description{color:var(--nutui-steps-business-description-color, var(--nutui-color-service-pressed))}.nut-step.nut-step-business .nut-step-head-dot{background-color:var(--nutui-steps-business-head-dot-background-color, var(--nutui-color-service-pressed))}.nut-step.nut-step-business .nut-step-head-icon,.nut-step.nut-step-business .nut-step-head-text{background-color:var(--nutui-steps-business-head-background-color, var(--nutui-color-service))}.nut-step.nut-step-business .nut-step-head-icon .nut-icon{color:var(--nutui-steps-business-head-icon-color, var(--nutui-color-service-pressed))}.nut-steps{display:flex}.nut-steps-horizontal{flex-flow:row}.nut-steps-horizontal .nut-step-head{background-color:var(--nutui-steps-background-color, #ffffff)}.nut-steps-horizontal .nut-step-head-icon .nut-icon{height:10px;width:10px}.nut-steps-horizontal .nut-step-head-icon .nut-image{width:100%;height:100%;background-color:var(--nutui-steps-background-color, #ffffff)}.nut-steps-horizontal .nut-step-head-icon .nut-image img{vertical-align:top}.nut-steps-horizontal .nut-step.nut-step-process .nut-step-title{color:var(--nutui-steps-process-title-color, var(--nutui-color-primary, #006dfc))}.nut-steps-horizontal .nut-step.nut-step-process .nut-step-description{color:var(--nutui-steps-process-description-color, var(--nutui-color-primary, #006dfc))}.nut-steps-horizontal .nut-step.nut-step-wait .nut-step-title{color:var(--nutui-steps-wait-title-color, var(--nutui-color-title, #0d0d0d))}.nut-steps-horizontal .nut-step.nut-step-wait .nut-step-description{color:var(--nutui-steps-wait-description-color, var(--nutui-color-text, #666666))}.nut-steps-horizontal-single .nut-step{padding-right:var(--nutui-steps-horizontal-item-padding-right, 28px)}.nut-steps-horizontal-single .nut-step-last{padding-right:0!important}.nut-steps-horizontal-single .nut-step-line{top:0;right:0;height:var(--nutui-steps-base-head-height, 14px);width:var(--nutui-steps-horizontal-item-padding-right, 28px);padding:var(--nutui-steps-horizontal-item-line-padding, 0 8px);box-sizing:border-box}.nut-steps-horizontal-single .nut-step-title,.nut-steps-horizontal-single .nut-step-description{padding-left:4px}.nut-steps-horizontal-single .nut-step-special{padding-right:var(--nutui-steps-horizontal-item-special-padding-right, 22px)}.nut-steps-horizontal-single .nut-step-special .nut-step-line{width:100%}.nut-steps-horizontal-single .nut-step-special .nut-step-title{padding-right:8px;width:fit-content}.nut-steps-horizontal-single.nut-steps-horizontal-count-3 .nut-step-special{padding-right:var(--nutui-steps-horizontal-item-special-3-padding-right, 9px)}.nut-steps-horizontal-double{width:100%;justify-content:space-between}.nut-steps-horizontal-double .nut-step{flex-direction:column;align-items:center;flex:1}.nut-steps-horizontal-double .nut-step-line{top:0;right:-50%;height:var(--nutui-steps-base-head-height, 14px);width:100%}.nut-steps-horizontal-double .nut-step-line-inner{display:inline-flex;height:var(--nutui-steps-base-line-height, 1px);width:100%;background:var(--nutui-steps-base-line-background, var(--nutui-color-border, #e6e6e6))}.nut-steps-horizontal-double .nut-step-head{justify-content:center;margin-bottom:6px}.nut-steps-horizontal-double .nut-step-head-dot-wrap,.nut-steps-horizontal-double .nut-step-head-icon-wrap,.nut-steps-horizontal-double .nut-step-head-text-wrap{background-color:var(--nutui-steps-background-color, #ffffff);padding:var(--nutui-steps-horizontal-item-line-padding, 0 8px)}.nut-steps-horizontal-double .nut-step-head-icon{height:var(--nutui-steps-base-head-icon-size-right, 20px);width:var(--nutui-steps-base-head-icon-size-right, 20px)}.nut-steps-horizontal-double .nut-step-head-icon .nut-icon{height:12px;width:12px}.nut-steps-horizontal-double .nut-step-main{align-items:center;margin-left:0;margin-top:2px}.nut-steps-horizontal-double.nut-steps-horizontal-icon .nut-step-head,.nut-steps-horizontal-double.nut-steps-horizontal-icon .nut-step-line{height:var(--nutui-steps-base-head-icon-size-right, 20px)}.nut-steps-horizontal-double.nut-steps-horizontal-dot .nut-step-head,.nut-steps-horizontal-double.nut-steps-horizontal-dot .nut-step-line{height:var(--nutui-steps-base-head-dot-size, 6px)}.nut-steps-horizontal-double.nut-steps-horizontal-text .nut-step-head,.nut-steps-horizontal-double.nut-steps-horizontal-text .nut-step-line{height:var(--nutui-steps-base-head-text-size, 12px)}.nut-steps-vertical{flex:1;min-width:0;flex-direction:column}.nut-steps-vertical .nut-step{padding-bottom:var(--nutui-steps-vertical-item-padding-bottom, 13px)}.nut-steps-vertical .nut-step-last{padding-bottom:0!important}.nut-steps-vertical .nut-step-line{height:calc(100% - 4px);width:1px;bottom:0}.nut-steps-vertical .nut-step-line-inner{height:100%}.nut-steps-vertical .nut-step-head{align-items:center;justify-content:center;height:18px}.nut-steps-vertical .nut-step-head-icon{width:var(--nutui-steps-vertical-item-icon-size, 20px);height:var(--nutui-steps-vertical-item-icon-size, 20px)}.nut-steps-vertical .nut-step-head-icon .nut-icon{height:12px;width:12px}.nut-steps-vertical .nut-step-main{flex:1;min-width:0;height:auto;margin-left:8px}.nut-steps-vertical .nut-step-title{display:flex;align-items:center;height:var(--nutui-steps-vertical-line-height, 18px);font-size:var(--nutui-steps-vertical-title-font-size, var(--nutui-font-size-3, 17px));overflow:auto;font-weight:500;margin-bottom:var(--nutui-steps-vertical-title-margin-bottom, 4px)}.nut-steps-vertical .nut-step-description{margin:var(--nutui-steps-vertical-description-margin, 0 0 1px);height:auto;line-height:var(--nutui-steps-vertical-line-height, 18px);color:var(--nutui-color-title, #0d0d0d);font-size:var(--nutui-steps-vertical-description-font-size, var(--nutui-font-size-2, 15px));box-sizing:border-box}.nut-steps-vertical .nut-step-head-dot-wrap,.nut-steps-vertical .nut-step-head-icon-wrap,.nut-steps-vertical .nut-step-head-text-wrap{display:flex;align-items:center;justify-content:center;width:100%;background-color:#fff;position:relative;z-index:1}.nut-steps-vertical .nut-step-head-dot-wrap{height:calc(var(--nutui-steps-base-head-dot-size, 6px) + 8px)}.nut-steps-vertical .nut-step-head-icon-wrap{height:calc(var(--nutui-steps-vertical-item-icon-size, 20px) + 8px)}.nut-steps-vertical .nut-step-head-text-wrap{height:calc(var(--nutui-steps-base-head-text-size, 12px) + 8px)}.nut-steps-vertical-icon .nut-step-head{width:calc(var(--nutui-steps-vertical-item-icon-size, 20px) + 1px);min-width:calc(var(--nutui-steps-vertical-item-icon-size, 20px) + 1px)}.nut-steps-vertical-icon .nut-step-line{left:calc(var(--nutui-steps-vertical-item-icon-size, 20px) / 2)}.nut-steps-vertical-dot .nut-step-head{width:calc(var(--nutui-steps-base-head-dot-size, 6px) + 1px)}.nut-steps-vertical-dot .nut-step-line{left:calc(var(--nutui-steps-base-head-dot-size, 6px) / 2)}.nut-steps-vertical-text .nut-step-head{width:calc(var(--nutui-steps-base-head-text-size, 12px) + 1px);min-width:calc(var(--nutui-steps-base-head-text-size, 12px) + 1px)}.nut-steps-vertical-text .nut-step-line{left:calc(var(--nutui-steps-base-head-text-size, 12px) / 2)}.nut-steps-horizontal-enhanced .nut-step-finish .nut-step-head-icon,.nut-steps-horizontal-enhanced .nut-step-finish .nut-step-head-text,.nut-steps-vertical-enhanced .nut-step-finish .nut-step-head-icon,.nut-steps-vertical-enhanced .nut-step-finish .nut-step-head-text{background-color:var(--nutui-steps-enhanced-finish-head-background-color, var(--nutui-color-primary-light-pressed, var(--nutui-color-primary-background, #e6f0ff)))}.nut-steps-horizontal-enhanced .nut-step-finish .nut-step-head-icon .nut-icon,.nut-steps-horizontal-enhanced .nut-step-finish .nut-step-head-text .nut-icon,.nut-steps-vertical-enhanced .nut-step-finish .nut-step-head-icon .nut-icon,.nut-steps-vertical-enhanced .nut-step-finish .nut-step-head-text .nut-icon{color:var(--nutui-steps-enhanced-finish-head-icon-color, var(--nutui-color-primary-stop-1, var(--nutui-color-primary, #006dfc)))}.nut-steps-horizontal-enhanced .nut-step-finish .nut-step-head-text,.nut-steps-vertical-enhanced .nut-step-finish .nut-step-head-text{color:var(--nutui-steps-enhanced-finish-head-text-color, var(--nutui-color-primary-stop-1, var(--nutui-color-primary, #006dfc)))}.nut-steps-horizontal-enhanced .nut-step-finish .nut-step-head-dot,.nut-steps-vertical-enhanced .nut-step-finish .nut-step-head-dot{background-color:var(--nutui-steps-enhanced-finish-head-dot-background-color, var(--nutui-color-primary-disabled-special, var(--nutui-color-primary, #006dfc)))}