lixin-web/webapp/less/nav.less

vue and bootstrap

.navbar-toggle {
  position: fixed;
  left: 0;
  top: 0;
  z-index:@zindex-navbar + 10;
  padding: 10px 10px 9px;
  background-color: transparent;
  background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
  border: 1px solid transparent;
  border-radius: @border-radius-base;
  cursor: pointer;
  // We remove the `outline` here, but later compensate by attaching `:hover`
  // styles to `:focus`.
  &:focus {
    outline: 0;
  }

  // Bars
  .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
    background: @gray-darker;
    //transition: all .25s ease-in-out;
  }
  .icon-bar + .icon-bar {
    margin-top: 4px;
  }

  @media (min-width: @screen-sm) {
    display: none;
  }
}

.navbar-top{
  position: fixed;
  z-index:@zindex-navbar-fixed;
  left: 0;
  right: 0;
  text-align: center;
  .container{
    position: relative;
    height: 100%;
  }
  li{
    a{
      display: block;
    }
    &.active a,a:hover,a:focus{
      background: @brand-primary-active;
    }
  }


  &.slideOutUp{
    animation-duration:.3s;
  }
  &.slideInDown{
    animation-duration:.5s;
  }
  @media (min-width:@screen-sm){
    background: @brand-primary;
    height: @nav-height;
    top:@bar-height;
    ul{
      float: left;
    }
    .logo{
      float: left;
      margin-top: 8px;
      margin-right: 20px;
    }
    li{
      float: left;

      a{
        color: #fff;
        line-height:@nav-height;
        width: 64px;
      }
    }
  }
  @media(min-width:@screen-md){
    li{
      font-size:@font-size-medium;
      a{
        width: 85px;
      }
    }
  }
  @media (max-width: (@screen-xs-max)){
    top: 0;
    z-index: @zindex-navbar-fixed + 1;
    .offcanvas-toggle + div{
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      background-color: #ffffff;
      width: 220px;
      transition: .15s ease-in;
      .translate(-100%,0);
      .translate3d(-100%,0,0);
      z-index:@zindex-navbar + 20;
      background: #fff;
      ul li:first-child{border-top:1px solid #f1f1f1;}
      li{
        border-bottom:1px solid #f1f1f1;
        a{
          padding: 17px 0;
          display: block;
        }

      }
    }

    &.in{
      .offcanvas-toggle + div{
        .translate(0,0);
        .translate3d(0%,0,0);
        box-shadow: 0 0 20px rgba(0,0,0,0.3);
      }
      .backdrop{
        display: block;
      }
    }

    .logo{
      display: block;
      margin: auto;
      padding-top: 20px;
      padding-bottom: 20px;
      background: @brand-primary;
    }
    li{
      a{
        color: @gray;
      }
      &.active{
        a{
          color: @brand-primary;
          background: transparent;
        }
      }
    }
    ul li:nth-child(5){
      display: none;
    }
  }
}

//.nav-sidebar{
//  width: 200px;
//  float: left;
//  li{
//    border-bottom:1px solid #f5f5f5;
//    background: #fff;
//    line-height: 40px;
//    font-size:@font-size-medium;
//    box-shadow: 0px 1px 3px lighten(rgba(0,0,0,.15),50);
//    margin-bottom: 4px;
//    a{
//      display: block;
//      color: @gray-light;
//      text-align: center;
//      span{
//        font-size: 18px;
//        margin-right: 10px;
//        margin-left: -1em;
//        width: 22px;
//        display: inline-block;
//      }
//      div{
//        text-shadow: 0 1px 3px lighten(rgba(0,0,0,.15),30);
//        display: inline-block;
//      }
//    }
//    &.active{
//      border-bottom-color: @brand-primary;
//      a{
//        color: @brand-primary;
//        position: relative;
//        &:after{
//          content: '';
//          position: absolute;
//          width: 0;
//          height: 0;
//          border-color: transparent;
//          border-style: solid;
//          border-width: 5px;
//          right: 10px;
//          margin-top: -4px;
//          top: 50%;
//          border-right-width: 0;
//          border-left-color: @brand-primary;
//          filter: drop-shadow(0 1px 5px rgba(0,0,0,.15));
//        }
//      }
//    }
//  }
//  &.affix{
//    position: fixed;
//  }
//
//}

.nav-anchor{
position: relative;
  display: block;
}

//.navbar-top.slideInDown + * + * + *,
//.navbar-top.slideInDown + * + *
//
//{
//  .nav-sidebar{
//    top: 180px;
//  }
//  .nav-anchor{
//    top:-@banner-top - 40;
//  }
//}
//
//.navbar-top.slideOutUp + * + * + *,
//.navbar-top.slideOutUp + * + *
//{
//  .nav-sidebar{
//    top:180px - @nav-height;
//  }
//  .nav-anchor{
//    top:-@bar-height - 40;
//  }
//}