vue-amazing-ui/lib/steps/Steps.css

An Amazing Vue3 UI Components Library, Using TypeScript.

.steps-wrap[data-v-c774c9c3]{display:flex;gap:16px;width:var(--steps-width);transition:all .3s}.steps-wrap:not(.steps-label-bottom) .steps-item .steps-info-wrap .steps-tail[data-v-c774c9c3]{display:none}.steps-wrap .steps-item[data-v-c774c9c3]{position:relative;overflow:hidden;flex:1;vertical-align:top}.steps-wrap .steps-item[data-v-c774c9c3]:last-child{flex:none}.steps-wrap .steps-item:last-child .steps-info-wrap .steps-content .steps-title[data-v-c774c9c3]{padding-right:0}.steps-wrap .steps-item:last-child .steps-info-wrap .steps-content .steps-title[data-v-c774c9c3]:after{display:none}.steps-wrap .steps-item:last-child .steps-info-wrap .steps-tail[data-v-c774c9c3]{display:none}.steps-wrap .steps-item .steps-info-wrap[data-v-c774c9c3]{display:inline-block;vertical-align:top;outline:none}.steps-wrap .steps-item .steps-info-wrap .steps-tail[data-v-c774c9c3]{height:9px;position:absolute;top:12px;left:0;width:100%;transition:all .3s}.steps-wrap .steps-item .steps-info-wrap .steps-tail[data-v-c774c9c3]:after{display:inline-block;vertical-align:top;width:100%;height:1px;background-color:#0505050f;border-radius:1px;transition:background-color .3s;content:""}.steps-wrap .steps-item .steps-info-wrap .steps-icon[data-v-c774c9c3]{display:inline-flex;align-items:center;justify-content:center;margin-right:8px;width:32px;height:32px;border-radius:50%;text-align:center;background-color:#0000000f;border:1px solid transparent;transition:all .3s}.steps-wrap .steps-item .steps-info-wrap .steps-icon .steps-num[data-v-c774c9c3]{display:inline-block;font-size:16px;line-height:1;color:#000000a6;transition:all .3s}.steps-wrap .steps-item .steps-info-wrap .steps-icon .icon-svg[data-v-c774c9c3]{display:inline-block;font-size:16px;color:var(--steps-primary-color);fill:currentColor;transition:all .3s}.steps-wrap .steps-item .steps-info-wrap .steps-icon .steps-dot[data-v-c774c9c3]{width:100%;height:100%;border-radius:50%;transition:all .3s}.steps-wrap .steps-item .steps-info-wrap .steps-content[data-v-c774c9c3]{display:inline-block;vertical-align:top;transition:all .3s}.steps-wrap .steps-item .steps-info-wrap .steps-content .steps-title[data-v-c774c9c3]{position:relative;display:inline-block;color:#00000073;font-size:16px;line-height:32px;transition:all .3s;padding-right:16px}.steps-wrap .steps-item .steps-info-wrap .steps-content .steps-title[data-v-c774c9c3]:after{background:#e8e8e8;position:absolute;top:16px;left:100%;display:block;width:3000px;height:1px;content:"";cursor:auto;transition:all .3s}.steps-wrap .steps-item .steps-info-wrap .steps-content .steps-description[data-v-c774c9c3]{max-width:140px;font-size:14px;color:#00000073;line-height:22px;word-break:break-all;transition:all .3s}.steps-wrap .steps-finish .steps-info-wrap[data-v-c774c9c3]{cursor:pointer}.steps-wrap .steps-finish .steps-info-wrap .steps-tail[data-v-c774c9c3]:after{background-color:var(--steps-primary-color)}.steps-wrap .steps-finish .steps-info-wrap .steps-icon[data-v-c774c9c3]{background-color:var(--steps-icon-color);border-color:var(--steps-icon-color)}.steps-wrap .steps-finish .steps-info-wrap .steps-icon .steps-dot[data-v-c774c9c3]{background:var(--steps-primary-color)}.steps-wrap .steps-finish .steps-info-wrap .steps-content .steps-title[data-v-c774c9c3]{color:#000000e0}.steps-wrap .steps-finish .steps-info-wrap .steps-content .steps-title[data-v-c774c9c3]:after{background-color:var(--steps-primary-color)}.steps-wrap .steps-finish .steps-info-wrap .steps-content .steps-description[data-v-c774c9c3]{color:#00000073}.steps-wrap .steps-finish .steps-info-wrap:hover .steps-icon[data-v-c774c9c3]{border-color:var(--steps-icon-color-hover)}.steps-wrap .steps-finish .steps-info-wrap:hover .steps-content .steps-title[data-v-c774c9c3],.steps-wrap .steps-finish .steps-info-wrap:hover .steps-content .steps-description[data-v-c774c9c3]{color:var(--steps-primary-color-hover)}.steps-wrap .steps-process .steps-info-wrap .steps-icon[data-v-c774c9c3]{background-color:var(--steps-primary-color);border:1px solid rgba(0,0,0,.25);border-color:var(--steps-primary-color)}.steps-wrap .steps-process .steps-info-wrap .steps-icon .steps-num[data-v-c774c9c3]{color:#fff}.steps-wrap .steps-process .steps-info-wrap .steps-icon .steps-dot[data-v-c774c9c3]{background:var(--steps-primary-color)}.steps-wrap .steps-process .steps-info-wrap .steps-content .steps-title[data-v-c774c9c3],.steps-wrap .steps-process .steps-info-wrap .steps-content .steps-description[data-v-c774c9c3]{color:#000000e0}.steps-wrap .steps-wait .steps-info-wrap[data-v-c774c9c3]{cursor:pointer}.steps-wrap .steps-wait .steps-info-wrap:hover .steps-icon[data-v-c774c9c3]{border-color:var(--steps-icon-color-hover)}.steps-wrap .steps-wait .steps-info-wrap:hover .steps-icon .steps-num[data-v-c774c9c3],.steps-wrap .steps-wait .steps-info-wrap:hover .steps-content .steps-title[data-v-c774c9c3],.steps-wrap .steps-wait .steps-info-wrap:hover .steps-content .steps-description[data-v-c774c9c3]{color:var(--steps-primary-color-hover)}.steps-wrap .steps-wait .steps-info-wrap .steps-icon .steps-dot[data-v-c774c9c3]{background:#00000040}.steps-small[data-v-c774c9c3]{gap:12px}.steps-small .steps-item .steps-info-wrap .steps-icon[data-v-c774c9c3]{width:24px;height:24px}.steps-small .steps-item .steps-info-wrap .steps-icon .steps-num[data-v-c774c9c3],.steps-small .steps-item .steps-info-wrap .steps-icon .icon-svg[data-v-c774c9c3]{font-size:12px}.steps-small .steps-item .steps-info-wrap .steps-content .steps-title[data-v-c774c9c3]{font-size:14px;line-height:24px;padding-right:12px}.steps-small .steps-item .steps-info-wrap .steps-content .steps-title[data-v-c774c9c3]:after{top:12px}.steps-label-bottom[data-v-c774c9c3]{gap:0}.steps-label-bottom .steps-item[data-v-c774c9c3]{overflow:visible}.steps-label-bottom .steps-item .steps-info-wrap .steps-tail[data-v-c774c9c3]{margin-left:56px;padding:4px 24px}.steps-label-bottom .steps-item .steps-info-wrap .steps-icon[data-v-c774c9c3]{margin-left:40px}.steps-label-bottom .steps-item .steps-info-wrap .steps-content[data-v-c774c9c3]{display:block;width:112px;margin-top:12px;text-align:center}.steps-label-bottom .steps-item .steps-info-wrap .steps-content .steps-title[data-v-c774c9c3]{padding-right:0}.steps-label-bottom .steps-item .steps-info-wrap .steps-content .steps-title[data-v-c774c9c3]:after{display:none}.steps-dotted .steps-item[data-v-c774c9c3]{overflow:visible}.steps-dotted .steps-item .steps-info-wrap .steps-tail[data-v-c774c9c3]{height:3px;top:2.5px;width:100%;margin-top:0;margin-bottom:0;margin-inline:70px 0;padding:0}.steps-dotted .steps-item .steps-info-wrap .steps-tail[data-v-c774c9c3]:after{width:calc(100% - 24px);height:3px;margin-left:12px}.steps-dotted .steps-item .steps-info-wrap .steps-icon[data-v-c774c9c3]{position:absolute;width:8px;height:8px;margin-left:66px;padding-right:0;line-height:8px;background:transparent;border:0;vertical-align:top}.steps-dotted .steps-item .steps-info-wrap .steps-content[data-v-c774c9c3]{width:140px;margin-top:20px}.steps-dotted .steps-item .steps-info-wrap .steps-content .steps-title[data-v-c774c9c3]{line-height:1.57142857}.steps-dotted .steps-process .steps-info-wrap .steps-icon[data-v-c774c9c3]{transform:scale(1.25)}.steps-vertical[data-v-c774c9c3]{display:inline-flex;flex-direction:column;gap:0}.steps-vertical .steps-item[data-v-c774c9c3]{flex:1 0 auto;overflow:visible}.steps-vertical .steps-item[data-v-c774c9c3]:last-child{flex:1 0 auto}.steps-vertical .steps-item:not(:last-child) .steps-info-wrap .steps-tail[data-v-c774c9c3]{display:block}.steps-vertical .steps-item:not(:last-child) .steps-info-wrap .steps-content .steps-title[data-v-c774c9c3]:after{display:none}.steps-vertical .steps-item .steps-info-wrap .steps-tail[data-v-c774c9c3]{top:0;left:15px;width:1px;height:100%;padding:38px 0 6px}.steps-vertical .steps-item .steps-info-wrap .steps-tail[data-v-c774c9c3]:after{width:1px;height:100%}.steps-vertical .steps-item .steps-info-wrap .steps-icon[data-v-c774c9c3]{float:left;margin-right:16px}.steps-vertical .steps-item .steps-info-wrap .steps-content[data-v-c774c9c3]{display:block;min-height:48px;overflow:hidden}.steps-vertical .steps-item .steps-info-wrap .steps-content .steps-title[data-v-c774c9c3]{line-height:32px}.steps-vertical .steps-item .steps-info-wrap .steps-content .steps-description[data-v-c774c9c3]{padding-bottom:12px}.steps-small.steps-vertical .steps-item .steps-info-wrap .steps-tail[data-v-c774c9c3]{left:11px;padding:30px 0 6px}.steps-small.steps-vertical .steps-item .steps-info-wrap .steps-content .steps-title[data-v-c774c9c3]{line-height:24px}.steps-vertical.steps-dotted .steps-item .steps-info-wrap .steps-tail[data-v-c774c9c3]{top:12px;left:0;margin:0;padding:16px 0 8px}.steps-vertical.steps-dotted .steps-item .steps-info-wrap .steps-tail[data-v-c774c9c3]:after{margin-left:3.5px}.steps-vertical.steps-dotted .steps-item .steps-info-wrap .steps-icon[data-v-c774c9c3]{position:static;margin-top:12px;margin-left:0;background:none}.steps-vertical.steps-dotted .steps-item .steps-info-wrap .steps-content[data-v-c774c9c3]{width:inherit;margin:0}.steps-vertical.steps-dotted .steps-process .steps-info-wrap .steps-icon[data-v-c774c9c3]{position:relative;margin-top:11px;top:0;left:-1px}.steps-small.steps-vertical.steps-dotted .steps-item .steps-info-wrap .steps-tail[data-v-c774c9c3]{top:8px}.steps-small.steps-vertical.steps-dotted .steps-item .steps-info-wrap .steps-icon[data-v-c774c9c3]{margin-top:8px}.steps-small.steps-vertical.steps-dotted .steps-process .steps-info-wrap .steps-icon[data-v-c774c9c3]{margin-top:7px}