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

  .is-hidden {
    display: none;
  }

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

  .is-nav-title-selected {
    color: $regal !important;
    background-color: #DCE2E5 !important;
  }

  // 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-color: #DCE2E5;

    @media handheld and (max-width: $phone-breakpoint),
    screen and (max-device-width: $phone-breakpoint),
    screen and (max-width: $tablet-breakpoint) {
      display: none;
      &.is-visible {
        height: calc(100vh - 56px - 48px);
        overflow: auto;
      }
    }

    // FLAT NAV (.nav)
    .nav-blocks {
      margin: 0;
      padding: 0;
      border-bottom: 1px solid $fog;
      color: $heather;

      a {
        text-decoration: none;
        color: $metal;
        display: block;
      }

      ul {
        list-style: none;
        padding: 0;
        margin: 0
      }

      div, li {
        &.is-selected  {
          > a {
            background: #CDD5DA;
            color: #1E88E5;
          }
        }
      }

      li {
        min-height: ($unit * 2);
        position: relative;
      }
    }

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

    .nav-title,
    .nav-sub-title {
        text-transform: uppercase;
        font-weight: 500; //medium
        color: #78909C;
    }

    .nav-title {
        font-size: 14px;

        padding: ($unit * 2) ($unit * 2);
        margin: 0;
        background-color: #ECEFF1;

        .inline-arrow-down-svg {
          float: right;
          opacity: 0.56;
        }

        a {
          display: inline;
        }
    }

    .nav-primary-link {
        position: relative;

        a {
          padding-left: 16px;
          padding-top: 16px;
          padding-bottom: 16px;
        }
    }

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

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

    .nav-unordered-lists, .nav-ordered-lists {
      // Apply inset shadows to the list under the title
      box-shadow: inset 0 2px 2px rgba(0, 0, 0, .24), inset 0 -2px 2px rgba(0, 0, 0, 0.08);

      // -- First Child
      // Apply inset shadows on the first child when hovering, since the background color will cover the shadow
      .nav-list-item:first-child {
        &:hover {
          box-shadow: inset 0 2px 2px rgba(0, 0, 0, .24);
        }
      }

      // Apply inset shadows on the first child when selected, since the background color will cover the shadow
      .is-selected:first-child a {
        box-shadow: inset 0 2px 2px rgba(0, 0, 0, .24);
      }

      // -- Last Child
      // Apply inset shadows on the last child when hovering, since the background color will cover the shadow
      .nav-list-item:last-child {
        &:hover {
          box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.08);
        }
      }

      // Apply inset shadows on the last child when selected, since the background color will cover the shadow
      .is-selected:last-child a {
        box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.08);
      }
    }

    .nav-list-item {
      a {
        font-size: 13px;
        font-weight: 400; //medium
        padding-left: $unit * 2;
        line-height: 32px;
      }

      &:hover {
        background-color: #CFD8DC;
      }
    }
  }
}