presidential-innovation-fellows/dap-guide

View on GitHub
_sass/components/_sidenav.scss

Summary

Maintainability
Test Coverage
.usa-sidenav-list {
  @include unstyled-list();

  li {
    border-top: 1px solid $color-gray;
    font-size: $h4-font-size;

    &:first-child {
      border-top: none;
    }
  }

  a {
    border: none;
    color: $color-base;
    display: block;
    font-family: $font-sans;
    line-height: 1;
    padding: {
      bottom: 1rem;
      left: 1.8rem;
      right: 1rem;
      top: 1rem;
    }

    &:hover {
      background-color: $color-gray-lightest;
      color: $color-primary;
      text-decoration: none;
    }

    &:focus {
      position: relative;
      z-index: 1;
    }

    &.usa-current {
      color: $color-primary;
      font-weight: $font-bold;
    }

    &.usa-current {
      border-left: 4px solid $color-primary;
      padding-left: 1.4rem;
    }
  }
}

.usa-sidenav-sub_list {
  margin: 0;
  width: 100%;

  li {
    border: none;
    font-size: $h5-font-size;
  }

  a {
    padding-left: 2.8rem;
    line-height: $heading-line-height;
  }

  a:hover,
  a.usa-current {
    border: none;
    padding-left: 2.8rem;
  }

  .usa-sidenav-sub_list {
    a {
      padding-left: 3.8rem;
    }

    a:hover {
      padding-left: 3.8rem;
    }
  }
}