From ddb04b3d438a081760ad9d075002e9ac18de27bf Mon Sep 17 00:00:00 2001 From: wuyiping0628 <1106773985@qq.com> Date: Mon, 21 Oct 2024 02:18:56 -0700 Subject: [PATCH 1/2] feat(nav-menu): [nav-menu] updata nav-menu xdesign --- packages/theme/src/nav-menu/index.less | 31 ++++++++++++++++++-------- packages/theme/src/nav-menu/vars.less | 11 +++++++-- 2 files changed, 31 insertions(+), 11 deletions(-) diff --git a/packages/theme/src/nav-menu/index.less b/packages/theme/src/nav-menu/index.less index 7255bc3e3f..9fa73bde16 100644 --- a/packages/theme/src/nav-menu/index.less +++ b/packages/theme/src/nav-menu/index.less @@ -129,6 +129,9 @@ max-height: calc(100vh - var(--tv-NavMenu-height)); overflow-y: auto; left: 0; + margin-top: 2px; + border-bottom-left-radius: var(--tv-NavMenu-popmenu-box-radius); + border-bottom-right-radius: var(--tv-NavMenu-popmenu-box-radius); > .more-menu { float: left; @@ -218,7 +221,7 @@ &.full-width { width: 100%; - padding: 0 82px; + padding: 32px 82px; } > ul { @@ -227,18 +230,16 @@ .group { list-style: none; - - &:first-child { - margin-top: 36px; - } + margin-left: 10px; > .@{nav-menu-prefix-cls}__sub-menu-title { padding-bottom: 0; color: var(--tv-NavMenu-popmenu-text-color); font-size: var(--tv-NavMenu-popmenu-node-title-font-size); font-weight: bold; - margin: 0 32px 18px 0; word-break: break-all; + height: var(--tv-NavMenu-popmenu-text-height); + line-height: var(--tv-NavMenu-popmenu-text-height); display: flex; > a, @@ -261,7 +262,9 @@ .sub-item { font-size: var(--tv-NavMenu-popmenu-node-item-font-size); - padding: 0 0 14px; + height: var(--tv-NavMenu-popmenu-text-height); + line-height: var(--tv-NavMenu-popmenu-text-height); + margin-top: 4px; &.third-title { > a, @@ -276,17 +279,19 @@ } &:hover { + color: var(--tv-NavMenu-popmenu-text-color); text-decoration: underline; } &.active, &:active { + color: var(--tv-NavMenu-popmenu-text-color); background: var(--tv-NavMenu-popmenu-more-item-active-bg-color); } > span, > a { - color: var(--tv-NavMenu-popmenu-text-color); + color: var(--tv-NavMenu-popmenu-text-color-normal); white-space: normal; word-break: break-all; text-decoration: none; @@ -295,7 +300,6 @@ &.selected { color: var(--tv-NavMenu-popmenu-selected-text-color); - font-weight: var(--tv-NavMenu-popmenu-selected-font-weight); position: relative; &:after { @@ -309,6 +313,15 @@ z-index: 1; } } + + &:hover { + color: var(--tv-NavMenu-popmenu-text-color); + } + + &.active, + &:active { + color: var(--tv-NavMenu-popmenu-text-color); + } } &.only-secondary-title { diff --git a/packages/theme/src/nav-menu/vars.less b/packages/theme/src/nav-menu/vars.less index 14cd0cbc1d..ad15dbffec 100644 --- a/packages/theme/src/nav-menu/vars.less +++ b/packages/theme/src/nav-menu/vars.less @@ -32,21 +32,26 @@ // 导航菜单栏项选中下划线背景色 --tv-NavMenu-item-selected-underline-bg-color: var(--tv-color-bg-primary); // 导航菜单菜单栏下拉框阴影 - --tv-NavMenu-popmenu-box-shadow: var(--tv-shadow-2-down); + --tv-NavMenu-popmenu-box-shadow: var(--tv-shadow-3-down); // 导航菜单菜单栏下拉框选中文本色 --tv-NavMenu-popmenu-selected-text-color: var(--tv-color-text); // 导航菜单菜单栏下拉框选中字重 --tv-NavMenu-popmenu-selected-font-weight: var(--tv-font-weight-bold); // 导航菜单菜单栏下拉框文本色 - --tv-NavMenu-popmenu-text-color: var(--tv-color-text-secondary); + // --tv-NavMenu-popmenu-text-color: var(--tv-color-text-secondary); + --tv-NavMenu-popmenu-text-color: #191919; // 导航菜单更多按钮展示的下拉框右边框色 --tv-NavMenu-popmenu-more-menu-border-color-right: var(--tv-color-border); // 导航菜单更多按钮展示的下拉框高度 --tv-NavMenu-popmenu-more-item-height: 40px; + // 导航菜单栏下拉框文字高度 + --tv-NavMenu-popmenu-text-height: var(--tv-size-height-md); // 导航菜单更多按钮展示的下拉框列表项图标文本色 --tv-NavMenu-popmenu-more-item-icon-color: var(--tv-color-icon); // 导航菜单更多按钮展示的下拉框列表项文本色 --tv-NavMenu-popmenu-more-item-text-color: var(--tv-color-text); + // 导航下拉框列表项二级菜单文本色 + --tv-NavMenu-popmenu-text-color-normal: var(--tv-color-text-secondary); // 导航菜单更多按钮展示的下拉框列表项图标悬浮文本色 --tv-NavMenu-popmenu-more-item-hover-icon-color: var(--tv-color-icon-hover); // 导航菜单更多按钮展示的下拉框列表项 悬浮 文本色 @@ -61,6 +66,8 @@ --tv-NavMenu-popmenu-node-title-font-size: var(--tv-font-size-md); // 导航菜单下拉框标题字号 --tv-NavMenu-popmenu-text-font-size: var(--tv-font-size-sm); + // 导航菜单下拉框圆角 + --tv-NavMenu-popmenu-box-radius: var(--tv-border-radius-md); // 导航菜单下拉框非标题项字号 --tv-NavMenu-popmenu-node-item-font-size: var(--tv-font-size-md); } From d691bff9cd3c78409c356d27940f53d5b93dc05a Mon Sep 17 00:00:00 2001 From: wuyiping0628 <1106773985@qq.com> Date: Mon, 21 Oct 2024 02:27:20 -0700 Subject: [PATCH 2/2] feat(nav-menu): [nav-menu] updata nav-menu xdesign --- packages/theme/src/nav-menu/vars.less | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/theme/src/nav-menu/vars.less b/packages/theme/src/nav-menu/vars.less index ad15dbffec..2fd0f0f326 100644 --- a/packages/theme/src/nav-menu/vars.less +++ b/packages/theme/src/nav-menu/vars.less @@ -38,8 +38,7 @@ // 导航菜单菜单栏下拉框选中字重 --tv-NavMenu-popmenu-selected-font-weight: var(--tv-font-weight-bold); // 导航菜单菜单栏下拉框文本色 - // --tv-NavMenu-popmenu-text-color: var(--tv-color-text-secondary); - --tv-NavMenu-popmenu-text-color: #191919; + --tv-NavMenu-popmenu-text-color: var(--tv-color-text); // 导航菜单更多按钮展示的下拉框右边框色 --tv-NavMenu-popmenu-more-menu-border-color-right: var(--tv-color-border); // 导航菜单更多按钮展示的下拉框高度