diff --git a/docs/pages/components/side-navigation.md b/docs/pages/components/side-navigation.md
index a67b0fcfb..2f72d1d07 100644
--- a/docs/pages/components/side-navigation.md
+++ b/docs/pages/components/side-navigation.md
@@ -25,7 +25,7 @@ The left navigation can always display or expand/collapse using the menu icon wi
- Link Item
+ Link Item
@@ -65,12 +65,12 @@ Use this to group navigation. Titles are not clickable.
-
- icon link
+ icon link
-
- item link
+ item link
-
@@ -141,7 +141,7 @@ Use this when there is more than one level of hierarchy in the left navigation.
-
- item link
+ item link
diff --git a/scss/components/side-nav.scss b/scss/components/side-nav.scss
index 61dcbac5c..0dfcb8750 100644
--- a/scss/components/side-nav.scss
+++ b/scss/components/side-nav.scss
@@ -25,7 +25,7 @@ $block: #{$fd-namespace}-side-nav;
$fd-side-nav-hover-background-color: fd-color("neutral", 1);
$fd-side-nav-link-color: fd-color("text", 2);
$fd-side-nav-max-width: 249px;
- $fd-side-nav-link-padding: fd-space(2.5) fd-space(5);
+ $fd-side-nav-link-padding: fd-space(2.5) fd-space(8.75) fd-space(2.5) fd-space(5);
$fd-side-nav-title-padding: fd-space(2) fd-space(5);
$fd-side-nav-icon-right-padding: fd-space(2.5);
$fd-side-nav-link-disabled-color: fd-color("text", 3);
@@ -74,12 +74,13 @@ $block: #{$fd-namespace}-side-nav;
&__link,
&__sublink {
+ display: flex;
padding: $fd-side-nav-link-padding;
color: $fd-side-nav-link-color;
- display: block;
@include fd-type("0", "normal");
//STATES *******************************************
+
&:hover {
background-color: $fd-side-nav-hover-background-color;
}
@@ -100,12 +101,11 @@ $block: #{$fd-namespace}-side-nav;
}
&__link {
-
//STATES *******************************************
&.has-child {
background-image: url(#{$fd-down-arrow-icon});
background-repeat: no-repeat;
- background-position: calc(100% - #{$fd-forms-select-width--background-image}) center;
+ background-position: right 14px top 15px;
}
&.is-expanded,
@@ -124,12 +124,38 @@ $block: #{$fd-namespace}-side-nav;
&__icon {
padding-right: $fd-side-nav-icon-right-padding;
+ margin-top: -1px;
+
+ &.sap-icon--s {
+ margin-top: 0;
+ }
+
+ &.sap-icon--m {
+ margin-top: 0;
+ }
+
+ &.sap-icon--l {
+ margin-top: -2px;
+ }
+
+ &.sap-icon--xl {
+ margin-top: -4px;
+ }
}
&--icons {
min-width: auto;
- .#{$block}__icon {
- padding-right: 0;
+
+ .#{$block} {
+ &__link,
+ &__sublink {
+ padding: fd-space(2.5) fd-space(5);
+ justify-content: center;
+ }
+
+ &__icon {
+ padding-right: 0;
+ }
}
}
}
diff --git a/test/visual-regression-tests/resources/reference_images/visual_regression_fundamental_side-nav_6_example-containerfd-side-nav__n6_0_desktop.png b/test/visual-regression-tests/resources/reference_images/visual_regression_fundamental_side-nav_6_example-containerfd-side-nav__n6_0_desktop.png
index a8e3e72a2..944587eb5 100644
Binary files a/test/visual-regression-tests/resources/reference_images/visual_regression_fundamental_side-nav_6_example-containerfd-side-nav__n6_0_desktop.png and b/test/visual-regression-tests/resources/reference_images/visual_regression_fundamental_side-nav_6_example-containerfd-side-nav__n6_0_desktop.png differ
diff --git a/test/visual-regression-tests/resources/reference_images/visual_regression_fundamental_side-nav_7_example-containerfd-side-nav__n7_0_desktop.png b/test/visual-regression-tests/resources/reference_images/visual_regression_fundamental_side-nav_7_example-containerfd-side-nav__n7_0_desktop.png
index 59059449f..dcb8a4e83 100644
Binary files a/test/visual-regression-tests/resources/reference_images/visual_regression_fundamental_side-nav_7_example-containerfd-side-nav__n7_0_desktop.png and b/test/visual-regression-tests/resources/reference_images/visual_regression_fundamental_side-nav_7_example-containerfd-side-nav__n7_0_desktop.png differ
diff --git a/test/visual-regression-tests/resources/reference_images/visual_regression_fundamental_side-nav_8_example-containerfd-side-nav__n8_0_desktop.png b/test/visual-regression-tests/resources/reference_images/visual_regression_fundamental_side-nav_8_example-containerfd-side-nav__n8_0_desktop.png
index 7d123f0cc..f19853947 100644
Binary files a/test/visual-regression-tests/resources/reference_images/visual_regression_fundamental_side-nav_8_example-containerfd-side-nav__n8_0_desktop.png and b/test/visual-regression-tests/resources/reference_images/visual_regression_fundamental_side-nav_8_example-containerfd-side-nav__n8_0_desktop.png differ
diff --git a/test/visual-regression-tests/resources/reference_images/visual_regression_fundamental_side-nav_9_example-containerfd-side-nav__n9_0_desktop.png b/test/visual-regression-tests/resources/reference_images/visual_regression_fundamental_side-nav_9_example-containerfd-side-nav__n9_0_desktop.png
index e2adab82b..9ac228c09 100644
Binary files a/test/visual-regression-tests/resources/reference_images/visual_regression_fundamental_side-nav_9_example-containerfd-side-nav__n9_0_desktop.png and b/test/visual-regression-tests/resources/reference_images/visual_regression_fundamental_side-nav_9_example-containerfd-side-nav__n9_0_desktop.png differ