@openui5/themelib_sap_horizon 1.102.1 → 1.103.1

package/src/sap/m/themes/sap_horizon_hcw/GenericTag.less

@@ -3,27 +3,133 @@
 /* Horizon High Contrast White theme  */
 /* ================================== */
 
-html.sap-desktop .sapMGenericTag {
-	&:before {
-		border: 1px solid @sapUiBaseBG;
+@sapMGenericTagBorderWidth: 0.375rem;
+@sapMGenericTagIconPaddingRight: 0.375rem;
+@sapMGenericTagHeightCozy: @sapMGenericTagHeightCompact;
+
+.sapMGenericTagWrap {
+	box-shadow: @sapUiContentShadow0;
+	border-radius: @sapUiButtonBorderCornerRadius;
+	background: ~"0 0 / @{sapMGenericTagBorderWidth} 100% no-repeat linear-gradient(0deg, @{sapUiNeutralElement}, @{sapUiNeutralElement})";
+	background-color: @sapUiNeutralBG;
+	border: none;
+	padding: 0 0.375rem 0 0.75rem;
+
+	.sapMGenericTagWarning & {
+		background: ~"0 0 / @{sapMGenericTagBorderWidth} 100% no-repeat linear-gradient(0deg, @{sapUiCriticalElement}, @{sapUiCriticalElement})";
+		background-color: @sapUiWarningBG;
+
+		.sapMGenericTagIcon {
+			color: @sapUiCriticalElement;
+		}
+
+		.sapMGenericTagValue {
+			color: @sapUiCriticalText;
+		}
 	}
-	&:after {
-		border: 1px dotted @sapUiContentContrastFocusColor;
+
+	.sapMGenericTagError & {
+		background: ~"0 0 / @{sapMGenericTagBorderWidth} 100% no-repeat linear-gradient(0deg, @{sapUiNegativeElement}, @{sapUiNegativeElement})";
+		background-color: @sapUiErrorBG;
+
+		.sapMGenericTagIcon {
+			color: @sapUiNegativeElement;
+		}
+
+		.sapMGenericTagValue {
+			color: @sapNegativeTextColor;
+		}
 	}
-}
 
-.sapMGenericTagWrap {
-	&:hover{
+	.sapMGenericTagSuccess & {
+		background: ~"0 0 / @{sapMGenericTagBorderWidth} 100% no-repeat linear-gradient(0deg, @{sapUiPositiveElement}, @{sapUiPositiveElement})";
+		background-color: @sapUiSuccessBG;
+
+		.sapMGenericTagIcon {
+			color: @sapUiPositiveElement;
+		}
+
+		.sapMGenericTagValue {
+			color: @sapUiPositiveText;
+		}
+	}
+
+	.sapMGenericTagInformation & {
+		background: ~"0 0 / @{sapMGenericTagBorderWidth} 100% no-repeat linear-gradient(0deg, @{sapUiInformativeElement}, @{sapUiInformativeElement})";
+		background-color: @sapUiInformationBG;
+
+		.sapMGenericTagIcon {
+			color: @sapUiInformativeElement;
+		}
+
+		.sapMGenericTagValue {
+			color: @sapUiInformativeText;
+		}
+	}
+
+	&:hover {
 		background-color: @sapUiListHoverBackground;
-		box-shadow: @sapUiShadowLevel0;
+		box-shadow: @sapUiContentShadow0;
 
-		& .sapMGenericTagIcon,
-		& .sapMGenericTagValue {
+		.sapMGenericTagText,
+		.sapMGenericTagValue,
+		.sapMGenericTagIcon,
+		.sapMObjectNumberText,
+		.sapMObjectNumberUnit,
+		.sapMGenericTagErrorIcon {
 			color: @sapUiListActiveTextColor;
+			text-shadow: none;
 		}
 	}
 
-	.sapMGenericTagActive & {
-		background: @sapUiListActiveBackground;
+	.sapMGenericTagText {
+		color: @sapUiListTextColor;
+		text-shadow: @sapUiContentTextShadow;
+	}
+
+	.sapMGenericTagValue {
+		text-shadow: @sapUiContentTextShadow;
 	}
+
+	.sapMGenericTagErrorIcon {
+		color: @sapUiNegativeElement;
+	}
+
+	.sapMGenericTagActive &  {
+		background-color: @sapUiListActiveBackground;
+
+		.sapMGenericTagText,
+		.sapMGenericTagValue,
+		.sapMGenericTagIcon,
+		.sapMObjectNumberText,
+		.sapMObjectNumberUnit,
+		.sapMGenericTagErrorIcon {
+			color: @sapUiListActiveTextColor;
+			text-shadow: none;
+		}
+	}
+}
+
+html.sap-desktop .sapMGenericTag:focus {
+	position: relative;
+
+	&:before {
+		position: absolute;
+		content: " ";
+		inset: 0.125rem;
+		border: @sapBackgroundColor solid @sapUiContentFocusWidth;
+		border-radius: @sapUiButtonBorderCornerRadius;
+	}
+
+	&:after {
+		position: absolute;
+		content: " ";
+		inset: 0.125rem;
+		border: @sapUiContentFocusColor @sapUiContentFocusStyle @sapUiContentFocusWidth;
+		border-radius: @sapUiButtonBorderCornerRadius;
+	}
+}
+
+.sapUiSizeCozy .sapMGenericTag {
+	margin: 0.5625rem 0;
 }

package/src/sap/m/themes/sap_horizon_hcw/Label.less

@@ -5,4 +5,8 @@
 
 .sapMTB-Info-CTX > .sapMLabel {
 	font-style: italic;
+
+	& > .sapMLabelTextWrapper{
+		padding-right: 5px;
+	}
 }

package/src/sap/m/themes/sap_horizon_hcw/ObjectNumber.less

@@ -5,12 +5,6 @@
 
 @sapMONInformativeElement: @sapUiInformationBG;
 
-
-.sapMObjectNumberLarge .sapMObjectNumberText,
-.sapMObjectNumberLarge .sapMObjectNumberUnit {
-	font-size: 1.5rem;
-}
-
 .sapMObjectNumberInverted {
 	box-sizing: border-box;
 	&:not(.sapMObjectNumberLarge) .sapMObjectNumberInner {

package/src/sap/m/themes/sap_horizon_hcw/RangeSlider.less

@@ -26,7 +26,7 @@
 	.sapMSliderInner .sapMSliderHandle {
 		background: @sapUiSliderRangeHandleBackground;
 		box-shadow: @sapUiContentSelectedShadow;
-		top: -0.625rem;
+		top: -.6875rem;
 	}
 
 	.sapMSliderInner:not(.sapMSliderInnerDisabled) .sapMSliderHandle {
@@ -42,7 +42,7 @@
 				border: 0.125rem solid @sapUiSliderActiveHandleBorderColor;
 				outline: none;
 				box-shadow: none;
-				top: -0.625rem;
+				top: -.6875rem;
 			}
 		}
 
@@ -51,7 +51,7 @@
 			border: 0.125rem solid @sapUiSliderActiveHandleBorderColor;
 			outline: none;
 			box-shadow: none;
-			top: -0.625rem;
+			top: -.6875rem;
 		}
 	}
 

package/src/sap/m/themes/sap_horizon_hcw/Slider.less

@@ -15,6 +15,15 @@
 		content: none;
 		transform: none;
 	}
+	height: .25rem;
+	border: 0.0625rem solid @sapSlider_Selected_BorderColor;
+	top: -.125rem;
+	margin: 0 -1px;
+}
+
+.sapMSliderProgressWithTickmarks {
+	box-sizing: border-box;
+	top: -.0625rem;
 }
 
 .sapMSliderInner:not(.sapMSliderInnerDisabled):hover > .sapMSliderHandle {
@@ -103,11 +112,14 @@
 }
 
 .sapMSliderTickmarks {
-	top: 0.675rem;
+	display: flex;
+	align-items: center;
+	z-index: 1;
 }
 
 .sapMSliderTick {
-	margin: 0.375rem 0 0 -0.0625rem;
+	margin: 0;
+	height: .5rem;
 }
 
 .sapMSliderLabels {
@@ -151,6 +163,12 @@
 	top: 21px;
 }
 
+.sapMSliderInner {
+	z-index: 2;
+	box-sizing: border-box;
+	height: .25rem;
+}
+
 /* pressed */
 .sapMSliderPressed:not(.sapMSliderInnerDisabled) > .sapMSliderHandle,
 .sapMSlider .sapMSliderInner > .sapMSliderHandle.sapMSliderHandlePressed {
@@ -159,6 +177,12 @@
 }
 
 .sapUiSizeCompact {
+
+	.sapMSliderTick {
+		height: 0.5rem;
+		margin: 0;
+	}
+
 	.sapMSlider::after {
 		top: 14px;
 		right: 6px;
@@ -194,4 +218,8 @@
 			right: 0.1875rem;
 		}
 	}
+}
+
+.sapMSliderTick[data-ui5-active-tickmark="true"] {
+	border-left: 0.0625rem solid @sapSlider_Selected_BorderColor;
 }

package/src/sap/m/themes/sap_horizon_hcw/Text.less

@@ -12,4 +12,5 @@
 
 .sapMTB-Info-CTX > .sapMText {
 	font-style: italic;
+	padding-right: 5px;
 }

package/src/sap/m/themes/sap_horizon_hcw/Toolbar.less

@@ -76,8 +76,7 @@ html.sap-desktop .sapMTB-Info-CTX.sapMTBActive:focus {
 }
 
 html.sap-desktop .sapMTBActive:focus {
-	outline: none;
-	box-shadow: inset 0px 0px 0px @sapUiContentFocusWidth  @sapUiContentFocusColor;
+	outline: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
 }
 
 .sapMTB .sapMTBSeparator {

package/src/sap/tnt/themes/sap_horizon/ToolHeader.less

@@ -3,13 +3,14 @@
 /* Horizon theme                       */
 /* =================================== */
 
-@_sap_tnt_ToolHeader_Height: 2.75rem;
+@_sap_tnt_ToolHeader_Height: 3.5rem;
 @_sap_tnt_ToolHeader_IconHeight: 0.75rem;
 @_sap_tnt_ToolHeader_DisabledOpacity: @sapUiContentDisabledOpacity;
 @_sap_tnt_ToolHeader_ArrowHeight: 0.125rem;
 @_sap_tnt_ToolHeader_ArrowMargin: 0 -0.25rem;
 @_sap_tnt_ToolHeader_Padding: 0 0.75rem;
 @_sap_tnt_ToolHeader_ArrowMarginBottom: 0.25rem;
+@_sap_tnt_ToolHeader_IconTabHeader_Height: auto;
 
 .sapTntToolHeader {
 	&.sapMTB {
@@ -54,7 +55,10 @@
 	.sapMBtn:focus .sapMBtnDefault.sapMFocusable,
 	.sapMBtn:focus .sapMBtnBack.sapMFocusable,
 	.sapMBtn:focus .sapMBtnUp.sapMFocusable {
-		outline-color: @_sap_tnt_ToolHeader_BorderColor;
+		&::before {
+			outline-color: @_sap_tnt_ToolHeader_BorderColor;
+			border-color: @_sap_tnt_ToolHeader_BorderColor !important;
+		}
 	}
 
 	.sapMBtn:hover:not(.sapMBtnDisabled) .sapMBtnTransparent,
@@ -180,7 +184,7 @@ html.sap-desktop .sapTntToolHeader .sapMFooter-CTX .sapMBtn:focus > .sapMBtnEmph
 // sap.m.MenuButton overriding
 // ==========================================================================
 
-.sapTntToolHeader {
+.sapTntToolHeader.sapMIBar {
 	.sapMMenuBtn.sapMMenuBtnRegular .sapMBtnInner::after {
 		color: @sapUiShellInteractiveTextColor;
 	}
@@ -223,68 +227,6 @@ html.sap-desktop .sapTntToolHeader .sapMFooter-CTX .sapMBtn:focus > .sapMBtnEmph
 	}
 }
 
-// ==========================================================================
-// sap.ui.core.Icon overriding
-// ==========================================================================
-
-.sapTntToolHeader {
-	.sapUiIcon:not(.sapMITBInlineIcon) {
-		color: @sapUiShellTextColor;
-		outline-color: transparent;
-
-		&.sapUiIconPointer:focus {
-			outline-color: @sapUiContentContrastFocusColor;
-		}
-	}
-
-	// no backgrounds
-	.sapUiIcon:not(.sapMITBInlineIcon) {
-		&.sapUiIconColorCritical {
-			color: lighten(saturate(spin(@sapUiCriticalText, 8), 4), 21);
-		}
-
-		&.sapUiIconColorNegative {
-			color: lighten(@sapUiNegativeText, 40);
-		}
-
-		&.sapUiIconColorPositive {
-			color: lighten(desaturate(spin(@sapUiPositiveText, 335), 28), 50);
-		}
-
-		&.sapUiIconColorNeutral {
-			color: lighten(saturate(spin(@sapUiNeutralText, 350), 4), 41);
-		}
-	}
-
-	// backgrounds
-	.sapUiIcon:not(.sapMITBInlineIcon) {
-		&.sapUiIconBGColorContrast {
-			color: @sapUiShellTextColor;
-			background: transparent;
-		}
-
-		&.sapUiIconBGColorCritical {
-			color: @sapUiBaseText;
-			background: lighten(saturate(spin(@sapUiCriticalElement, 8), 4), 21);
-		}
-
-		&.sapUiIconBGColorNegative {
-			color: @sapUiBaseText;
-			background: lighten(@sapUiNegativeElement, 40);
-		}
-
-		&.sapUiIconBGColorNeutral {
-			color: @sapUiBaseText;
-			background: lighten(saturate(spin(@sapUiNeutralElement, 350), 4), 41);
-		}
-
-		&.sapUiIconBGColorPositive {
-			color: @sapUiBaseText;
-			background: lighten(desaturate(spin(@sapUiPositiveElement, 335), 28), 50);
-		}
-	}
-}
-
 // ==========================================================================
 // sap.m.Select overriding
 // ==========================================================================
@@ -441,15 +383,11 @@ html.sap-desktop .sapTntToolHeader .sapMFocus > .sapMSFF::before {
 // ==========================================================================
 
 .sapTntToolHeader {
-	.sapMITH {
-		height: 2.75rem;
-		background-color: transparent;
+	.sapMITH .sapMITBText {
+		color: @sapUiShellInteractiveTextColor;
+		text-shadow: none;
 	}
 
-    .sapMITH .sapMITBText {
-      color: @sapUiShellInteractiveTextColor;
-      text-shadow: none;
-    }
 	.sapMITH .sapMITBDisabled {
 		opacity: @_sap_tnt_ToolHeader_DisabledOpacity;
 	}
@@ -513,116 +451,6 @@ html.sap-desktop .sapTntToolHeader {
 	}
 }
 
-// ==========================================================================
-// sap.m.ObjectStatus overriding
-// ==========================================================================
-
-.sapTntToolHeader {
-	.sapMObjStatus {
-		.sapMObjStatusText,
-		.sapMObjStatusIcon {
-			text-shadow: none;
-		}
-	}
-
-	.sapMObjStatus.sapMObjStatusError {
-		.sapMObjStatusText,
-		.sapMObjStatusIcon .sapUiIcon {
-			color: lighten(@sapUiNegativeText, 40);
-		}
-	}
-
-	.sapMObjStatus.sapMObjStatusInformation {
-		.sapMObjStatusText,
-		.sapMObjStatusIcon .sapUiIcon {
-			color: lighten(desaturate(spin(@sapUiInformativeElement, 357), 6), 34);
-		}
-	}
-
-	.sapMObjStatus.sapMObjStatusNone {
-		.sapMObjStatusText,
-		.sapMObjStatusIcon .sapUiIcon {
-			color: lighten(saturate(spin(@sapUiNeutralText, 350), 4), 41);
-		}
-	}
-
-	.sapMObjStatus.sapMObjStatusSuccess {
-		.sapMObjStatusText,
-		.sapMObjStatusIcon .sapUiIcon {
-			color: lighten(desaturate(spin(@sapUiPositiveText, 335), 28), 50);
-		}
-	}
-
-	.sapMObjStatus.sapMObjStatusWarning {
-		.sapMObjStatusText,
-		.sapMObjStatusIcon .sapUiIcon {
-			color: lighten(saturate(spin(@sapUiCriticalText, 8), 4), 21);
-		}
-	}
-
-	//Inverted
-
-	.sapMObjStatus.sapMObjStatusInverted.sapMObjStatusError {
-		.sapMObjStatusText,
-		.sapMObjStatusIcon,
-		.sapMObjStatusIcon .sapUiIcon {
-			background-color: lighten(@sapUiNegativeElement, 40);
-		}
-	}
-
-	.sapMObjStatus.sapMObjStatusInverted.sapMObjStatusInformation {
-		.sapMObjStatusText,
-		.sapMObjStatusIcon,
-		.sapMObjStatusIcon .sapUiIcon {
-			background-color: lighten(desaturate(spin(@sapUiInformativeElement, 357), 6), 34);
-		}
-	}
-
-	.sapMObjStatus.sapMObjStatusInverted.sapMObjStatusNone {
-		.sapMObjStatusText,
-		.sapMObjStatusIcon,
-		.sapMObjStatusIcon .sapUiIcon {
-			background-color: lighten(saturate(spin(@sapUiNeutralElement, 350), 4), 41);
-		}
-	}
-
-	.sapMObjStatus.sapMObjStatusInverted.sapMObjStatusSuccess {
-		.sapMObjStatusText,
-		.sapMObjStatusIcon,
-		.sapMObjStatusIcon .sapUiIcon {
-			background-color: lighten(desaturate(spin(@sapUiPositiveElement, 335), 28), 50);
-		}
-	}
-
-	.sapMObjStatus.sapMObjStatusInverted.sapMObjStatusWarning {
-		.sapMObjStatusText,
-		.sapMObjStatusIcon,
-		.sapMObjStatusIcon .sapUiIcon {
-			background-color: lighten(saturate(spin(@sapUiCriticalElement, 8), 4), 21);
-		}
-	}
-
-	.sapMObjStatus.sapMObjStatusInverted {
-		.sapMObjStatusIcon .sapUiIcon {
-			height: @_sap_tnt_ToolHeader_IconHeight;
-			vertical-align: text-top;
-		}
-		.sapMObjStatusText,
-		.sapMObjStatusIcon .sapUiIcon{
-
-			color: @sapUiBaseText;
-		}
-	}
-
-	.sapMObjStatus .sapMObjStatusTitle {
-		color: @sapUiShellActiveTextColor;
-	}
-}
-
-html.sap-desktop .sapTntToolHeader .sapMObjStatusActive:focus .sapMObjStatusLink::after {
-	outline-color: @_sap_tnt_ToolHeader_BorderColor;
-}
-
 // ==========================================================================
 // sap.m.Avatar / sap.f.Avatar overriding
 // ==========================================================================

package/src/sap/tnt/themes/sap_horizon/ToolPage.less

@@ -3,5 +3,6 @@
 /* Horizon theme                       */
 /* =================================== */
 
-@_sap_tnt_ToolPage_AsideWidthOnTablet : 3.5rem;
-@_sap_tnt_ToolPage_HeaderHeight : 2.75rem;
+@_sap_tnt_ToolPage_AsideWidthOnTablet: 3.5rem;
+@_sap_tnt_ToolPage_HeaderHeight: 3.5rem;
+@_sap_tnt_ToolPage_HeaderShadow: @sapUiContentShadow0;