.usa-sidenav-list {
@if variable-exists(side-nav-bg) { background-color: $side-nav-bg; } a { @if variable-exists(side-nav-link) { color: $side-nav-link; } &:hover { @if variable-exists(side-nav-link-hover-bg) { background-color: $side-nav-link-hover-bg; } @if variable-exists(side-nav-link-hover) { color: $side-nav-link-hover; } } &.usa-current { @if variable-exists(side-nav-link-current) { border-color: $side-nav-link-current; } @if variable-exists(side-nav-link-current) { color: $side-nav-link-current; } } }
} // Styles for adjusting the breakpoint for the side nav .usa-layout-docs {
display: flex;
} @include media ($medium-screen){
.sidenav { width: 250px; }
}
@include media($nav-width) {
.usa-layout-docs { display: block; .sidenav { display: block; float: left; padding-right: 1rem; + .usa-layout-docs-main_content { display: inline-block; padding-left: 3rem; width: calc(100% - 250px); } } }
}