vue-devui/steps/style.css

DevUI components based on Vite and Vue3

.devui-steps{display:flex}.devui-steps.vertical{flex-direction:column;height:100%}.devui-steps.vertical .devui-step{flex-direction:row}.devui-steps.vertical .devui-step__line{width:1px;height:100%;left:12px;top:24px}.devui-steps.vertical .devui-step__content{margin-left:8px;padding-top:2px}.devui-steps.simple .devui-step{position:relative;height:36px;line-height:36px;text-align:center;background-color:var(--devui-brand-foil, #f2f2f3);color:var(--devui-text, #252b3a)}.devui-steps.simple .devui-step:not(:first-child){margin-left:18px}.devui-steps.simple .devui-step:not(:last-child){margin-right:18px}.devui-steps.simple .devui-step:not(:first-child):before{content:"";width:0;height:0;position:absolute;left:-28px;top:0;border:solid 18px transparent;border-top-color:var(--devui-brand-foil, #f2f2f3);border-right-color:var(--devui-brand-foil, #f2f2f3);border-bottom-color:var(--devui-brand-foil, #f2f2f3)}.devui-steps.simple .devui-step:after{content:"";width:0;height:0;position:absolute;right:-36px;top:0;border:solid 18px transparent;border-left-color:var(--devui-brand-foil, #f2f2f3)}.devui-steps.simple .devui-step.active{background-color:var(--devui-brand, #5e7ce0);color:var(--devui-light-text, #ffffff)}.devui-steps.simple .devui-step.active:before{border-top-color:var(--devui-brand, #5e7ce0);border-right-color:var(--devui-brand, #5e7ce0);border-bottom-color:var(--devui-brand, #5e7ce0)}.devui-steps.simple .devui-step.active:after{border-left-color:var(--devui-brand, #5e7ce0)}.devui-steps.simple .devui-step.finished{background-color:var(--devui-success, #50d4ab);color:var(--devui-light-text, #ffffff)}.devui-steps.simple .devui-step.finished:before{border-top-color:var(--devui-success, #50d4ab);border-right-color:var(--devui-success, #50d4ab);border-bottom-color:var(--devui-success, #50d4ab)}.devui-steps.simple .devui-step.finished:after{border-left-color:var(--devui-success, #50d4ab)}.devui-icon__container{display:inline-block;color:var(--devui-icon-fill, #71757f)}.devui-icon__container>*:not(:last-child){vertical-align:middle;margin-right:8px}.devui-icon__container i{vertical-align:middle;transition:all var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-icon--no-slots i,.devui-icon--no-slots img{display:block}.devui-icon--disabled{color:var(--devui-disabled-text, #cfd0d3);cursor:not-allowed}.devui-icon--disabled i{color:var(--devui-disabled-text, #cfd0d3)}.devui-icon--operable:not(.devui-icon--disabled){cursor:pointer;transition:color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-icon--operable:not(.devui-icon--disabled) i{cursor:pointer}.devui-icon--operable:hover:not(.devui-icon--disabled){color:var(--devui-icon-fill-hover, #252b3a)}.devui-icon--operable:hover:not(.devui-icon--disabled).devui-icon__container{background-color:var(--devui-icon-background-hover, var(--devui-list-item-hover-bg, #f2f2f3))}.devui-icon--operable:hover:not(.devui-icon--disabled) i{color:var(--devui-icon-fill-hover, #252b3a)}.devui-icon--operable:active:not(.devui-icon--disabled){color:var(--devui-icon-active-color, var(--devui-icon-fill-active, #252b3a))}.devui-icon--operable:active:not(.devui-icon--disabled).devui-icon__container{background-color:var(--devui-icon-background-active, var(--devui-list-item-active-bg, #f2f5fc))}.devui-icon--operable:active:not(.devui-icon--disabled) i{color:var(--devui-icon-active-color, var(--devui-icon-fill-active, #252b3a))}.devui-icon--operable.devui-icon__container{height:32px;line-height:32px;padding:0 8px;margin-left:-8px;border-radius:var(--devui-border-radius, 2px);transition:all var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-icon--spin{animation:iconSpin 2.5s linear infinite}.devui-svg-icon{vertical-align:middle}@keyframes iconSpin{0%{transform:rotate(0)}50%{transform:rotate(180deg)}to{transform:rotate(360deg)}}.devui-icon-group{display:inline-flex;align-items:center}.devui-icon-group>.devui-icon__container:not(.devui-icon--operable){padding:8px;margin-left:0}.devui-icon-group>.devui-icon__container:not(.devui-icon--operable):first-child{margin-left:-8px}.devui-icon-group>*:not(:first-child){margin-left:0}.devui-step{display:flex;flex-direction:column;flex-shrink:1}.devui-step:last-child{flex-shrink:0}.devui-step:last-child:not(.center):not(.devui-step--simple){flex-basis:auto!important}.devui-step:last-child .devui-step__line{display:none}.devui-step__dot-container{position:relative}.devui-step__content{display:flex;flex-direction:column}.devui-step__dot{display:inline-flex;justify-content:center;align-items:center;width:24px;height:24px;border-radius:50%;background-color:var(--devui-brand-foil, #f2f2f3);color:var(--devui-text, #252b3a)}.devui-step__line{position:absolute;top:12px;left:24px;width:calc(100% - 24px);height:1px;background-color:var(--devui-line, #d7d8da)}.devui-step__title{color:var(--devui-placeholder, #babbc0)}.devui-step__description{color:var(--devui-placeholder, #babbc0);font-size:12px}.devui-step.active .devui-step__dot{background-color:var(--devui-brand, #5e7ce0);color:var(--devui-light-text, #ffffff)}.devui-step.active .devui-step__title,.devui-step.active .devui-step__description{color:var(--devui-brand, #5e7ce0)}.devui-step.finished .devui-step__dot{background-color:var(--devui-success, #50d4ab)}.devui-step.finished .devui-step__title,.devui-step.finished .devui-step__description{color:var(--devui-success, #50d4ab)}.devui-step.center{text-align:center}.devui-step.center .devui-step__line{left:calc(50% + 12px)}.devui-step.wait .devui-step__dot{background-color:var(--devui-brand-foil, #f2f2f3);color:var(--devui-text, #252b3a)}.devui-step.wait .devui-step__title{color:var(--devui-placeholder, #babbc0)}.devui-step.process .devui-step__dot{background-color:var(--devui-brand, #5e7ce0);color:var(--devui-light-text, #ffffff)}.devui-step.process .devui-step__title{color:var(--devui-brand, #5e7ce0)}.devui-step.finish .devui-step__dot{background-color:var(--devui-success, #50d4ab);color:var(--devui-light-text, #ffffff)}.devui-step.finish .devui-step__title{color:var(--devui-success, #50d4ab)}.devui-step.success .devui-step__dot{background-color:var(--devui-success, #50d4ab);color:var(--devui-light-text, #ffffff)}.devui-step.success .devui-step__title{color:var(--devui-success, #50d4ab)}.devui-step.error .devui-step__dot{background-color:var(--devui-danger, #f66f6a);color:var(--devui-light-text, #ffffff)}.devui-step.error .devui-step__title{color:var(--devui-danger, #f66f6a)}