Cloonar/dialog-relations-website
2
0
Fork 0
Code Pull Requests Actions Activity

feat: add ul

Browse Source
This commit is contained in:
Dominik Polakovics Polakovics
2025-04-23 22:45:27 +02:00
parent 8279e8a2b5
commit 21586fbc78
3 changed files with 28 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/base/Resources/Public/Icons/check.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 6L9 17L4 12" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 210 B

8
packages/base/Resources/Public/Scss/abstracts/_icons.scss
View File

@@ -17,26 +17,28 @@
margin-top: 0.125em; margin-top: 0.125em;
} }
.ci-instagram::before { .ci-instagram::before {
mask-image: url(../Icons/instagram.svg); mask-image: url(../Icons/instagram.svg);
} }
.ci-linkedin::before { .ci-linkedin::before {
mask-image: url(../Icons/linkedin.svg); mask-image: url(../Icons/linkedin.svg);
width: 0.9em; width: 0.9em;
height: 0.9em; height: 0.9em;
} }
.ci-facebook::before { .ci-facebook::before {
mask-image: url(../Icons/facebook.svg); mask-image: url(../Icons/facebook.svg);
} }
.ci-arrow-down::before { .ci-arrow-down::before {
mask-image: url(../Icons/arrow-down.svg); mask-image: url(../Icons/arrow-down.svg);
} }
.ci-arrow-up-right::before { .ci-arrow-up-right::before {
mask-image: url(../Icons/arrow-up-right.svg); mask-image: url(../Icons/arrow-up-right.svg);
} }
.ci-check::before {
mask-image: url(../Icons/check.svg);
}
.ci-email::before { .ci-email::before {
mask-image: url(../Icons/email.svg); mask-image: url(../Icons/email.svg);
} }

25
packages/base/Resources/Public/Scss/components/_text.scss
View File

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