MetaPhase-Consulting/State-TalentMAP

View on GitHub
src/sass/_accordion.scss

Summary

Maintainability
Test Coverage
// provide a custom expanded/retracted icon to the accordion
.accordion-inverse {
  .usa-accordion-button {
    background-position: 94%;
  }

  .usa-accordion-button:not(.tm-nested-accordion-button) {
    background-image: none;
  }

  .usa-accordion-button[aria-expanded=false]:not(.tm-nested-accordion-button) {
    background-image: url('#{$asset-path}assets/img/plus-white.svg');
  }

  .usa-accordion-button[aria-expanded=true]:not(.tm-nested-accordion-button) {
    background-image: url('#{$asset-path}assets/img/minus-white.svg');
  }
}

$accordion-content-small-font-size: .9em;
$accordion-content-small-padding-left: 2em;

.tm-nested-accordions {

  .usa-accordion-content {
    max-height: initial;
    overflow-y: none;
    padding-top: 0;
  }

  .usa-accordion-button {
    background-color: transparent;
    color: inherit;
  }

  .tm-nested-accordion {
    padding-left: 0;
    padding-right: 0;

    .usa-accordion-content {
      font-size: $accordion-content-small-font-size;
      padding-left: $accordion-content-small-padding-left;
    }

    .usa-accordion-button {
      font-size: .8em;
      padding-right: 30%;
    }
  }
}

.tm-nested-accordion-button {
  padding-bottom: 0;

  .accordion-item-title {
    padding-right: 1.5em;
    padding-top: .1em;
  }
}

.tm-double-nested-accordion-button {
  padding-bottom: 0;
}

.accordion-content-small {
  min-height: 1px;

  .usa-accordion-content {
    font-size: $accordion-content-small-font-size;
    padding-left: $accordion-content-small-padding-left;
  }

  &:last-child {
    margin-bottom: 0;
  }
}

.usa-accordion {
  .accordion-unclickable {
    .usa-accordion-button {
      background-image: none;
      pointer-events: none;
    }
  }
}