feat(nav-menu): [nav-menu] updata nav-menu xdesign (#2335)

* feat(nav-menu): [nav-menu] updata nav-menu xdesign * feat(nav-menu): [nav-menu] updata nav-menu xdesign
opentiny · Oct 21, 2024 · 58b551e · 58b551e
1 parent 4b8be67
commit 58b551e
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 11 deletions.
diff --git 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
@@ -32,21 +32,25 @@
   // 导航菜单栏项选中下划线背景色
   --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);
   // 导航菜单更多按钮展示的下拉框右边框色
   --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 +65,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);
 }