feat: add ul
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
$marker-size: 1.5rem;
|
||||
$gap-y: 2rem;
|
||||
$marker-size: 1.5em;
|
||||
$gap-y: 2em;
|
||||
|
||||
ol {
|
||||
@apply list-none m-0 p-0;
|
||||
@@ -7,7 +7,7 @@ ol {
|
||||
|
||||
> li {
|
||||
@apply relative;
|
||||
padding-left: calc(#{$marker-size} + .5rem);
|
||||
padding-left: calc(#{$marker-size} + .5em);
|
||||
margin-bottom: $gap-y;
|
||||
counter-increment: step;
|
||||
|
||||
@@ -15,7 +15,7 @@ ol {
|
||||
&::before {
|
||||
content: counter(step, decimal-leading-zero);
|
||||
position: absolute;
|
||||
top: .2rem;
|
||||
top: .2em;
|
||||
left: 0;
|
||||
@apply text-primary font-bold text-2xl leading-none;
|
||||
}
|
||||
@@ -24,7 +24,7 @@ ol {
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: calc(#{$marker-size} + .5rem);
|
||||
top: calc(#{$marker-size} + .5em);
|
||||
bottom: -$gap-y; // extend past the li’s bottom margin
|
||||
left: calc(#{$marker-size} / 2);
|
||||
transform: translateX(-50%);
|
||||
@@ -41,3 +41,18 @@ ol {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user