fix(dropdown): [dropdown] fix icon shaking when hover (#2557)

opentiny · Nov 26, 2024 · b688a3d · b688a3d
1 parent 3e66767
commit b688a3d
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 7 deletions.
diff --git a/packages/theme/src/dropdown/index.less b/packages/theme/src/dropdown/index.less
@@ -26,13 +26,20 @@
   font-size: var(--tv-Dropdown-font-size);
   line-height: var(--tv-Dropdown-line-height);
 
-  span {
-    display: inline-block;
-  }
-
   &__trigger {
+    display: inline-flex;
+    align-items: center;
+
+    .tiny-dropdown__prefix-inner {
+      display: inline-flex;
+      align-items: center;
+      margin-right: var(--tv-Dropdown-icon-margin-x);
+    }
+
     .tiny-dropdown__suffix-inner {
-      margin-left: var(--tv-Dropdown-icon-margin-left);
+      display: inline-flex;
+      align-items: center;
+      margin-left: var(--tv-Dropdown-icon-margin-x);
 
       .@{svg-prefix-cls} {
         fill: var(--tv-Dropdown-icon-color-link);
@@ -69,7 +76,7 @@
 
   /* 按钮组 */
   .@{css-prefix}button-group {
-    display: block;
+    display: inline-flex;
 
     .@{dropdown-prefix-cls}__title-button {
       padding: var(--tv-Dropdown-title-button-padding);

diff --git a/packages/theme/src/dropdown/vars.less b/packages/theme/src/dropdown/vars.less
@@ -15,7 +15,7 @@
   // 触发源的图标尺寸(纯图标按钮）
   --tv-Dropdown-icon-size-only-svg: 24px;
   // 触发源图标的左侧外边距
-  --tv-Dropdown-icon-margin-left: var(--tv-space-base, 4px);
+  --tv-Dropdown-icon-margin-x: var(--tv-space-base, 4px);
 
   // 默认按钮图标颜色
   --tv-Dropdown-icon-color: var(--tv-color-icon, #808080);