@import './global.less';

.k-menu {
  display: block;
  margin: 0;
  padding: 0;
  outline: 0;
  list-style: none;
  font-size: 14px;
  position: relative;
  z-index: 800;
  &:after, &:before {
    content: "";
    display: table;
  }
  &:after {
    content: " ";
    display: block;
    height: 0;
    clear: both;
  }
}
 .demo-isCollapse-198 {
    left: 230px;
    top: 40px;
 }
.k-menu-horizontal.k-menu-light {
  background: #212B36;
  &::after {
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    background: #212B36;
    position: absolute;
    bottom: -2px;
    left: 0;
  }
  > .k-menu-item,
  > .k-menu-submenu {
    color: #fff;
    .k-menu-dropdown .k-menu-item:hover{
      //color: #fff;
      background: @primary;
    }
    .k-menu-dropdown .k-menu-item-active{
      font-weight: 900;
      background: @primary;
    }
  }
}

.k-menu-horizontal.k-menu-dark {
  background: #212B36;
  > .k-menu-item,
  > .k-menu-submenu {
    color: #fff;
    &:hover {
      color: #fff;
      background: @primary;
    }
    .k-menu-dropdown {
      .k-menu-item-group {
         .k-menu-item-group-title{
            &:hover{
              color: #fff;
              background: #3c99fc; 
            }  
          }
        .k-menu-item {
          &:hover {
            color: #fff;
            background: #3c99fc;
          }
        }
        .k-menu-item-active {
          color: #fff;
          background: @primary;
          &:hover {
            color: #fff;
            background: @primary;
          }
        }
      }
    }
  }
  > .k-menu-item-active {
    color: #fff;
    background: @primary;
    font-weight: 900;
    .k-menu-title {
      font-weight: bold;
    }
  }
}

.k-menu-horizontal.k-menu-line {
  background: #212B36;
  &::after {
    content: "";
    display: block;
    width: 100%;
    height: 4px;
    background: #212B36;
    position: absolute;
    bottom: -4px;
    left: 0;
  }
  > .k-menu-item,
  > .k-menu-submenu {
    color: #fff;

    &:hover {
      color: #fff;
      border-bottom: 4px solid @primary;
    }
    .k-menu-dropdown {
    }
  }
  > .k-menu-item-active {
    color: #fff;
    background: none;
     font-weight: 900;
    border-bottom: 4px solid @primary;
    .k-menu-title {
      font-weight: bold;
    }
  }
}

.k-menu-horizontal.k-menu-primary {
  background: #212B36;
  &::after {
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    background: #212B36;
    position: absolute;
    bottom: -2px;
    left: 0;
  }
  > .k-menu-item,
  > .k-menu-submenu {
    color: #fff;
  }
}

.k-menu-item {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.k-menu-item,
.k-menu-submenu {
  display: block;
  outline: 0;
  list-style: none;
  font-size: 14px;
  position: relative;
  z-index: 1;
  cursor: pointer;
  transition: all .2s ease-in-out;
  .k-menu-arrow {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transition: transform .3s ease-in-out;
  }
  .k-menu-item-group-title {
    padding-left: 20px;
    box-sizing: border-box;
    line-height: 40px;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
  }
}

.k-menu-horizontal {
  height: 50px;
  line-height: 50px;

  &::after {
    content: "";
    display: block;
    width: 100%;
  }
  > .k-menu-item,
  > .k-menu-submenu {
    height: 50px;
    line-height: 50px;
    margin-left: 44px;
    float: left;
    padding: 0 32px;
    position: relative;
    cursor: pointer;
    z-index: 3;
    .k-menu-title .icon-arrow {
      float: right;
      font-size: 26px;
      transition: transform .3s linear;
    }
    .k-menu-dropdown {
      padding: 0;
      left: 0;
      margin: 5px 0;
      background-color: #13171C;
      box-sizing: border-box;
      border-radius: @radius;
      box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
      position: absolute;
      z-index: 901;
      width: 100%;
      min-width: 100px;
      transition: height .3s ease-in-out, opacity .3s ease-in-out;
      -webkit-transition: height .3s ease-in-out, opacity .3s ease-in-out;
      overflow: hidden;
      ul {
        padding: 0;
      }
      .k-menu-item {
        font-size: 12px;
        color: #fff;
        text-align: left;
        line-height: 40px;
        box-sizing: border-box;
        width: 100%;
        min-width: 100px;
        padding-left: 20px;
        &:hover {
            color: #fff;
            background: #3c99fc;
        }
      }
      .k-menu-item-active {
        background: #13171C;
        color: #fff;
        &:hover {
          background: #13171C;
          color: #fff;
        }
      }
    }
    .k-menu-item-group {
      .k-menu-item {
        &:hover {
          background: #13171C;
        }
      }
      .k-menu-item-active {
        background: #13171C;
        color: #fff;
        &:hover {
          background: #13171C;
          color: #fff;
        }
      }
    }
  }
  > .k-menu-submenu{
    padding: 0 19px;
  }
  .k-menu-right {
    float: right;
  }
}

/* 垂直导航的样式 */

.k-menu-vertical {
  background: #212B36;
  &::after {
    content: "";
    top: 0;
    display: block;
    height: 100%;
    background: #dddee1;
    position: absolute;
    right: 0px;
  }
  .k-menu-active .k-menu-title{
      background: #13171C;
      color: #fff;
  }
  .k-menu-item {
    height: 40px;
    line-height: 40px;
    padding: 0 9px;
    box-sizing: border-box;
    text-align: left;
    color: rgba(255,255,255,0.87);
    &:hover {
      color: #fff;
    }
    i {
      display: inline-block;
      width: 34px;
      text-align: center;

    }
    i.icon-arrow_right {
      float: right;
      transition: transform .3s linear;
    }
  }
  .k-menu-submenu {
    box-sizing: border-box;
    .k-menu-title {
      height: 40px;
      line-height: 40px;
      color: rgba(255, 255, 255, 0.4);
      padding: 0 9px;
      i {
        display: inline-block;
        width: 34px;
        text-align: center;
      }
      .icon-arrow {
        float: right;
        font-size: 26px;
        transition: transform .3s linear;
      }
    }
    .k-menu-dropdown {
      padding: 0;
      .k-menu-item {
        height: 40px;
        line-height: 40px;
        padding-left: 47px;
        box-sizing: border-box;
        font-size: 12px;
        &:hover {
          color: #fff;
        }
      }
    }
    .k-menu--popupmenu {
      padding: 0;
      left:60px;
      top:0px;
      background-color: #212B36;
      box-sizing: border-box;
      border-radius: @radius;
      box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
      position: absolute;
      z-index: 901;
      min-width: 100px;
      transition: height .3s ease-in-out, opacity .3s ease-in-out;
      -webkit-transition: height .3s ease-in-out, opacity .3s ease-in-out;
      overflow: hidden;
      display: none;
      &:hover{
          background: #13171C;
      }
      ul {
        padding: 0;
      }
      .k-menu-item {
        font-size: 12px;
        color: fade(#fff,40%);
        text-align: left;
        line-height: 40px;
        box-sizing: border-box;
        width: 100%;
        min-width: 100px;
        padding:0 20px;
        &:hover {
          background: #13171C;
        }
      }
      .k-menu-item-active {
        background: #13171C;
        color: #fff;
        &:hover {
          color: #fff;
        }
      }
    }
  }
  .k-menu-active{
    .k-menu-title{
      color: #fff;
    }
  }
  .k-menu-arrow {
    float: right;
    position: relative;
    top: 4px;
  }

  .k-menu-item-group-title {
    padding: 7px 0 7px 32px;
    line-height: normal;
    font-size: 12px;
    color: #909399;
  }
  .k-menu-dropdown {
    transition: height .3s ease-in-out, opacity .3s ease-in-out;
    -webkit-transition: height .3s ease-in-out, opacity .3s ease-in-out;
  }
  .k-menu-submenu,
  .k-menu-item-group {
    .k-menu-item-active {
      color: @main;
    }
  }
}

.k-menu-vertical.k-menu-dark {
  .demo-logo-samll,.demo-logo-big{
      padding: 3px 10px 4px 10px;
  }
  .demo-logo-samll i{
      font-size: 18px;
  }
  .k-menu-submenu:hover{
      .k-menu-title{
      color: #fff;
        background: @primary;
      }
  }
  .k-menu-active .k-menu-title{
      color: #fff;
      background: @primary;
  }
  .k-menu-title {
    color: #fff;
    &:hover {
      color: #fff;
      background: @primary;
    }
  }
  .k-menu-item {
    &:hover {
      background: @primary;
    }
  }
  .k-menu-item-active {
    color: #fff;
    background: @primary;
  }
  .k-menu-submenu,
  .k-menu-item-group {
    .k-menu-item-active {
      color: #fff;
    }
  }
  .k-menu-submenu.k-menu-item-opened {
    background: #13171C;
  }
  .k-menu-submenu{
    .k-menu--popupmenu {
      .k-menu-item {
        color: #fff;
        &:hover {
          color: #3C99FC;
        }
      }
      .k-menu-item-active {
        background: #3c99fc;
        color: #fff;
        &:hover {
          color: #fff;
        }
      }
    }
  }
}

.k-menu-vertical.k-menu-black {
  .demo-logo-samll,.demo-logo-big{
      padding: 4px 10px;
  }
  .demo-logo-samll i{
      font-size: 18px;
  }
  .demo-logo-big{
      .icon-logo{
          margin-top: 6px;
      }
  }
  .k-menu-item {
    color: fade(#fff, 40%);
    &:hover {
      color: #fff;
    }
  }
  .k-menu-title {
    &:hover {
      color: #fff;
      background: '';
    }
  }
  .k-menu-submenu.k-menu-item-opened{
    background: #13171C;
  }
  .k-menu-item-active {
    color: #fff;
  }
}

.k-menu-item-opened {
  .icon-arrow {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transition: transform .3s linear;
  }
}

.k-menu-vertical{
  .k-menu-submenu.k-menu-item-opened:hover{
      .k-menu-dropdown.k-menu--popupmenu{
          display: block;
      }
  }
}

//带有折叠功能的纵向导航
.k-menu.k-menu--collapse{
  width: 50px;
}
.k-menu--collapse {
  .k-menu-item {
    padding: 0;
    i{
      padding-left:9px;
    }
    span {
      width: 0;
      height: 0;
      overflow: hidden;
      visibility: hidden;
      display: inline-block;

    }
  }
  .k-menu-submenu {
    width: 50px;
    span {
      width: 0;
      height: 0;
      overflow: hidden;
      visibility: hidden;
      display: inline-block;

    }
    i.icon-arrow {
      display: none;
    }
  }
}

//菜单组件