44 lines
986 B
SCSS
44 lines
986 B
SCSS
$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 two‑digit 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 li’s 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;
|
||
}
|
||
}
|
||
}
|
||
}
|