Skip to content

Commit

Permalink
feat(styles): horizontal nav update (#5050)
Browse files Browse the repository at this point in the history 
* feat(styles): horizontal nav update [ci visual]

* fix(styles): pr comments [ci visual]
  • Loading branch information
@N1XUS
N1XUS authored Dec 15, 2023
1 parent 95a15ef commit 5e5d6a4
Show file tree
Hide file tree
Showing 5 changed files with 382 additions and 205 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -169,4 +169,4 @@
"fast-deep-equal": "^3.1.3",
"jsdom": "^20.0.1"
}
}
}
51 changes: 27 additions & 24 deletions packages/styles/src/navigation.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ $navItemChild: #{$block}__item--child;
$navItemGroup: #{$block}__item--group;
$navItemOverflow: #{$block}__item--overflow;
$navItemWithExpander: #{$block}__item--with-expander;
$navItemSubmenuChild: #{$block}__item--submenu-child;

// Nav List
$navList: #{$block}__list;
Expand Down Expand Up @@ -61,8 +62,9 @@ $navListContainerSubmenu: #{$block}__list-container--submenu;
--fdNavigation_Link_Font_Weight: bold;
--fdNavigation_Link_Spacing: 0.4375rem;
--fdNavigation_Link_Text_Color: inherit;
--fdNavigation_Link_Padding_Left: 0.5rem;
--fdNavigation_Link_Padding_Right: 0.5rem;
--fdNavigation_Link_Shift_Left: 0.5rem;
--fdNavigation_Link_Padding_Left: var(--fdNavigation_Link_Shift_Left);
--fdNavigation_Link_Padding_Right: var(--fdNavigation_Link_Shift_Left);
--fdNavigation_Link_Child_Indicator_Opacity: 1;
--fdNavigation_Link_Font_Size: var(--sapFontSize);
--fdNavigation_Link_Selection_Indicator_Size: 0.5rem;
Expand Down Expand Up @@ -438,21 +440,15 @@ $navListContainerSubmenu: #{$block}__list-container--submenu;

&--phone,
&--tablet {
.#{$navLink} {
--fdNavigation_Link_Min_Height: 2.5rem;
--fdNavigation_Link_Padding_Left: 0.6875rem;
--fdNavigation_Link_Padding_Right: 0.6875rem;
}
--fdNavigation_Link_Icon_Size: 1.125rem;
--fdNavigation_Link_Min_Height: 2.5rem;
--fdNavigation_Link_Shift_Left: 0.6875rem;

.#{$navContainerTop},
.#{$navContainerBottom} {
--fdNavigation_Padding_X: 0.5rem;
}

.#{$navIcon} {
--fdNavigation_Link_Icon_Size: 1.125rem;
}

@include _fd-vertical-nav-with-expander() {
.#{$navLink} {
--fdNavigation_Link_Padding_Right: 2.375rem;
Expand Down Expand Up @@ -635,10 +631,6 @@ $navListContainerSubmenu: #{$block}__list-container--submenu;
pointer-events: none;
opacity: var(--sapContent_DisabledOpacity);
}

@include fd-compact-and-condensed() {
--fdNavigation_Link_Min_Height: 2rem;
}
}

&__item {
Expand Down Expand Up @@ -692,7 +684,7 @@ $navListContainerSubmenu: #{$block}__list-container--submenu;
.#{$navLink} {
--fdNavigation_Link_Spacing: 0.5rem;
--fdNavigation_Link_Font_Weight: normal;
--fdNavigation_Link_Padding_Left: 2rem;
--fdNavigation_Link_Padding_Left: calc(var(--fdNavigation_Link_Icon_Size) + var(--fdNavigation_Link_Spacing) + var(--fdNavigation_Link_Shift_Left));
}
}

Expand Down Expand Up @@ -744,7 +736,7 @@ $navListContainerSubmenu: #{$block}__list-container--submenu;

&.#{$navItemChild} {
.#{$navLink} {
--fdNavigation_Link_Padding_Left: 0.5rem;
--fdNavigation_Link_Padding_Left: var(--fdNavigation_Link_Shift_Left);
}
}
}
Expand Down Expand Up @@ -957,7 +949,7 @@ $navListContainerSubmenu: #{$block}__list-container--submenu;
}
}

.#{$navListContainer} {
.#{$navListContainer}:not(.#{$navListContainerSubmenu}) {
--fdPopover_Offset: calc(100% + 0.3875rem);

border: none;
Expand All @@ -979,7 +971,7 @@ $navListContainerSubmenu: #{$block}__list-container--submenu;
}

.#{$navList} {
--fdNavigation_Item_Spacing: 0;
--fdNavigation_Item_Spacing: 0.25rem;

box-shadow: none;
}
Expand All @@ -994,6 +986,11 @@ $navListContainerSubmenu: #{$block}__list-container--submenu;
}
}
}
&.#{$navItemOverflow} {
.#{$navChildrenIndicator} {
display: none;
}
}
}

.#{$navListItem} > .#{$navItem}:not(.#{$navItemChild}) {
Expand Down Expand Up @@ -1024,7 +1021,7 @@ $navListContainerSubmenu: #{$block}__list-container--submenu;
}

.#{$navItem} {
&:not(.#{$navItemWithExpander}) {
&:not(.#{$navItemWithExpander}):not(.#{$navItemOverflow}) {
@include fd-expanded() {
.#{$navLink} {
--fdNavigation_Link_Child_Indicator_Opacity: 1;
Expand All @@ -1042,8 +1039,8 @@ $navListContainerSubmenu: #{$block}__list-container--submenu;

@include fd-selected() {
.#{$navLink} {
--fdNavigation_Link_Selection_Indicator_Display: inline-block;
--fdNavigation_Link_Background: var(--sapNavigation_Selected_Background);
--fdNavigation_Link_Selection_Indicator_Display: none;
--fdNavigation_Link_Background: var(--fdNavigation_Item_Selected_Background);
--fdNavigation_Link_Border_Color: var(--fdNavigation_Link_Border_Color_Selected);
--fdNavigation_Link_Border_Bottom_Color: var(--fdNavigation_Link_Border_Color_Selected);
}
Expand All @@ -1053,8 +1050,10 @@ $navListContainerSubmenu: #{$block}__list-container--submenu;
}

.#{$navItemChild} {
.#{$navLink} {
--fdNavigation_Link_Padding_Left: 0.5rem;
&:not(.#{$navItemSubmenuChild}) {
.#{$navLink} {
--fdNavigation_Link_Padding_Left: var(--fdNavigation_Link_Shift_Left);
}
}
}

Expand Down Expand Up @@ -1096,4 +1095,8 @@ $navListContainerSubmenu: #{$block}__list-container--submenu;
}
}
}

@include fd-compact-and-condensed() {
--fdNavigation_Link_Min_Height: 2rem;
}
}
8 changes: 4 additions & 4 deletions ...ages/styles/stories/BTP/Navigation/horizontal/navigation-horizontal-expander.example.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -420,7 +420,7 @@
</a>
</div>
<div
class="fd-navigation__list-container fd-navigation__list-container--submenu fd-menu__sublist"
class="fd-navigation__list-container fd-navigation__list-container--submenu"
aria-hidden="false"
>
<div class="fd-navigation__list-wrapper">
Expand All @@ -433,7 +433,7 @@
>
<li class="fd-navigation__list-item" aria-hidden="true">
<div
class="fd-navigation__item fd-navigation__item--child"
class="fd-navigation__item fd-navigation__item--child fd-navigation__item--submenu-child"
aria-labelledby="txt-child-1"
role="menuitem"
aria-posinset="1"
Expand All @@ -451,7 +451,7 @@
</li>
<li class="fd-navigation__list-item" aria-hidden="true">
<div
class="fd-navigation__item fd-navigation__item--child"
class="fd-navigation__item fd-navigation__item--child fd-navigation__item--submenu-child"
aria-labelledby="txt-child-2"
role="menuitem"
aria-posinset="2"
Expand All @@ -469,7 +469,7 @@
</li>
<li class="fd-navigation__list-item" aria-hidden="true">
<div
class="fd-navigation__item fd-navigation__item--child"
class="fd-navigation__item fd-navigation__item--child fd-navigation__item--submenu-child"
aria-labelledby="txt-child-3"
role="menuitem"
aria-posinset="3"
Expand Down
Loading

0 comments on commit 5e5d6a4

Please sign in to comment.