comic-plus

Version:

1 lines • 3.42 kB

CSS

.cu-step{display:flex;color:var(--cu-text-color);font-size:14px}.cu-step.is-vertical{flex-direction:column;overflow-x:hidden;overflow-y:auto;max-width:100%;width:fit-content}.cu-step-item{display:inline-flex;flex-direction:column;align-items:flex-start;position:relative;flex-shrink:1;color:var(--cu-text-color-light3)}.cu-step.is-vertical .cu-step-item{flex-direction:row;width:100%}.cu-step.is-horizontal .cu-step-item.is-center{align-items:center;text-align:center}.cu-step .cu-step-item:not(.is-center):last-child{flex-grow:0}.cu-step-item__header{line-height:20px;height:20px;width:100%;display:flex;font-size:18px}.cu-step-item__header .cu-step-item__text{padding:0 4px;text-align:center;position:relative;z-index:1;background-color:#fff}.cu-step-item__header .cu-step-item__icon{padding:0 4px;z-index:1;background-color:#fff;display:flex}.cu-step.is-vertical .cu-step-item__header .cu-step-item__icon{padding:4px 0}.cu-step-item__header .cu-step-item__line{position:absolute;left:0;right:0;top:9px;height:2px;background-color:var(--cu-text-color-light4)}.cu-step-item:last-child .cu-step-item__line{display:none}.cu-step-item.is-center .cu-step-item__header{justify-content:center}.cu-step-item.is-center .cu-step-item__header .cu-step-item__line{left:50%;right:-50%}.cu-step .cu-step-item .cu-step-item__content{padding-right:10px;font-size:12px}.cu-step-item.is-center .cu-step-item__content{padding-left:10px}.cu-step-item.is-finish .cu-step-item__header .cu-step-item__line{background-color:var(--cu-step-active-color,var(--cu-color-primary))}.cu-step-item.is-finish{color:var(--cu-step-active-color,var(--cu-color-primary))}.cu-step-item.is-active{color:var(--cu-text-color)}.cu-step-item.is-active .cu-step-item__header{color:var(--cu-step-active-color,var(--cu-color-primary))}.cu-step-item.error{color:var(--cu-color-danger)}.cu-step-item__title{white-space:nowrap}.cu-step.is-vertical .cu-step-item .cu-step-item__main{flex:1;padding-bottom:20px;padding-left:5px}.cu-step.is-vertical .cu-step-item .cu-step-item__header{width:20px;height:100%}.cu-step.is-vertical .cu-step-item__header .cu-step-item__text{width:100%;height:fit-content;padding:4px 0}.cu-step.is-vertical .cu-step-item__header .cu-step-item__line{left:9px;top:0;bottom:0;width:2px;height:100%}.cu-step-card{position:relative;margin-right:20px;padding:5px 10px;display:inline-flex;align-items:center;justify-content:center;min-width:80px;color:var(--cu-text-color-light3);border-radius:var(--cu-border-radius)}.cu-step.is-border .cu-step-card{border:1px solid var(--cu-border-color)}.cu-step.is-vertical .cu-step-card{margin-right:0;margin-bottom:20px;display:block}.cu-step-card:last-child{margin-right:0}.cu-step.is-vertical .cu-step-card:last-child{margin-bottom:0}.cu-step-card .cu-step-card__header{display:flex;justify-content:center;align-items:center}.cu-step-card.is-finish{border-color:var(--cu-step-active-color,var(--cu-color-primary));color:var(--cu-step-active-color,var(--cu-color-primary))}.cu-step-card.is-active{border-color:var(--cu-text-color);color:var(--cu-text-color)}.cu-step-card.error{border-color:var(--cu-color-danger);color:var(--cu-color-danger)}.cu-step-card .card-bridge{position:absolute;right:-21px;font-size:20px}.cu-step-card:last-child .card-bridge{display:none}.cu-step.is-vertical .cu-step-card .card-bridge{right:50%;bottom:-21px;translate:50% 0}.cu-step-card .cu-step-item__icon{margin-right:5px}