| | |
| | | @import (reference) '../../../design/index.less'; |
| | | @basic-menu-prefix-cls: ~'@{namespace}-basic-menu'; |
| | | |
| | | .active-style() { |
| | | color: @white; |
| | | background: linear-gradient( |
| | | 118deg, |
| | | rgba(@primary-color, 0.8), |
| | | rgba(@primary-color, 1) |
| | | ) !important; |
| | | .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%; |
| | | |
| | | &-wrap { |
| | | height: 100%; |
| | | .ant-menu-item { |
| | | transition: unset; |
| | | } |
| | | |
| | | // collapsed show title start |
| | | .show-title { |
| | | max-width: unset !important; |
| | | opacity: 1 !important; |
| | | } |
| | | |
| | | &.collapsed-show-title.ant-menu-inline-collapsed { |
| | | .basic-menu-item__level1 { |
| | | padding: 2px 0; |
| | | } |
| | | |
| | | & > li[role='menuitem']:not(.ant-menu-submenu), |
| | | & > li > .ant-menu-submenu-title { |
| | | display: flex; |
| | | margin-top: 10px; |
| | | font-size: 12px; |
| | | flex-direction: column; |
| | | align-items: center; |
| | | } |
| | | |
| | | & > li > .ant-menu-submenu-title { |
| | | line-height: 24px; |
| | | } |
| | | } |
| | | |
| | | // collapsed show title end |
| | | |
| | | // scrollbar -s tart |
| | | &__content { |
| | | /* 滚动槽 */ |
| | | &::-webkit-scrollbar { |
| | | width: 4px; |
| | | height: 4px; |
| | | } |
| | | |
| | | &::-webkit-scrollbar-track { |
| | | background: rgba(0, 0, 0, 0); |
| | | } |
| | | |
| | | &::-webkit-scrollbar-thumb { |
| | | background: rgba(255, 255, 255, 0.2); |
| | | border-radius: 3px; |
| | | box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1); |
| | | } |
| | | |
| | | ::-webkit-scrollbar-thumb:hover { |
| | | background: @border-color-dark; |
| | | } |
| | | } |
| | | // scrollbar end |
| | | |
| | | &__sidebar-hor { |
| | | // overflow: hidden; |
| | | |
| | | &.ant-menu-horizontal { |
| | | display: flex; |
| | | border: 0; |
| | | align-items: center; |
| | | |
| | | .basic-menu-item__level1 { |
| | | margin-right: 2px; |
| | | } |
| | | |
| | | &.ant-menu-light { |
| | | .basic-menu-item__level1 { |
| | | &.top-active-menu { |
| | | color: @primary-color; |
| | | border-bottom: 3px solid @primary-color; |
| | | } |
| | | } |
| | | |
| | | .ant-menu-item { |
| | | &.basic-menu-item__level1 { |
| | | height: @header-height; |
| | | line-height: @header-height; |
| | | } |
| | | } |
| | | |
| | | .ant-menu-submenu:hover, |
| | | .ant-menu-item-open, |
| | | .ant-menu-submenu-open, |
| | | .ant-menu-item-selected, |
| | | .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; |
| | | } |
| | | |
| | | .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; |
| | |
| | | background: @top-menu-active-bg-color; |
| | | } |
| | | |
| | | .basic-menu-item__level1 { |
| | | .@{basic-menu-prefix-cls}-item__level1 { |
| | | background: transparent; |
| | | |
| | | &.top-active-menu { |
| | | color: @white; |
| | | background: @top-menu-active-bg-color; |
| | | border-radius: 2px 2px 0 0; |
| | | } |
| | | |
| | | &.ant-menu-item-selected, |
| | | &.ant-menu-submenu-selected { |
| | |
| | | |
| | | .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-submenu, |
| | | .ant-menu-submenu-inline { |
| | | transition: unset; |
| | | } |
| | | |
| | | &.ant-menu-dark:not(.basic-menu__sidebar-hor):not(.basic-menu__second) { |
| | | // Reset menu item row 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-dark:not(.basic-menu__sidebar-hor) { |
| | | overflow-x: hidden; |
| | | background: @first-menu-item-dark-bg-color; |
| | | .active-menu-style(); |
| | | |
| | | .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 { |
| | | background-color: @first-menu-item-dark-bg-color; |
| | | |
| | | > .ant-menu-sub > li { |
| | | background-color: @sub-menu-item-dark-bg-color; |
| | | } |
| | | } |
| | | |
| | | .basic-menu-item__level2:not(.ant-menu-item-selected), |
| | | .ant-menu-sub { |
| | | background-color: @sub-menu-item-dark-bg-color; |
| | | } |
| | | |
| | | .basic-menu-item__level3:not(.ant-menu-item-selected) { |
| | | background-color: @children-menu-item-dark-bg-color; |
| | | } |
| | | |
| | | .ant-menu-submenu-title { |
| | | display: flex; |
| | | height: @app-menu-item-height; |
| | | // margin: 0; |
| | | align-items: center; |
| | | } |
| | | |
| | | &.ant-menu-inline-collapsed { |
| | | .ant-menu-submenu-selected, |
| | | .ant-menu-item-selected { |
| | | background: darken(@first-menu-item-dark-bg-color, 6%) !important; |
| | | } |
| | | } |
| | | } |
| | | |
| | | &.ant-menu-light:not(.basic-menu__sidebar-hor) { |
| | | overflow-x: hidden; |
| | | border-right: none; |
| | | |
| | | // .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; |
| | | } |
| | | |
| | | &.basic-menu__second.ant-menu-inline-collapsed:not(.basic-menu__sidebar-hor) { |
| | | // Reset menu item row 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 { |
| | | display: flex; |
| | | height: @app-menu-item-height * 1.4; |
| | | padding: 6px 0 !important; |
| | | margin: 0; |
| | | line-height: @app-menu-item-height; |
| | | align-items: center; |
| | | } |
| | | } |
| | | } |
| | | |
| | | // 触发器样式 |
| | | .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 { |
| | | .ant-layout-sider-trigger { |
| | | color: @text-color-base; |
| | | border-top: 1px solid @border-color-light; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .ant-menu-dark { |
| | | &.ant-menu-submenu-popup { |
| | | > ul { |
| | | background: @first-menu-item-dark-bg-color; |
| | | } |
| | | |
| | | .active-menu-style(); |
| | | } |
| | | } |
| | | |
| | | .hide-title { |
| | | .ant-menu-inline-collapsed > .ant-menu-item, |
| | | .ant-menu-inline-collapsed > .ant-menu-item-group > .ant-menu-item-group-list > .ant-menu-item, |
| | | .ant-menu-inline-collapsed |
| | | > .ant-menu-item-group |
| | | > .ant-menu-item-group-list |
| | | > .ant-menu-submenu |
| | | > .ant-menu-submenu-title, |
| | | .ant-menu-inline-collapsed > .ant-menu-submenu > .ant-menu-submenu-title { |
| | | padding-right: 20px !important; |
| | | padding-left: 20px !important; |
| | | } |
| | | |
| | | .ant-menu-inline-collapsed { |
| | | .basic-menu-item__level1 { |
| | | display: flex; |
| | | justify-content: center; |
| | | } |
| | | .ant-menu-inline.ant-menu-sub { |
| | | box-shadow: unset !important; |
| | | transition: unset; |
| | | } |
| | | } |