@openui5/themelib_sap_horizon 1.136.2 → 1.138.0

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

@@ -6,7 +6,8 @@
 .alwaysCozyOverrideByParent(~"sapFShellBar");
 
 .sapFShellBar {
-	box-shadow: inset 0 -0.0625rem 0 0 @sapUiShellBorderColor;
+	box-shadow: inset 0 -0.0625rem 0 0 var(--sapShell_BorderColor);
+
 	.sapFShellBarOTB {
 		background-color: transparent;
 	}
@@ -14,31 +15,34 @@
 
 .sapFShellBar.sapFShellBarFCLFPHeader,
 .sapMPageHeader .sapFShellBar {
-	box-shadow: @sapUiShellShadow;
+	box-shadow: var(--sapShell_Shadow);
 }
 
 .sapFButtonNotifications[data-notifications],
 .sapFShellBarOverflowButton[data-notifications] {
-	&:after {
-        line-height: 1rem;
-        background: @sapUiGroupContentBackground;
-        border: solid 1px @sapUiGroupContentBorderColor;
-        color: @sapUiContentForegroundTextColor;
-    }
+
+	&::after {
+		line-height: 1rem;
+		background: var(--sapGroup_ContentBackground);
+		border: solid 1px var(--sapGroup_ContentBorderColor);
+		color: var(--sapContent_ForegroundTextColor);
+	}
 }
 
 .sapFShellBar .CPImage,
  .sapFShellBar .sapMIBar.sapMTB .CPImage {
+
 	.color1 {
-		stop-color: @sapUiContentIconColor;
+		stop-color: var(--sapContent_IconColor);
 	}
+
 	.color2 {
-		stop-color: @sapUiContentIconColor;
+		stop-color: var(--sapContent_IconColor);
 	}
 }
 
 html.sap-desktop .sapMTB-Transparent-CTX .sapMBtnInner.sapMToggleBtnPressed{
-	background-color: @sapUiButtonAttentionActiveBackground;
+	background-color: var(--sapButton_Attention_Active_Background);
 }
 
 .sapFShellBarSizeLargeDesktop,
@@ -55,20 +59,21 @@ html.sap-desktop .sapMTB-Transparent-CTX .sapMBtnInner.sapMToggleBtnPressed{
 }
 
 .sapFShellBar {
-	background: @sapUiShellColor;
+	background: var(--sapShellColor);
 	height: 3.25rem;
-	box-shadow: inset 0 -0.0625rem 0 0 @sapUiShellBorderColor;
+	box-shadow: inset 0 -0.0625rem 0 0 var(--sapShell_BorderColor);
 
 	.sapFShellBarOTB.sapMIBar.sapMTB {
 		height: 3.25rem;
 	}
 
-	// Copilot
+	/* Copilot */
 	.CPImage,
 	& .sapMIBar.sapMTB .CPImage {
-		&:after {
+
+		&::after {
 			position: absolute;
-			content: "";
+			content: '';
 			left: 3px;
 			right: 3px;
 			top: 3px;
@@ -77,41 +82,44 @@ html.sap-desktop .sapMTB-Transparent-CTX .sapMBtnInner.sapMToggleBtnPressed{
 			pointer-events: none;
 			border-radius: 0.5rem;
 		}
+
 		&:focus {
 			border-radius: 0.5rem;
 			outline: none;
-			background-color: @sapUiShellActiveBackground;
-			color: @sapUiShellActiveTextColor;
-			&:after {
-				box-shadow: @sapUiContentSelectedShadow;
+			background-color: var(--sapShell_Active_Background);
+			color: var(--sapShell_Active_TextColor);
+
+			&::after {
+				box-shadow: var(--sapContent_Selected_Shadow);
 			}
 		}
+
 		&:hover:not(:focus) {
-			background: @sapUiShellHoverBackground;
+			background: var(--sapShell_Hover_Background);
 			border-radius: 0.5rem;
-			&:after {
-				box-shadow: @sapUiContentInteractionShadow;
+
+			&::after {
+				box-shadow: var(--sapContent_Interaction_Shadow);
 			}
 		}
-		html[data-sap-ui-browser^="ie"] &:focus:before {
-			border-color: @sapUiContentContrastFocusColor;
-		}
 	}
 
 	&.sapMPageHeader .sapMIBar,
 	.sapMIBar {
 		height: 3.25rem;
 	}
+
 	.sapMBtn:hover > .sapMBtnHoverable.sapMToggleBtnPressed:not(.sapMBtnActive) {
-		border-color: @sapUiShellHoverBackground;
+		border-color: var(--sapShell_Hover_Background);
 	}
+
 	.sapMToggleBtnPressed:not(.sapMBtnDisabled),
 	.sapMTB-Transparent-CTX .sapMBtnInner.sapMToggleBtnPressed:not(.sapMBtnDisabled) {
-		background-color: @sapUiShellActiveBackground;
-		border-color: @sapUiShellActiveBackground;
+		background-color: var(--sapShell_Active_Background);
+		border-color: var(--sapShell_Active_Background);
 	}
 
-	// Avatar
+	/* Avatar */
 	.sapFShellBarProfile:not(:focus):hover {
 		box-shadow: 0 0 0.125rem 0 fade(@sapContent_ShadowColor, 72);
 		background-color: none;
@@ -121,22 +129,22 @@ html.sap-desktop .sapMTB-Transparent-CTX .sapMBtnInner.sapMToggleBtnPressed{
 		content: none;
 	}
 
-	// Mega Menu
+	/* Mega Menu */
 	.sapFSHMegaMenu {
-		color: @sapUiShellTextColor;
+		color: var(--sapShell_TextColor);
 		overflow: visible;
-		font-size: @sapMFontHeader5Size;
+		font-size: var(--sapFontHeader5Size);
 		font-weight: bold;
 
 		.sapMBtn:hover > .sapMBtnHoverable.sapMToggleBtnPressed:not(.sapMBtnActive) {
-			background: @sapUiShellHoverBackground;
-			box-shadow: @sapUiContentInteractionShadow;
+			background: var(--sapShell_Hover_Background);
+			box-shadow: var(--sapContent_Interaction_Shadow);
 		}
 
 		.sapMBtn:hover > .sapMBtnHoverable.sapMToggleBtnPressed.sapMBtnActive {
-			background: @sapUiShellActiveBackground;
-			color: @sapUiShellActiveTextColor;
-			box-shadow: @sapUiContentSelectedShadow;
+			background: var(--sapShell_Active_Background);
+			color: var(--sapShell_Active_TextColor);
+			box-shadow: var(--sapContent_Selected_Shadow);
 		}
 
 		.sapMBtnInner,
@@ -147,19 +155,19 @@ html.sap-desktop .sapMTB-Transparent-CTX .sapMBtnInner.sapMToggleBtnPressed{
 
 		.sapMBtnInner::after {
 			content: '\e1ef';
-			font-family: 'SAP-icons';
+			font-family: var(--sapContent_IconFontFamily);
 		}
 	}
 
-	// Home Icon
+	/* Home Icon */
 	.sapFShellBarHomeIcon {
 		max-height: 2rem;
 		padding: 0.25rem;
 		overflow-clip-margin: border-box;
 
 		&:hover {
-			background: @sapUiShellHoverBackground;
-			box-shadow: @sapUiContentInteractionShadow;
+			background: var(--sapShell_Hover_Background);
+			box-shadow: var(--sapContent_Interaction_Shadow);
 			border-radius: 0.5rem;
 		}
 
@@ -168,27 +176,27 @@ html.sap-desktop .sapMTB-Transparent-CTX .sapMBtnInner.sapMToggleBtnPressed{
 		}
 	}
 
-	//Primary Title
+	/* Primary Title */
 	.sapFShellBarPrimaryTitle {
 		color: var(--sapShell_SubBrand_TextColor);
 	}
 
-	//Second Title
+	/* Second Title */
 	.sapFShellBarSecondTitle {
-		font-size: @sapMFontSmallSize;
-		color: @sapUiShellTextColor;
+		font-size: var(--sapFontSmallSize);
+		color: var(--sapShell_TextColor);
 		text-overflow: ellipsis;
 	}
 
-	// Search
+	/* Search */
 	.sapFShellBarSearch {
-		max-width: 35rem; // max width of searchField + button width
+		max-width: 35rem; /* max width of searchField + button width */
 
 		.sapMSF {
 			max-width: 35rem;
 		}
 
-		// Reflection: styles overwritten
+		/* Reflection: styles overwritten */
 		.sapMBtn {
 			padding: 0;
 			margin-left: 0.25rem;
@@ -197,10 +205,10 @@ html.sap-desktop .sapMTB-Transparent-CTX .sapMBtnInner.sapMToggleBtnPressed{
 		}
 
 		.sapMSFVal + .sapMBtn .sapMBtnInner {
-			background-color: @sapUiShellActiveBackground;
+			background-color: var(--sapShell_Active_Background);
 
 			.sapMBtnIcon {
-				color: @sapUiShellInteractiveTextColor;
+				color: var(--sapShell_InteractiveTextColor);
 			}
 		}
 	}
@@ -228,17 +236,18 @@ html.sap-desktop .sapMTB-Transparent-CTX .sapMBtnInner.sapMToggleBtnPressed{
 
 	.sapFShellBarSearchWrap {
 		position: relative;
+
 		.sapMSFF {
 			background: @sapUiUx3ShellHeaderColor;
-			border: 0.0625rem solid @sapUiShellInteractiveBorderColor;
+			border: 0.0625rem solid var(--sapShell_InteractiveBorderColor);
 			border-radius: 0;
-			color: @sapUiShellInteractiveTextColor;
+			color: var(--sapShell_InteractiveTextColor);
 			height: 2.25rem;
 			font-weight: normal;
 
-			// Clear icon
+			/* Clear icon */
 			.sapMSFB {
-				border: 1px solid transparent; // prevent jumping when hovering
+				border: 1px solid transparent; /* prevent jumping when hovering */
 				width: 2.125rem;
 				height: 2.125rem;
 				line-height: 2.125rem;
@@ -252,19 +261,19 @@ html.sap-desktop .sapMTB-Transparent-CTX .sapMBtnInner.sapMToggleBtnPressed{
 
 			.sapMSFB:hover {
 				box-shadow: none;
-				border: 0.0625rem solid @sapUiButtonLiteHoverBorderColor;
+				border: 0.0625rem solid var(--sapButton_Lite_Hover_BorderColor);
 				border-radius: 0;
 				height: 2.125rem;
-				color: @sapUiShellInteractiveTextColor;
+				color: var(--sapShell_InteractiveTextColor);
 			}
 
 			.sapMSFB:active,
 			.sapMSFB.sapMSFBA {
-				background: @sapUiShellActiveBackground;
-				border: 0.0625rem solid @sapUiShellInteractiveBorderColor;
+				background: var(--sapShell_Active_Background);
+				border: 0.0625rem solid var(--sapShell_InteractiveBorderColor);
 				box-shadow: none;
 				border-radius: 0;
-				color: @sapUiShellActiveTextColor;
+				color: var(--sapShell_Active_TextColor);
 			}
 		}
 
@@ -278,32 +287,34 @@ html.sap-desktop .sapMTB-Transparent-CTX .sapMBtnInner.sapMToggleBtnPressed{
 		}
 
 		.sapMSF:not(.sapMSFDisabled):hover .sapMSFF {
-			background-color: @sapUiShellHoverBackground;
-			box-shadow: @sapUiContentInteractionShadow;
-			border-bottom: 1px solid @sapUiFieldHoverBorderColor;
+			background-color: var(--sapShell_Hover_Background);
+			box-shadow: var(--sapContent_Interaction_Shadow);
+			border-bottom: 1px solid var(--sapField_Hover_BorderColor);
 		}
 
 		.sapMBtn .sapMBtnInner {
-			border: 0.0625rem solid @sapUiShellInteractiveBorderColor;
+			border: 0.0625rem solid var(--sapShell_InteractiveBorderColor);
 			border-radius: 0;
-			color: @sapUiShellInteractiveTextColor;
+			color: var(--sapShell_InteractiveTextColor);
 		}
 
 		.sapMSFI {
-			color: @sapUiFieldPlaceholderTextColor;
+			color: var(--sapField_PlaceholderTextColor);
 			font-weight: italic;
 		}
 	}
 }
 
-// Overriding styles comming from other controls
-html.sap-desktop .sapFShellBarSearchWrap .sapMBtn:focus > .sapMFocusable:not(.sapMBadgeIndicator):before {
+/* Overriding styles comming from other controls */
+html.sap-desktop .sapFShellBarSearchWrap .sapMBtn:focus > .sapMFocusable:not(.sapMBadgeIndicator)::before {
 	border-radius: 1.125rem;
 }
 
-// Resets of sizes for "Compact" mode - controls should remain in cozy mode
+/* Resets of sizes for "Compact" mode - controls should remain in cozy mode */
 .alwaysCozyOverrideByParent(@controlClass) {
+
 	.sapUiSizeCompact {
+
 		.@{controlClass} {
 			height: 3.25rem;
 
@@ -312,15 +323,16 @@ html.sap-desktop .sapFShellBarSearchWrap .sapMBtn:focus > .sapMFocusable:not(.sa
 				height: 3.25rem;
 			}
 
-			// Reflection: styles overwritten
-			// sap.m.MegaMenu
+			/* Reflection: styles overwritten
+			sap.m.MegaMenu */
 			.sapFSHMegaMenu {
 				height: 2.75rem;
 			}
-			// sap.m.Button
+
+			/* sap.m.Button */
 			.sapMBtn {
 				height: 2.75rem;
-				padding: 0.250rem 0;
+				padding: 0.25rem 0;
 			}
 
 			.sapMBtnInner {
@@ -345,14 +357,17 @@ html.sap-desktop .sapFShellBarSearchWrap .sapMBtn:focus > .sapMFocusable:not(.sa
 				margin: 0;
 				padding: 0;
 			}
+
 			.sapMBtnIconLeft + .sapMBtnIconLeft {
 				left: 0;
 			}
+
 			.sapMBtnText {
 				.sapMBtnIconLeft + .sapMBtnIconLeft {
 					left: 2.875rem;
 				}
 			}
+
 			.sapMBtnInner > img {
 				width: 2.5rem;
 				margin-top: 0.2rem;
@@ -360,29 +375,33 @@ html.sap-desktop .sapFShellBarSearchWrap .sapMBtn:focus > .sapMFocusable:not(.sa
 			}
 
 		  	html.sap-desktop & .sapMTB-Transparent-CTX .sapMBtnInner.sapMToggleBtnPressed, .sapMTB-Transparent-CTX .sapMBtnInner.sapMToggleBtnPressed:not(.sapMBtnDisabled) {
-				background-color: @sapUiShellActiveBackground;
+				background-color: var(--sapShell_Active_Background);
 			}
 
-			// sap.m.MenuButton
+			/* sap.m.MenuButton */
 			.sapMMenuBtn.sapMMenuBtnRegular .sapMBtnInner::after {
-				height: 38px; //ie does not accept rem for height in pseudo elements, but it works with px when you zoom
+				height: 2.375rem;
 				line-height: 2.2rem;
 				padding-right: 0.75rem;
 				padding-left: 0.5625rem;
 			}
+
 			.sapMMenuBtn.sapMMenuBtnRegular .sapMBtnInner:not(.sapMBtnText) {
 				padding-right: 1.625rem;
 			}
+
 			.sapMMenuBtn.sapMMenuBtnRegular .sapMBtnInner {
 				padding-right: 2rem;
 			}
+
 			.sapMMenuBtn .sapMBtnIconFirst .sapMBtnIcon {
 				padding-right: 0.75rem;
 			}
 
-			// sap.m.SearchField
+			/* sap.m.SearchField */
 			.sapFShellBarSearch {
 				max-width: 35rem;
+
 				.sapMSF {
 					max-width: 35rem;
 					margin-right: 0;
@@ -407,27 +426,33 @@ html.sap-desktop .sapFShellBarSearchWrap .sapMBtn:focus > .sapMFocusable:not(.sa
 			}
 
 			.sapFShellBarSearchWrap {
+
 				.sapMBtn .sapMBtnInner {
 					border-radius: 0;
 				}
 			}
+
 			.sapMSF {
 				min-width: 7rem;
 				height: 2.75rem;
 				padding: 0.25rem 0;
+
 				.sapMSFI {
 					height: 2.125rem
 				}
+
 				.sapMSFF {
 					height: 2.25rem;
 					line-height: 2.125rem;
 					padding-left: 0.625rem;
 				}
+
 				.sapMSFR:not(.sapMSFNS) {
 					right: 2.375rem;
 				}
+
 				.sapMSFB {
-					border: 1px solid transparent; // prevent jumping when hovering
+					border: 1px solid transparent; /* prevent jumping when hovering */
 					width: 2.125rem;
 					height: 2.125rem;
 					line-height: 2.125rem;
@@ -436,30 +461,35 @@ html.sap-desktop .sapFShellBarSearchWrap .sapMBtn:focus > .sapMFocusable:not(.sa
 					right: 0;
 					top: 0;
 				}
+
 				.sapMSFB:hover {
 					height: 2.125rem;
 				}
 			}
-			// sap.m.Select
 
-			// Reflection: styles overwritten
+			/* sap.m.Select
+			Reflection: styles overwritten */
 			.sapMSlt {
 				height: 2.5rem;
+
 				.sapMSltArrow {
 					line-height: 2.5rem;
 					width: 2.5rem;
 				}
+
 				.sapMSltLabel {
 					line-height: 2.375rem;
 					padding: 0 3rem 0 0.625rem;
 				}
+
 				.sapMSelectListItem {
 					line-height: 2.5rem;
 				}
+
 				.sapMSelectListItemBase {
 					height: 2.5rem;
 				}
 			}
 		}
 	}
-}
+}