@sapui5/sap.ushell 1.113.0 → 1.115.0

package/src/main/js/sap/ushell/themes/base/Dashboard.less

@@ -22,8 +22,6 @@
 /* move dashboard section down a bit, to make room for Anchor Navigation */
 #sapUshellDashboardPage-cont {
   padding-top: 1rem;
-  position: absolute;
-  top: 3rem;
 }
 
 .sapUiMedia-Std-Phone .sapUshellDashboardView{

package/src/main/js/sap/ushell/themes/base/FloatingContainer.less

@@ -15,6 +15,14 @@
 }
 
 @media (max-width: 417px) {
+    .sapUshellFloatingContainerWrapper:has(.sapUshellFloatingContainer:not(.sapUshellShellHidden)) {
+        position: absolute;
+        top: 0 !important;
+        right: 0 !important;
+        left: 0 !important;
+        bottom: 0;
+    }
+
   .sapUshellFloatingContainer {
     position: absolute;
     width: 100%;
@@ -23,13 +31,6 @@
     top: 0;
   }
 
-  .sapUshellShellFloatingContainerWrapper {
-    position: absolute;
-    top: 0 !important;
-    right: 0 !important;
-    left: 0 !important;
-    bottom: 0;
-  }
 }
 
 .sapUshellFloatingContainer-clone {
@@ -37,11 +38,11 @@
   z-index: 9;
 }
 
-.sapUshellShellFloatingContainerWrapper {
+.sapUshellFloatingContainerWrapper {
   z-index: 9;
 }
 
-.sapUshellShellFloatingContainerSelector {
+.sapUshellFloatingContainerSelector {
   user-select: none;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
@@ -49,3 +50,76 @@
   -moz-user-select: none;
   -ms-user-select: none;
 }
+
+.sapUshellFloatingContainerSelector {
+    cursor: pointer;
+}
+
+.sapUshellFloatingContainerWrapper  .sapUshellShellFloatingContainerFullHeight {
+    height: 100% !important;
+    max-height: 100% !important;
+    overflow: hidden;
+}
+
+// ==================================================== Animations ==================================================================
+
+@keyframes sapUshellMinimizeOverlayAnimation {
+    0%  {
+        transform: scale(1);
+        opacity: 1;
+    }
+    100% {
+        transform: scale(0.95);
+        opacity: 0;
+    }
+}
+
+@keyframes sapUshellMaxgOverlayAnimation {
+    0%  {
+        opacity: 0;
+        transform: scale(0.95);
+    }
+    100% {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+.sapUshellContainerDockedMinimizeCoPilot{
+    animation: sapUshellMinimizeOverlayAnimation ease-in-out 150ms 0ms 1 alternate forwards;
+    -webkit-animation: sapUshellMinimizeOverlayAnimation ease-in-out 150ms 0ms 1 alternate forwards;
+    -moz-animation : sapUshellMinimizeOverlayAnimation ease-in-out 150ms 0ms 1 alternate forwards;
+    -ms-animation : sapUshellMinimizeOverlayAnimation ease-in-out 150ms 0ms 1 alternate forwards;
+}
+
+.sapUshellContainerDockedExtendCoPilot{
+    animation: sapUshellMaxgOverlayAnimation ease-in-out 300ms 50ms 1 alternate forwards;
+    -webkit-animation :sapUshellMaxgOverlayAnimation ease-in-out 300ms 50ms 1 alternate forwards;
+    -moz-animation : sapUshellMaxgOverlayAnimation ease-in-out 300ms 50ms 1 alternate forwards;
+    -ms-animation : sapUshellMaxgOverlayAnimation ease-in-out 300ms 500ms 1 alternate forwards;
+}
+
+// ==================================================== Docking Area ==================================================================
+
+.sapUshellShellDisplayDockingAreaLeft{
+    width: @_sap_ushell_CoPilot_DockingWidth;
+    height: 100%;
+    background: fade(@sapUiDragAndDropBackground, 80);
+    opacity: 0.25;
+    position: absolute;
+    z-index: 99;
+    top: 0;
+    border:0.125rem solid @sapUiDragAndDropActiveBorderColor;
+}
+
+.sapUshellShellDisplayDockingAreaRight{
+    right: 0;
+    height: 100%;
+    width: @_sap_ushell_CoPilot_DockingWidth;
+    background: fade(@sapUiDragAndDropBackground, 80);
+    opacity: 0.25;
+    position: absolute;
+    z-index: 99;
+    top: 0;
+    border:0.125rem solid @sapUiDragAndDropActiveBorderColor;
+}

package/src/main/js/sap/ushell/themes/base/MenuBar.less

@@ -0,0 +1,23 @@
+/* ============================================================== */
+/* CSS for "sap.ushell.components.shell.MenuBar.Component" (base) */
+/* ============================================================== */
+
+.sapUshellMenuBarHeight {
+	min-height: 2.75rem;
+	background-color: @sapUiShellColor;
+}
+
+// align the outline of the nav bar personalization button
+// with the outline of the home button
+.sapUshellShellToolHeader {
+    padding-left: 1.75rem
+}
+
+.sapUiMedia-StdExt-LargeDesktop .sapUshellShellToolHeader {
+    padding-left: 2.75rem
+}
+
+.sapUiMedia-Std-Phone .sapUshellShellToolHeader {
+    padding-left: 0.75rem
+}
+

package/src/main/js/sap/ushell/themes/base/SearchCEP.less

@@ -17,7 +17,6 @@
 .sapUshellCEPListDivider:after {
   content : "";
   position: absolute;
-  bottom: 0.3rem;
   left: 0.6rem;
   height  : 1px;
   width   : 96%;
@@ -143,6 +142,7 @@
   text-align: left;
   font-size: .9rem;
   color: @sapLinkColor;
+  margin: 0.3rem 0 0.6rem 0;
 
   &:hover {
     text-decoration: underline;
@@ -154,6 +154,7 @@
   text-align: left;
   font-size: .9rem;
   color: @sapLinkColor;
+  margin: 0.3rem 0 0.6rem 0;
 
   &:hover {
     text-decoration: underline;
@@ -165,6 +166,7 @@
   text-align: left;
   font-size: .9rem;
   color: @sapLinkColor;
+  margin: 0.3rem 0 0.6rem 0;
 
   &:hover {
     text-decoration: underline;
@@ -176,6 +178,7 @@
   text-align: left;
   font-size: .9rem;
   color: @sapLinkColor;
+  margin: 0.3rem 0 0.6rem 0;
 
   &:hover {
     text-decoration: underline;
@@ -187,6 +190,7 @@
   text-align: left;
   font-size: .9rem;
   color: @sapLinkColor;
+  margin: 0.3rem 0 0.6rem 0;
 
   &:hover {
     text-decoration: underline;

package/src/main/js/sap/ushell/themes/base/ShellAppTitle.less

@@ -119,6 +119,10 @@
 /** Styles for Shell Title's Navigation Menu**/
 /** --------------------------------------- **/
 
+#navMenuInnerTitle {
+  width: 18rem;
+}
+
 /** Hierarchy Items - (List Items) Icon Styles **/
 .sapUshellNavigationMenuListItems,
 .sapUshellNavigationMenuTitleItem {
@@ -174,7 +178,6 @@
   border-radius: 0.25rem;
 
   display: flex;
-  flex-shrink: 1;
 }
 
 .sapUshellAppTitleMenuIcon {

package/src/main/js/sap/ushell/themes/base/ShellHeader.less

@@ -6,12 +6,9 @@
   @item-height: 2.25rem; /* all items in the header have the same height: 36px */
 
   .sapUshellShellHeader {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
     display: flex;
     overflow: hidden;
+    isolation: isolate; /* Fix for issue with stacking context in FF 47 used in Selenium tests */
     z-index: 3;
     opacity: 1;
     padding: 0 1.75rem; /* 28px + 4px of the headbegin/headend === 32px according to the specification */
@@ -93,16 +90,6 @@
     }
   }
 
-  .sapUshellShellHead.sapUshellContainerDocked {
-    &.sapUshellHead-Narrow-Right .sapUshellShellHeader {
-      right: @_sap_ushell_CoPilot_DockingWidth;
-    }
-
-    &.sapUshellHead-Narrow-Left .sapUshellShellHeader {
-      left: @_sap_ushell_CoPilot_DockingWidth;
-    }
-  }
-
   .sapUshellShellSearchHidden {
     display: none;
   }
@@ -135,13 +122,8 @@
   /* --- Title and Subtitle --- */
 
   .sapUshellHeadTitle {
-    display: flex;
     overflow: hidden;
-    font-weight: inherit;
-    margin-left: 0rem;
-    margin-top: 0rem;
-    margin-bottom: 0rem;
-    flex-shrink: 1;
+    margin: 0;
   }
 
   .sapUshellShellHeadTitle {

package/src/main/js/sap/ushell/themes/base/ShellLayout.less

@@ -1,220 +1,168 @@
-/* ======================================================== */
-/* CSS for control "sap.ushell.ui.shell.ShellLayout" (base) */
-/* ======================================================== */
+/* =================================== */
+/* CSS for the layout of the ShellView */
+/* =================================== */
 
-#shellPage {
-	overflow: hidden;
-	#shellPage-cont {overflow: hidden !important;}
+// ==================================================== Generic Styles ==================================================================
+
+.sapUshellFlexGrowShrink {
+    flex: 1 1;
+    min-width: 0;
+    min-height: 0;
 }
-html #canvas.sapUshellContainer-Narrow-Right {
-	user-select: none;
-	-webkit-touch-callout: none; /* iOS Safari */
-	-webkit-user-select: none; /* Chrome/Safari/Opera */
-	-khtml-user-select: none; /* Konqueror */
-	-moz-user-select: none; /* Firefox */
-	-ms-user-select: none; /* Internet Explorer/Edge */
+
+.sapUshellFlexRow {
+    display: flex;
+    flex-direction: row;
 }
 
-#canvas.sapUshellContainerDocked {
-	 &.sapUshellContainer-Narrow-Right {
-		 .sapUshellShellCntnt  {
-			 right: @_sap_ushell_CoPilot_DockingWidth;
-		 }
-	 }
-	&.sapUshellContainer-Narrow-Left {
-		.sapUshellShellCntnt  {
-			left: @_sap_ushell_CoPilot_DockingWidth;
-		}
-	}
-}
-
-#shell-floatingContainer .sapUshellShellFloatingContainerSelector{
-	cursor: pointer;
-}
-
-.sapUshellFloatingContainer .top{
-	top:0;
-}
-
-@keyframes sapUshellMinimizeOverlayAnimation {
-	0%  {
-		transform: scale(1);
-		opacity: 1;
-	}
-	100% {
-		transform: scale(0.95);
-		opacity: 0;
-	}
-}
-
-@keyframes sapUshellMaxgOverlayAnimation {
-	0%  {
-		opacity: 0;
-		transform: scale(0.95);
-	}
-	100% {
-		opacity: 1;
-		transform: scale(1);
-	}
-}
-
-.sapUshellContainerDockedMinimizeCoPilot{
-	animation: sapUshellMinimizeOverlayAnimation ease-in-out 150ms 0ms 1 alternate forwards;
-	-webkit-animation: sapUshellMinimizeOverlayAnimation ease-in-out 150ms 0ms 1 alternate forwards;
-	-moz-animation : sapUshellMinimizeOverlayAnimation ease-in-out 150ms 0ms 1 alternate forwards;
-	-ms-animation : sapUshellMinimizeOverlayAnimation ease-in-out 150ms 0ms 1 alternate forwards;
-}
-
-.sapUshellContainerDockedExtendCoPilot{
-	animation: sapUshellMaxgOverlayAnimation ease-in-out 300ms 50ms 1 alternate forwards;
-	-webkit-animation :sapUshellMaxgOverlayAnimation ease-in-out 300ms 50ms 1 alternate forwards;
-	-moz-animation : sapUshellMaxgOverlayAnimation ease-in-out 300ms 50ms 1 alternate forwards;
-	-ms-animation : sapUshellMaxgOverlayAnimation ease-in-out 300ms 50ms 1 alternate forwards;
-
-}
-
-html #canvas.sapUshellContainer-Narrow-Left {
-	user-select: none;
-	-webkit-touch-callout: none; /* iOS Safari */
-	-webkit-user-select: none; /* Chrome/Safari/Opera */
-	-khtml-user-select: none; /* Konqueror */
-	-moz-user-select: none; /* Firefox */
-	-ms-user-select: none; /* Internet Explorer/Edge */
-}
-
-
-.sapUshellShellFloatingContainerWrapper  .sapUshellShellFloatingContainerFullHeight{
-	 height: 100% !important;
-	 max-height: 100% !important;
-	overflow: hidden;
-	position: relative;
- }
-
-.sapUshellMoveCanvasRight{
-	position: absolute;
-	right:26rem;
-	left:0;
-}
-
-.sapUshellMoveCanvasLeft{
-	position: absolute;
-	right:0;
-	left:26rem;
-}
-
-.sapUshellShellDisplayDockingAreaLeft{
-	width: @_sap_ushell_CoPilot_DockingWidth;
-	height: 100%;
-	background: fade(@sapUiDragAndDropBackground, 80);
-	opacity: 0.25;
-	position: absolute;
-	z-index: 99;
-	top: 0;
-	border:0.125rem solid @sapUiDragAndDropActiveBorderColor;
+.sapUshellFlexRow > * {
+    height: 100%;
 }
 
-.sapUshellShellDisplayDockingAreaRight{
-	//margin-left: 78%;
-	right: 0;
-	height: 100%;
-	width: @_sap_ushell_CoPilot_DockingWidth;
-	background: fade(@sapUiDragAndDropBackground, 80);
-	opacity: 0.25;
-	position: absolute;
-	z-index: 99;
-	top: 0;
-	border:0.125rem solid @sapUiDragAndDropActiveBorderColor;
+.sapUshellFlexColumn {
+    display: flex;
+    flex-direction: column;
 }
-#ContentPage{
-	background: white;
+
+.sapUshellFlexColumn > * {
+    width: 100%;
 }
 
-.sapUshellSamlDialogHidden {
-	visibility: hidden !important;
+.sapUshellPositionRelative {
+    position: relative;
 }
 
-#SAMLDialog #SAMLDialog-scrollCont {
-	position: absolute;
-	top: 0;
-	left: 0;
-	right: 0;
-	bottom: 0;
+.sapUshellPositionStatic {
+    position: static;
 }
 
-#SAMLDialogFrame {
-	min-height:100%;
-	width:100%;
-	position: absolute;
+.sapUshellOverflowHidden {
+    overflow: hidden;
+}
+
+.sapUshellShellHidden {
+    display: none !important;
+}
+
+// ==================================================== UI Areas ==================================================================
+
+body {
+    // todo legacy overwrite check if still necessary (I776cdd3db089739d6b8aa7f8f775c7fbd2053efe)
+    .sapMBar.sapMPageHeader:before, .sapMShellBrandingBar {
+        display: none;
+    }
+}
+
+#shellLayout {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+}
+
+.sapUshellRenderer {
+    display: flex;
+    flex-direction: column;
 }
 
 .sapUshellShellBG {
-	position: absolute;
-	top: 0;
-	bottom: 0;
-	left: 0;
-	right: 0;
-	width: 100%;
-	height: 100%;
-	z-index: 0;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 0;
 }
 
-/* Basics */
+#header-shellArea {
+    position: relative;
+}
 
-.sapUshellShellCntnt {
-	overflow: hidden;
-	position: absolute;
-	top: 0;
-	bottom: 0;
-	left: 0;
-	right: 0;
-	isolation: isolate; /* Fix for issue with stacking context in FF 47 used in Selenium tests */
+#shapes-shellArea, #backgroundImage-shellArea {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: -1;
 }
 
-.sapUshellShellFooterVisible > .sapUshellShellCntnt {
-	bottom: 3rem;
+#rightFloatingContainer-shellArea {
+    position: absolute;
+    height: unset;
+    top: 0;
+    right: 0;
 }
 
-.sapUiSizeCompact .sapUshellShellFooterVisible > .sapUshellShellCntnt {
-	bottom: 2.5rem;
+#floatingActions-shellArea {
+    position: absolute;
+    height: unset;
+    bottom: 0;
+    right: 0;
 }
 
-.sapUshellShellHidden {
-	display: none !important;
+.sapUshellFloatingContainerDock {
+    flex: 0 0;
+    z-index: 2; // border of left dock has to be on top of center elements and helpContent
+}
+
+.sapUshellFloatingContainerDock > .sapUshellFloatingContainerWrapper {
+    position: static !important; // overwrite element styles
+    .sapUshellFloatingContainer  {
+    position: relative;
+    }
 }
 
-.sapUshellMenuBarHeight {
-	min-height: 2.75rem;
-	background-color: @sapUiShellColor;
+#helpContent-shellArea {
+    flex: 0 0;
+    position: relative;
+    z-index: 1; // border of left dock has to be on top of center elements, but below the FloatingContainer
 }
 
-/* Canvas */
+// ==================================================== Search Overlay ==================================================================
 
-.sapUshellShellCanvas {
-	top: @_sap_ushell_ShellHeader_BarHeight;
+.sapUshellShellShowSearchOverlay #header-shellArea {
+    z-index: 10;
 }
 
-.sapUshellShell.sapUshellShellNoHead > .sapUshellShellCanvas {
-	top: 0;
+body.sapUshellShellShowSearchOverlay:after {
+    content: "";
+    display: block;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    background: fade(@sapUiBlockLayerBackground, 40);
+    opacity: 0.4;
+    z-index: 9;
 }
 
-.sapUshellShell {
-	overflow: hidden;
-	width: 100%;
-	height: 100%;
-	.sapMBar.sapMPageHeader:before, .sapMShellBrandingBar {
-		display: none;
-	}
+// ==================================================== LogonFrameProvider ==================================================================
+
+.sapUshellSamlDialogHidden {
+    visibility: hidden !important;
 }
 
-#shell.sapUshellShellShowSearchOverlay:after {
-	content: "";
-	display: block;
-	position: absolute;
-	left: 0;
-	right: 0;
-	background: fade(@sapUiBlockLayerBackground, 40);
-	opacity: 0.4;
-	top: @_sap_ushell_ShellHeader_BarHeight;
-	bottom: 0;
-	z-index: 2;
+#SAMLDialog #SAMLDialog-scrollCont {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+#SAMLDialogFrame {
+    min-height:100%;
+    width:100%;
+    position: absolute;
+}
+
+// ==================================================== Unused Styles ? ==================================================================
+
+#ContentPage{
+    background: white;
 }

package/src/main/js/sap/ushell/themes/base/SidePane.less

@@ -0,0 +1,8 @@
+/* ============================================== */
+/* CSS for control "sap.ushell.ui.shell.SidePane" */
+/* ============================================== */
+
+.sapUshellSidePane {
+    height: 100%;
+    border-right: 1px solid @sapUiMediumBorder;
+}

package/src/main/js/sap/ushell/themes/base/SubHeader.less

@@ -0,0 +1,3 @@
+/* ======================================================== */
+/* CSS for control "sap.ushell.ui.shell.SubHeader" (base) */
+/* ======================================================== */