@nutui/nutui-react-taro/dist/esm/Step/style/style.css

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

.nut-step{flex-grow:0;flex-shrink:0;flex:1;text-align:center;font-size:0}.nut-step-head{position:relative;display:flex;justify-content:center;margin-bottom:var(--nutui-steps-base-icon-margin-bottom, 12px)}.nut-step-line{position:absolute;top:calc(var(--nutui-steps-base-icon-height, 25px) / 2);left:calc(50% + (100% - var(--nutui-steps-base-line-width, 70%)) / 2);height:var(--nutui-steps-base-line-height, 1px);width:var(--nutui-steps-base-line-width, 70%);background:var(--nutui-steps-base-line-background, var(--nutui-gray-5, #8c8c8c))}.nut-step-icon{position:relative;display:flex;align-items:center;justify-content:center;width:var(--nutui-steps-base-icon-width, 25px);height:var(--nutui-steps-base-icon-height, 25px);line-height:var(--nutui-steps-base-icon-line-height, 25px);font-size:var(--nutui-steps-base-icon-font-size, var(--nutui-font-size-2, 12px));background-color:var(--nutui-steps-wait-icon-bg-color, var(--nutui-gray-5, #8c8c8c));border-color:var(--nutui-steps-wait-icon-bg-color, var(--nutui-gray-5, #8c8c8c));color:var(--nutui-steps-wait-icon-color, #ffffff);z-index:1}.nut-step-icon .nut-icon{width:100%;height:100%}.nut-step-icon.is-text,.nut-step-icon.is-icon{border-radius:50%;border-width:1px;border-style:solid}.nut-step-main{padding:0 10%;display:flex;flex-direction:column;justify-content:center;align-items:center}.nut-step-title{display:block;margin-bottom:var(--nutui-steps-base-title-margin-bottom, 10px);font-size:var(--nutui-steps-base-title-font-size, var(--nutui-font-size-3, 14px));color:var(--nutui-steps-base-title-color, var(--nutui-gray-7, #1a1a1a))}.nut-step-description{display:block;font-size:var(--nutui-steps-base-description-font-size, var(--nutui-font-size-2, 12px));color:var(--nutui-steps-base-description-color, var(--nutui-gray-6, #595959))}.nut-step:last-child .nut-step-line{display:none}.nut-step.nut-step-process .nut-step-icon{background-color:var(--nutui-steps-process-icon-bg-color, var(--nutui-color-primary, #fa2c19));border-color:var(--nutui-steps-process-icon-bg-color, var(--nutui-color-primary, #fa2c19));color:var(--nutui-steps-process-icon-color, #ffffff)}.nut-step.nut-step-process .nut-step-title{color:var(--nutui-steps-process-title-color, var(--nutui-color-primary, #fa2c19));font-size:var(--nutui-steps-process-title-font-size, var(--nutui-font-size-3, 14px));font-weight:var(--nutui-steps-process-title-font-weight, var(--nutui-font-weight-bold, 500))}.nut-step.nut-step-process .nut-step-description{color:var(--nutui-steps-process-description-color, var(--nutui-gray-6, #595959))}.nut-step.nut-step-wait .nut-step-title{color:var(--nutui-steps-wait-title-color, var(--nutui-gray-7, #1a1a1a))}.nut-step.nut-step-wait .nut-step-description{color:var(--nutui-steps-wait-description-color, var(--nutui-gray-6, #595959))}.nut-step.nut-step-finish .nut-step-icon{background-color:var(--nutui-steps-finish-icon-bg-color, var(--nutui-color-primary-text, #ffffff));border-color:var(--nutui-steps-finish-icon-border-color, var(--nutui-steps-finish-icon-color, var(--nutui-color-primary, #fa2c19)));color:var(--nutui-steps-finish-icon-color, var(--nutui-color-primary, #fa2c19))}.nut-step.nut-step-finish .nut-step-line{background:var(--nutui-steps-finish-line-background, var(--nutui-color-primary, #fa2c19))}.nut-step.nut-step-finish .nut-step-title{color:var(--nutui-steps-finish-title-color, var(--nutui-color-primary, #fa2c19))}.nut-step.nut-step-finish .nut-step-description{color:var(--nutui-steps-finish-description-color, var(--nutui-gray-6, #595959))}.nut-steps-dot .nut-step-head{margin:var(--nutui-steps-dot-head-margin, 10px 0)}.nut-steps-dot .nut-step-line{top:7px}.nut-steps-dot .nut-step-icon{width:var(--nutui-steps-dot-icon-width, 6px);height:var(--nutui-steps-dot-icon-height, 6px);border:var(--nutui-steps-dot-icon-border, 2px solid var(--nutui-color-primary-text, #ffffff));border-radius:50%;box-sizing:content-box}.nut-steps-dot .nut-step-wait .nut-step-icon{background-color:var(--nutui-steps-dot-wait-icon-bg-color, var(--nutui-steps-wait-icon-bg-color, var(--nutui-gray-5, #8c8c8c)))}.nut-steps-dot .nut-step-finish .nut-step-icon{background-color:var(--nutui-steps-finish-icon-bg-color, var(--nutui-color-primary-text, #ffffff));border-color:var(--nutui-steps-dot-finish-icon-bg-color, var(--nutui-steps-finish-icon-color, var(--nutui-color-primary, #fa2c19)))}.nut-steps-dot .nut-step-process .nut-step-icon{position:relative}.nut-steps-dot .nut-step-process .nut-step-icon:before{content:"";display:inline-block;position:absolute;left:50%;top:50%;margin-left:-7px;margin-top:-7px;width:14px;height:14px;background-color:var(--nutui-steps-process-icon-before-bg-color, var(--nutui-color-primary-stop-2, #fa2c19));border-radius:50%;opacity:.23}.nut-steps-horizontal.nut-steps-dot .nut-step-line{top:50%;bottom:-50%}.nut-steps-vertical .nut-step{display:flex;height:33.34%}.nut-steps-vertical .nut-step-line{position:absolute;display:inline-block;width:1px;height:var(--nutui-steps-base-line-width, 70%);background:var(--nutui-steps-base-line-background, var(--nutui-gray-5, #8c8c8c));top:calc(var(--nutui-steps-base-icon-height, 25px) + (100% - var(--nutui-steps-base-line-width, 70%) - var(--nutui-steps-base-icon-margin-bottom, 12px)) / 2);left:calc(50% - 1px)}.nut-steps-vertical.nut-steps-dot .nut-step-line{top:calc(var(--nutui-steps-dot-icon-height, 6px) + (100% - var(--nutui-steps-base-line-width, 70%)) / 2)}.nut-steps-vertical .nut-step-main{display:inline-block;padding-left:6%;text-align:start}[dir=rtl] .nut-step-line,.nut-rtl .nut-step-line{left:auto;right:calc(50% + (100% - var(--nutui-steps-base-line-width, 70%)) / 2)}[dir=rtl] .nut-steps-dot .nut-step-process .nut-step-icon:before,.nut-rtl .nut-steps-dot .nut-step-process .nut-step-icon:before{left:auto;right:50%;margin-left:0;margin-right:-7px}[dir=rtl] .nut-steps-vertical .nut-step-line,.nut-rtl .nut-steps-vertical .nut-step-line{left:auto;right:calc(50% - 1px)}[dir=rtl] .nut-steps-vertical .nut-step-main,.nut-rtl .nut-steps-vertical .nut-step-main{padding-left:0;padding-right:6%}