Css-fix: tabNav + breadcrumb (#3152)

SAP · Feb 10, 2023 · 025c5ed · 025c5ed
1 parent 64ff0f2
commit 025c5ed
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 16 deletions.
diff --git a/core/src/App.svelte b/core/src/App.svelte
@@ -2056,6 +2056,7 @@
     --luigi__multi-app-dropdown--width: 60vw;
     --luigi__breadcrumb--height: 2.75rem;
     --luigi__shellbar--height: 2.75rem;
+    --luigi__horizontal-nav--height: 2.75rem;
   }
 
   :global(html) {
@@ -2073,27 +2074,28 @@
   }
 
   :global(.fioriScrollbars) {
-    scrollbar-color: var(--sapScrollBar_FaceColor) var(--sapScrollBar_TrackColor);
+    scrollbar-color: var(--sapScrollBar_FaceColor)
+      var(--sapScrollBar_TrackColor);
     & :global(::-webkit-scrollbar:horizontal) {
-        height: var(--sapScrollBar_Dimension);
+      height: var(--sapScrollBar_Dimension);
     }
     & :global(::-webkit-scrollbar:vertical) {
-        width: var(--sapScrollBar_Dimension);
+      width: var(--sapScrollBar_Dimension);
     }
     & :global(::-webkit-scrollbar) {
-        background-color: var(--sapScrollBar_TrackColor);
+      background-color: var(--sapScrollBar_TrackColor);
     }
     & :global(::-webkit-scrollbar-thumb) {
-        background-color: var(--sapScrollBar_FaceColor);
+      background-color: var(--sapScrollBar_FaceColor);
     }
     & :global(::-webkit-scrollbar-thumb:hover) {
-        background-color: var(--sapScrollBar_Hover_FaceColor);
+      background-color: var(--sapScrollBar_Hover_FaceColor);
     }
     & :global(::-webkit-scrollbar-corner) {
-        background-color: var(--sapScrollBar_TrackColor);
+      background-color: var(--sapScrollBar_TrackColor);
     }
     & :global(::-webkit-scrollbar-thumb) {
-        border-radius: var(--sapElement_BorderCornerRadius);
+      border-radius: var(--sapElement_BorderCornerRadius);
     }
   }
 
@@ -2134,6 +2136,17 @@
     top: calc(#{$topNavHeight} + var(--luigi__breadcrumb--height));
   }
 
+  :global(.lui-breadcrumb #tabsContainer) {
+    top: calc(
+      var(--luigi__shellbar--height) + var(--luigi__breadcrumb--height)
+    );
+  }
+  :global(.lui-breadcrumb .iframeContainer.iframeContainerTabNav) {
+    top: calc(
+      var(--luigi__shellbar--height) + var(--luigi__breadcrumb--height) +
+        var(--luigi__horizontal-nav--height)
+    );
+  }
   .iframeContainer,
   .spinnerContainer {
     position: absolute;
@@ -2173,16 +2186,12 @@
     height: 100%;
   }
 
-  :global(.lui-breadcrumb) .iframeContainerTabNav {
+  .iframeContainerTabNav {
     top: calc(
-      #{$topNavHeight} + #{$topNavHeightTab} + var(--luigi__breadcrumb--height)
+      var(--luigi__shellbar--height) + var(--luigi__horizontal-nav--height)
     );
   }
 
-  .iframeContainerTabNav {
-    top: calc(#{$topNavHeight} + #{$topNavHeightTab});
-  }
-
   .iframeContainer:focus {
     outline: none;
   }

diff --git a/core/src/styles/_variables.scss b/core/src/styles/_variables.scss
@@ -2,8 +2,7 @@ $mobileMinWidth: 375px;
 $desktopMinWidth: 600px;
 $desktopMaxWidth: 900px;
 $topNavHeight: var(--luigi__shellbar--height);
-$topNavHeightTab: 2.75rem;
 $leftNavWidthCollapsed: 2.75rem;
 $zindex-dialog-box: 1000;
 $globalNavWidth: 69px;
-$navHeaderHeight: 3.25rem;
+$navHeaderHeight: 3.25rem;