@openui5/themelib_sap_horizon 1.101.0 → 1.102.0

package/src/sap/m/themes/sap_horizon_hcb/ProgressIndicator.less

@@ -1,110 +1,206 @@
 /* ======================================== */
 /* CSS for control sap.m/ProgressIndicator  */
-/* Horizon High Contrast Black theme        */
+/* Horizon theme							*/
 /* ======================================== */
 
-.sapMPIBarNeutral {
-	background: @sapUiHighlight;
-	box-sizing: border-box;
-	border: 1px solid @sapUiFieldBorderColor;
-}
+.sapMPI {
+	position: relative;
+	padding: 1.25rem 1.25rem 0.75rem 0;
+	margin: 0;
+	height: 0.375rem;
+	min-height: 0.375rem;
+	width: 100%;
+	min-width: 4rem;
+	overflow: initial;
+	border-radius: 0;
+	background-color: transparent;
 
-.sapMPIBarPositive {
-	background: @sapUiHighlight;
-	box-sizing: border-box;
-	border: 1px solid @sapUiFieldBorderColor;
+	.sapMPIBarRemaining {
+		height: 0.375rem;
+		border-radius: 0.25rem;
+		box-sizing: border-box;
+	}
+
+	.sapMPIBar {
+		box-sizing: border-box;
+		height: 0.625rem;
+		border-radius: 0.5rem;
+		margin-top: -0.125rem;
+	}
 }
 
-.sapMPIBarNegative {
-	background: @sapUiHighlight;
-	box-sizing: border-box;
-	border: 1px solid @sapUiFieldBorderColor;
+.sapMPIBarRemaining {
+	position: absolute;
+    width: ~'calc(100% - 1.25rem)';
+	border: 0.0625rem solid @sapUiProgressBorderColor;
 }
 
-.sapMPIBarCritical {
-	background: @sapUiHighlight;
-	box-sizing: border-box;
-	border: 1px solid @sapUiFieldBorderColor;
+.sapMPIBar {
+	z-index: 1;
+	border: 0.0625rem solid @sapUiProgressValueTextColor;
 }
 
-.sapMPIBarInformation {
-	background: @sapUiHighlight;
-	box-sizing: border-box;
-	border: 1px solid @sapUiFieldBorderColor;
+.sapMPIValueMin .sapMPIBar {
+	border: none;
 }
 
-/* HCB Additional Styles */
-.sapMPIText::before {
+.sapMPIBar::before {
 	font-family: 'SAP-icons';
-	font-size: 0.875rem;
-	margin-right: 0.375rem;
-	vertical-align: bottom;
+	font-size: 1rem;
+	margin-left: 0.25rem;
+	position: absolute;
+	right: 0;
 }
 
-.sapMPIDisplayOnly .sapMPIText::before {
-	font-size: 0.6875rem;
-	vertical-align: top;
+.sapMPIValueMin .sapMPIBarRemaining::before,
+.sapMPIBarRemaining::after {
+	content: '';
+	display: block;
+	width: 0.25rem;
+	height: 0.25rem;
+	position: absolute;
+	border-radius: 50%;
 }
 
-.sapMPIDisplayOnly:not(.sapMPIBarDisabled) .sapMPIBarNeutral {
-	background: @sapUiHighlight;
+.sapMPIValueMin .sapMPIBarRemaining::before {
+	left: 0.0625rem;
 }
 
-.sapMPITextLeft::before {
-	margin-left: 0.25rem;
+.sapMPIBarRemaining::after {
+	right: 0.0625rem;
 }
 
-.sapMPIBarPositive > .sapMPITextLeft::before,
-.sapMPIBarPositive + .sapMPIBarRemaining > .sapMPITextRight::before {
-	content: '\e1c1';
-}
+.sapMPIBarPositive {
+	background-color: @sapUiProgressValuePositiveBackground;
+	border-color: @sapUiProgressValuePositiveBorderColor;
+	.sapMPIText.sapMPITextLeft,
+	.sapMPIText.sapMPITextRight {
+		color: @sapUiProgressPositiveTextColor;
+	}
 
-.sapMPIBarNegative > .sapMPITextLeft::before,
-.sapMPIBarNegative + .sapMPIBarRemaining > .sapMPITextRight::before {
-	content: '\e1ec';
-}
+	&::before {
+		content: '\e1c1';
+		color: @sapUiProgressValuePositiveTextColor;
+	}
 
-.sapMPIBarCritical > .sapMPITextLeft::before,
-.sapMPIBarCritical + .sapMPIBarRemaining > .sapMPITextRight::before {
-	content: '\e053';
-}
+	+ .sapMPIBarRemaining {
+		background-color: @sapUiProgressPositiveBackground;
+		border-color: @sapUiProgressPositiveBorderColor;
 
-.sapMPIBarInformation > .sapMPITextLeft::before,
-.sapMPIBarInformation + .sapMPIBarRemaining > .sapMPITextRight::before {
-	content: '\e289';
+		&::after,
+		&::before {
+			background-color: @sapUiProgressValuePositiveBackground;
+		}
+	}
 }
 
-.sapMPIBarPositive + .sapMPIBarRemaining > .sapMPITextRight::before,
-.sapMPIBarNegative + .sapMPIBarRemaining > .sapMPITextRight::before,
-.sapMPIBarCritical + .sapMPIBarRemaining > .sapMPITextRight::before,
-.sapMPIBarInformation + .sapMPIBarRemaining > .sapMPITextRight::before {
-	color: @sapUiContentForegroundTextColor;
+.sapMPIBarNegative {
+	background-color: @sapUiProgressValueNegativeBackground;
+	border-color: @sapUiProgressValueNegativeBorderColor;
+	.sapMPIText.sapMPITextLeft,
+	.sapMPIText.sapMPITextRight {
+		color: @sapUiProgressNegativeTextColor;
+	}
+
+	&::before {
+		content: '\e1ec';
+		color: @sapUiProgressValueNegativeTextColor;
+	}
+
+	+ .sapMPIBarRemaining {
+		background-color: @sapUiProgressNegativeBackground;
+		border-color: @sapUiProgressNegativeBorderColor;
+
+		&::after,
+		&::before {
+			background: @sapUiProgressValueNegativeBackground;
+		}
+	}
 }
 
-.sapMPIBarDisabled {
-	opacity: 1;
-	border-color: @sapUiHcReducedForeground;
+.sapMPIBarCritical {
+	background-color: @sapUiProgressValueCriticalBackground;
+	border-color: @sapUiProgressValueCriticalBorderColor;
+	.sapMPIText.sapMPITextLeft,
+	.sapMPIText.sapMPITextRight {
+		color: @sapUiProgressCriticalTextColor;
+	}
 
+	&::before {
+		content: '\e053';
+		color: @sapUiProgressValueCriticalTextColor;
+	}
+
+	+ .sapMPIBarRemaining {
+		background-color: @sapUiProgressCriticalBackground;
+		border-color: @sapUiProgressCriticalBorderColor;
+
+		&::after,
+		&::before {
+			background: @sapUiProgressValueCriticalBackground;
+		}
+	}
+}
+
+.sapMPIBarInformation {
+	background-color: @sapUiProgressValueInformationBackground;
+	border-color: @sapUiProgressValueInformationBorderColor;
 	.sapMPIText.sapMPITextLeft,
-	.sapMPITextRight,
-	.sapMPIBarRemaining > .sapMPITextRight::before {
-		color: @sapUiContentDisabledTextColor;
+	.sapMPIText.sapMPITextRight {
+		color: @sapUiProgressInformationTextColor;
 	}
 
-	.sapMPIBarNeutral,
-	.sapMPIBarPositive,
-	.sapMPIBarNegative,
-	.sapMPIBarCritical,
-	.sapMPIBarInformation {
-		background: @sapUiHcReducedBackground;
-		border-color: @sapUiHcReducedForeground;
+	&::before {
+		content: '\e289';
+		color: @sapUiProgressValueInformationTextColor;
 	}
 
-	.sapMPIBarRemaining {
-		border-color: @sapUiHcReducedForeground;
+	+ .sapMPIBarRemaining {
+		background-color: @sapUiProgressInformationBackground;
+		border-color: @sapUiProgressInformationBorderColor;
+
+		&::after,
+		&::before {
+			background: @sapUiProgressValueInformationBackground;
+		}
 	}
 }
 
-.sapMPIValueMin >.sapMPIBar {
-	border: none;
+.sapMPIDisplayOnly:not(.sapMPIBarDisabled) .sapMPIBarNeutral,
+.sapMPIBarNeutral {
+	background-color: @sapUiProgressValueBackground;
+	.sapMPIText.sapMPITextLeft,
+	.sapMPIText.sapMPITextRight {
+		color: @sapUiProgressTextColor;
+	}
+
+	+ .sapMPIBarRemaining {
+		background-color: @sapUiProgressBackground;
+		border-color: @sapUiProgressBorderColor;
+
+		&::after,
+		&::before {
+			background: @sapUiProgressValueBackground;
+		}
+	}
+}
+
+.sapMPIDisplayOnly .sapMPIText,
+.sapMPIText {
+	padding: 0;
+	position: absolute;
+	top: 0;
+	left: 0;
+	margin-bottom: 0.1875rem;
+	font-size: @sapUiProgressFontSize;
+	color: @sapUiProgressTextColor;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	max-width: 100%;
+
+	&.sapMPITextRight {
+		top: -1.3125rem;
+		right: -0.0675rem;
+	}
 }

package/src/sap/m/themes/sap_horizon_hcb/QuickView.less

@@ -3,16 +3,27 @@
 /* Horizon High Contrast Black theme  */
 /* ================================== */
 
-@_sap_m_QuickView_HorizontalLayoutMarginBottom: 1rem;
+@_sap_m_QuickView_HorizontalLayoutMarginBottom: 0.75rem;
 @_sap_m_QuickView_HorizontalLayoutIconFontSize: 1.5rem;
 @_sap_m_QuickView_PagePaddingTop: 2.75rem;
 
 @_sap_m_QuickViewCard_PagePadding: 1rem;
+@_sap_m_QuickView_TitleMarginBottom: 0.25rem;
+@_sap_m_QuickView_TitleFontSize: @sapMFontHeader6Size;
+@_sap_m_QuickView_FormTitleFontSize: @sapMFontHeader6Size;
+@_sap_m_QuickView_TitleMaxHeight: 2.125rem;
 
 .sapMQuickViewCard {
 	box-sizing: border-box;
-	padding: 1rem;
 	background: @sapUiGroupContentBackground;
 	box-shadow: @sapUiShadowLevel0;
-	border-radius: @sapUiElementBorderCornerRadius;
+	border-radius: 1rem;
+}
+
+.sapMQuickView .sapMPage .sapMPageHeader:not(.sapMIBar-CTX) .sapMIBar-CTX {
+	z-index: 1;
+}
+
+.sapMQuickViewPage .sapMPageHeader {
+	border-bottom: 1px solid;
 }

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

@@ -3,6 +3,10 @@
 /* Horizon High Contrast Black theme  */
 /* ================================== */
 
+@_sap_m_RangeSlider_Handle_Height: 1.5rem;
+@_sap_m_RangeSlider_Handle_Width: 2rem;
+@_sap_m_RangeSlider_Handle_Height_Compact: 1.25rem;
+@_sap_m_RangeSlider_Handle_Width_Compact: 1.5rem;
 
 /* overlap */
 .sapMSliderHandle.sapMSliderHandleOverlap {
@@ -20,28 +24,95 @@
 		}
 	}
 	.sapMSliderInner .sapMSliderHandle {
-		background: fade(@sapUiButtonBackground, 25);
+		background: @sapUiSliderRangeHandleBackground;
+		box-shadow: @sapUiContentSelectedShadow;
+		top: -0.625rem;
 	}
 
 	.sapMSliderInner:not(.sapMSliderInnerDisabled) .sapMSliderHandle {
 		&:hover {
-			background-color: fade(@sapUiButtonHoverBackground, 25);
-			border-color: @sapUiButtonHoverBorderColor;
+			background-color: @sapUiSliderHoverHandleBackground;
+			border-color: @sapUiSliderHoverHandleBorderColor;
+			box-shadow: @sapUiContentSelectedShadow;
 		}
 
-		&:active {
-			background: fade(@sapUiButtonActiveBackground, 25);
-			border-color: @sapUiButtonActiveBorderColor;
+		&.sapMSliderHandlePressed {
+			&:not(:focus) {
+				background: transparent;
+				border: 0.125rem solid @sapUiSliderActiveHandleBorderColor;
+				outline: none;
+				box-shadow: none;
+				top: -0.625rem;
+			}
 		}
 
-		&.sapMSliderHandlePressed {
-			background: fade(@sapUiButtonActiveBackground, 25);
-			border-color: @sapUiButtonActiveBorderColor;
+		&:focus {
+			background: @sapUiSliderActiveRangeHandleBackground;
+			border: 0.125rem solid @sapUiSliderActiveHandleBorderColor;
+			outline: none;
+			box-shadow: none;
+			top: -0.625rem;
 		}
 	}
 
-	.sapMSliderInner:not(.sapMSliderInnerDisabled):hover > .sapMSliderHandle {
-		background-color: fade(@sapUiButtonHoverBackground, 25);
-		border-color: @sapUiButtonHoverBorderColor;
+	.sapMSliderInner .sapMSliderHandle:not(.sapMSliderHandlePressed):not(.sapMRangeSlider.sapMSlider .sapMSliderInner:not(.sapMSliderInnerDisabled) .sapMSliderHandle:focus):after {
+		top: 4px;
 	}
+}
+
+.sapMRangeSlider .sapMSliderInner::before {
+	border: 0.0625rem solid @sapUiContentMeasureIndicatorColor;
+	background-color: @sapUiContentMeasureIndicatorColor;
+}
+
+.sapUiSizeCompact {
+	.sapMRangeSlider.sapMSlider .sapMSliderInner:not(.sapMSliderInnerDisabled) .sapMSliderHandle.sapMSliderHandlePressed {
+		&:not(:focus) {
+			background: transparent;
+			border: 0.125rem solid @sapUiSliderActiveHandleBorderColor;
+			outline: none;
+			box-shadow: none;
+			top: -0.5rem;
+		}
+	}
+
+	.sapMRangeSlider.sapMSlider .sapMSliderInner:not(.sapMSliderInnerDisabled) .sapMSliderHandle:focus {
+		background: @sapUiSliderActiveRangeHandleBackground;
+		border: 0.125rem solid @sapUiSliderActiveHandleBorderColor;
+		outline: none;
+		box-shadow: none;
+		top: -0.5rem;
+	}
+
+	.sapMRangeSlider.sapMSlider .sapMSliderInner .sapMSliderHandle {
+		top: -0.5rem;
+	}
+
+	.sapMRangeSlider.sapMSlider .sapMSliderInner .sapMSliderHandle:not(.sapMSliderHandlePressed):not(.sapMRangeSlider.sapMSlider .sapMSliderInner:not(.sapMSliderInnerDisabled) .sapMSliderHandle:focus):after {
+		top: 2px;
+		right: 0.25rem;
+	}
+
+	.sapMSliderLabels {
+		margin: 0.625rem -0.875rem 0 -0.875rem;
+	}
+}
+
+html.sap-desktop .sapMSliderProgress:focus:before {
+	border: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+	border-radius: 0.5rem;
+	content: "";
+	display: block;
+	position: absolute;
+	height: ~"calc(@{_sap_m_RangeSlider_Handle_Height} + 0.375rem)";
+	width: ~"calc(100% + ((@{_sap_m_RangeSlider_Handle_Width}) + 0.375rem))";
+	top: ~"calc(-1 * ((@{_sap_m_RangeSlider_Handle_Height} / 2) + 0.1875rem))";
+	left: ~"calc(-1 * ((@{_sap_m_RangeSlider_Handle_Width} / 2) + 0.3125rem))";
+}
+
+html.sap-desktop .sapUiSizeCompact .sapMSliderProgress:focus:before {
+	height: ~"calc(@{_sap_m_RangeSlider_Handle_Height_Compact} + 0.375rem)";
+	width: ~"calc(100% + ((@{_sap_m_RangeSlider_Handle_Width_Compact}) + 0.375rem))";
+	top: ~"calc(-1 * ((@{_sap_m_RangeSlider_Handle_Height_Compact} / 2) + 0.1875rem))";
+	left: ~"calc(-1 * ((@{_sap_m_RangeSlider_Handle_Width_Compact} / 2) + 0.3125rem))";
 }

package/src/sap/m/themes/sap_horizon_hcb/RatingIndicator.less

@@ -4,6 +4,10 @@
 /* ====================================== */
 
 .sapMRI {
+	&:not(.sapMRIDisabled):not(.sapMRIDisplayOnly):not(.sapMRIReadOnly):hover {
+		opacity: 0.9;
+	}
+
 	.sapMRISel, .sapMRIHov {
 		color: @sapUiContentRatedColor;
 	}
@@ -35,4 +39,8 @@ html.sap-desktop .sapMRI:focus:not(.sapMRIDisabled):not(.sapMRIDisplayOnly) {
 
 .sapMRIIconSel, .sapMRIIconUnsel, .sapMRIIconHov, .sapMRIIconReadOnly {
 	font-size: 1.5rem;
+}
+
+.sapMRIIconSel, .sapMRIIconUnsel {
+	text-shadow: @sapContent_TextShadow;
 }

package/src/sap/m/themes/sap_horizon_hcb/SegmentedButton.less

@@ -33,7 +33,6 @@
 .sapMSegBBtn:first-child .sapMSegBBtnInner {
 	border-top-left-radius: 0.375rem;
 	border-bottom-left-radius: 0.375rem;
-	
 }
 
 .sapMSegBBtn:last-child .sapMSegBBtnInner {

package/src/sap/m/themes/sap_horizon_hcb/SinglePlanningCalendarGrid.less

@@ -17,7 +17,6 @@
 
 .sapMSinglePC .sapUiCalendarAppCont{
 	border-left: 0.0625rem solid darken(@sapUiListBorderColor, 15);
-	border-radius: 0 0.125rem 0.125rem 0.125rem;
 }
 
 html.sap-desktop {
@@ -37,8 +36,7 @@ html.sap-desktop {
 	}
 
 	.sapMSinglePCColumnHeader .sapUiCalItem.sapUiCalItemNow {
-		border-color: @sapUiLegendCurrentDateTime;
-		border-radius: 0.25rem;
+		border: none;
 	}
 
 	.sapMSinglePCNowMarker {
@@ -59,6 +57,9 @@ html.sap-desktop {
 	.sapMSinglePCAppointmentWrap.sapUiCalendarRowApps {
 		.sapUiCalendarAppSel{
 			border: 0.0625rem solid @sapUiListSelectionBorderColor;
+			.sapUiCalendarAppCont {
+				border: none;
+			}
 		}
 		&:focus {
 			.sapUiCalendarAppCont:after {
@@ -76,10 +77,6 @@ html.sap-desktop {
 
 	.sapMSinglePCColumnHeader {
 		.sapUiCalItem.sapUiCalItemNow {
-			.sapUiCalItemText {
-				border: 0.0625rem solid black;
-			}
-
 			.sapUiCalSpecialDate {
 				position: absolute;
 				left: 0;
@@ -91,9 +88,12 @@ html.sap-desktop {
 		.sapUiCalItem .sapUiCalSpecialDate {
 			height: 0.25rem;
 		}
+	}
 
-		.sapUiCalItem.sapUiCalItemNow.sapUiCalItemSel .sapUiCalItemText {
-			border: 0.0625rem solid white;
+	.sapMSinglePCAppointmentWrap.sapUiCalendarRowApps {
+		.sapUiCalendarApp {
+			border-top-left-radius: 0;
+			border-bottom-left-radius: 0;
 		}
 	}
 }
@@ -111,9 +111,7 @@ html.sap-desktop {
 			outline: 0.0625rem solid black;
 			box-shadow: inset black;
 			&.sapUiCalItemSel {
-				background-color: @sapUiContentSelectedBackground;
 				outline: 0.0625rem solid white;
-				border: 0.125rem solid @sapUiLegendCurrentDateTime;
 			}
 			&.sapUiCalItemSel:hover {
 				background-color: @sapUiActive;
@@ -158,4 +156,9 @@ html.sap-desktop {
 			}
 		}
 	}
+}
+
+.sapMSinglePCBlockers > .sapUiCalendarRowApps > .sapUiCalendarApp > .sapUiCalendarAppCont,
+.sapMSinglePCAppointments > .sapUiCalendarRowApps > .sapUiCalendarApp > .sapUiCalendarAppCont {
+	background-color: @sapUiListHoverBackground;
 }