@natlibfi/melinda-ui-commons/src/styles/accordion.css

Common modules for Melinda UI applications

/* ---------------------------------------------------------------------------- */
/* ACCORDIONS                                                                   */
/* ---------------------------------------------------------------------------- */
/* Styles for accordions, that can be used to hide and show extra information   */

.accordion {
  display: flex;
  flex-direction: column;
  padding-top: 2.5px;
}

/* Accordion heading contains headline and + or - icon */
.accordion .accordion-heading {
  cursor: pointer;
  display: flex;
  flex-direction: row;
  font-family: var(--font-family-headline);
  font-size: var(--font-size-headline-medium);
  font-weight: var(--font-weight-headline);
  border-bottom-color: var(--color-blue-100);
  border-bottom-width: 1px;
  border-bottom-style: solid;
  padding-top: 16px;
  padding-bottom: 16px;
  align-items: center;
  color: var(--color-blue-100);
}

.accordion .accordion-heading .accordion-heading-icon {
  pointer-events: none;
  display: flex;
  padding-left: 8px;
  padding-right: 24px;
}

.accordion .accordion-heading .accordion-heading-icon span.material-icons {
  display: flex;
  font-size: var(--font-size-icon-large)
}

.accordion .accordion-heading .accordion-heading-text {
  pointer-events: none;
  display: flex;
}

.accordion .accordion-heading:hover .accordion-heading-text,
.accordion .accordion-heading:active .accordion-heading-text {
  text-decoration: underline;
  text-underline-position: auto;
  text-underline-offset: 2px;
}

.accordion .accordion-heading:active {
  outline-color: var(--color-blue-100);
  outline-style: solid;
  outline-width: 2px;
  outline-offset: 2px;
  border-radius: 6px;
  border-bottom: none;
}

/* accordion default state is collapsed and content is hidden */
.accordion .accordion-heading~.accordion-content {
  display: none;
}

/* accordion default icon is + when accordion can be opened */
.accordion .accordion-heading .accordion-heading-icon span:before {
  content: 'add';
}

/* accordion content is shown when expanded  */
.accordion .accordion-heading.expanded {
  outline-color: var(--color-blue-100);
  outline-style: solid;
  outline-width: 2px;
  outline-offset: 2px;
  border-radius: 6px;
  border-bottom: none;
}

/* accordion content is shown when expanded  */
.accordion .accordion-heading.expanded~.accordion-content {
  display: flex;
  flex-direction: row;
  padding-top: 16px;
  padding-bottom: 16px;
  color: var(--color-blue-100);
  font-size: var(--font-size-label-large);
}

/* accordion icon is - when accordion can be closed */
.accordion .accordion-heading.expanded .accordion-heading-icon span:before {
  content: 'remove';
}