diff --git a/packages/base/Resources/Public/Icons/check.svg b/packages/base/Resources/Public/Icons/check.svg new file mode 100644 index 0000000..be3dd3d --- /dev/null +++ b/packages/base/Resources/Public/Icons/check.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/base/Resources/Public/Scss/abstracts/_icons.scss b/packages/base/Resources/Public/Scss/abstracts/_icons.scss index 223f5e4..3a071df 100644 --- a/packages/base/Resources/Public/Scss/abstracts/_icons.scss +++ b/packages/base/Resources/Public/Scss/abstracts/_icons.scss @@ -17,26 +17,28 @@ margin-top: 0.125em; } + .ci-instagram::before { mask-image: url(../Icons/instagram.svg); } - .ci-linkedin::before { mask-image: url(../Icons/linkedin.svg); width: 0.9em; height: 0.9em; } - .ci-facebook::before { mask-image: url(../Icons/facebook.svg); } + .ci-arrow-down::before { mask-image: url(../Icons/arrow-down.svg); } .ci-arrow-up-right::before { mask-image: url(../Icons/arrow-up-right.svg); } - +.ci-check::before { + mask-image: url(../Icons/check.svg); +} .ci-email::before { mask-image: url(../Icons/email.svg); } diff --git a/packages/base/Resources/Public/Scss/components/_text.scss b/packages/base/Resources/Public/Scss/components/_text.scss index e480501..f5e9026 100644 --- a/packages/base/Resources/Public/Scss/components/_text.scss +++ b/packages/base/Resources/Public/Scss/components/_text.scss @@ -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 + } + } +}