@anoki/fse-ui/dist/components/ui/VerticalCardStepper/VerticalCardStepper.css

FSE UI components library

.vertical-container{position:relative}.vertical-container .timeline{position:relative;display:flex;flex-direction:column}.vertical-container .timeline .step{position:relative;display:flex;align-items:flex-start;gap:18px;min-height:120px}.vertical-container .timeline .step .meta{color:var(--blue-48);align-self:center;width:80px;min-width:80px;max-width:80px}.vertical-container .timeline .step .meta .headline{color:var(--text-primary);font-weight:600;font-size:14px;line-height:16px;letter-spacing:0px;text-align:center}.vertical-container .timeline .step .meta .circle-container{display:flex;flex-direction:column;justify-content:center;align-items:center}.vertical-container .timeline .step .meta .circle-container .circle{background-color:var(--text-primary);border-radius:9999px;display:flex;align-items:center;justify-content:center;width:22px;height:22px;font-weight:600;font-size:18px;line-height:24px;letter-spacing:0px;text-align:center;vertical-align:middle;color:var(--white)}.vertical-container .timeline .step .meta .circle-container .circle .checkmark{width:10px;height:5px;border-left:2px solid white;border-bottom:2px solid white;transform:rotate(-45deg)}.vertical-container .timeline .step .meta .date{justify-content:center;align-items:center}.vertical-container .timeline .step .meta .date .day{font-family:Roboto Mono;font-weight:250;font-size:40px;line-height:40px;letter-spacing:0px;text-align:center}.vertical-container .timeline .step .meta .date .month{font-family:Titillium Web;font-weight:600;font-size:14px;line-height:16px;letter-spacing:0px;text-align:center}.vertical-container .timeline .step .meta .date .year{font-size:12px;font-family:Titillium Web;font-weight:400;font-size:14px;line-height:16px;letter-spacing:0px;text-align:center}.vertical-container .timeline .step .vertical-line{position:relative;width:3px;background-color:var(--text-primary);flex-shrink:0;align-self:stretch}.vertical-container .timeline .step .vertical-line .dot{width:16px;height:16px;background-color:var(--text-primary);border-radius:9999px;position:absolute;top:50%;transform:translateY(-50%);left:-6px;z-index:10}.vertical-container .timeline .step .card{background:var(--white);border-left:16px solid var(--blue-87);box-shadow:0 8px 16px #00000026;padding:24px;max-width:420px;display:flex;flex-direction:column;gap:10px;margin:8px 0;flex:1}.vertical-container .timeline .step .card .label{color:var(--slate-20);font-weight:600;font-size:14px;line-height:16px;letter-spacing:0px;text-transform:uppercase;display:-webkit-box;line-clamp:1;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.vertical-container .timeline .step .card .title{color:var(--text-primary);font-weight:600;font-size:24px;line-height:32px;letter-spacing:0px;vertical-align:bottom;display:-webkit-box;line-clamp:2;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.vertical-container .timeline .step .card .title a{display:inline;color:inherit;text-decoration:none}.vertical-container .timeline .step .card .description{color:var(--color-darker);font-weight:400;font-size:16px;line-height:22px;letter-spacing:0%}.vertical-container .timeline .step .card .card-footer{display:flex;justify-content:flex-end;gap:10px}.vertical-container .timeline .step .card .card-footer-detail{font-weight:600;font-size:16px;line-height:16px;letter-spacing:0%;text-transform:uppercase}@media(max-width:450px){.vertical-container .timeline .step{gap:8px}.vertical-container .timeline .step .meta{width:40px;min-width:40px;max-width:40px}.vertical-container .timeline .step .meta .headline{font-size:12px;line-height:14px;word-break:break-word}.vertical-container .timeline .step .card{padding:12px;max-width:100%;min-width:0;overflow:hidden}.vertical-container .timeline .step .card .label{word-break:break-word}.vertical-container .timeline .step .card .title{font-size:18px;line-height:24px;word-break:break-word;overflow-wrap:break-word}.vertical-container .timeline .step .card .description{font-size:14px;line-height:20px;word-break:break-word;overflow-wrap:break-word}.vertical-container .timeline .step .card .card-footer{flex-wrap:wrap}.vertical-container .timeline .step .card .card-footer-detail{word-break:break-word;overflow-wrap:break-word}}