JordanHatch/maslow-redux

/* Navigation layout rules can be found in `layouts/default.scss`.
*/

$navigationLeftGutter: 1.2em;

aside.navigation {
  background: $primary-color;
  border: 0px solid #e6e6e6;
  border-right-width: 5px;

  @include respond-to(mobile) {
    border-right-width: 0px;
    border-bottom-width: 5px;
  }
  @include respond-to(tablet) {
    font-size: 1.2rem;
  }

  color: #fff;
  font-size: 1.4rem;

  display: flex;
  flex-flow: column;
  overflow: hidden;

  header {
    padding: .7em $navigationLeftGutter 1.1em;
    background: darken($primary-color, 10%);
    border-bottom: 2px solid darken($primary-color, 2%);
    margin-bottom: .5em;
  }

  .back-link {
    a {
      color: rgba(255,255,255,0.5);
      display: inline-block;
      text-decoration: none;
      font-size: 1.1rem;

      &:hover {
        color: #fff;
      }

      span {
        @extend .glyphicon;
        @extend .glyphicon-menu-left;

        padding-right: 1px;
        font-size: 0.9rem;
      }
    }
  }

  h1 {
    .subtitle {
      display: block;
      font-size: 0.65em;
      color: $inverse-text-color;
    }

    font-size: 1.8rem;
    margin: .6em 0 0;
    line-height: 1.2em;
  }

  h3 {
    font-size: .95em;
    text-transform: uppercase;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.75);
    padding: 0 $navigationLeftGutter;
    margin: 1.4em 0 .15em;
  }

  ul.navigation-list {
    padding: 0.7em 0;
    font-size: .95em;

    @include respond-to(tablet) {
      font-size: 1.05em;
    }

    li {
      list-style: none;

      a {
        display: block;
        padding: .58em $navigationLeftGutter;

        color: rgba(255, 255, 255, 0.7);
        font-weight: 500;
        text-decoration: none;

        &:hover {
          background: darken($primary-color, 5%);
        }

        span {
          @extend .glyphicon;
          padding-right: 10px;
          font-size: 1em;
        }
      }

      &.selected a {
        background: darken($primary-color, 10%);
        color: #fff;
      }
    }
  }

  .nav-content {
    flex: 1;
    overflow: scroll;
  }

  .signed-in-user {
    align-self: flex-end;

    background: darken($primary-color, 10%);
    padding: .9em $navigationLeftGutter;
    width: 100%;

    strong {
      font-size: 1.14em;
    }

    ul {
      padding-left: 0;
      margin: 0;
    }

    li {
      list-style: none;
      display: inline;
      font-size: .95em;

      &::after {
        content: " - ";
        padding: 0 2px;
        color: rgba(255, 255, 255, 0.75);
      }
      &:last-of-type::after {
        content: '';
      }
    }

    a, a:hover, a:active, a:visited {
      color: $inverse-text-color;
    }
    a:hover, a:active {
      text-decoration: underline;
    }
  }
}