123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081 |
- // 水平模式时高度强制设置为100%
- .@{elNamespace}-menu--horizontal.@{elNamespace}-menu.cip-main-nav{
- height: 100%;
- }
- .cip-main-nav.@{elNamespace}-menu, .cip-menu-popper{
- border:none;
- .cip-menu__title{
- flex-grow: 2;
- }
- // 展开后父菜单徽标消失
- .@{elNamespace}-sub-menu.is-opened{
- > .@{elNamespace}-sub-menu__title {
- .cip-menu__badge {
- visibility: hidden;
- }
- }
- }
- .@{elNamespace}-menu-item{ // 与el-sub-menu的表现不同在收缩时会套一个el-popper导致无法正常居中
- display: flex;
- align-items: center;
- justify-content: flex-start;
- line-height: normal;
- .cip-menu__badge{
- margin-left:8px;
- }
- [class~=iconfont], [class^=el-icon-], .cip-svg-icon, > svg, .@{elNamespace}-menu-tooltip__trigger > svg{
- width: 15px;
- height: 15px;
- margin-right: 5px;
- text-align: center;
- font-size: var(--el-menu-item-font-size);
- vertical-align: middle;
- overflow: visible;
- & ~ .cip-menu__title {
- margin-left: 10px;
- }
- }
- }
- .@{elNamespace}-sub-menu__title{
- display: flex;
- align-items: center;
- justify-content: flex-start;
- line-height: normal;
- .cip-menu__badge{
- margin: 0 16px 0 8px;
- }
- [class~=iconfont], [class^=el-icon-], .cip-svg-icon, > svg{
- width: 15px;
- height: 15px;
- margin-right: 5px;
- text-align: center;
- font-size: var(--el-menu-item-font-size);
- vertical-align: middle;
- overflow: visible;
- & ~ .cip-menu__title {
- margin-left: 10px;
- }
- }
- }
- .@{elNamespace}-sub-menu{
- [class~=iconfont], [class^=el-icon-], .cip-svg-icon{
- text-align: center;
- font-size: var(--el-menu-item-font-size);
- //vertical-align: middle;
- }
- }
- }
- .cip-menu-popper{
- .@{elNamespace}-menu-item,.@{elNamespace}-sub-menu__title{
- .cip-menu__badge{
- flex-shrink: 0;
- margin: 0 8px 0 8px;
- }
- }
- }
- .cip-main-nav.@{elNamespace}-menu--collapse{
- .@{elNamespace}-menu-item{
- line-height: var(--el-menu-item-height);
- }
- }
|