@mijadesign/mjui-react-taro
Version:
京东风格的轻量级移动端 React 组件库,支持一套代码生成 H5 和小程序
2 lines (1 loc) • 3.94 kB
CSS
.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))}