src/sass/_accordion.scss
// 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;
}
}
}