@openui5/themelib_sap_horizon 1.100.0 → 1.101.0

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

@@ -12,31 +12,22 @@
 @_sap_m_InputBase_Height: 2.25rem;
 @_sap_m_InputBase_DisabledOpacity: @sapUiContentDisabledOpacity;
 @_sap_m_InputBase_IconLineHeight: 2.125rem;
-@_sap_m_InputBase_IconWidth: 2.125rem;
-@_sap_m_InputBase_IconMinWidth: 2.125rem;
-
-.sapMInputBaseInner {
-	color: @sapUiFieldTextColor;
-}
+@_sap_m_InputBase_IconWidth: 2.25rem;
+@_sap_m_InputBase_IconMinWidth: 2.25rem;
 
 .sapMInputBaseContentWrapper {
-	border: 1px solid @sapUiFieldBorderColor;
-	background: @sapUiFieldBackground;
-	border-radius: @sapUiFieldBorderCornerRadius;
 
 	&.sapMInputBaseContentWrapperState:not(.sapMInputBaseContentWrapperSuccess) {
-
-		/* calculated line-height excluding the top and bottom borders */
-		.sapMInputBaseIcon {
-			line-height: 2rem;
-		}
-
 		.sapMTokenizer .sapMToken {
 			margin-top: 0.1875rem;
 		}
 	}
 }
 
+.sapMInputBaseContentWrapper:not(.sapMInputBaseContentWrapperError):not(.sapMInputBaseContentWrapperWarning):not(.sapMInputBaseContentWrapperInformation):not(.sapMInputBaseDisabledWrapper) {
+	border: @sapUiContentFocusWidth @sapUiFieldBorderStyle @sapUiFieldBorderColor;
+}
+
 .sapMInputBase:not(.sapMInputBaseDisabled):not(.sapMInputBaseIconPressed) .sapMInputBaseIconContainer .sapMInputBaseIcon {
 	box-sizing: border-box;
 	color: @sapUiContentIconColor;
@@ -66,27 +57,6 @@
 	}
 }
 
-.sapMInputBaseContentWrapperWarning {
-	background: @sapUiFieldWarningBackground;
-	border: @sapField_WarningBorderWidth @sapField_WarningBorderStyle @sapUiFieldWarningColor;
-}
-
-.sapMInputBaseContentWrapperSuccess {
-	background: @sapUiFieldSuccessBackground;
-	border: @sapField_SuccessBorderWidth @sapField_SuccessBorderStyle @sapUiFieldSuccessColor;
-}
-
-.sapMILI-CTX .sapMInputBaseContentWrapperError,
-.sapMInputBaseContentWrapperError {
-	background: @sapUiFieldInvalidBackground;
-	border: @sapField_InvalidBorderWidth @sapField_InvalidBorderStyle @sapUiFieldInvalidColor;
-}
-
-.sapMInputBaseContentWrapperInformation {
-	background: @sapUiFieldInformationBackground;
-	border: @sapField_InformationBorderWidth @sapField_InformationBorderStyle @sapUiFieldInformationColor;
-}
-
 .sapMInputBaseContentWrapperWarning, .sapMInputBaseContentWrapperError {
 	.sapMInputBaseInner {
 		font-style: italic;
@@ -95,14 +65,30 @@
 }
 
 .sapMInputBaseInner::-webkit-input-placeholder {
+	font-weight: normal;
 	font-style: normal;
 }
 
 .sapMInputBaseInner::-moz-placeholder {
+	font-weight: normal;
 	font-style: normal;
 }
 
-.sapUiSizeCompact .sapMInputBaseContentWrapper.sapMInputBaseContentWrapperState:not(.sapMInputBaseContentWrapperSuccess) .sapMInputBaseIcon {
+.sapMInputBaseContentWrapperError .sapMInputBaseInner::-webkit-input-placeholder {
+	color: @sapUiFieldTextColor;
+	font-weight: bold;
+}
+
+.sapMInputBaseContentWrapperError .sapMInputBaseInner::-moz-placeholder {
+	color: @sapUiFieldTextColor;
+	font-weight: bold;
+}
+
+.sapMInputBaseContentWrapper .sapMInputBaseIcon {
+	line-height: 2rem;
+}
+
+.sapUiSizeCompact .sapMInputBaseIcon {
 	line-height: 1.375rem;
 }
 

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

@@ -3,9 +3,6 @@
 /* Horizon High Contrast White theme  */
 /* ================================== */
 
-@_sap_m_Link_TextShadowColor: none;
-@sapUiLinkSubtleColor: darken(@sapUiLink, 15);
-
 .sapMLnk {
 	text-decoration: underline;
 }
@@ -16,29 +13,42 @@
 	cursor: default;
 }
 
+.sapMLnkEmphasized {
+	font-family: @sapUiFontBoldFamily;
+}
+
+.sapMLIBActive .sapMLnk {
+	color: @sapUiListActiveTextColor;
+	text-decoration: underline;
+}
+
 .sapMLnk.sapMLnkSubtle {
-	color: @sapLinkColor;
+	color: @sapUiLinkSubtleColor;
+	text-decoration: underline;
 }
 
 .sapMLnkSubtle:focus {
 	color: @sapUiContentFocusColor;
 }
 
-html.sap-desktop .sapMLnk:focus:not(.sapMLnkDsbl) {
-	text-decoration: none;
-	outline: 0.125rem dotted @sapUiContentFocusColor;
+.sapMLnk:not(.sapMLnkDsbl) {
+	text-shadow: @sapUiContentTextShadow;
 }
 
 html.sap-desktop .sapMLnk:hover:not(.sapMLnkDsbl) {
 	text-decoration: none;
 }
 
-.sapMLnk:hover.sapMLnkDsbl, .sapMLnk:focus.sapMLnkDsbl {
-	outline: none;
-}
-
 /* align Link in Form with Label */
 .sapUiFormEdit .sapMLnk {
 	margin-top: 0.875rem; /* don't use padding as this would stretch the focus outline */
 	margin-bottom: 0.625rem; /* for some reason browser adds 4px, display: block would lead to stretched focus outline*/
+}
+
+.sapMListTblRow.sapMLIBSelected .sapMLnk:not(.sapMLnkDsbl) {
+	text-shadow: @sapUiContentTextShadow;
+}
+
+html.sap-desktop .sapMLnk:focus:not(.sapMLnkDsbl) {
+	outline: 0.125rem dotted @sapUiContentFocusColor;
 }

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

@@ -4,7 +4,7 @@
 /* =================================== */
 
 .sapMMsgStrip {
-	border-radius: @sapUiElementBorderCornerRadius;
+	border-radius: @sapUiPopoverBorderCornerRadius;
 	border-width: 0.125rem;
 }
 
@@ -16,12 +16,7 @@
 	top: -0.0625rem;
 }
 
-.sapMMsgStripInformation {
-	background-color: @sapInformationBackground;
-	border-color: @sapInformationBorderColor;
-	color: @sapUiBaseText;
-
-	& .sapMMsgStripIcon {
-		color: @sapInformativeElementColor;
-	}
-}
+.sapMMsgStripMessage>.sapMLnk {
+	padding-right: 0.25rem;
+	padding-left: 0.25rem;
+}

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

@@ -27,14 +27,9 @@
 	outline: 2px dotted @sapUiContentFocusColor;
 }
 
-.sapMObjectAttributeActive .sapMObjectAttributeText:focus {
-	text-decoration: none;
-}
-
 .sapMObjectAttributeActive .sapMObjectAttributeText:active,
 .sapMObjectAttributeActive .sapMObjectAttributeText:hover {
 	text-decoration: none;
-	color: @sapUiLinkHover;
 }
 
 /*=========================================== */
@@ -44,8 +39,8 @@
 .sapMOHR .sapMObjectAttributeActive .sapMObjectAttributeText:active,
 .sapMOHR .sapMObjectAttributeActive .sapMObjectAttributeText:hover,
 .sapMOHR .sapMObjectAttributeActive .sapMObjectAttributeText:focus {
-	text-decoration: none;
-	color: @sapUiLinkHover;
+	text-decoration: underline;
+	color: @sapUiLinkHoverColor;
 }
 
 /*=========================================== */
@@ -53,9 +48,13 @@
 /*=========================================== */
 
 .sapMOH .sapMObjectAttributeActive .sapMObjectAttributeText:active,
-.sapMOH .sapMObjectAttributeActive .sapMObjectAttributeText:hover {
+.sapMOH .sapMObjectAttributeActive .sapMObjectAttributeText:hover,
+.sapMOH .sapMObjectAttributeActive .sapMObjectAttributeText:focus {
+	text-decoration: underline;
+}
+
+.sapMOH .sapMObjectAttributeActive .sapMObjectAttributeText:focus:hover {
 	text-decoration: none;
-	color: @sapUiLinkHover;
 }
 
 .sapMOHR .sapMObjectAttributeActive .sapMObjectAttributeText,

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

@@ -12,4 +12,23 @@ html.sap-phone {
 			border-radius: 0.25rem 0.25rem 0 0;
 		}
 	}
+}
+
+.sapMOTAPopover.sapMPopover .sapMPopoverCont .sapMPopoverScroll {
+	max-width: 20rem;
+  }
+
+.sapUiSizeCompact .sapMTBSeparator.sapMTBSeparatorOverflowToolbar,
+.sapMTBSeparator.sapMTBSeparatorOverflowToolbar {
+	margin: 0.375rem 0.1875rem;
+	width: 100%;
+	background: @sapUiToolbarSeparatorColor;
+}
+
+.sapMOTAPopover.sapMPopover .sapMPopoverCont .sapMPopoverScroll {
+	padding: 0.25rem 0.5rem;
+}
+
+.sapUiSizeCompact .sapMOTAPopover.sapMPopover .sapMPopoverCont .sapMPopoverScroll {
+	padding: 0.1875rem 0.375rem;
 }

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

@@ -48,7 +48,7 @@
 }
 
 .sapMPageBgList {
-	background-color: @sapUiBaseBG;
+	background-color: @sapUiGroupContentBackground;
 }
 
 /* The following overrides for sap_belize/sap_belize_plus are only intended for apps inside FLP (Ushell) */

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

@@ -4,11 +4,26 @@
 /* ================================== */
 
 .sapMPopoverArr:after {
-	border-style: solid;
-	border-width: 2px;
+	background: @sapUiGroupContentBackground;
+	box-shadow: @sapUiContentShadow2;
 }
 
-.sapMPopoverWithBar > .sapMPopoverArr.sapMPopoverArrUp:after {
+.sapMPopoverWithBar > .sapMPopoverArr {
+	&.sapMPopoverArrUp:after,
+	&.sapMPopoverHeaderAlignArr:after {
+		background-color: @sapUiPageHeaderBackground;
+	}
+}
+
+.sapMPopoverWithFooter > .sapMPopoverArr.sapMPopoverFooterAlignArr:after {
+	background-color: @sapUiPageFooterBackground;
+}
+
+.sapMPopover .sapMIBar.sapMHeader-CTX {
+	background-color: @sapUiPageHeaderBackground;
+}
+
+.sapMPopover .sapMIBar.sapMSubHeader-CTX {
 	background-color: @sapUiPageHeaderBackground;
 }
 
@@ -106,4 +121,40 @@
 
 .sapMPopoverWithSubHeader .sapMPopoverHeader .sapMIBar-CTX {
 	box-shadow: none;
+}
+
+.sapMPopover {
+	border-radius: @sapUiPopoverBorderCornerRadius;
+
+	&.sapMPopoverWithoutBar .sapMPopoverCont,
+	.sapMIBar.sapMHeader-CTX {
+		border-top-right-radius: @sapUiPopoverBorderCornerRadius;
+		border-top-left-radius: @sapUiPopoverBorderCornerRadius;
+	}
+
+	&.sapMPopoverWithoutFooter .sapMPopoverCont,
+	.sapMIBar.sapMFooter-CTX {
+		border-bottom-right-radius: @sapUiPopoverBorderCornerRadius;
+		border-bottom-left-radius: @sapUiPopoverBorderCornerRadius;
+	}
+}
+
+/* pointing downward arrow */
+.sapMPopoverArrDown:after {
+	margin: -0.5rem 0 0 0.125rem;
+}
+
+/* pointing right arrow */
+.sapMPopoverArrRight:after {
+	margin: 0.1875rem 0 0 -0.5rem;
+}
+
+/* pointing upward arrow */
+.sapMPopoverArrUp:after {
+	margin: 0.3125rem 0 0 0.1875rem;
+}
+
+/* pointing left arrow */
+.sapMPopoverArrLeft:after {
+	margin: 0.125rem 0 0 0.3125rem;
 }

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

@@ -10,10 +10,8 @@
 		stroke-width: 0.125rem;
 	}
 
-	&:not(.sapMRbErr):not(.sapMRbWarn) {
-		.sapMRbBOut {
-			stroke-width: @sapUiFieldBorderWidth;
-		}
+	&.sapMRbRo .sapMRbBOut {
+		stroke-width: @sapElement_BorderWidth
 	}
 }
 
@@ -182,17 +180,18 @@
 	.sapMRbB .sapMRbBOut {
 		stroke: @sapUiFieldInformationColor;
 		fill: @sapUiFieldInformationBackground;
+		stroke-width: @sapUiFieldInformationBorderWidth;
 	}
 }
 
 html[data-sap-ui-browser^="sf"] {
 	// fix for circle width on zoom in Safari
-	.sapMRb.sapMRbErr .sapMRbBOut,
-	.sapMRb.sapMRbWarn .sapMRbBOut {
+	.sapMRb .sapMRbBOut {
 		stroke-width: 2px;
 	}
 	// fix for circle width on zoom in Safari
-	.sapMRb:not(.sapMRbErr):not(.sapMRbWarn) .sapMRbBOut {
+	.sapMRb.sapMRbRo .sapMRbBOut,
+	.sapMRb.sapMRbInfo .sapMRbBOut {
 		stroke-width: 1px;
 	}
 }

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

@@ -13,6 +13,10 @@
 
 /* hover and focus */
 
+.sapMSlt.sapMSltIconOnly.sapMSltHoverable:hover:not(.sapMSltState) {
+	border-width: 0.125rem;
+}
+
 .sapMSlt.sapMSltDefault.sapMSltFocused:not(.sapMSltIconOnly):not(.sapMSltPressed) {
 	outline: 0.125rem dotted @sapUiContentFocusColor;
 	outline-offset: -0.25rem;
@@ -44,6 +48,10 @@ html[data-sap-ui-browser^="ff"] .sapMBar .sapMSlt.sapMSltFocused {
 	background: @sapUiToggleButtonPressedHoverBackground;
 }
 
+.sapMSlt:not(.sapMSltInformation):not(.sapMSltReadonly):not(.sapMSltDisabled) {
+	border-width: 0.125rem;
+}
+
 /* value state */
 
 .sapMSltWarning,
@@ -52,6 +60,12 @@ html[data-sap-ui-browser^="ff"] .sapMBar .sapMSlt.sapMSltFocused {
 	border-style: dashed;
 }
 
+.sapMSlt.sapMSltWarning > .sapMSltLabel,
+.sapMSlt.sapMSltError > .sapMSltLabel {
+	font-style: italic;
+	font-weight: bold;
+}
+
 .sapMSltInformation {
 	border-color: @sapUiFieldWarningColor;
 }
@@ -59,10 +73,9 @@ html[data-sap-ui-browser^="ff"] .sapMBar .sapMSlt.sapMSltFocused {
 /* disabled */
 
 .sapMSltDisabled {
-	background: @sapUiHcReducedBackground;
-	border-color: @sapUiHcReducedForeground;
-	color: @sapUiContentDisabledTextColor;
+	opacity: 0.5;
 }
+
 /* ------------------------------ */
 /* picker                         */
 /* ------------------------------ */
@@ -108,25 +121,6 @@ div.sapMSltPicker {
 	}
 }
 
-/* ------------------------------ */
-/* label                          */
-/* ------------------------------ */
-
-/* value state */
-
-.sapMSltLabelWarning,
-.sapMSltLabelError {
-	font-style: italic;
-}
-
-.sapMSltLabelError {
-	font-weight: bold;
-}
-
-/* ------------------------------ */
-/* arrow                          */
-/* ------------------------------ */
-
 /* hover */
 
 .sapMSltHoverable:not(.sapMSltPressed):hover > .sapMSltArrow {
@@ -163,4 +157,13 @@ html.sap-desktop .sapMFooter-CTX .sapMSltIconOnly:hover:not(.sapMSltPressed):not
 html.sap-desktop .sapMSltIconOnly:hover:not(.sapMSltPressed):not(.sapMTSSlt) {
 	color: @sapUiContentIconColor;
 	background-color: @sapUiButtonLiteHoverBackground;
+}
+
+.sapMSltHoverable:not(.sapMSltError):not(.sapMSltPressed):hover > .sapMSltArrow,
+.sapMSltPressed.sapMSltError > .sapMSltArrow {
+	background-color: @sapUiButtonLiteHoverBackground;
+}
+
+.sapMSltPressed:not(.sapMSltError) > .sapMSltArrow {
+	background: @sapUiListSelectionBackgroundColor;
 }

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

@@ -36,4 +36,9 @@ html.sap-desktop .sapMSelectListItemBase:focus {
 /* disabled */
 .sapMSelectListItemBaseDisabled {
 	opacity: 0.5;
+}
+
+.sapMSelectListItemBase {
+	font-size: @sapFontSize;
+	color: @sapUiListTextColor;
 }