18F/e-QIP-prototype

.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;
      }
    }
  }
}