59 lines
1.3 KiB
SCSS
59 lines
1.3 KiB
SCSS
$marker-size: 1.5em;
|
||
$gap-y: 2em;
|
||
|
||
ol {
|
||
@apply list-none m-0 p-0;
|
||
counter-reset: step;
|
||
|
||
> li {
|
||
@apply relative;
|
||
padding-left: calc(#{$marker-size} + .5em);
|
||
margin-bottom: $gap-y;
|
||
counter-increment: step;
|
||
|
||
// the two‑digit number
|
||
&::before {
|
||
content: counter(step, decimal-leading-zero);
|
||
position: absolute;
|
||
top: .2em;
|
||
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} + .5em);
|
||
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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
ul {
|
||
@apply list-none m-0 p-0;
|
||
|
||
> li {
|
||
@apply relative pl-8 mb-4; // Adjust padding-left based on icon size + desired gap
|
||
|
||
&::before {
|
||
@extend .ci; // Inherit base icon styles
|
||
@extend .ci-check; // Use the check icon
|
||
@apply absolute left-0 top-1 text-primary; // Position and color the icon
|
||
// Adjust 'top' value as needed for vertical alignment
|
||
}
|
||
}
|
||
}
|