From 0ec1a62e596c363f3f017d6ac3b374a1b5caa7c5 Mon Sep 17 00:00:00 2001
From: vben <anncwb@126.com>
Date: 星期一, 25 一月 2021 23:51:55 +0800
Subject: [PATCH] fix(menu): top submenu disappeared problem #214
---
src/components/Menu/src/index.less | 282 ++-----------------------------------------------------
1 files changed, 13 insertions(+), 269 deletions(-)
diff --git a/src/components/Menu/src/index.less b/src/components/Menu/src/index.less
index 54e5019..88c415c 100644
--- a/src/components/Menu/src/index.less
+++ b/src/components/Menu/src/index.less
@@ -1,131 +1,20 @@
-@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;
@@ -152,14 +41,8 @@
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 {
@@ -169,7 +52,7 @@
.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;
@@ -179,152 +62,13 @@
}
}
- .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;
}
}
--
Gitblit v1.8.0