feat: add ol design
Some checks failed
Build / build (push) Successful in 4m16s
Build / deploy-stage (push) Failing after 1m52s
Build / switch-stage (push) Has been skipped

This commit is contained in:
2025-04-22 17:51:43 +02:00
parent 2fcff77a0d
commit 6e39bc4d9b
2 changed files with 44 additions and 0 deletions

View File

@@ -0,0 +1,43 @@
$marker-size: 1.5rem;
$gap-y: 2rem;
ol {
@apply list-none m-0 p-0;
counter-reset: step;
> li {
@apply relative;
padding-left: calc(#{$marker-size} + .5rem);
margin-bottom: $gap-y;
counter-increment: step;
// the twodigit number
&::before {
content: counter(step, decimal-leading-zero);
position: absolute;
top: .5rem;
left: 0;
@apply text-primary font-bold text-2xl leading-none;
}
// the dashed connector, now stretches over the gap too
&::after {
content: "";
position: absolute;
top: calc(#{$marker-size} + 1rem);
bottom: -$gap-y; // extend past the lis bottom margin
left: calc(#{$marker-size} / 2);
transform: translateX(-50%);
@apply border-l-2 border-dashed border-gray-300;
}
// last item: no connector & no extra bottom margin
&:last-child {
margin-bottom: 0;
&::after {
@apply hidden;
}
}
}
}