refactor(dropdown/action-menu): [dropdown,action-menu] refactor style…

…s for drodpwn (#2343) * refactor(dropdown): [dropdown] refactor styles for drodpwn * refactor(action-menu): [action-menu] refactor styles for action-menu
opentiny · Oct 22, 2024 · e8b8bab · e8b8bab
1 parent 3175340
commit e8b8bab
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 2 deletions.
diff --git a/packages/theme/src/action-menu/index.less b/packages/theme/src/action-menu/index.less
@@ -37,6 +37,8 @@
       // 默认
       &.@{action-menu-prefix-cls}__item-visable {
         .@{dropdown-item-prefix-cls} {
+          padding: 0;
+
           .@{dropdown-item-prefix-cls}__wrap {
             color: var(--tv-ActionMenu-text-color);
             margin: 0px;
@@ -50,8 +52,12 @@
 
         // 悬浮
         &:not(.is-disabled):hover {
-          .@{dropdown-item-prefix-cls}__wrap {
-            text-decoration: underline;
+          .@{dropdown-item-prefix-cls} {
+            background-color: unset;
+
+            .@{dropdown-item-prefix-cls}__wrap {
+              text-decoration: underline;
+            }
           }
         }
 

diff --git a/packages/theme/src/dropdown/index.less b/packages/theme/src/dropdown/index.less
@@ -74,13 +74,16 @@
     .@{dropdown-prefix-cls}__title-button {
       padding: var(--tv-Dropdown-title-button-padding);
       border-right: none;
+      border-radius: var(--tv-Dropdown-title-button-border-radius);
     }
 
     .@{dropdown-prefix-cls}__caret-button {
       padding-left: var(--tv-Dropdown-caret-button-padding-left);
       position: relative;
       border-left: none;
       min-width: 24px;
+      border-radius: var(--tv-Dropdown-caret-button-border-radius);
+      margin-left: 0;
     }
 
     .@{css-prefix}button {

diff --git a/packages/theme/src/dropdown/vars.less b/packages/theme/src/dropdown/vars.less
@@ -35,6 +35,12 @@
 
   // 按钮组时，下拉按钮的左侧内边距
   --tv-Dropdown-caret-button-padding-left: var(--tv-space-base, 4px);
+  // 按钮组时，左侧按钮圆角
+  --tv-Dropdown-caret-button-border-radius: 0 var(--tv-border-radius-round, 999px) var(--tv-border-radius-round, 999px)
+    0;
+  // 按钮组时，右侧按钮圆角
+  --tv-Dropdown-title-button-border-radius: var(--tv-border-radius-round, 999px) 0 0
+    var(--tv-border-radius-round, 999px);
   // 按钮组时，文本按钮内边距
   --tv-Dropdown-title-button-padding: 0px 0px 0px 24px;
 }