Skip to content

Commit 7d98c6e

Browse files
authored
chore(ui5-side-navigation): remove flashing on hover (#12173)
Transition was causing flashing on hovering items in collapsed side navigation
1 parent 7a966ef commit 7d98c6e

File tree

3 files changed

+7
-3
lines changed

3 files changed

+7
-3
lines changed

packages/fiori/src/themes/SideNavigationItemBase.css

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,10 @@
3434
display: none;
3535
}
3636

37+
:host([side-nav-collapsed]) .ui5-sn-item {
38+
transition: none;
39+
}
40+
3741
:host([design="Action"]) {
3842
color: var(--sapButton_TextColor);
3943
}
@@ -235,7 +239,7 @@ and there is an additional border that appears on hover. */
235239
padding-inline-start: 0.25rem;
236240
}
237241

238-
:host([unselectable]:not([side-nav-collapsed])) .ui5-sn-item-toggle-icon::part(root),
242+
:host([unselectable]:not([side-nav-collapsed])) .ui5-sn-item-toggle-icon::part(root),
239243
:host(:not([side-nav-collapsed])) .ui5-sn-item-group .ui5-sn-item-toggle-icon::part(root),
240244
:host([unselectable][side-nav-collapsed]) .ui5-sn-item:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):hover .ui5-sn-item-toggle-icon,
241245
:host([unselectable][side-nav-collapsed]) .ui5-sn-item:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):focus .ui5-sn-item-toggle-icon {

packages/fiori/src/themes/sap_horizon/SideNavigation-parameters.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
--_ui5_side_navigation_group_icon_width: 2.5rem;
3434
--_ui5_side_navigation_icon_padding_inline_end: 0.5rem;
3535
--_ui5_side_navigation_group_padding: 1rem;
36-
--_ui5_side_navigation_padding-flexible: 0.5rem 0.5rem 0 0.5rem;
36+
--_ui5_side_navigation_padding-flexible: 0.5rem 0.5rem 0 0.5rem;
3737
--_ui5_side_navigation_padding-fixed: 0 0.5rem 0.5rem 0.5rem;
3838
--_ui5_side_navigation_popup_padding: 0.5rem;
3939
--_ui5_side_navigation_popup_title_line_height: 1.5rem;

packages/fiori/src/themes/sap_horizon_dark/SideNavigation-parameters.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
--_ui5_side_navigation_group_icon_width: 2.5rem;
3434
--_ui5_side_navigation_icon_padding_inline_end: 0.5rem;
3535
--_ui5_side_navigation_group_padding: 1rem;
36-
--_ui5_side_navigation_padding-flexible: 0.5rem 0.5rem 0 0.5rem;
36+
--_ui5_side_navigation_padding-flexible: 0.5rem 0.5rem 0 0.5rem;
3737
--_ui5_side_navigation_padding-fixed: 0 0.5rem 0.5rem 0.5rem;
3838
--_ui5_side_navigation_popup_padding: 0.5rem;
3939
--_ui5_side_navigation_popup_title_line_height: 1.5rem;

0 commit comments

Comments
 (0)