_content-accordion.scss

Create a delightful accordion

contao-templates/_content-accordion.scss

@use "../abstracts/" as *;

$acc-font-family: $body-font-family;
$acc-font-size: $body-font-size;
$acc-font-weight: $body-font-weight;
$acc-border-block: 1px solid $color-neutral-200;
$acc-background-color: $body-background-color;
$acc-content-background-color: $body-background-color;
$acc-svg-size: 0.875lh;
$acc-svg-vertical-align: text-top;
$acc-svg-stroke-width: 2;

// default styling: handorgel.min.css (embedded in the template)

.content-accordion {
  // reset border-bottom from handorgel.min.css
  border-bottom: none;
  // reset border-top from handorgel.min.css
  .handorgel__content {
    border-top: none;
  }

  // custom styles
  // reset headline spacing from _general.scss
  h1:has(+ h2), h2:has(+ h3), h3:has(+ h4), h4:has(+ h5), h5:has(+ h6) {
    margin-block-end: 0.75em;
  }
  .handorgel__header {
    font-family: $acc-font-family;
    font-size: $acc-font-size;
    font-weight: $acc-font-weight;
    border-top: $acc-border-block;
    &:last-of-type {
      border-bottom: $acc-border-block;
    }
    svg {
      display: inline-block;
      width: $acc-svg-size;
      height: $acc-svg-size;
      vertical-align: $acc-svg-vertical-align;
      stroke-width: $acc-svg-stroke-width;
      transition: transform 0.125s ease-out;
    }
  }
  .handorgel__header__button {
    background-color: $acc-background-color;
    border: none;
  }
  .handorgel__header--open {
    svg {
      transition: transform 0.125s ease-out;
      transform: rotate(90deg);
    }
  }
  .handorgel__content {
    background-color: $acc-content-background-color;
  }

}