fix(comp:menu): remove border-bototm on horizontal mode (#690)

IDuxFE · Dec 30, 2021 · be02417 · be02417
1 parent 22d45d6
commit be02417
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 10 deletions.
diff --git a/packages/components/menu/style/dark.less b/packages/components/menu/style/dark.less
@@ -65,8 +65,4 @@
       margin: 0 @menu-item-divider-margin;
     }
   }
-
-  &-dark&-horizontal {
-    border-bottom: 0;
-  }
 }
diff --git a/packages/components/menu/style/index.less b/packages/components/menu/style/index.less
@@ -68,15 +68,19 @@
 
   &-horizontal {
     line-height: @menu-item-height;
-    border-bottom: @menu-border-width @menu-border-style @menu-border-color;
 
     .@{menu-prefix}-item,
     .@{menu-prefix}-sub {
       display: inline-block;
       vertical-align: bottom;
+    }
+
+    .@{menu-prefix}-item,
+    .@{menu-prefix}-sub-title {
       margin: 0 @menu-item-padding-left;
+      padding: @menu-item-horizontal-padding;
       border-bottom: @menu-item-border-bottom-width @menu-border-style transparent;
-      transition: border @transition-duration-base @ease-in-out;
+      transition: border @transition-duration-base;
 
       &:hover,
       &-expanded,
@@ -89,9 +93,17 @@
       }
     }
 
-    .@{menu-prefix}-item,
-    .@{menu-prefix}-sub-title {
-      padding: @menu-item-horizontal-padding;
+    .@{menu-prefix}-item:hover,
+    .@{menu-prefix}-item-selected,
+    .@{menu-prefix}-sub-title:hover,
+    .@{menu-prefix}-sub-expanded .@{menu-prefix}-sub-title,
+    .@{menu-prefix}-sub-selected .@{menu-prefix}-sub-title {
+      border-color: @menu-highlight-color;
+    }
+
+    .@{menu-prefix}-item-disabled,
+    .@{menu-prefix}-sub-disabled .@{menu-prefix}-sub-title {
+      border-color: transparent !important;
     }
 
     .@{menu-prefix}-sub-title-suffix {

diff --git a/packages/components/menu/style/menu.less b/packages/components/menu/style/menu.less
@@ -41,7 +41,7 @@
   padding-left: @menu-item-padding-left;
   padding-right: @menu-item-padding-right;
   cursor: pointer;
-  transition: background @transition-duration-slow;
+  transition: background @transition-duration-base, color @transition-duration-base;
   .ellipsis();
 
   &:hover {

diff --git a/packages/components/tag/style/index.less b/packages/components/tag/style/index.less
@@ -44,6 +44,7 @@
   // font-size * line-height + tag border width + tag prefix border width
   @tag-prefix-inner-size: ~`getPrefixSize('@{tag-font-size}', '@{tag-line-height}')`;
   @tag-prefix-size: calc(@tag-prefix-inner-size + 4px);
+
   padding-left: calc(@tag-default-padding-horizontal + @tag-prefix-inner-size / 2 + 2px + @tag-padding);
   position: relative;
   border-radius: @tag-round-border-radius;