diff --git a/packages/components/src/components/accordion/component.tsx b/packages/components/src/components/accordion/component.tsx index c2a5c28be8..3f2eb2bc7d 100644 --- a/packages/components/src/components/accordion/component.tsx +++ b/packages/components/src/components/accordion/component.tsx @@ -47,8 +47,9 @@ export class KolAccordion implements API { open: this.state._open === true, }} > - + div { - font-family: var(--font-family); - padding: 0 0.5rem 0 0; + .accordion { + display: grid; + background: var(--color-white); } - :host > div > kol-heading-wc { - font-weight: 700; - font-size: 1.25rem; - line-height: 1.75rem; + .accordion-heading { + border: 1px solid var(--color-primary-60); + font-size: rem(21); } - :host > div > kol-heading-wc button { - cursor: pointer; - width: 100%; + .headline { margin: 0; - display: flex; - gap: 0.5em; - border: 0; - align-items: center; - overflow: hidden; - font-size: inherit; - line-height: 1.5em; - background-color: transparent; - padding: 0.5em; - padding-left: 0; + font-weight: normal; } - :host > div[part*='open'] > kol-heading-wc button { - padding: 0.5em; - padding-left: 0; + .accordion-button .button { + padding: 0 rem(32); } - :host > div > kol-heading-wc button kol-icon::part(icon) { - font-family: 'Font Awesome 6 Free'; - font-weight: 900; - color: var(--color-midnight); - } + .accordion-button kol-icon::part(icon) { + font-family: 'FontAwesome'; - .accordion > kol-heading-wc button kol-icon::part(icon)::before { - content: '\2b'; + &::before { + content: '\2b'; + } } - - .accordion.open > kol-heading-wc button kol-icon::part(icon)::before { + .accordion.open .accordion-button kol-icon::part(icon)::before { content: '\f068'; } - .accordion { - width: 100%; - height: 100%; - display: grid; - } - - .accordion[part*='open'] div[part='header'] { - padding-left: 2em; - } - - .accordion[part*='open'] div[part='content'] { - padding-top: 1rem; - } - - button { - font-weight: inherit; - font-size: inherit; - line-height: inherit; - } - - .accordion { - background: var(--color-white); - } - - .accordion[part*='open'] { - padding-bottom: 1em; - } - - /* .accordion > [part="header"] {height: 0;} */ - h1, - h2, - h3, - h4, - h5, - h6 { - margin: 0; + .content { + padding: rem(32) rem(32) rem(40); } }