@import (reference) "../../style/mixin.less";
@import "../../assets/iconfonts/iconfont.css";

.header-container{
  background-color: @base-color;
  .flex;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  .wh(100%, 88px);
  .header-slide-icon{
    .font(36px, #fff);
    .positionLeft;
  }
  .header-title{
    .font(40px, #fff);
  }
  .header-link{
    .font(40px, #fff);
    .positionRight;
  }
  .header-link-confim{
    font-size: 32px;
  }
  .nav-slide-list{
    .coverScreen(fixed);
    top: 88px;
    display: flex;
    flex-direction: column;
    .nav-link{
      .font(32px);
      border-bottom: 1Px solid #ddd; 
      margin: 0 @common-wd;
      padding: 35px 20px;
      position: relative;
      &:before{
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translate3d(0, -50%, 0);
        color: #666;
      };
    }
  }
  .nav-enter{
    transform: translate3d(-100%, 0, 0);
  }

  .nav-enter.nav-enter-active{
    transform: translate3d(0, 0, 0);
    transition: transform 300ms;
  }

  .nav-leave{
    transform: translate3d(0, 0, 0);
  }

  .nav-leave.nav-leave-active{
    transform: translate3d(-100%, 0, 0);
    transition: transform 300ms;
  }
}
