src/components/Navigation/Navigation.scss
.usa-sidenav-list {
$num-width: 2rem;
$num-right-margin: 0.8rem;
$status-icon-width: 1.7rem;
li {
display: flex;
align-items: stretch;
flex-direction: column;
}
// top-level nav
> li {
// show numbers
// http://blog.teamtreehouse.com/customize-ordered-lists-pseudo-element
counter-increment: step-counter;
& > .section-link {
&::before {
color: #6c7178;
content: counter(step-counter);
display: inline-block;
font-weight: $eapp-bold;
margin-right: $num-right-margin;
text-align: right;
vertical-align: top;
width: $num-width;
}
&.usa-current::before {
color: inherit;
}
&.has-errors::before {
color: $eapp-red;
}
}
.section-link[aria-expanded='true'] {
background: $color-white;
}
// hide the number for "Review & submit"
&:last-child > button::before {
content: '';
}
// error/valid icons
.eapp-status-icon {
background-position: center;
background-repeat: no-repeat;
background-size: auto;
display: block;
height: 100%;
position: absolute;
right: 4px;
top: 0;
transition: opacity 0.5s;
width: $status-icon-width;
}
.is-valid .eapp-status-icon {
background-image: url('#{$asset-path}img/checkmark.svg');
}
.has-errors .eapp-status-icon {
background-image: url('#{$asset-path}img/exclamation-point-white-bg.svg');
}
}
.section-link {
flex-grow: 1;
display: block;
padding: 0.85rem 1rem 0.85rem $site-margins-mobile;
line-height: 1.3;
&:hover {
color: $color-primary;
background-color: #f1f1f1;
}
&.usa-current {
color: $color-primary;
font-weight: $font-bold;
padding-left: $site-margins-mobile - $sidenav-current-border-width;
}
}
// override USWDS
.usa-accordion > li {
background: none;
}
.usa-accordion-content {
padding: 0;
}
// subnavs + sub-subnavs
.usa-sidenav-sub_list {
.section-link {
// compute offset using built-in USWDS values
margin-left: 2.5rem;
padding-left: 2rem;
border: none !important;
display: block;
font-size: inherit;
flex-grow: 1;
&.usa-current {
border: none !important;
}
}
// error/valid indicators
.eapp-status-icon {
$size: 0.5rem;
border-radius: 50%;
height: $size;
// center-align with status icon image
right: 1rem;
top: 1.5rem;
width: $size;
}
.is-valid .eapp-status-icon {
background-color: $eapp-green;
}
.has-errors .eapp-status-icon {
background-color: $eapp-red;
}
// sub-subnav
.usa-sidenav-sub_list {
.section-link {
padding-left: $site-margins-mobile * 2;
}
}
}
}