Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(ui5-side-navigation): visual design enhancements #10839

Merged
merged 6 commits into from
Feb 21, 2025
+117 −26
Merged

feat(ui5-side-navigation): visual design enhancements #10839

Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
ac3fa67
feat(ui5-side-navigation): visual design enhancements
LidiyaGeorgieva Feb 12, 2025
224bbc1
chore: address review comments
LidiyaGeorgieva Feb 19, 2025
2dfe1a5
chore: fix Fiori 3 theme
LidiyaGeorgieva Feb 20, 2025
56cf9a2
Merge branch 'main' of https://github.com/SAP/ui5-webcomponents into …
LidiyaGeorgieva Feb 20, 2025
27f5230
chore: fix lint error
LidiyaGeorgieva Feb 20, 2025
d533d45
chore: remove usage of "ui5-sn-item-unselectable" class
LidiyaGeorgieva Feb 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Loading
Loading status checks…
chore: fix Fiori 3 theme
@LidiyaGeorgieva
LidiyaGeorgieva committed Feb 20, 2025

Unverified

This commit is not signed, but one or more authors requires that any commit attributed to them is signed.
Learn about vigilant mode
commit 2dfe1a566150ab1e312c77aff2662c0e65fc4663
12 changes: 8 additions & 4 deletions packages/fiori/src/themes/SideNavigationItemBase.css
View file
Original file line number Diff line number Diff line change
@@ -7,7 +7,7 @@
.ui5-sn-item {
display: flex;
align-items: center;
width: 100%;
width: auto;
box-sizing: border-box;
text-decoration: none;
position: relative;
@@ -78,7 +78,7 @@
}

.ui5-sn-item.ui5-sn-item-group::before,
:host(:not([design="Action"])) .ui5-sn-item.ui5-sn-item-level1::before {
.ui5-sn-item.ui5-sn-item-level1::before {
border: var(--_ui5_side_navigation_group_border_style_color);
border-width: var(--_ui5_side_navigation_group_border_width);
}
@@ -135,7 +135,7 @@ and there is an additional border that appears on hover. */
background: var(--sapList_Active_Background);
}

:host(:not([design="Action"])) .ui5-sn-item::before {
.ui5-sn-item::before {
border: var(--_ui5_side_navigation_item_border_style_color);
border-width: var(--_ui5_side_navigation_item_border_width);
}
@@ -215,11 +215,15 @@ and there is an additional border that appears on hover. */
:host([slot="fixedItems"]:not(side-nav-collapsed)) .ui5-sn-item.ui5-sn-item-level1 {
margin-top: var(--_ui5_side_navigation_first_fixed_item_margin_top); /* space for the focus*/
}

:host([side-nav-collapsed]) .ui5-sn-item-icon {
padding-inline-end: 1rem;
}

:host([design="Action"][side-nav-collapsed]) .ui5-sn-item-icon {
padding-inline-end: calc(1rem - 1px); /* minus the width of the border */
padding-inline-start: calc(1rem - 1px); /* minus the width of the border */
}

:host([side-nav-collapsed]) .ui5-sn-item-text {
display: none;
}
2 changes: 1 addition & 1 deletion packages/fiori/src/themes/base/SideNavigation-parameters.css
View file
Original file line number Diff line number Diff line change
@@ -65,7 +65,7 @@
--_ui5_side_navigation_first_fixed_item_margin_top: 0;

--_ui5_side_navigation_item_expand_icon_visibility: none;
--_ui5_side_navigation_item_collapsed_hover_focus_width: 100%;
--_ui5_side_navigation_item_collapsed_hover_focus_width: auto;
--_ui5_side_navigation_item_collapsed_hover_focus_display: none;
--_ui5_side_navigation_item_collapsed_hover_focus_padding_right: 0;
--_ui5_side_navigation_item_collapsed_padding_right: 0;
Loading