@charset "UTF-8";
@include ns(nav){
  li{line-height: 38px;position: relative;
    > .nav-label{display: block;overflow: hidden;cursor: pointer;user-select: none;
      &:hover{background: #ecf5ff}
      .icon{margin-right: 5px;font-size: 18px}
    }
    &.has-child{
      // 有子级时，添加展开/收起标识
      > .nav-label{
        &:after{content: '';display: inline-block; vertical-align: middle;width: 5px;height: 5px;border-top: 1px solid #999;border-right: 1px solid #999;margin: 0 2px; transform: rotate(135deg);transition: all .3s;position: relative}
      }
    }
    &.is-active{
      // 选中状态
      > .nav-label{color: #41a259}
    }
  }
  // 垂直方向
  &.nav-v{
    width: 180px;
    li{
      > .nav-label{padding-left: 5px;
        &:after{float: right;top: 15px;right: 10px}
      }
      &.open{
        > .nav-label{
          &:after{transform: rotate(-45deg)}
        }
      }
      &.is-active-key{
        > .nav-label{
          background: #ecf5ff
        }
      }
    }
    .child{padding-left: 15px;
    }
  }
  // 水平方向
  &.nav-h{
    > ul{
      > li{float: left;font-size: 16px;
        .nav-label{padding: 0 15px;}
        > a{font-size: 16px;}
        &.is-active{
          // 选中状态
          > .nav-label{background: none; color: #41a259}
        }
        > .child{left: 0;top: 38px;}
      }
    }
    .child{background: #fff;position: absolute;left: 103%;top: 0;width: 100%;box-shadow: 0 0 5px #ddd;text-align: left;padding: 5px 0;box-sizing: border-box;font-size: 14px;
      a{font-size: 14px}
    }
  }
}
