cip-components/main/menu-theme-mixin.less

/**
@bg: 菜单整体背景色
@color: 未激活时字体颜色
@activeColor: 激活时颜色
@subMenuOpenedBg: 子菜单展开式颜色
 */



.menu-theme(@bg, @color, @activeBg, @activeColor,  @subMenuOpenedBg){

  .normal-menu-item-mix(){
    border-left: 5px solid transparent;
    color: @color;
  }
  .active-menu-item-mix(){
    border-left-color: @activeColor !important;
    background: @activeBg !important;
    color: @activeColor !important;
  }
  .hover-menu-item-mix(){
    color: @activeColor !important;
    background: transparent !important;
  }

  .@{elNamespace}-menu{
    background: @bg;
    // 普通状态的item激活 和 hover 逻辑
    .@{elNamespace}-menu-item{
      .normal-menu-item-mix();
      &:hover{
        .hover-menu-item-mix();
      }
      // is-active的样式需要覆盖hover的样式
      &.is-active{
        .active-menu-item-mix();
      }
    }
    // 普通状态的subMenu的处理
    .@{elNamespace}-sub-menu{
      // title类似item的处理
      .@{elNamespace}-sub-menu__title{
        .normal-menu-item-mix();
        &:hover{
          .hover-menu-item-mix();
        }
      }
      &.is-opened{
        // 控制已打开的sub-menu的背景色
        .@{elNamespace}-menu{
          background: @subMenuOpenedBg;
        }
      }
    }
  }
  // collapse状态的样式 [注此处与menu平级]
  .@{elNamespace}-menu.@{elNamespace}-menu--collapse{
    .@{elNamespace}-sub-menu.is-active{
      .@{elNamespace}-sub-menu__title{
        .active-menu-item-mix();
      }
    }
  }



}
// 弹出部分样式修改
.menu-theme--popup(@bg, @color, @activeBg, @activeColor,  @subMenuOpenedBg){
  .normal-menu-item-mix(){
    border-left: 5px solid transparent;
    background-color: @bg;
    color: @color;
  }
  .active-menu-item-mix(){
    border-left-color: @activeColor !important;
    background: @activeBg !important;
    color: @activeColor !important;
  }
  .hover-menu-item-mix(){
    color: @color !important;
    background: @activeBg !important;
  }
  .@{elNamespace}-menu--vertical.@{elNamespace}-menu--popup-container.cip-menu-popper{
    .@{elNamespace}-menu.@{elNamespace}-menu--popup{
      background-color: @bg;
    }
    .@{elNamespace}-menu-item{
      .normal-menu-item-mix();
      &:hover{
        .hover-menu-item-mix();
      }
      &.is-active{
        .active-menu-item-mix();
      }
    }
    .@{elNamespace}-sub-menu{
      .@{elNamespace}-sub-menu__title{
        .normal-menu-item-mix();
      }
      &.is-active{
        > .@{elNamespace}-sub-menu__title{
          .hover-menu-item-mix();
          color: @activeColor !important;
        }
      }
    }
  }
  .@{elNamespace}-menu--horizontal.@{elNamespace}-menu--popup-container.cip-menu-popper{
    .@{elNamespace}-menu-item{
      border: none !important;
    }
  }
}
.menu-theme--horizontal(@bg, @color, @activeBg, @activeColor){
  @defaultColor: hardlight(@color,#666);
  /**内部混入定义**/
  // 激活菜单项
  .menu-item-active(){
    background: @activeBg !important;
    color: @activeColor !important;
    //font-weight: bold;
  }
  .menu-item-focus(){
    color: @defaultColor ;
    background: @bg;
  }
  // 一级菜单激活下划线
  .cip-menu__underline(){
    position: relative;
    &::after{
      content: ' ';
      position: absolute;
      bottom: -8px;
      display: inline-block;
      width: 12px;
      height: 4px;
      background: @activeColor;
      left: 50%;
      border-radius: 4px;
      transform: translateX(-50%);
    }
  }
  /**混入定义结束**/
  .@{elNamespace}-menu{
    background: @bg;
    .@{elNamespace}-menu-item{
      font-weight: bold;
      color: @defaultColor;
      border-bottom: none;
      &.is-active{
        .menu-item-active();
        .cip-menu__title{
          .cip-menu__underline();
        }
      }
      &:hover{
        .menu-item-active();
      }
      &:focus{
        .menu-item-focus()
      }
    }
    .@{elNamespace}-sub-menu{
      &.is-active{ // 子菜单激活
        .cip-menu__title{
          .menu-item-active();
          .cip-menu__underline();
        }
      }
      .@{elNamespace}-sub-menu__title{
        background: @bg;
        font-weight: bold;
        color: @defaultColor;
        border-bottom: none;
        &:hover{
          .menu-item-active()
        }
        &:focus{
          .menu-item-focus()
        }
        &.is-active{
          .menu-item-active()
        }
      }

    }
  }


}