From a68d4099bf6418de1299eac8a5a3d2d453b000d8 Mon Sep 17 00:00:00 2001 From: Julie Sagan Date: Tue, 17 Dec 2024 16:59:11 +0200 Subject: [PATCH] Added arrow icon in accordeon --- components/accordion/accordion.css | 19 ++++++++++++++++++- components/accordion/index.html | 17 ++++++++++++++--- 2 files changed, 32 insertions(+), 4 deletions(-) diff --git a/components/accordion/accordion.css b/components/accordion/accordion.css index d1f95c2..0faa89d 100644 --- a/components/accordion/accordion.css +++ b/components/accordion/accordion.css @@ -1,4 +1,6 @@ .accordion { + display: flex; + flex-direction: column; font-family: 'Inter', sans-serif; font-size: 16px; font-style: normal; @@ -11,7 +13,6 @@ border: 1px solid var(--grey-3); padding: 24px 32px; border-radius: 8px; - cursor: pointer; } .accordion__item:last-child { @@ -20,6 +21,18 @@ .accordion__summary { list-style: none; + display: flex; + justify-content: space-between; + align-items: center; + cursor: pointer; +} + +.accordion__icon { + width: 24px; + height: 24px; + stroke: var(--grey-4); + fill: none; + stroke-width: 2px; } .accordion__summary::-webkit-details-marker { @@ -30,4 +43,8 @@ color: var(--grey-4); padding-top: 16px; padding-bottom: 8px; +} + +.accordion__item[open] .accordion__icon { + transform: rotate(180deg); } \ No newline at end of file diff --git a/components/accordion/index.html b/components/accordion/index.html index 3bf775e..2ed63b7 100644 --- a/components/accordion/index.html +++ b/components/accordion/index.html @@ -7,29 +7,40 @@ Accordeon + +
- Why did the programmer quit his job? + Why did the programmer quit his job? + +

Because he didn't get arrays (a raise)!

- How do you comfort a JavaScript bug? + How do you comfort a JavaScript bug? + +

You console it!

- Why do programmers prefer dark mode? + Why do programmers prefer dark mode? + +

Because light attracts bugs!

+ \ No newline at end of file