// Variables
$accordion-border: 3px solid $color-gray-lightest;
// Accordion Styles
$icon-size: $spacing-md-small; $h-padding: $spacing-medium; $v-padding: $spacing-md-small;
@mixin accordion-list-styles {
@include unstyled-list; color: $color-base; margin: 0; padding: 0; width: 100%;
}
@mixin accordion-list-item-styles {
background-color: $color-gray-lightest; font-family: $font-sans; list-style: none; margin-bottom: $spacing-x-small; width: 100%;
}
// scss-lint:disable PropertyCount @mixin accordion-button-styles {
@include button-unstyled; background-color: $color-gray-lightest; background-image: url('#{$image-path}/minus.png'); background-image: url('#{$image-path}/minus.svg'); background-position: right $h-padding center; background-repeat: no-repeat; background-size: $icon-size; color: $color-base; cursor: pointer; display: inline-block; font-family: $font-sans; font-weight: $font-bold; margin: 0; padding: $v-padding ($h-padding * 2 + $icon-size) $v-padding $h-padding; width: 100%; &:hover { background-color: $color-gray-lighter; color: $color-base; } h1, h2, h3, h4, h5, h6 { margin: 0; }
} // scss-lint:enable PropertyCount
@mixin accordion-button-unopened-styles {
background-image: url('#{$image-path}/plus.png'); background-image: url('#{$image-path}/plus.svg'); background-repeat: no-repeat; background-size: $icon-size;
}
@mixin accordion-nested-list {
> ul li ul { list-style: disc; > li > ul { list-style: circle; > li > ul { list-style: square; } } }
}
.usa-accordion, .usa-accordion-bordered {
@include accordion-list-styles; @include accordion-nested-list; + .usa-accordion, + .usa-accordion-bordered { margin-top: $spacing-small; } // TODO deprecated ruleset based on old accordion. > ul { @include accordion-list-styles; // TODO deprecated ruleset based on old accordion. > li { @include accordion-list-item-styles; } // TODO deprecated ruleset based on old accordion. button { @include accordion-button-styles; } // TODO deprecated ruleset based on old accordion. [aria-expanded=false] { @include accordion-button-unopened-styles; } } > li { @include accordion-list-item-styles; }
}
.usa-accordion-bordered {
.usa-accordion-content { border-bottom: $accordion-border; border-left: $accordion-border; border-right: $accordion-border; }
}
.usa-accordion-content {
background-color: $color-white; overflow: auto; padding: $spacing-md-small $spacing-medium; > *:first-child { margin-top: 0; } > *:last-child { margin-bottom: 0; } &:not([aria-hidden]) { @include sr-only(); } @include accessibly-hidden();
}
.usa-accordion-button {
@include accordion-button-styles;
}
@include accordion-button-unopened-styles;
}