angular-cn/public/resources/css/module/_side-nav.scss

/*
* Side Navigation
*
*/

.side-nav {
  background: $mist;
  box-shadow: 3px 0px 6px rgba($coal, .3);
  width: 232px;
  bottom: 0px;
  overflow: auto;

  @media handheld and (max-width: $phone-breakpoint),
  screen and (max-device-width: $phone-breakpoint),
  screen and (max-width: $tablet-breakpoint) {
    box-shadow: 0px 3px 6px rgba($coal, .3);
    width: auto;
    left: 0px;
    right: 0px;
    bottom: auto;
  }


  // SEARCH BOX
  .side-nav-search {
    background: $tin;
    padding: $unit;
    height: $unit * 6;
    border-bottom: 1px solid $fog;
    position: relative;
    height: auto; /* flat nav asked for it. why? */

    @media handheld and (max-width: $phone-breakpoint),
    screen and (max-device-width: $phone-breakpoint),
    screen and (max-width: $tablet-breakpoint) {
      border-bottom: none;
      padding-right: $unit * 14;
      overflow: hidden;
    }

    input {
      border: none;
      border-radius: 200px;
      width: 100%;
      box-sizing: border-box;
      height: 30px;
      padding: 0px $unit;
      margin: 0px;
      font-size: 14px !important;
      display: inline-block;
    }

    .mobile-trigger {
      position: absolute;
      top: 0;
      right: $unit * 0.2;
      border: none;
      background: darken($tin, 5%);
      color: $snow;
      padding-right: $unit * 4;
      display: none;

      @media handheld and (max-width: $phone-breakpoint),
      screen and (max-device-width: $phone-breakpoint),
      screen and (max-width: $tablet-breakpoint) {
        display: inline-block;
      }

      .icon {
        position: absolute;
        top: 5px;
        right: $unit;
        z-index: $layer-1;
        font-size: 20px;
        opacity: .87;
      }
    }
  }


  // PRIMARY SIDENAV BUTTON
  .side-nav-primary {
    list-style-type: none;
    margin: 0px;
    padding: 0px;

    @media handheld and (max-width: $phone-breakpoint),
    screen and (max-device-width: $phone-breakpoint),
    screen and (max-width: $tablet-breakpoint) {
      display: none;
    }

    > li {
      margin: 0px;
      padding: 0px;
      border-bottom: 1px solid $fog;

      &.is-selected  {
        > a {
          background: $fog;
          color: $regal;

          .side-nav-icon {
            color: $regal;
          }
        }
      }

      > a {
        line-height: ($unit * 6) - 1;
        padding: 0px ($unit * 2) 0px ($unit * 6);
        color: $metal;
        font-size: 14px;
        text-align: left;
        font-weight: 400;
        position: relative;
        text-decoration: none;
        display: block;
        text-transform: uppercase;
      }

      .side-nav-icon {
        position: absolute;
        top: 0px;
        left: 16px;
        z-index: $layer-1;
        font-size: 19px;
        color: $cloud;
        line-height: 47px;
      }
    }
  }


  // SECONDARY SIDENAV
  .side-nav-secondary {
    @extend .side-nav-primary;
    background: $mist;
    box-shadow: inset 0px 2px 2px rgba($coal, .24);

    @media handheld and (max-width: $phone-breakpoint),
    screen and (max-device-width: $phone-breakpoint),
    screen and (max-width: $tablet-breakpoint) {
      display: none;
      max-height: ($phone-breakpoint * 0.60);
    }
    
    // FLAT NAV (.nav)
    .nav-blocks {
      margin: 0 ($unit * 1.5);
      padding: ($unit * 2) 0;
      border-bottom: 1px solid $fog;
      color: $heather;
      
      a {
        text-decoration: none;
        color: $metal;
        display: block;
      }
      
      ol {
        padding-left: ($unit * 2);
        margin: 0
      }
      
      ul {
        list-style: none;
        padding: 0;
        margin: 0
      }
      
      div, li {
        &.is-selected  {
          > a {
            background: white;
            color: $regal;
          }
        }
      }
      
      li {
        min-height: ($unit * 2);
        position: relative;
      }
    }

    .nav-blocks:last-child {
        border: none
    }

    .nav-title,
    .nav-sub-title {
        text-transform: uppercase;
        font-weight: bold;
    }

    .nav-title {
        font-size: ($unit * 2);
        padding: ($unit * 0.5) 0 ($unit * 1) 0;
    }

    .nav-primary-link {
        margin-bottom: ($unit * 1);
        position: relative;
    }

    .nav-sub-title {
        font-size: ($unit * 1.5);
        padding: ($unit * 1) 0;
    }

    .nav-active a {
        color: $regal;
        background: $lightgrey;
        font-weight: bold;
    }

    .nav-ordered-lists li a,
    .nav-unordered-lists li a,
    .nav-primary-link a {
        margin-left: ($unit * -3);
        padding-left: ($unit * 3);
        padding-top: ($unit * 0.5);
        padding-bottom: ($unit * 0.5);
    }

    .nav-blocks li a:hover,
    .nav-primary-link a:hover {
        background: $fog;
    }

    .nav-primary-link a:hover {
        padding-top: ($unit * 0.5);
        padding-bottom: ($unit * 0.5);
    }

    .nav-blocks li a:hover:before,
    .nav-primary-link a:hover:before {
        position: absolute;
        top: 50%;
        content: "";
        display: inline-block;
        width: 0.4em;
        height: 0.4em;
        border-right: 0.2em solid $tin;
        border-top: 0.2em solid $tin;
        transform: rotate(45deg);
        right: -5px;
        margin-top: -3px;
        margin-right: 14px;
    }    
  }
}