123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191 |
- /**
- @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{
- .el-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{
- .el-sub-menu__title{
- .normal-menu-item-mix();
- }
- &.is-active{
- > .el-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()
- }
- }
- }
- }
- }
|