@openui5/themelib_sap_horizon 1.99.0 → 1.100.0

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

@@ -0,0 +1,109 @@
+/* ================================== */
+/* CSS for control sap.m/Popover      */
+/* Horizon High Contrast Black theme  */
+/* ================================== */
+
+.sapMPopoverArr:after {
+	border-style: solid;
+	border-width: 2px;
+}
+
+.sapMPopoverWithBar > .sapMPopoverArr.sapMPopoverArrUp:after {
+	background-color: @sapUiPageHeaderBackground;
+}
+
+.sapUiSizeCompact {
+	.sapMPopoverFooter, .sapMPopoverHeader {
+		.sapMIBar, .sapMBar {
+			height: 2.5rem;
+
+			& > .sapMBarLeft,
+			& > .sapMBarRight {
+				height: 2.5rem;
+				line-height: 2.5rem;
+
+				.sapMBtn {
+					vertical-align: middle;
+				}
+			}
+
+			& > .sapMBarMiddle .sapMBarPH {
+				height: 2.5rem;
+				line-height: 2.5rem;
+
+				.sapMBtn {
+					vertical-align: middle;
+				}
+			}
+		}
+	}
+}
+
+.sapMPopoverHeader, .sapMPopoverFooter, .sapMPopoverSubHeader {
+	.sapUi-Std-PaddingS, .sapUi-Std-PaddingM,
+	.sapUi-Std-PaddingL, .sapUi-Std-PaddingXL {
+		&.sapMBar {
+			.sapMBarMiddle .sapMBarPH {
+				padding-left: 0;
+				padding-right: 0;
+			}
+
+			.sapMBarLeft {
+				padding-left: inherit;
+
+				.sapMBarChild {
+					padding-right: 0.5rem;
+				}
+			}
+
+			.sapMBarRight {
+				padding-right: inherit;
+
+				.sapMBarChild {
+					padding-left: 0.5rem;
+				}
+			}
+		}
+	}
+}
+
+.sapMPopoverHeader, .sapMPopoverSubHeader {
+	position: relative;
+	z-index: 2;
+
+	.sapMBar {
+		.sapMBarContainer {
+			padding-left: 0;
+			padding-right: 0;
+		}
+		.sapMBarLeft {
+			padding-left: 1rem;
+		}
+		.sapMBarMiddle .sapMBarContainer {
+			padding: 0 1rem;
+		}
+		.sapMBarRight {
+			padding-right: 1rem;
+		}
+	}
+}
+
+.sapMPopoverWithoutSubHeader .sapMPopoverHeader, .sapMPopoverSubHeader {
+	&:after {
+		content: "";
+		position: absolute;
+		height: 1px;
+		bottom: 0px;
+		width: 100%;
+		box-shadow: @sapUiShadowHeader;
+		z-index: 1;
+	}
+
+	.sapMIBar-CTX {
+		z-index: 2;
+	}
+}
+
+.sapMPopoverWithSubHeader .sapMPopoverHeader .sapMIBar-CTX {
+	box-shadow: none;
+}

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

@@ -0,0 +1,110 @@
+/* ======================================== */
+/* CSS for control sap.m/ProgressIndicator  */
+/* Horizon High Contrast Black theme        */
+/* ======================================== */
+
+.sapMPIBarNeutral {
+	background: @sapUiHighlight;
+	box-sizing: border-box;
+	border: 1px solid @sapUiFieldBorderColor;
+}
+
+.sapMPIBarPositive {
+	background: @sapUiHighlight;
+	box-sizing: border-box;
+	border: 1px solid @sapUiFieldBorderColor;
+}
+
+.sapMPIBarNegative {
+	background: @sapUiHighlight;
+	box-sizing: border-box;
+	border: 1px solid @sapUiFieldBorderColor;
+}
+
+.sapMPIBarCritical {
+	background: @sapUiHighlight;
+	box-sizing: border-box;
+	border: 1px solid @sapUiFieldBorderColor;
+}
+
+.sapMPIBarInformation {
+	background: @sapUiHighlight;
+	box-sizing: border-box;
+	border: 1px solid @sapUiFieldBorderColor;
+}
+
+/* HCB Additional Styles */
+.sapMPIText::before {
+	font-family: 'SAP-icons';
+	font-size: 0.875rem;
+	margin-right: 0.375rem;
+	vertical-align: bottom;
+}
+
+.sapMPIDisplayOnly .sapMPIText::before {
+	font-size: 0.6875rem;
+	vertical-align: top;
+}
+
+.sapMPIDisplayOnly:not(.sapMPIBarDisabled) .sapMPIBarNeutral {
+	background: @sapUiHighlight;
+}
+
+.sapMPITextLeft::before {
+	margin-left: 0.25rem;
+}
+
+.sapMPIBarPositive > .sapMPITextLeft::before,
+.sapMPIBarPositive + .sapMPIBarRemaining > .sapMPITextRight::before {
+	content: '\e1c1';
+}
+
+.sapMPIBarNegative > .sapMPITextLeft::before,
+.sapMPIBarNegative + .sapMPIBarRemaining > .sapMPITextRight::before {
+	content: '\e1ec';
+}
+
+.sapMPIBarCritical > .sapMPITextLeft::before,
+.sapMPIBarCritical + .sapMPIBarRemaining > .sapMPITextRight::before {
+	content: '\e053';
+}
+
+.sapMPIBarInformation > .sapMPITextLeft::before,
+.sapMPIBarInformation + .sapMPIBarRemaining > .sapMPITextRight::before {
+	content: '\e289';
+}
+
+.sapMPIBarPositive + .sapMPIBarRemaining > .sapMPITextRight::before,
+.sapMPIBarNegative + .sapMPIBarRemaining > .sapMPITextRight::before,
+.sapMPIBarCritical + .sapMPIBarRemaining > .sapMPITextRight::before,
+.sapMPIBarInformation + .sapMPIBarRemaining > .sapMPITextRight::before {
+	color: @sapUiContentForegroundTextColor;
+}
+
+.sapMPIBarDisabled {
+	opacity: 1;
+	border-color: @sapUiHcReducedForeground;
+
+	.sapMPIText.sapMPITextLeft,
+	.sapMPITextRight,
+	.sapMPIBarRemaining > .sapMPITextRight::before {
+		color: @sapUiContentDisabledTextColor;
+	}
+
+	.sapMPIBarNeutral,
+	.sapMPIBarPositive,
+	.sapMPIBarNegative,
+	.sapMPIBarCritical,
+	.sapMPIBarInformation {
+		background: @sapUiHcReducedBackground;
+		border-color: @sapUiHcReducedForeground;
+	}
+
+	.sapMPIBarRemaining {
+		border-color: @sapUiHcReducedForeground;
+	}
+}
+
+.sapMPIValueMin >.sapMPIBar {
+	border: none;
+}

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

@@ -0,0 +1,8 @@
+/* ==================================== */
+/* CSS for control sap.m/PullToRefresh  */
+/* Horizon High Contrast Black theme    */
+/* ==================================== */
+
+.sapMPullDownNontouch:focus {
+	outline-width: 0.125rem;
+}

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

@@ -0,0 +1,18 @@
+/* ================================== */
+/* CSS for control sap.m/QuickView    */
+/* Horizon High Contrast Black theme  */
+/* ================================== */
+
+@_sap_m_QuickView_HorizontalLayoutMarginBottom: 1rem;
+@_sap_m_QuickView_HorizontalLayoutIconFontSize: 1.5rem;
+@_sap_m_QuickView_PagePaddingTop: 2.75rem;
+
+@_sap_m_QuickViewCard_PagePadding: 1rem;
+
+.sapMQuickViewCard {
+	box-sizing: border-box;
+	padding: 1rem;
+	background: @sapUiGroupContentBackground;
+	box-shadow: @sapUiShadowLevel0;
+	border-radius: @sapUiElementBorderCornerRadius;
+}

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

@@ -0,0 +1,198 @@
+/* ================================== */
+/* CSS for control sap.m/RadioButton  */
+/* Horizon High Contrast Black theme  */
+/* ================================== */
+
+.sapMRb {
+	height: 2.75rem;
+
+	.sapMRbBOut {
+		stroke-width: 0.125rem;
+	}
+
+	&:not(.sapMRbErr):not(.sapMRbWarn) {
+		.sapMRbBOut {
+			stroke-width: @sapUiFieldBorderWidth;
+		}
+	}
+}
+
+.sapMRb:focus {
+	outline: none;
+}
+
+.sapMRb .sapMRbB {
+	height: 2.75rem;
+	line-height: 2.75rem;
+	width: 2.75rem;
+}
+
+.sapMRb > .sapMRbBLabel {
+	line-height: 2.75rem;
+	height: 2.75rem;
+}
+
+.sapMRbSvg {
+	margin: 0.6875rem;
+}
+
+.sapMRbHasLabel.sapMRb:focus:before {
+	bottom: .5rem;
+	top: 0.5rem;
+	left: 0.5rem;
+	right: 0;
+}
+
+.sapMRbHasLabel .sapMRbB {
+	width: 2.75rem;
+}
+
+/* Align RadioButton in Form with other controls */
+.sapUiForm.sapUiFormEdit-CTX{
+	.sapMRb > .sapMRbB {
+		width: 2.1875rem;
+	}
+}
+
+.sapUiSizeCompact {
+
+	.sapMRbB {
+		height:2rem;
+		line-height: 2rem;
+		width: 2rem;
+	}
+
+	.sapMRb > .sapMLabel {
+		height: 2rem;
+		line-height: 2rem;
+	}
+
+	.sapMRb:focus:before {
+		bottom: 0.325rem;
+		top: 0.325rem;
+		left: 0.325rem;
+		right: 0.325rem;
+	}
+}
+
+.sapMRb:not(.sapMRbErr):not(.sapMRbWarn):not(.sapMRbInfo):not(.sapMRbSucc) .sapMRbB.sapMRbHoverable:hover {
+	.sapMRbSvg .sapMRbBOut {
+		fill: @sapUiSelected; // contrast themes specific
+	}
+}
+
+.sapMRb:not(.sapMRbErr):not(.sapMRbWarn):not(.sapMRbInfo):not(.sapMRbSucc) .sapMRbHoverable:hover .sapMRbBOut {
+	stroke: @sapUiFieldHoverBorderColor;
+	fill: @sapUiSelected; // contrast themes specific
+}
+
+.sapMRb:focus:before {
+	border: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+	bottom: 0.5rem;
+	top: 0.5rem;
+	left: 0.5rem;
+	right: 0.5rem;
+}
+
+.sapMLIBActive .sapMRbB .sapMRbBOut {
+	border: 1px solid @sapUiListActiveTextColor;
+}
+
+.sapMLIBActive .sapMRbSel .sapMRbBOut {
+	background-color: @sapUiListActiveBackground;
+}
+
+.sapMRbDis {
+	opacity: @sapUiContentDisabledOpacity;
+}
+
+.sapMRbSel .sapMRbBInn {
+	fill: @sapUiContentIconColor; // contrast themes specific
+}
+
+.sapMRbB .sapMRbBInn {
+	r: 27.5%;
+}
+
+/* Value states */
+.sapMRbErr, .sapMRbWarn, .sapMRbInfo{
+	.sapMRbB .sapMRbBOut {
+		stroke-dasharray: 4; // contrast themes specific
+	}
+}
+
+.sapMRbErr.sapMRbSel,
+.sapMRbErr.sapMRbSel.sapMRbRo {
+	.sapMRbBInn {
+		fill: @sapUiFieldInvalidColor;
+		stroke: none;
+	}
+}
+
+.sapMRbErr,
+.sapMRbErr.sapMRbBTouched {
+	.sapMRbB .sapMRbBOut {
+		stroke: @sapUiFieldInvalidColor;
+		fill: @sapUiFieldInvalidBackground;
+	}
+}
+
+.sapMRbWarn.sapMRbSel,
+.sapMRbWarn.sapMRbSel.sapMRbRo {
+	.sapMRbBInn {
+		fill: @sapUiFieldTextColor;
+		stroke: none;
+	}
+}
+
+.sapMRbWarn,
+.sapMRbWarn.sapMRbBTouched {
+	.sapMRbB .sapMRbBOut {
+		stroke: @sapUiFieldWarningColor;
+		fill: @sapUiFieldWarningBackground;
+	}
+}
+
+.sapMRbSucc.sapMRbSel,
+.sapMRbSucc.sapMRbSel.sapMRbRo {
+	.sapMRbBInn {
+		fill: @sapUiFieldSuccessColor;
+		stroke: none;
+	}
+}
+
+.sapMRbSucc,
+.sapMRbSucc.sapMRbBTouched {
+	.sapMRbB .sapMRbBOut {
+		stroke: @sapUiFieldSuccessColor;
+		fill: @sapUiFieldSuccessBackground;
+	}
+}
+
+.sapMRbInfo.sapMRbSel,
+.sapMRbInfo.sapMRbSel.sapMRbRo {
+	.sapMRbBInn {
+		fill: @sapUiFieldInformationColor;
+		stroke: none;
+	}
+}
+
+.sapMRbInfo,
+.sapMRbInfo.sapMRbBTouched {
+	.sapMRbB .sapMRbBOut {
+		stroke: @sapUiFieldInformationColor;
+		fill: @sapUiFieldInformationBackground;
+	}
+}
+
+html[data-sap-ui-browser^="sf"] {
+	// fix for circle width on zoom in Safari
+	.sapMRb.sapMRbErr .sapMRbBOut,
+	.sapMRb.sapMRbWarn .sapMRbBOut {
+		stroke-width: 2px;
+	}
+	// fix for circle width on zoom in Safari
+	.sapMRb:not(.sapMRbErr):not(.sapMRbWarn) .sapMRbBOut {
+		stroke-width: 1px;
+	}
+}

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

@@ -0,0 +1,8 @@
+/* ======================================= */
+/* CSS for control sap.m/RadioButtonGroup  */
+/* Horizon High Contrast Black theme       */
+/* ======================================= */
+
+@_sap_m_RadioButtonGroup_WidthWithLabel: 2.75rem;
+@_sap_m_RadioButtonGroup_PaddingLeftLabel: 2.75rem;
+@_sap_m_RadioButtonGroup_PaddingLeftLabel_Form: 2.1875rem;

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

@@ -0,0 +1,47 @@
+/* ================================== */
+/* CSS for control sap.m/RangeSlider  */
+/* Horizon High Contrast Black theme  */
+/* ================================== */
+
+
+/* overlap */
+.sapMSliderHandle.sapMSliderHandleOverlap {
+	border: 0.125rem solid darken(@sapUiFieldActiveBorderColor, 5);
+}
+
+.sapMRangeSlider.sapMSlider {
+	.sapMSliderLabels {
+		height: 1rem;
+
+		.sapMSliderRangeLabel {
+			width: 2rem;
+			font-size: @sapMFontSmallSize;
+			color: @sapUiContentLabelColor;
+		}
+	}
+	.sapMSliderInner .sapMSliderHandle {
+		background: fade(@sapUiButtonBackground, 25);
+	}
+
+	.sapMSliderInner:not(.sapMSliderInnerDisabled) .sapMSliderHandle {
+		&:hover {
+			background-color: fade(@sapUiButtonHoverBackground, 25);
+			border-color: @sapUiButtonHoverBorderColor;
+		}
+
+		&:active {
+			background: fade(@sapUiButtonActiveBackground, 25);
+			border-color: @sapUiButtonActiveBorderColor;
+		}
+
+		&.sapMSliderHandlePressed {
+			background: fade(@sapUiButtonActiveBackground, 25);
+			border-color: @sapUiButtonActiveBorderColor;
+		}
+	}
+
+	.sapMSliderInner:not(.sapMSliderInnerDisabled):hover > .sapMSliderHandle {
+		background-color: fade(@sapUiButtonHoverBackground, 25);
+		border-color: @sapUiButtonHoverBorderColor;
+	}
+}

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

@@ -0,0 +1,38 @@
+/* ====================================== */
+/* CSS for control sap.m/RatingIndicator  */
+/* Horizon High Contrast Black theme      */
+/* ====================================== */
+
+.sapMRI {
+	.sapMRISel, .sapMRIHov {
+		color: @sapUiContentRatedColor;
+	}
+
+	.sapMRIUnsel,
+	&.sapMRIReadOnly .sapMRIUnsel,
+	&.sapMRIDisplayOnly .sapMRIUnsel {
+		color: @sapUiContentUnratedColor;
+	}
+
+	&.sapMRIDisplayOnly {
+		.sapMRIIconSel {
+			color: @sapUiContentIconColor;
+		}
+	}
+
+	&.sapMRIDisabled {
+		.sapMRIUnsel, .sapMRISel {
+			color: @sapUiContentDisabledTextColor;
+		}
+	}
+}
+
+/* Custom focus outline */
+html.sap-desktop .sapMRI:focus:not(.sapMRIDisabled):not(.sapMRIDisplayOnly) {
+	outline: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+	outline-offset: 0.0625rem;
+}
+
+.sapMRIIconSel, .sapMRIIconUnsel, .sapMRIIconHov, .sapMRIIconReadOnly {
+	font-size: 1.5rem;
+}

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

@@ -0,0 +1,12 @@
+/* ======================================== */
+/* CSS for control sap.m/ResponsivePopover  */
+/* Horizon High Contrast Black theme        */
+/* ======================================== */
+
+.sapMResponsivePopover.sapMDialog .sapMIBar.sapMPageHeader:before {
+	border-top: none;
+}
+
+.sapMPopoverFooter .sapMTB .sapMBtn {
+	min-width: 4rem;
+}

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

@@ -0,0 +1,72 @@
+/* ================================== */
+/* CSS for control sap.m/SearchField  */
+/* Horizon High Contrast Black theme  */
+/* ================================== */
+
+// ==========================================================================
+// Variables overriding
+// ==========================================================================
+
+@_sap_m_SearchField_Height: 2.75rem;
+@_sap_m_SearchField_FormHeight: 2.25rem;
+@_sap_m_SearchField_ButtonSize: 2.25rem;
+@_sap_m_SearchField_ButtonFontSize: 1rem;
+@_sap_m_SearchField_Compact_FormPaddingLeft: 0.5rem;
+@_sap_m_SearchField_ResetIcon: "\e03e";
+@_sap_m_SearchField_PlaceholderFontStyle: normal;
+
+.sapMSFF {
+	border-radius: @sapUiFieldBorderCornerRadius;
+}
+
+.sapMSFDisabled {
+	opacity: @sapUiContentDisabledOpacity;
+}
+
+.sapMSFB {
+	border-radius: @sapUiFieldBorderCornerRadius;
+	color: @sapUiButtonTextColor;
+	line-height: @_sap_m_SearchField_ButtonSize - @sapUiFieldBorderWidth * 2; // center the icon vertically
+
+	&:first-of-type {
+		margin-left: 0.25rem;
+	}
+
+	&:focus {
+		outline: none;
+	}
+
+	&:hover {
+		box-shadow: @sapUiContentInteractionShadow;
+		background-color: @sapUiButtonLiteHoverBackground;
+		border-left: 1px solid @sapUiButtonHoverBorderColor; // contrast themes specific
+		border-right: 1px solid transparent;
+	}
+
+	&.sapMSFR:not(:last-child):hover { // if there is no search button the right border is not needed
+		border-right: 1px solid @sapUiButtonHoverBorderColor; // contrast themes specific
+	}
+
+	&:active,
+	&.sapMSFBA // Firefox specific
+	{
+		box-shadow: @sapUiContentInteractionShadow;
+		color: @sapUiButtonSelectedTextColor;
+		background-color: @sapUiButtonLiteActiveBackground;
+	}
+}
+
+.sapMSF:not(.sapMSFDisabled):hover .sapMSFF {
+	box-shadow: @sapUiContentInteractionShadow;
+	background-color: @sapUiFieldHoverBackground;
+}
+
+.sapMSF.sapMFocus {
+	.sapMSFF {
+		background-color: @sapUiFieldFocusBackground;
+	}
+
+	&:hover .sapMSFF {
+		box-shadow: none;
+	}
+}