From 837e0e904c40f7b87561c34ca3f49edd5d8d1c52 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Thu, 28 Sep 2023 18:03:43 +0200 Subject: feat(components): replace icons with a generic Icon component Sizes are also predefined and can be set using the `size` prop, so the consumers should no longer adjust the size in CSS. --- .../plus-minus-icon/plus-minus-icon.module.scss | 38 ++++++++++++++++++++++ 1 file changed, 38 insertions(+) create mode 100644 src/components/atoms/images/icons/plus-minus-icon/plus-minus-icon.module.scss (limited to 'src/components/atoms/images/icons/plus-minus-icon/plus-minus-icon.module.scss') diff --git a/src/components/atoms/images/icons/plus-minus-icon/plus-minus-icon.module.scss b/src/components/atoms/images/icons/plus-minus-icon/plus-minus-icon.module.scss new file mode 100644 index 0000000..07550c9 --- /dev/null +++ b/src/components/atoms/images/icons/plus-minus-icon/plus-minus-icon.module.scss @@ -0,0 +1,38 @@ +@use "../../../../../styles/abstracts/functions" as fun; + +.icon { + display: flex; + place-content: center; + place-items: center; + aspect-ratio: 1/1; + position: relative; + background: var(--color-bg); + border: fun.convert-px(1) solid var(--color-primary); + border-radius: fun.convert-px(3); + color: var(--color-primary); + + &::before, + &::after { + content: ""; + position: absolute; + background: var(--color-primary); + transition: transform 0.4s ease-out 0s; + } + + &::after { + height: fun.convert-px(3); + width: 60%; + } + + &::before { + height: 55%; + width: fun.convert-px(3); + transform: scaleY(1); + } + + &--minus { + &::before { + transform: scaleY(0); + } + } +} -- cgit v1.2.3