// Variables
$accordion-border: units($theme-accordion-border-width) solid
color($theme-accordion-border-color);
// Accordion Styles
@mixin accordion-list-styles {
@include unstyled-list; color: color("ink"); margin: 0; padding: 0; width: 100%;
}
// scss-lint:disable PropertyCount @mixin accordion-button-styles {
@include button-unstyled; @include add-background-svg("usa-icons/remove"); background-color: color("base-lightest"); background-position: right units(2.5) center; background-size: units(3); color: color("ink"); cursor: pointer; display: inline-block; font-weight: font-weight("bold"); margin: 0; padding: units(2) units(2.5) * 2 + units(2) units(2) units(2.5); text-decoration: none; width: 100%; &:hover { background-color: color("base-lighter"); color: color("ink"); text-decoration: none; }
} // scss-lint:enable PropertyCount
@mixin accordion-button-unopened-styles {
@include add-background-svg("usa-icons/add"); background-size: units(3);
}
@mixin accordion-nested-list {
> ul li ul { list-style: disc; > li > ul { list-style: circle; > li > ul { list-style: square; } } }
}
.usa-accordion {
@include accordion-list-styles; @include accordion-nested-list; @include border-box-sizing; @include typeset($theme-accordion-font-family); + .usa-accordion, + .usa-accordion--bordered { margin-top: units(1); }
}
.usa-accordion–bordered {
.usa-accordion__content { border-bottom: $accordion-border; border-left: $accordion-border; border-right: $accordion-border; padding-bottom: units(2); } .usa-accordion__heading { margin-bottom: 0; }
}
.usa-accordion__heading, // kludge to override .usa-prose styles // TODO: work this into a mixin .usa-prose .usa-accordion__heading {
@include typeset($theme-accordion-font-family, $theme-body-font-size, 1); margin: 0; &:not(:first-child) { margin-top: units(1); }
}
.usa-accordion__content {
background-color: color("white"); margin-top: 0; overflow: auto; padding: units(2) units(2.5) calc(#{units(2)} - #{units(0.5)}) units(2.5); > *:first-child { margin-top: 0; } > *:last-child { margin-bottom: 0; }
}
.usa-accordion__button {
@include accordion-button-styles;
}
@include accordion-button-unopened-styles;
}