feat: add ol design
This commit is contained in:
43
packages/base/Resources/Public/Scss/components/_text.scss
Normal file
43
packages/base/Resources/Public/Scss/components/_text.scss
Normal 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 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user