@openui5/themelib_sap_horizon 1.100.0 → 1.102.1

package/src/sap/f/themes/sap_horizon/ShellBar.less

@@ -7,13 +7,24 @@
 
 .alwaysDarkModeOverrideByParent(~"sapFShellBar");
 
+.sapFShellBarSizeLargeDesktop {
+	padding: 0 3rem;
+}
+
+.sapFShellBarSizeDesktop {
+	padding: 0 2rem;
+}
+
 .sapFShellBar {
 	background: @sapUiShellColor;
-	height: 2.75rem;
+	height: 3.25rem;
 	box-shadow: inset 0 -0.0625rem 0 0 @sapUiShellBorderColor;
-	.sapFShellBarOTB {
-		height: 2.75rem;
+
+	.sapFShellBarOTB.sapMIBar.sapMTB {
+		height: 3.25rem;
 	}
+
+	// Copilot
 	.CPImage,
 	& .sapMIBar.sapMTB .CPImage {
 		&:after {
@@ -44,8 +55,17 @@
 		}
 		&:focus {
 			outline: none;
+			background-color: @sapUiShellActiveBackground;
+			color: @sapUiShellActiveTextColor;
+			&:after {
+				box-shadow: @sapUiContentSelectedShadow;
+			}
+		}
+		&:hover:not(:focus) {
+			background: @sapUiShellHoverBackground;
+
 			&:after {
-				box-shadow: inset 0px 0px 0px 0.125rem @sapUiContentFocusColor;
+				box-shadow: @sapUiContentInteractionShadow;
 			}
 		}
 		html[data-sap-ui-browser^="ie"] &:focus:before {
@@ -53,12 +73,9 @@
 		}
 	}
 
-	.sapFShellBarSearch {
-		max-width: 27.5rem; // max width of searchField + button width
-	}
 	&.sapMPageHeader .sapMIBar,
 	.sapMIBar {
-		height: 2.75rem;
+		height: 3.25rem;
 	}
 	.sapMBtn:hover > .sapMBtnHoverable.sapMToggleBtnPressed:not(.sapMBtnActive) {
 		border-color: @sapUiShellHoverBackground;
@@ -71,26 +88,220 @@
 	.sapFShellBarProfile:not(:focus):hover {
 		box-shadow: 0 0 0.125rem 0 fade(@sapContent_ShadowColor, 72);
 	}
+
+	// Mega Menu
 	.sapFSHMegaMenu {
+		color: @sapUiShellTextColor;
 		overflow: visible;
+		font-size: @sapMFontHeader5Size;
+		font-weight: bold;
+
+		.sapMBtn:hover > .sapMBtnHoverable.sapMToggleBtnPressed:not(.sapMBtnActive) {
+			background: @sapUiShellHoverBackground;
+			box-shadow: @sapUiContentInteractionShadow;
+			border-color: @sapUiButtonLiteBorderColor;
+		}
+
+		.sapMBtn:hover > .sapMBtnHoverable.sapMToggleBtnPressed.sapMBtnActive {
+			background: @sapUiShellActiveBackground;
+			color: @sapUiShellActiveTextColor;
+			border-color: @sapUiButtonLiteActiveBorderColor;
+		}
+
+		.sapMBtnInner,
+		.sapMBtnInner::after {
+			font-weight: normal;
+			font-size: 1rem;
+		}
+
+		.sapMBtnInner::after {
+			content: '\e1ef';
+			font-family: 'SAP-icons';
+		}
+	}
+
+	// Home Icon
+	.sapFShellBarHomeIcon {
+		max-height: 2rem;
+
+		&:hover {
+			background: @sapUiShellHoverBackground;
+			box-shadow: @sapUiContentInteractionShadow;
+			border-radius: 0.5rem;
+		}
+	}
+
+	//Second Title
+	.sapFShellBarSecondTitle {
+		font-size: @sapMFontSmallSize;
+		color: @sapUiShellTextColor;
+		text-overflow: ellipsis;
+	}
+
+	// Search
+	.sapFShellBarSearch {
+		max-width: 35rem; // max width of searchField + button width
+
+		.sapMSF {
+			max-width: 35rem;
+		}
+
+		.sapMBtn:not(.sapFShellBarSearchCancelButton) {
+			width: 1.75rem;
+			height: 1.75rem;
+			line-height: 1.75rem;
+			padding: 0;
+			margin-top: 0.25rem;
+			margin-left: 0.25rem;
+			position: absolute;
+			right: 0;
+			.sapMBtnInner {
+				min-width: 1.75rem;
+				border-radius: 1.125rem;
+				color: @sapUiButtonEmphasizedTextColor;
+				.sapMBtnIcon {
+					width: 1.75rem;
+					height: 1.75rem;
+					line-height: 1.75rem;
+				}
+			}
+		}
+
+		.sapMSFVal + .sapMBtn .sapMBtnInner {
+			background-color: @sapUiButtonEmphasizedBackground;
+
+			.sapMBtnIcon {
+				color: @sapUiButtonEmphasizedTextColor;
+			}
+		}
+	}
+
+	.sapFShellBarSearch.sapFShellBarSearchFullWidth .sapMBtn:not(.sapFShellBarSearchCancelButton) {
+		right: 6rem;
+	}
+
+	.sapFShellBarSearch.sapFShellBarSearchFullWidth .sapFShellBarSearchWrap .sapMSFF .sapMSFB {
+		margin-right: 1.75rem;
+	}
+
+	.sapFShellBarSearch.sapFShellBarSearchFullWidth .sapFShellBarSearchWrap {
+		max-width: 35rem;
+	}
+
+	.sapFShellBarSearch.sapFShellBarSearchFullWidth .sapFShellBarSearchWrap .sapMSF.sapMSFVal form.sapMSFNS:not(.sapMSFReload) {
+		padding-right: 0.5rem;
+	}
+
+	.sapFShellBarSearchWrap {
+		position: relative;
+		.sapMSFF {
+			background: @sapUiShellInteractiveBackground;
+			border: none;
+			color: @sapUiShellInteractiveTextColor;
+			border-radius: 1.125rem;
+			height: 2.25rem;
+
+			.sapMSFB {
+				width: 1.75rem;
+				height: 1.75rem;
+				line-height: 1.75rem;
+				font-size: 1rem;
+				text-align: center;
+				margin-top: 0.25rem;
+				margin-right: 2.25rem;
+				padding: 0;
+				right: 0;
+				top: 0;
+			}
+
+			.sapMSFB:hover {
+				background: @sapUiShellHoverBackground;
+				box-shadow: @sapUiContentInteractionShadow;
+				border-radius: 1.125rem;
+				height: 1.75rem;
+				color: @sapUiShellInteractiveTextColor;
+			}
+
+			.sapMSFB:active,
+			.sapMSFB.sapMSFBA {
+				background: @sapUiShellActiveBackground;
+				box-shadow: @sapUiContentSelectedShadow;
+				border-radius: 1.125rem;
+				color: @sapUiShellActiveTextColor;
+			}
+		}
+
+		.sapMSF {
+			max-width: 35rem;
+			margin-right: 0;
+		}
+
+		.sapMSF:not(.sapMSFVal) form.sapMSFNS:not(.sapMSFReload) {
+			padding-right: 0.5rem;
+		}
+
+		.sapMSF:not(.sapMSFDisabled):hover .sapMSFF {
+			background-color: @sapUiShellHoverBackground;
+			box-shadow: @sapUiContentInteractionShadow;
+		}
+
+		.sapMSFI {
+			color: @sapUiFieldPlaceholderTextColor;
+			font-weight: italic;
+		}
+
+		// sap.m.Button
+		.sapMBtn:not(.sapFShellBarSearchCancelButton) {
+			height: 2.25rem;
+			line-height: 2.25rem;
+			width: 1.75rem;
+			padding: 0.250rem 0;
+			margin-right: 0.25rem;
+			.sapMBtnInner {
+				height: 1.75rem;
+				min-width: 1.75rem;
+				border-radius: 1.125rem;
+			}
+			.sapMBtnInner.sapMBtnText {
+				padding-left: 0.625rem;
+				padding-right: 0.625rem;
+			}
+
+			.sapMBtnIcon {
+				width: 1.75rem;
+				font-size: 1rem;
+				line-height: 1.75rem;
+				max-height: 1.75rem;
+				margin: 0;
+				padding: 0;
+			}
+		}
+		.sapMSF {
+			margin-right: 0;
+		}
 	}
 }
 
+// Overriding styles comming from other controls
+html.sap-desktop .sapFShellBarSearchWrap .sapMBtn:not(.sapFShellBarSearchCancelButton):focus > .sapMFocusable:not(.sapMBadgeIndicator):before {
+	border-radius: 1.125rem;
+}
+
 // Resets of sizes for "Compact" mode - controls should remain in cozy mode
 .alwaysCozyOverrideByParent(@controlClass) {
 	.sapUiSizeCompact {
 		.@{controlClass} {
-			height: 2.75rem;
+			height: 3.25rem;
 
 			&.sapMPageHeader .sapMIBar,
 			.sapMIBar {
-				height: 2.75rem;
+				height: 3.25rem;
 			}
 			// sap.m.MegaMenu
 			.sapFSHMegaMenu {
 				height: 2.75rem;
 			}
-		// sap.m.Button
+			// sap.m.Button
 			.sapMBtn {
 				height: 2.75rem;
 				padding: 0.250rem 0;
@@ -102,8 +313,8 @@
 			}
 
 			.sapMBtnInner.sapMBtnText {
-				padding-left: 0.5625rem;
-				padding-right: 0.5625rem;
+				padding-left: 0.625rem;
+				padding-right: 0.625rem;
 			}
 
 			.sapMBtnContent {
@@ -123,11 +334,11 @@
 			}
 			.sapMBtnText {
 				.sapMBtnIconLeft + .sapMBtnIconLeft {
-					left: 2.375rem;
+					left: 2.875rem;
 				}
 			}
 			.sapMBtnInner > img {
-				width: 2.500rem;
+				width: 2.5rem;
 				margin-top: 0.2rem;
 				margin-left: 0.2rem;
 			}
@@ -158,6 +369,75 @@
 			}
 
 			// sap.m.SearchField
+			.sapFShellBarSearch {
+				max-width: 35rem;
+				.sapMSF {
+					max-width: 35rem;
+				}
+
+				.sapMBtn:not(.sapFShellBarSearchCancelButton) {
+					width: 1.75rem;
+					height: 1.75rem;
+					line-height: 1.75rem;
+					padding: 0;
+					margin-top: 0.25rem;
+					margin-left: 0.25rem;
+					position: absolute;
+					.sapMBtnInner {
+						min-width: 1.75rem;
+						border-radius: 1.125rem;
+						.sapMBtnIcon {
+							width: 1.75rem;
+							height: 1.75rem;
+							line-height: 1.75rem;
+						}
+					}
+				}
+			}
+
+			.sapFShellBarSearch.sapFShellBarSearchFullWidth .sapMBtn:not(.sapFShellBarSearchCancelButton) {
+				right: 6rem;
+			}
+
+			.sapFShellBarSearch.sapFShellBarSearchFullWidth .sapFShellBarSearchWrap .sapMSFF .sapMSFB {
+				margin-right: 1.75rem;
+			}
+
+			.sapFShellBarSearch.sapFShellBarSearchFullWidth .sapFShellBarSearchWrap {
+				max-width: 35rem;
+			}
+
+			.sapFShellBarSearchWrap {
+				// sap.m.Button
+				.sapMBtn:not(.sapFShellBarSearchCancelButton) {
+					height: 2.25rem;
+					line-height: 2.25rem;
+					width: 1.75rem;
+					padding: 0.250rem 0;
+					margin-right: 0.25rem;
+					.sapMBtnInner {
+						height: 1.75rem;
+						min-width: 1.75rem;
+						border-radius: 1.125rem;
+					}
+					.sapMBtnInner.sapMBtnText {
+						padding-left: 0.625rem;
+						padding-right: 0.625rem;
+					}
+
+					.sapMBtnIcon {
+						width: 1.75rem;
+						font-size: 1rem;
+						line-height: 1.75rem;
+						max-height: 1.75rem;
+						margin: 0;
+						padding: 0;
+					}
+				}
+				.sapMSF {
+					margin-right: 0;
+				}
+			}
 			.sapMSF {
 				min-width: 7rem;
 				height: 2.75rem;
@@ -169,22 +449,24 @@
 					height: 2.25rem;
 					line-height: 2.125rem;
 					padding-left: 0.625rem;
-					padding-right: 2.375rem;
 				}
 				.sapMSFR:not(.sapMSFNS) {
 					right: 2.375rem;
 				}
 				.sapMSFB {
-					width: 2.125rem;
-					height: 2.125rem;
-					line-height: 2.125rem;
+					width: 1.75rem;
+					height: 1.75rem;
+					line-height: 1.75rem;
 					font-size: 1rem;
-					text-align: center;
-					margin: 0;
+					margin-top: 0.25rem;
+					margin-right: 0.25rem;
 					padding: 0;
 					right: 0;
 					top: 0;
 				}
+				.sapMSFB:hover {
+					height: 1.75rem;
+				}
 			}
 			// sap.m.Select
 			.sapMSlt {
@@ -235,12 +517,18 @@
 				>span.sapMBtnInner.sapMBtnHoverable:not(.sapMToggleBtnPressed) {
 					&:not(.sapMBtnActive) {
 						background: @sapUiShellHoverBackground;
-						border-color: @sapUiShellHoverBackground;
+						box-shadow: @sapUiContentInteractionShadow;
+						border-color: @sapUiButtonLiteBorderColor;
 					}
-					&.sapMBtnActive {
+					&.sapMBtnActive,
+					&.sapMBtnActive .sapMBtnContent,
+					&.sapMBtnActive .sapMBtnContent bdi {
 						background: @sapUiShellActiveBackground;
-						border-color: @sapUiShellActiveBackground;
-						color: @sapUiShellTextColor;
+						color: @sapUiShellActiveTextColor;
+					}
+					&.sapMBtnActive:after,
+					&.sapMBtnActive >.sapMBtnIcon {
+						color: @sapUiShellActiveTextColor;
 					}
 					&:after,
 					>.sapMBtnIcon {

package/src/sap/f/themes/sap_horizon/library.source.less

@@ -14,6 +14,7 @@
 @import "DynamicPageHeader.less";
 @import "DynamicPageTitle.less";
 @import "FlexibleColumnLayout.less";
+@import "GridList.less";
 @import "GridListItem.less";
 @import "ListContentItem.less";
 @import "ShellBar.less";

package/src/sap/f/themes/sap_horizon_dark/Card.less

@@ -3,14 +3,15 @@
 /* Evening Horizon theme       */
 /* =========================== */
 
-@_sap_f_Card_HeaderFocusBorderBottomOffset: -1px;
-@_sap_f_Card_HeaderFocusBorderTopOffset: -1px;
-@_sap_f_Card_HeaderFocusBorderLeftOffset: -1px;
-@_sap_f_Card_HeaderFocusBorderRightOffset: -1px;
+@_sap_f_Card_HeaderFocusBorderBottomOffset: 0px;
+@_sap_f_Card_HeaderFocusBorderTopOffset: 0px;
+@_sap_f_Card_HeaderFocusBorderLeftOffset: 0px;
+@_sap_f_Card_HeaderFocusBorderRightOffset: 0px;
 @_sap_f_Card_HeaderFocusBorderRadius: inherit;
 @_sap_f_Card_BorderRadius: 1rem;
 @_sap_f_Card_TitleFontSize: @sapMFontHeader6Size;
-@_sap_f_Card_HoverBoxShadow: @sapContent_Shadow1;
+@_sap_f_Card_HoverBoxShadow: @sapContent_Shadow2;
+@_sap_f_Card_Badge_Background: @sapHighlightColor;
 
 .sapFGridContainer .sapFGridContainerItemWrapperNoVisualFocus:focus .sapFCard,
 .sapFCard {
@@ -19,11 +20,37 @@
 		border-radius: @_sap_f_Card_BorderRadius;
 	}
 
-	&.sapFCardBottomHeader .sapFCardHeader::before {
-		bottom: 1px;
+	.sapFCardHeader {
+		border-bottom: none;
+		padding-bottom: 0.75rem;
+	}
+
+	.sapFCardFooter {
+		padding-top: 0.75rem;
 	}
 }
 
-.sapFCard:not(.sapFCardPreview):hover {
+.sapFCard:not(.sapFCardPreview):not(.sapFCardTransparent):hover {
 	box-shadow: @_sap_f_Card_HoverBoxShadow;
+
+	.sapFCardHeader:hover {
+		background: @sapUiTileHoverBackground;
+	}
+}
+
+.sapFCard:not(.sapFCardPreview):not(.sapFCardTransparent):active {
+	box-shadow: @_sap_f_Card_BoxShadow;
+
+	.sapFCardHeader:active {
+		background: @sapUiTileActiveBackground;
+	}
+}
+
+.sapFCard .sapFCardHeader .sapFCardStatus {
+	font-size: @sapMFontSmallSize;
+	margin-top: 0.125rem;
+}
+
+.sapFCard .sapMNC {
+	margin-top: 0.5rem;
 }

package/src/sap/f/themes/sap_horizon_dark/DynamicPage.less

@@ -107,12 +107,12 @@
 	}
 
 	&:before {
-		background-image: linear-gradient(to left, @sapUiHighlight, fade(@sapUiHighlight, 0));
+		background-image: linear-gradient(to left, @sapUiObjectHeaderBorderColor, transparent);
 		right: 100%;
 	}
 
 	&:after {
-		background-image: linear-gradient(to right, @sapUiHighlight, fade(@sapUiHighlight, 0));
+		background-image: linear-gradient(to right, @sapUiObjectHeaderBorderColor, transparent);
 		left: 100%;
 	}
 }
@@ -145,13 +145,21 @@ html[data-sap-ui-browser^="cr"] .sapFDynamicPageHeaderPinButton {
 // The footer selector can`t be nested in the sapFDynamicPage less structure,
 // because the contrast container would not work, as the theme generates css like ".sapContrast.sapFDynamicPageFooter"
 // and will never match ".sapFDynamicPage .sapFDynamicPageFooter"
-.sapFDynamicPageFooter .sapFDynamicPageActualFooterControl {
+.sapFDynamicPageFooter .sapFDynamicPageActualFooterControl.sapMTB {
 	background: @sapUiPageFooterBackground;
 	color: @sapUiPageFooterTextColor;
-	box-shadow: @sapUiShadowLevel1;
+	box-shadow: @sapUiContentShadow1;
+	border-radius: @sapUiElementBorderCornerRadius;
 	border: none;
 }
 
+.sapFDynamicPage-Std-Tablet,
+.sapFDynamicPage-Std-Phone {
+	.sapFDynamicPageFooter .sapFDynamicPageActualFooterControl.sapMIBar {
+		height: 2.75rem;
+	}
+}
+
 .title-hover(@backgroundColor) {
 	background-color: darken(@backgroundColor, 4);
 }
@@ -172,14 +180,6 @@ To be used in Comparison pattern scenario. */
     background-color: @sapObjectHeader_Background;
 }
 
-.sapFDynamicPageToggleHeaderIndicator:after, .sapFDynamicPageHeaderPinButton:after {
-    background-image: none;
-}
-
-.sapFDynamicPageToggleHeaderIndicator:before, .sapFDynamicPageHeaderPinButton:before {
-    background-image: none;
-}
-
 .sapMBtn:hover:not(.sapMBtnDisabled):not(.sapMSBActive)>.sapMBtnHoverable:not(.sapMBtnDisabled):not(.sapMBtnActive):not(.sapMToggleBtnPressed):not(.sapMBtnTransparent).sapMBtnDefault .sapUiIcon, .sapMBtn:hover:not(.sapMBtnDisabled):not(.sapMSBActive)>.sapMBtnHoverable:not(.sapMBtnDisabled):not(.sapMBtnActive):not(.sapMToggleBtnPressed):not(.sapMBtnTransparent).sapMBtnBack .sapUiIcon, .sapMBtn:hover:not(.sapMBtnDisabled):not(.sapMSBActive)>.sapMBtnHoverable:not(.sapMBtnDisabled):not(.sapMBtnActive):not(.sapMToggleBtnPressed):not(.sapMBtnTransparent).sapMBtnGhost .sapUiIcon {
     border-radius: @sapButton_BorderCornerRadius;
 }

package/src/sap/f/themes/sap_horizon_dark/DynamicPageHeader.less

@@ -3,10 +3,7 @@
 /* Evening Horizon theme                    */
 /* ======================================== */
 
-.sapFDynamicPage-Std-Desktop .sapFDynamicPageHeader.sapFDynamicPageHeaderWithContent {
-	padding: 1rem 2rem;
-}
-
+.sapFDynamicPageHeader.sapFDynamicPageHeaderSolid,
 .sapFDynamicPageHeader.sapFDynamicPageHeaderTranslucent {
 	background: @sapUiObjectHeaderBackground;
 }
@@ -21,30 +18,4 @@
 
 .sapFDynamicPageNavigation .sapFDynamicPageHeader.sapFDynamicPageHeaderWithContent {
 	box-shadow: none;
-}
-
-
-// =====================================
-// =====================================
-// Delta Styles for Horizon
-// =====================================
-
-.sapUiMedia-StdExt-LargeDesktop .sapFDynamicPageHeader.sapFDynamicPageHeaderWithContent {
-    padding: 0 3rem 1rem;
-}
-
-.sapFDynamicPage-Std-Desktop .sapFDynamicPageHeader.sapFDynamicPageHeaderWithContent {
-    padding: 0 2rem 1rem;
-}
-
-.sapFDynamicPageHeader.sapFDynamicPageHeaderWithContent {
-    padding: 0 2rem 1rem 2rem;
-}
-
-.sapFDynamicPage-Std-Tablet .sapFDynamicPageHeaderWithContent {
-    padding: 0 2rem 1rem 2rem;
-}
-
-.sapFDynamicPage-Std-Phone .sapFDynamicPageHeaderWithContent {
-    padding: 0 1rem 1rem 1rem;
 }

package/src/sap/f/themes/sap_horizon_dark/DynamicPageTitle.less

@@ -108,7 +108,7 @@
 // Overview Page using Dynamic page Header
 .ovpApplication .sapFDynamicPageTitleWrapper.sapFDynamicPageTitleSnapped>.sapFDynamicPageTitle,
 .ovpApplication .sapFDynamicPageTitleWrapper.sapFDynamicPageTitleOnly>.sapFDynamicPageTitle {
-    box-shadow: @sapContent_HeaderShadow;
+    box-shadow: @sapUiContentHeaderShadow;
 }
 
 // Dynamic page Title Focus - Experimental
@@ -145,8 +145,4 @@ html.sap-desktop {
 	.sapFDynamicPageTitleMain .sapMGenericTag.sapMBarChild {
 		margin-top: 0;
 	}
-
-	.sapFDynamicPageTitleSnapped .sapMGenericTag.sapMBarChild  {
-		margin-bottom: 1rem;
-	}
 }

package/src/sap/f/themes/sap_horizon_dark/GridList.less

@@ -0,0 +1,9 @@
+/* =============================== */
+/* CSS for control sap.f/GridList  */
+/* Evening Horizon theme           */
+/* =============================== */
+
+@_sap_f_GridList_ItemFocusBorderRadius: 1rem;
+@_sap_f_GridList_ItemFocusedHighlightOffset: 0.5rem;
+@_sap_f_GridList_ItemHighlightBorderRadius: 1rem 2rem;
+@_sap_f_GridList_ItemOverflow: hidden;

package/src/sap/f/themes/sap_horizon_dark/GridListItem.less

@@ -3,6 +3,9 @@
 /* Evening Horizon theme               */
 /* =================================== */
 
-@_sap_f_GridListItem_Header_BoxShadow: 0 0 0.25rem 0 fade(@sapUiContentShadowColor, 15), inset 0 -0.0625rem 0 0 @sapUiPageHeaderBorderColor;
+@_sap_f_GridListItem_HeaderBoxShadow: none;
+@_sap_f_GridListItem_Overflow: hidden;
 @_sap_f_GridListItem_HeaderHeight: 2.75rem;
-@_sap_f_GridListItem_BorderSelected: 0 0 0 0.125rem @sapUiListSelectionBorderColor;
+@_sap_f_GridListItem_FocusedHighlightOffset: 0.5rem;
+@_sap_f_GridListItem_HighlightBorderRadius: 1rem;
+@_sap_f_GridListItem_FocusedHighlightBorderRadius: 1rem 2rem;

package/src/sap/f/themes/sap_horizon_dark/ListContentItem.less

@@ -15,4 +15,10 @@
 			border-radius: @_sap_f_Card_BorderRadius @_sap_f_Card_BorderRadius 0 0;
 		}
 	}
+}
+
+.sapFCard.sapUiIntCardWithFooter {
+	.sapMListItems li:last-child:focus {
+		border-radius: 0;
+	}
 }