diff --git a/core/src/App.svelte b/core/src/App.svelte index 5138f895da..64dff4d3c3 100644 --- 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 index c4ee3e0d67..59c6158896 100644 --- 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; \ No newline at end of file