| | |
| | | @import (reference) '../../../design/index.less'; |
| | | @basic-menu-prefix-cls: ~'@{namespace}-basic-menu'; |
| | | |
| | | .active-style() { |
| | | color: @white; |
| | | background: linear-gradient( |
| | | 118deg, |
| | | rgba(@primary-color, 0.7), |
| | | rgba(@primary-color, 1) |
| | | ) !important; |
| | | border-radius: 2px; |
| | | box-shadow: 0 0 4px 1px rgba(@primary-color, 0.7); |
| | | .app-top-menu-popup { |
| | | min-width: 150px; |
| | | } |
| | | |
| | | .active-menu-style() { |
| | | .ant-menu-item-selected, |
| | | .ant-menu-submenu-popup.ant-menu-dark .ant-menu-item-selected { |
| | | .active-style(); |
| | | } |
| | | } |
| | | |
| | | .basic-menu { |
| | | .@{basic-menu-prefix-cls} { |
| | | width: 100%; |
| | | |
| | | &.collapsed-show-title.ant-menu-inline-collapsed { |
| | | .basic-menu-item__level1 { |
| | | padding: 2px 0; |
| | | } |
| | | |
| | | & > li > .ant-menu-submenu-title { |
| | | display: flex; |
| | | margin-top: 12px; |
| | | font-size: 12px; |
| | | flex-direction: column; |
| | | line-height: 24px; |
| | | } |
| | | |
| | | & > li[role='menuitem']:not(.ant-menu-submenu) { |
| | | display: flex; |
| | | margin-top: 12px; |
| | | font-size: 12px; |
| | | line-height: 2; |
| | | align-items: center; |
| | | flex-direction: column; |
| | | |
| | | span { |
| | | margin-top: 6px; |
| | | } |
| | | } |
| | | .ant-menu-item { |
| | | transition: unset; |
| | | } |
| | | |
| | | &__wrap { |
| | | /* 滚动槽 */ |
| | | &::-webkit-scrollbar { |
| | | width: 6px; |
| | | height: 6px; |
| | | } |
| | | |
| | | // TODO 滚动条样式-待修改 |
| | | &::-webkit-scrollbar-track { |
| | | background: rgba(0, 0, 0, 0); |
| | | } |
| | | |
| | | /* 滚动条滑块 */ |
| | | &::-webkit-scrollbar-thumb { |
| | | background: rgba(255, 255, 255, 0.3); |
| | | border-radius: 4px; |
| | | box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1); |
| | | } |
| | | |
| | | ::-webkit-scrollbar-thumb:hover { |
| | | background: @border-color-dark; |
| | | } |
| | | } |
| | | |
| | | .ant-menu-submenu:first-of-type { |
| | | margin-top: 4px; |
| | | } |
| | | |
| | | .ant-menu-submenu-title { |
| | | margin-top: 0; |
| | | } |
| | | |
| | | &-wrap { |
| | | height: 100%; |
| | | } |
| | | |
| | | .menu-item-icon { |
| | | vertical-align: text-top; |
| | | } |
| | | // 透明化背景 |
| | | &-bg__sidebar { |
| | | background-color: transparent; |
| | | } |
| | | |
| | | &-bg__sidebar-hor { |
| | | &__sidebar-hor { |
| | | &.ant-menu-horizontal { |
| | | display: flex; |
| | | border: 0; |
| | | align-items: center; |
| | | |
| | | .basic-menu-item__level1 { |
| | | margin-right: 2px; |
| | | } |
| | | &.ant-menu-dark { |
| | | background: transparent; |
| | | |
| | | &.ant-menu-light { |
| | | .ant-menu-item { |
| | | &.basic-menu-item__level1 { |
| | | height: 38px; |
| | | line-height: 38px; |
| | | } |
| | | } |
| | | |
| | | .ant-menu-item:hover, |
| | | .ant-menu-submenu:hover, |
| | | .ant-menu-item-active, |
| | | .ant-menu-submenu-active, |
| | | .ant-menu-item-open, |
| | | .ant-menu-submenu-open, |
| | | .ant-menu-item-selected, |
| | | .ant-menu-submenu-selected { |
| | | color: @primary-color !important; |
| | | border-bottom: 3px solid @primary-color; |
| | | } |
| | | |
| | | .ant-menu-submenu-selected, |
| | | .ant-menu-item:hover, |
| | | .ant-menu-item-active, |
| | | .ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open, |
| | | .ant-menu-submenu-active, |
| | | .ant-menu-submenu-title:hover { |
| | | color: @primary-color !important; |
| | | border-bottom: 3px solid @primary-color; |
| | | color: #fff; |
| | | background: @top-menu-active-bg-color !important; |
| | | } |
| | | |
| | | // 有子菜单 |
| | | .ant-menu-submenu { |
| | | &:hover { |
| | | border-bottom: 3px solid @primary-color; |
| | | } |
| | | |
| | | &.ant-menu-selected, |
| | | &.ant-menu-submenu-selected { |
| | | border-bottom: 3px solid @primary-color; |
| | | } |
| | | } |
| | | } |
| | | |
| | | &.ant-menu-dark { |
| | | background: transparent; |
| | | |
| | | .ant-menu-item:hover, |
| | | .ant-menu-item-active, |
| | |
| | | .ant-menu-submenu-active, |
| | | .ant-menu-submenu-title:hover { |
| | | background: @top-menu-active-bg-color; |
| | | // border-radius: 6px 6px 0 0; |
| | | } |
| | | |
| | | .basic-menu-item__level1 { |
| | | .@{basic-menu-prefix-cls}-item__level1 { |
| | | background: transparent; |
| | | |
| | | &.ant-menu-item-selected, |
| | | &.ant-menu-submenu-selected { |
| | | background: @top-menu-active-bg-color; |
| | | // border-radius: 6px 6px 0 0; |
| | | background: @top-menu-active-bg-color !important; |
| | | } |
| | | } |
| | | |
| | | .ant-menu-item { |
| | | &.basic-menu-item__level1 { |
| | | height: @header-height; |
| | | line-height: @header-height; |
| | | } |
| | | } |
| | | // 有子菜单 |
| | | .ant-menu-item, |
| | | .ant-menu-submenu { |
| | | &.basic-menu-item__level1, |
| | | &.@{basic-menu-prefix-cls}-item__level1, |
| | | .ant-menu-submenu-title { |
| | | height: @header-height; |
| | | line-height: @header-height; |
| | |
| | | } |
| | | } |
| | | } |
| | | // 重置菜单项行高 |
| | | .ant-menu-item, |
| | | .ant-menu-sub.ant-menu-inline > .ant-menu-item, |
| | | .ant-menu-sub.ant-menu-inline > .ant-menu-submenu > .ant-menu-submenu-title { |
| | | height: @app-menu-item-height; |
| | | margin: 0; |
| | | line-height: @app-menu-item-height; |
| | | |
| | | .ant-menu-submenu, |
| | | .ant-menu-submenu-inline { |
| | | transition: unset; |
| | | } |
| | | |
| | | &.ant-menu-dark:not(.basic-menu-bg__sidebar-hor) { |
| | | .active-menu-style(); |
| | | } |
| | | |
| | | // 层级样式 |
| | | &.ant-menu-dark { |
| | | // .ant-menu-item { |
| | | // transition: unset; |
| | | // } |
| | | |
| | | .ant-menu-item.ant-menu-item-selected.basic-menu-menu-item__level1, |
| | | .ant-menu-submenu-selected.basic-menu-menu-item__level1 { |
| | | color: @white; |
| | | } |
| | | |
| | | .basic-menu-item__level1 { |
| | | margin-bottom: 0; |
| | | |
| | | > .ant-menu-sub > li { |
| | | background-color: @sub-menu-item-dark-bg-color; |
| | | } |
| | | |
| | | &.top-active-menu { |
| | | color: @white; |
| | | background: @top-menu-active-bg-color; |
| | | border-radius: 6px 6px 0 0; |
| | | } |
| | | } |
| | | |
| | | // 2级菜单 |
| | | |
| | | .basic-menu-item__level2:not(.ant-menu-item-selected), |
| | | .ant-menu-sub { |
| | | background-color: @sub-menu-item-dark-bg-color; |
| | | } |
| | | |
| | | .basic-menu-item__level2 { |
| | | margin-bottom: 0; |
| | | } |
| | | // 3级菜单 |
| | | .basic-menu-item__level3, |
| | | .basic-menu__popup { |
| | | margin-bottom: 0; |
| | | } |
| | | |
| | | .basic-menu-item__level3:not(.ant-menu-item-selected) { |
| | | background-color: @children-menu-item-dark-bg-color; |
| | | } |
| | | |
| | | .ant-menu-submenu-title { |
| | | // line-height: @app-menu-item-height; |
| | | display: flex; |
| | | height: @app-menu-item-height; |
| | | margin: 0; |
| | | align-items: center; |
| | | } |
| | | |
| | | &.ant-menu-inline-collapsed { |
| | | .ant-menu-item-selected { |
| | | background: unset !important; |
| | | box-shadow: none; |
| | | } |
| | | |
| | | .ant-menu-submenu-selected, |
| | | .ant-menu-item-selected { |
| | | .active-style(); |
| | | } |
| | | } |
| | | } |
| | | |
| | | &.ant-menu-light { |
| | | .basic-menu-item__level1 { |
| | | &.top-active-menu { |
| | | color: @primary-color; |
| | | border-bottom: 6px solid @primary-color; |
| | | } |
| | | } |
| | | |
| | | &:not(.ant-menu-horizontal) { |
| | | .ant-menu-item-selected { |
| | | background: fade(@primary-color, 18%); |
| | | } |
| | | } |
| | | |
| | | .ant-menu-item.ant-menu-item-selected.basic-menu-menu-item__level1, |
| | | .ant-menu-submenu-selected.basic-menu-menu-item__level1 { |
| | | color: @primary-color; |
| | | } |
| | | } |
| | | |
| | | // 关键字的颜色 |
| | | &__keyword { |
| | | color: lighten(@primary-color, 20%); |
| | | } |
| | | |
| | | // 激活的子菜单样式 |
| | | .ant-menu-item.ant-menu-item-selected { |
| | | position: relative; |
| | | } |
| | | } |
| | | |
| | | // 触发器样式 |
| | | .ant-layout-sider { |
| | | &-dark { |
| | | .ant-layout-sider-trigger { |
| | | color: darken(@white, 25%); |
| | | background: @trigger-dark-bg-color; |
| | | |
| | | &:hover { |
| | | color: @white; |
| | | background: @trigger-dark-hover-bg-color; |
| | | } |
| | | } |
| | | } |
| | | |
| | | &-light { |
| | | border-right: 1px solid rgba(221, 221, 221, 0.6); |
| | | |
| | | .ant-layout-sider-trigger { |
| | | color: @text-color-base; |
| | | background: @trigger-light-bg-color; |
| | | |
| | | &:hover { |
| | | color: @text-color-base; |
| | | background: @trigger-light-hover-bg-color; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | .ant-menu-dark { |
| | | &.ant-menu-submenu-popup { |
| | | > ul { |
| | | background: @first-menu-item-dark-bg-color; |
| | | } |
| | | |
| | | .active-menu-style(); |
| | | .ant-menu-inline.ant-menu-sub { |
| | | box-shadow: unset !important; |
| | | transition: unset; |
| | | } |
| | | } |