2025-03-JS-SDK-CLI/src/styles/nav-menu.scss

94 lines
1.8 KiB
SCSS
Raw Normal View History

2025-03-10 13:48:17 +08:00
/*.el-menu--horizontal {
border: none;
height: 40px;
border-bottom: unset;
}
.el-menu--horizontal>.el-menu-item.is-active{
border-bottom: unset;
}*/
.menu-horizontal{
display: flex;
li{
border-radius: 2px;
height: 28px;
line-height: 28px;
padding: 0 10px;
font-size: 14px;
color: #181818;
font-weight: bold;
margin-right: 20px;
display: flex;
align-items: center;
cursor: pointer;
svg{
margin-right: 8px;
}
&:hover{
color: $primaryColor;
}
&.active{
background-image: linear-gradient(180deg, #EBF3FF 0%, #DAE6F4 100%);
box-shadow: inset 0 1px 3px 0 rgba(0,0,0,0.10);
color: $primaryColor;
}
}
}
/*secondMenu*/
#app .secondMenu.el-menu{
padding: 0 10px;
height: 24px;
.el-menu-item,.el-sub-menu .el-sub-menu__title {
padding: 0 12px;
height: 24px;
color: #ffffff!important;
font-size: 13px;
svg{
display: none;
}
&:before{
content: "";
display: block;
width: 6px;
height: 6px;
border-radius: 50%;
background: #ffffff;
margin-right: 6px;
}
&.is-active{
//color: #1AB249!important;
background-color: var(--el-menu-hover-bg-color);
//&:before{
// background: #1AB249;
//}
}
}
.el-sub-menu .el-sub-menu__title {
.el-sub-menu__icon-arrow{
display: none;
}
}
}
.el-menu--horizontal .el-menu--popup{
.nest-menu{
.el-sub-menu__title{
height: 24px!important;
.svg-icon{
display: none;
}
}
.el-menu-item{
height: 24px!important;
&:hover{
background: $menuHover;
}
.svg-icon{
display: none;
}
}
.el-menu-item.is-active{
background: #D0E6FF;
border-right: 4px solid $primaryColor;
}
}
}