| | |
| | | width: 100% !important; |
| | | } |
| | | |
| | | // 菜单字号:比正文大两号(正文 16px → 菜单 18px) |
| | | .el-menu-item, |
| | | .el-submenu__title { |
| | | font-size: $opo-font-size-menu; |
| | | } |
| | | |
| | | .el-menu-item, .el-submenu__title { |
| | | overflow: hidden !important; |
| | | text-overflow: ellipsis !important; |
| | | white-space: nowrap !important; |
| | | } |
| | | |
| | | // menu hover |
| | | // menu hover(深色底上用透白,原来 rgba(0,0,0,.06) 在深色上看不出来) |
| | | .submenu-title-noDropdown, |
| | | .el-submenu__title { |
| | | &:hover { |
| | | background-color: rgba(0, 0, 0, 0.06) !important; |
| | | background-color: rgba(255, 255, 255, 0.08) !important; |
| | | } |
| | | } |
| | | |
| | |
| | | min-width: $base-sidebar-width !important; |
| | | |
| | | &:hover { |
| | | background-color: rgba(0, 0, 0, 0.06) !important; |
| | | background-color: rgba(255, 255, 255, 0.08) !important; |
| | | } |
| | | } |
| | | |
| | |
| | | &:hover { |
| | | background-color: $base-sub-menu-hover !important; |
| | | } |
| | | } |
| | | |
| | | // ---- 当前选中菜单高亮 ---- |
| | | // 原状:Element 编译出的 .el-menu-item.is-active 是主色文字, |
| | | // 在同样是青色的深色侧边栏上几乎看不见 → 改为"品牌青实底 + 白字 + 左侧亮条" |
| | | & .el-menu-item.is-active { |
| | | position: relative; |
| | | color: #ffffff !important; |
| | | background-color: $opo-primary !important; |
| | | font-weight: 500; |
| | | |
| | | &::before { |
| | | content: ''; |
| | | position: absolute; |
| | | left: 0; |
| | | top: 0; |
| | | bottom: 0; |
| | | width: 3px; |
| | | background-color: #ffffff; |
| | | } |
| | | |
| | | &:hover { |
| | | background-color: $opo-primary !important; |
| | | } |
| | | } |
| | | |
| | | // 父级分组只是"包含选中项",用弱一点的底色,避免和叶子项一样重 |
| | | & .el-submenu.is-active > .el-submenu__title { |
| | | background-color: rgba(255, 255, 255, 0.1) !important; |
| | | color: #ffffff !important; |
| | | } |
| | | } |
| | | |
| | |
| | | .nest-menu .el-submenu>.el-submenu__title, |
| | | .el-menu-item { |
| | | &:hover { |
| | | // you can use $subMenuHover |
| | | background-color: rgba(0, 0, 0, 0.06) !important; |
| | | // 深色菜单用透白覆盖 |
| | | background-color: rgba(255, 255, 255, 0.08) !important; |
| | | } |
| | | } |
| | | |