test-nut-ui
Version:
<p align="center"> <img alt="logo" src="https://img11.360buyimg.com/imagetools/jfs/t1/211965/25/7152/22022/61b16785E433119bb/aa41d7a9f7e823f3.png" width="150" style="margin-bottom: 10px;"> </p>
2 lines (1 loc) • 5.7 kB
CSS
.nut-step{flex-grow:0;flex-shrink:0;flex:1;text-align:var(--nutui-steps-text-align, center);font-size:0}.nut-step-head{position:relative;display:flex;justify-content:var(--nutui-steps-head-justify-content, center);margin-bottom:var(--nutui-steps-base-icon-margin-bottom, 8px)}.nut-step-line{position:absolute;top:calc(var(--nutui-steps-base-icon-height, 20px) / 2 - var(--nutui-steps-base-line-height, 2px) / 2);left:var(--nutui-steps-base-line-left, calc(50% + (100% - var(--nutui-steps-base-line-width, 100%)) / 2));height:var(--nutui-steps-base-line-height, 2px);width:var(--nutui-steps-base-line-width, 100%);background:var(--nutui-steps-base-line-background, var(--nsui-gray-color-4, #E5E5E5))}.nut-step-icon{position:relative;display:flex;align-items:center;justify-content:center;width:var(--nutui-steps-base-icon-width, 20px);height:var(--nutui-steps-base-icon-height, 20px);line-height:var(--nutui-steps-base-icon-line-height, 20px);font-size:var(--nutui-steps-base-icon-font-size, 13px);background-color:var(--nutui-steps-wait-icon-bg-color, var(--nsui-gray-color-4, #E5E5E5));border-color:var(--nutui-steps-wait-icon-bg-color, var(--nsui-gray-color-4, #E5E5E5));color:var(--nutui-steps-wait-icon-color, var(--nutui-gray-6, #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{display:inline-block;padding:var(--nutui-steps-main-padding, 0px 8px);text-align:var(--nutui-steps-main-text-align, center)}.nut-step-title{display:block;margin-bottom:var(--nutui-steps-base-title-margin-bottom, 2px);font-size:var(--nutui-steps-base-title-font-size, 14px);line-height:var(--nutui-steps-base-title-line-height, 22px);color:var(--nutui-steps-base-title-color, var(--nsui-gray-color-9, #262626))}.nut-step-description{display:block;font-size:var(--nutui-steps-base-description-font-size, 12px);height:var(--nutui-steps-base-description-height, 54px);line-height:var(--nutui-steps-base-description-line-height, 18px);color:var(--nutui-steps-base-description-color, var(--nsui-gray-color-7, #8C8C8C));overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}.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(--nsui-brand-color-guide, #2C68FF));border-color:var(--nutui-steps-process-icon-bg-color, var(--nsui-brand-color-guide, #2C68FF));color:var(--nutui-steps-process-icon-color, var(--nutui-gray-6, #ffffff))}.nut-step.nut-step-process .nut-step-title{font-size:var(--nutui-steps-process-title-font-size, 14px);font-weight:var(--nutui-steps-process-title-font-weight, 400)}.nut-step.nut-step-wait .nut-step-title{color:var(--nutui-steps-wait-title-color, var(--nsui-gray-color-8, #595959))}.nut-step.nut-step-finish .nut-step-icon{background-color:var(--nutui-steps-finish-icon-bg-color, var(--nsui-brand-color-guide, #2C68FF));border-color:var(--nutui-steps-finish-icon-bg-color, var(--nsui-brand-color-guide, #2C68FF));color:var(--nutui-steps-finish-icon-color, var(--nutui-brand-color, #2C68FF))}.nut-step.nut-step-finish .nut-step-icon.is-icon{background-color:var(--nutui-steps-finish-has-icon-bg-color, var(--nsui-brand-color-guide, #2C68FF));border-color:var(--nutui-steps-finish-has-icon-bg-color, var(--nsui-brand-color-guide, #2C68FF));color:transparent}.nut-step.nut-step-finish .nut-step-line{background:var(--nutui-steps-finish-line-background, var(--nsui-brand-color-guide, #2C68FF))}.nut-step.nut-step-finish .nut-step-title{color:var(--nutui-steps-finish-title-color, var(--nsui-gray-color-9, #262626))}.nut-steps-dot .nut-step-head{margin:var(--nutui-steps-dot-head-margin, 0 0 0 0)}.nut-steps-dot .nut-step-line{top:7px}.nut-steps-dot .nut-step-icon{width:var(--nutui-steps-dot-icon-width, 8px);height:var(--nutui-steps-dot-icon-height, 8px);border:var(--nutui-steps-dot-icon-border, none);border-radius:50%;box-sizing:content-box}.nut-steps-dot .nut-step-wait .nut-step-title{color:var(--nutui-steps-wait-title-color, var(--nsui-gray-color-8, #595959))}.nut-steps-dot .nut-step-finish .nut-step-icon,.nut-steps-dot .nut-step-process .nut-step-icon{position:relative;background-color:var(--nutui-steps-process-icon-bg-color, var(--nsui-brand-color-guide, #2C68FF))}.nut-steps-dot .nut-step-process .nut-step-icon:before{content:"";display:inline-block;position:absolute;left:50%;top:50%;margin-left:-6px;margin-top:-6px;width:12px;height:12px;background-color:var(--nutui-steps-dot-icon-finish-bg-color, #C9E0FF);border-radius:50%}.nut-steps-dot .nut-step-process .nut-step-icon:after{content:"";display:inline-block;position:absolute;left:50%;top:50%;margin-left:-4px;margin-top:-4px;width:var(--nutui-steps-dot-icon-width, 8px);height:var(--nutui-steps-dot-icon-height, 8px);border:var(--nutui-steps-dot-icon-border, none);background-color:var(--nutui-steps-process-icon-bg-color, var(--nsui-brand-color-guide, #2C68FF));border-radius:50%}.nut-steps-horizontal.nut-steps-dot .nut-step-line{top:50%;bottom:-50%;transform:translateY(-50%)}.nut-steps-vertical .nut-step{display:flex;height:33.34%}.nut-steps-vertical .nut-step-line{display:inline-block;top:calc(var(--nutui-steps-base-icon-width, 20px) / 2);left:calc(50% - var(--nutui-steps-base-line-height, 2px) / 2);height:var(--nutui-steps-base-line-width, 100%);width:var(--nutui-steps-base-line-height, 2px)}.nut-steps-vertical.nut-steps-dot .nut-step-line{top:calc(var(--nutui-steps-dot-icon-width, 8px) / 2)}.nut-steps-vertical .nut-step-main{display:inline-block;padding:var(--nutui-steps-dot-head-margin, 0 0 0 8px);text-align:left}