TASK-2405 | Fixed navigation flyout styles CSS variables (SAP#2424)

* TASK-2405 | Fixed navigation flyout styles CSS variables Co-authored-by: Uliana Caceres <[email protected]> Co-authored-by: Johannes Doberer <[email protected]>
y-kkamil · Jan 19, 2022 · efca582 · efca582
1 parent 5df5073
commit efca582
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 25 deletions.
diff --git a/core/src/App.html b/core/src/App.html
@@ -2151,10 +2151,6 @@
   :global(.fd-menu) {
     :global(.fd-menu__list) {
       box-shadow: none;
-
-      :global(.fd-menu__item:first-child) {
-        border-bottom: rgba(243, 244, 245, 0.8);
-      }
     }
   }
 

diff --git a/core/src/navigation/ContextSwitcherNav.svelte b/core/src/navigation/ContextSwitcherNav.svelte
@@ -113,16 +113,16 @@
   }
 
   .fd-menu__list {
-    &--bottom {
-      border-top: 1px solid #eeeeef;
-      border-top-left-radius: 0;
-      border-top-right-radius: 0;
-    }
-    &--top {
-      border-bottom: 1px solid #eeeeef;
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
-    }
+     &--bottom {
+        border-top: var(--sapList_BorderWidth, 0.0625rem) solid var(--sapList_BorderColor, #e4e4e4);
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+     }
+     &--top {
+        border-bottom: var(--sapList_BorderWidth, 0.0625rem) solid var(--sapList_BorderColor, #e4e4e4);
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+     }
   }
 
   :global(.lui-contextswitcher-indicator) {

diff --git a/core/src/navigation/LeftNav.html b/core/src/navigation/LeftNav.html
@@ -1009,12 +1009,13 @@
 
     .lui-flyout-sublist__wrapper {
       position: relative;
-      @include border-radius(4px);
+      border-radius: var(--sapElement_BorderCornerRadius, 0.25rem);
       @include box-shadow(
-        0 5px 20px 0 var(--fd-color-neutral-3),
-        0 2px 8px 0 var(--fd-color-neutral-2)
+        var(
+          --sapContent_Shadow2,
+          (0 0 0 0.0625rem rgba(0, 0, 0, 0.42), 0 0.625rem 1.275rem 0 rgba(0, 0, 0, 0.3))
+        )
       );
-      border: 1px solid var(--fd-color-neutral-3);
       opacity: 0;
       animation-name: flyoutAnimation;
       animation-duration: 0.3s;
@@ -1055,20 +1056,22 @@
 
       &:before {
         left: -14px;
-        border-right-color: var(--fd-color-neutral-3);
+        border-right-color: var(--sapContent_ForegroundBorderColor, #89919a);
       }
 
       &:after {
         left: -13px;
-        border-right-color: white;
+        border-right-color: var(--sapGroup_ContentBackground, #fff);
       }
-    }
 
-    li {
-      border-top: 1px solid var(--fd-color-neutral-2);
+      & > *:first-child {
+        border-top-right-radius: var(--sapElement_BorderCornerRadius, 0.25rem);
+        border-top-left-radius: var(--sapElement_BorderCornerRadius, 0.25rem);
+      }
 
-      &:first-child {
-        border: none;
+      & > *:last-child {
+        border-bottom-right-radius: var(--sapElement_BorderCornerRadius, 0.25rem);
+        border-bottom-left-radius: var(--sapElement_BorderCornerRadius, 0.25rem);
       }
     }