_sass/_components/nav-accordion.scss
// Nav accordion
.nav-accordion {
background-color: color('white');
border-bottom: 1px solid color('gray-cool-10');
.usa-sidenav-list {
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
border-top-color: color('gray-cool-10');
background: transparent;
margin-bottom: 0;
}
button {
background-color: color('white');
background-position: right 0 center;
border-bottom: 1px solid color('gray-cool-10');
border-radius: 0;
text-align: left;
&[aria-expanded=true],
&[aria-expanded=false] {
background-repeat: no-repeat;
background-position: right 0 center;
background-size: 1rem;
}
&[aria-expanded=true] {
background-image: url('../img/global/minus-alt.png');
background-image: url('../img/global/minus-alt.svg');
}
&[aria-expanded=false] {
background-image: url('../img/global/plus-alt.png');
background-image: url('../img/global/plus-alt.svg');
}
&:hover,
&:focus {
background-color: color('gray-cool-5');
}
}
a,
li > button {
@include u-padding-y(1);
@include u-padding-left(3);
color: color('gray-cool-60');
font-weight: $theme-font-weight-bold;
font-size: $h5-font-size;
padding-left: ($paragraph-margins * 1.75);
&:hover {
color: $color-dark;
}
&.usa-current {
border-left: $border-accent;
color: $color-dark;
padding-left: ($paragraph-margins * 1.75) - 1rem;
}
}
}
.usa-sidenav-sub_list {
a {
padding-left: 3.8rem;
&.usa-current {
border-left: 0;
color: $theme-color-primary;
font-weight: $theme-font-weight-bold;
padding-left: 3.8rem;
}
}
}
}
.nav-accordion-button {
@include at-media('tablet') {
padding-left: 0;
padding-right: 0;
}
}
.nav-accordion-button-desktop {
@include media-max('tablet') {
display: none;
}
}
.nav-accordion-button-mobile {
@include at-media('tablet') {
display: none;
}
}
.nav-accordion-button-mobile,
.nav-accordion-button-desktop {
cursor: pointer;
}
.sliding-panel-close {
@include button-unstyled;
float: right;
height: $size-touch-target;
margin-top: -1.2rem;
margin-right: -1.5rem;
margin-bottom: 2.4rem;
margin-left: auto;
text-align: center;
width: $size-touch-target;
&:active,
&:hover,
&:focus {
background-color: color('gray-cool-5');
}
svg {
height: $icon;
width: $icon;
}
}
.overlay {
@include u-position(fixed);
@include u-pin-all;
background: $color-black;
opacity: 0;
transition: all 0.2s ease-in-out;
visibility: hidden;
z-index: 499;
&.is-visible {
opacity: 0.1;
visibility: visible;
}
}