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

/*
* Side Navigation
*
* Left Navigation used in Documenation
*/


/*
* Variables
*/

$sidenav: '.sidenav'; // Classname
$sidenav-background: rgba($blue-grey-50, .56);
$sidenav-background-mobile: rgba($blue-grey-50, 1);
$sidenav-background-dark: $blue-grey-200;
$sidenav-color: $blue-grey-500;
$sidenav-color-selected: $blue-700;
$sidenav-width: 240px;



/*
* Class
*/

#{$sidenav} {
  background: $sidenav-background;
  box-shadow: 3px 0px 6px rgba($black, .24);
  padding-bottom: 72px;
  width: $sidenav-width;
  bottom: 0px;
  overflow: auto;

  // MOBILE STYLE FOR DROPDOWN & TOGGLE
  @include respond-to('mobile') {
    background: $sidenav-background-mobile;
    box-shadow: 0px 3px 6px rgba($black, .24);
    width: auto;
    left: 0;
    right: 0;
    bottom: auto;
    padding-bottom: 0;

    #{$sidenav}-links  {
      display: none;
    }

    &.is-visible {
      bottom: 0;
      padding-bottom: 72px;

      #{$sidenav}-links  {
        display: block;
      }
    }
  }

  .is-hidden {
    display: none;
  }
}


/*
* Side Nav Search
*/

#{$sidenav}-search {
  background: $sidenav-background-dark;
  box-sizing: border-box;
  box-shadow: none;
  padding: $unit;
  height: $unit * 6;
  position: relative;

  @include respond-to('mobile') {
    border-bottom: none;
    padding-right: $unit * 14;
    overflow: hidden;
  }

  input {
    background: $white;
    border: none;
    border-radius: 200px;
    box-sizing: border-box;
    color: $sidenav-color;
    display: inline-block;
    font-size: 14px;
    height: 32px;
    margin: 0px;
    padding: 0px $unit;
    width: 100%;

    // PLACEHOLDER TEXT
    &::-webkit-input-placeholder { /* Chrome/Opera/Safari */
      color: $blue-grey-100;
      font-size: 12px;
    }
    &::-moz-placeholder { /* Firefox 19+ */
      color: $blue-grey-100;
      font-size: 12px;
    }
    &:-ms-input-placeholder { /* IE 10+ */
      color: $blue-grey-100;
      font-size: 12px;
    }
    &:-moz-placeholder { /* Firefox 18- */
      color: $blue-grey-100;
      font-size: 12px;
    }
  }

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

    @include respond-to('mobile') {
      display: inline-block;
    }

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

/*
* Section Dividers
*/

#{$sidenav} #{$sidenav}-section-divider {
  background: $sidenav-background-dark;
  border: none;
  color: $white;
  font-size: 10px;
  line-height: $unit * 3;
  margin: 0;
  padding: 0;
  text-transform: uppercase;

  h3 {
    font-weight: 400;
    margin: 0;
    padding: 0 ($unit * 2);
  }
}


/*
* Navigation Links
*/

#{$sidenav}-links {
  list-style-type: none;
  margin: 0px;
  padding: 0px;

  // SIDENAV MAIN SECTIONS
  #{$sidenav}-section {
    border-bottom: 1px solid rgba($blue-grey-100, .56);
    color: $sidenav-color;
    margin: 0;
    padding: 0;

    &.no-border {
      border: none;

      > a {
        line-height: $unit * 6;
      }
    }

    > a {
      box-sizing: border-box;
      color: $sidenav-color;
      display: block;
      font-size: 13px;
      font-weight: 400;
      line-height: ($unit * 6) - 1;
      text-decoration: none;
      padding: 0 ($unit * 2);
      position: relative;

      &.is-selected {
        background: rgba($blue-grey-100, .24);
        color: $sidenav-color-selected;
        font-weight: 600;
      }

      &.is-selected.is-parent {
        box-shadow: 0 2px 2px rgba($black, .24);
      }
    }

    .inline-arrow-down-svg {
      opacity: .56;
      position: absolute;
      right: $unit;
      top: $unit + 4;
      z-index: $layer-1;
    }

    ul {
      background: rgba($blue-grey-100, .56);
      list-style: none;
      padding: 0;
      margin: 0
    }

    li {
      margin: 0;
      padding: 0;

      &.is-selected  {
        > a {
          background: rgba($blue-grey-100, .87);
          color: $sidenav-color-selected;
          font-weight: 600;
        }
      }
    }

    li a {
      color: $sidenav-color;
      font-size: 12px;
      display: block;
      line-height: $unit * 4;
      padding: 0 ($unit * 2);
      transition: all .2s;

      &:hover {
        background: rgba($white, .24);
        color: $sidenav-color-selected;
        text-decoration: none;
      }
    }
  }

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

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

        #{$sidenav}-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;
    }

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