@sapui5/sap.ushell 1.113.0 → 1.114.1

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;
   }

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) */
+/* ======================================================== */

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

@@ -0,0 +1,114 @@
+/* ===================================================== */
+/* CSS for control "sap.ushell.ui.shell.SysInfoBar" (base) */
+/* ======================================================*/
+
+.sapUiSizeCompact .sapUshellSysInfoBar {
+  height: 1.625rem;
+
+  .sapMBar {
+    box-shadow: none;
+  }
+
+  .sapMBarLeft, .sapMBarRight, .sapMBarPH {
+    height: 1.625rem;
+  }
+}
+
+.sapUshellSysInfoBar {
+  height: 2.25rem;
+
+  .sapMBar {
+    box-shadow: none;
+  }
+
+  .sapMBar:not(.sapUshellSysInfoBarOrange, .sapUshellSysInfoBarRed, .sapUshellSysInfoBarPink, .sapUshellSysInfoBarPink, .sapUshellSysInfoBarViolet, .sapUshellSysInfoBarViolet, .sapUshellSysInfoBarBlue, .sapUshellSysInfoBarGreen, .sapUshellSysInfoBarGrey) {
+    background-color: transparent;
+  }
+
+  .sapUshellSysInfoBarText:not(.sapUshellSysInfoBarOrange, .sapUshellSysInfoBarRed, .sapUshellSysInfoBarPink, .sapUshellSysInfoBarPink, .sapUshellSysInfoBarViolet, .sapUshellSysInfoBarViolet, .sapUshellSysInfoBarBlue, .sapUshellSysInfoBarGreen, .sapUshellSysInfoBarGrey), .sapMLabelTextWrapper {
+    text-shadow: none;
+  }
+
+  .sapMBarLeft, .sapMBarRight, .sapMBarPH {
+    height: 2.25rem;
+  }
+}
+
+/*
+  If a custom color is used, the labels should have the same color as the icon.
+ */
+.sapUshellSysInfoBarCustom {
+  .sapUshellSysInfoBarText, .sapMLabelTextWrapper {
+    color: @sapUiContentIconColor;
+  }
+}
+
+.sapUshellSysInfoBarOrange {
+  background-color: @sapUiShellCategory31Background;
+  border-color: @sapUiShellCategory3BorderColor;
+
+  .sapUshellSysInfoBarText, .sapMLabelTextWrapper {
+    color: @sapUiShellCategory3TextColor;
+    text-shadow: @sapUiShellCategory3TextShadow;
+  }
+}
+
+.sapUshellSysInfoBarRed {
+  background-color: @sapUiShellCategory11Background;
+  border-color: @sapUiShellCategory11BorderColor;
+
+  .sapUshellSysInfoBarText, .sapMLabelTextWrapper {
+    color: @sapUiShellCategory11TextColor;
+    text-shadow: @sapUiShellCategory11TextShadow;
+  }
+}
+
+.sapUshellSysInfoBarPink {
+  background-color: @sapUiShellCategory13Background;
+  border-color: @sapUiShellCategory13BorderColor;
+
+  .sapUshellSysInfoBarText, .sapMLabelTextWrapper {
+    color: @sapUiShellCategory13TextColor;
+    text-shadow: @sapUiShellCategory13TextShadow;
+  }
+}
+
+.sapUshellSysInfoBarViolet {
+  background-color: @sapUiShellCategory12Background;
+  border-color: @sapUiShellCategory12BorderColor;
+
+  .sapUshellSysInfoBarText, .sapMLabelTextWrapper {
+    color: @sapUiShellCategory12TextColor;
+    text-shadow: @sapUiShellCategory12TextShadow;
+  }
+}
+
+.sapUshellSysInfoBarBlue {
+  background-color: @sapUiShellCategory9Background;
+  border-color: @sapUiShellCategory9BorderColor;
+
+  .sapUshellSysInfoBarText, .sapMLabelTextWrapper {
+    color: @sapUiShellCategory9TextColor;
+    text-shadow: @sapUiShellCategory9TextShadow;
+  }
+}
+
+.sapUshellSysInfoBarGreen {
+  background-color: @sapUiShellCategory16Background;
+  border-color: @sapUiShellCategory16BorderColor;
+
+  .sapUshellSysInfoBarText, .sapMLabelTextWrapper {
+    color: @sapUiShellCategory16TextColor;
+    text-shadow: @sapUiShellCategory16TextShadow;
+  }
+}
+
+.sapUshellSysInfoBarGrey {
+  background-color: @sapUiShellCategory15Background;
+  border-color: @sapUiShellCategory15BorderColor;
+
+  .sapUshellSysInfoBarText, .sapMLabelTextWrapper {
+    color: @sapUiShellCategory15TextColor;
+    text-shadow: @sapUiShellCategory15TextShadow;
+  }
+}

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

@@ -7,14 +7,10 @@
 }
 
 .sapUshellToolArea {
+  height: 100%;
   width: 15rem;
-  position: absolute;
-  top: @_sap_ushell_ShellHeader_BarHeight;
-  left: 0;
-  right: 0;
   z-index: 1;
   overflow: hidden;
-  bottom: 0;
   transition: left 500ms ease;
 
   &.sapUshellToolAreaTextHidden {

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

@@ -40,6 +40,10 @@
   .sapCepWorkPageGridContainer {
     z-index: 0;
   }
+
+  .sapUshellVizInstance {
+    position: relative;
+  }
 }
 
 @media (min-width: 600px) and (max-width: 1023px) {

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

@@ -8,6 +8,13 @@
   box-sizing: content-box;
   background-clip: padding-box;
 
+  .sapCepRowMessageStrip {
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+    margin-left: 1.5rem;
+    margin-right: 1.5rem;
+  }
+
   .sapCepRowOverflowToolbar {
     margin-left: 1rem;
     margin-right: 1rem;

package/src/main/js/sap/ushell/themes/base/library.source.less

@@ -26,7 +26,7 @@
 @import "IconFonts.less";
 @import "ImageTile.less";
 @import "LoadingDialog.less";
-@import "UserActionsMenu.less";
+@import "MenuBar.less";
 @import "Notifications.less";
 @import "Page.less";
 @import "PictureTile.less";
@@ -42,8 +42,10 @@
 @import "ShellHeader.less";
 @import "ShellAppTitle.less";
 @import "ShellLayout.less";
-@import "SplitContainer.less";
+@import "SidePane.less";
 @import "StaticTile.less";
+@import "SubHeader.less";
+@import "SysInfoBar.less";
 @import "TargetMappingConfiguration.less";
 @import "Tile.less";
 @import "TileBase.less";
@@ -53,6 +55,7 @@
 @import "ToolAreaItem.less";
 @import "UsageAnalyticsPopUp.less";
 @import "UsageAnalyticsSelector.less";
+@import "UserActionsMenu.less";
 @import "UserConsentDialog.less";
 @import "UserSettings.less";
 @import "ViewPortContainer.less";

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

@@ -5,6 +5,9 @@
 /* ============================================= */
 
 .sapUshellFloatingContainer {
-	background: transparent;
-	box-shadow: @sapUiShadowLevel2
+    background: transparent;
+    box-shadow: @sapUiShadowLevel2;
+    .sapMPageBgStandard {
+        background: transparent !important;
+    }
 }

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

@@ -1,11 +1,6 @@
-/* ============================================================== */
-/* CSS for control "sap.ushell.ui.shell.ShellLayout" (sap_belize) */
-/* ============================================================== */
-
-._sapUshellShellSubHdr { /* Testpage only */
-  background-color: mix(@sapUiHighlight, @sapUiShellTextColor, 10);
-  color: @sapUiTileTextColor;
-}
+/* =================================== */
+/* CSS for the layout of the ShellView */
+/* =================================== */
 
 .sapUshellShellBG {
   background-color: @sapUiShellBackground;
@@ -33,10 +28,17 @@
   display: none;
 }
 
-.sapUshellShell canvas #shell-shapes {
+#shell-shapes {
   .sapUshellShapesDisplay;
 }
 
 .sapUshellMenuBarHeight {
   min-height: 3rem;
 }
+
+// ==================================================== Unused Styles ? ==================================================================
+
+._sapUshellShellSubHdr { /* Testpage only */
+  background-color: mix(@sapUiHighlight, @sapUiShellTextColor, 10);
+  color: @sapUiTileTextColor;
+}

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

@@ -0,0 +1,7 @@
+/* ============================================== */
+/* CSS for control "sap.ushell.ui.shell.SidePane" */
+/* ============================================== */
+
+.sapUshellSidePane {
+    background-color: @sapUiShellBackground;
+}

package/src/main/js/sap/ushell/themes/sap_belize/library.source.less

@@ -23,7 +23,7 @@
 @import "Section.less";
 @import "ShellHeader.less";
 @import "ShellLayout.less";
-@import "SplitContainer.less";
+@import "SidePane.less";
 @import "Tile.less";
 @import "TileBase.less";
 @import "TileContainer.less";

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

@@ -6,7 +6,7 @@
 //[Description "Color of title in header"]
 @_sap_ushell_ShellHeader_TitleColor: @sapUiShellBorderColor;
 
-.sapUshellShellCntnt {
+.sapUshellShellHeader {
   box-shadow: 0 -0.0625rem 0 0 @sapUiShellBorderColor inset;
 }
 

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

@@ -1,7 +1,7 @@
-/* ======================================================= */
-/* CSS for control "sap.ushell.ui.shell.ShellLayout" (hcb) */
-/* ======================================================= */
+/* =================================== */
+/* CSS for the layout of the ShellView */
+/* =================================== */
 
 .sapUshellMenuBarHeight {
-	min-height: 3rem;
+    min-height: 3rem;
 }

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

@@ -0,0 +1,7 @@
+/* ============================================== */
+/* CSS for control "sap.ushell.ui.shell.SidePane" */
+/* ============================================== */
+
+.sapUshellSidePane {
+    background-color: @sapUiHcStandardBackground;
+}