@openui5/themelib_sap_horizon 1.100.0 → 1.102.1

package/src/sap/m/themes/sap_horizon_dark/ColorPalette.less

@@ -1,18 +1,25 @@
 /* =================================== */
 /* CSS for control sap.m/ColorPalette  */
-/* Evening Horizon theme               */
+/* Horizon theme                       */
 /* =================================== */
 
-.sapMColorPalette .sapMColorPaletteSquare:hover > div,
-.sapMColorPalette .sapMColorPaletteSquare,
-html:not(.sap-phone) .sapMColorPalette .sapMColorPaletteSquare:hover > div,
+@_sap_m_ColorPalette_SwatchWidthHitAreaCozy: 2.375rem;
+@_sap_m_ColorPalette_SwatchWidthHitAreaCompact: 1.75rem;
+
 html:not(.sap-phone) .sapMColorPalette .sapMColorPaletteSquare {
 	border-radius: 0.25rem;
-}
-
-html:not(.sap-phone) .sapMColorPalette .sapMColorPaletteSquare div,
-.sapMColorPalette .sapMColorPaletteSquare div {
-	border-radius: 0.125rem;
+	&:hover {
+		border-radius: 0.4375rem;
+		margin: 0.0625rem;
+		width: 2.25rem;
+		height: 2.25rem;
+		& > div {
+			border-radius: 0.375rem;
+		}
+	}
+	div {
+		border-radius: 0.1875rem;
+	}
 }
 
 .sap-desktop .sapMColorPalette .sapMBtn:focus {
@@ -37,24 +44,40 @@ html:not(.sap-phone) .sapMColorPalette .sapMColorPaletteSquare div,
 	}
 }
 
-html:not(.sap-phone) .sapMColorPalette .sapMColorPaletteSquare:focus:after {
-	border: 0.125rem solid @sapUiContentContrastFocusColor;
-	border-radius: 0.0625rem;
-	top: 0.125rem;
-	left: 0.125rem;
-	bottom: 0.125rem;
-	right: 0.125rem;
-}
-
-html:not(.sap-phone) .sapMColorPalette .sapMColorPaletteSquare:focus:before {
-	border: 0.125rem solid @sapUiContentFocusColor;
-	border-radius: 0.125rem;
-	top: 0;
-	left: 0;
-	bottom: 0;
-	right: 0;
+html:not(.sap-phone) .sapMColorPalette .sapMColorPaletteSquare:focus {
+	&:after {
+		display: none;
+	}
+	&:before {
+		border: 0.125rem solid @sapUiContentFocusColor;
+		border-radius: 0.4375rem;
+		top: -0.3125rem;
+		left: -0.3125rem;
+		bottom: -0.3125rem;
+		right: -0.3125rem;
+	}
+	&:hover {
+		&:after {
+			display: block;
+			border: 0.0625rem solid @sapUiContentContrastFocusColor;
+			border-radius: 0.3125rem;
+			top: 0.0625rem;
+			left: 0.0625rem;
+			bottom: 0.0625rem;
+			right: 0.0625rem;
+		}
+		&:before {
+			border: 0.125rem solid @sapUiContentFocusColor;
+			border-radius: 0.4375rem;
+			top: -0.0625rem;
+			left: -0.0625rem;
+			bottom: -0.0625rem;
+			right: -0.0625rem;
+		}
+	}
 }
 
+html:not(.sap-phone) .sapMColorPalette,
 .sapMColorPalette {
 	.sapMBtn {
 		&:focus {
@@ -65,9 +88,50 @@ html:not(.sap-phone) .sapMColorPalette .sapMColorPaletteSquare:focus:before {
 				}
 			}
 		}
+		.sapMBtnInner {
+			height: 2.75rem;
+			.sapMBtnContent {
+				line-height: 2.75rem;
+			}
+			&.sapMBtnText {
+				padding: 0;
+			}
+		}
+	}
+	.sapMBtnInner {
+		border-radius: 0;
+	}
+}
+
+html:not(.sap-phone) .sapUiSizeCompact .sapMColorPalette {
+	.sapMBtn .sapMBtnInner {
+		height: 2rem;
+		.sapMBtnContent {
+			line-height: 2rem;
+		}
+	}
+	.sapMColorPaletteSquare:hover {
+		margin: 0.0625rem;
+		width: 1.625rem;
+		height: 1.625rem;
+	}
+	.sapMColorPaletteSquare:focus:not(:hover):before {
+		top: -0.25rem;
+		left: -0.25rem;
+		bottom: -0.25rem;
+		right: -0.25rem;
 	}
 }
 
 html.sap-desktop .sapMColorPalette .sapMBtn:focus > .sapMFocusable:before {
 	display: none;
+}
+
+.sap-phone .sapMColorPalette .sapMColorPaletteSquare {
+	& > div {
+		border-radius: 0.25rem;
+		&:active {
+			border-radius: 0.4375rem;
+		}
+	}
 }

package/src/sap/m/themes/sap_horizon_dark/Dialog.less

@@ -11,17 +11,17 @@
 @_sap_m_Dialog_BarHeight: 2.75rem;
 @_sap_m_Dialog_SubHeaderCompactHeight: 2.25rem;
 
-@_sap_m_Dialog_NoStateHeaderShadow: none;
-@_sap_m_Dialog_SuccessHeaderShadow: inset 0 -0.0625rem @sapUiSuccessBorder;
-@_sap_m_Dialog_ErrorHeaderShadow: inset 0 -0.0625rem @sapUiErrorBorder;
-@_sap_m_Dialog_WarningHeaderShadow: inset 0 -0.0625rem @sapUiWarningBorder;
-@_sap_m_Dialog_InformationHeaderShadow: inset 0 -0.0625rem @sapUiInformationBorder;
-
-@_sap_m_Dialog_HeaderFocusBorderBottomOffset: 0px;
-@_sap_m_Dialog_HeaderFocusBorderTopOffset: 0px;
-@_sap_m_Dialog_HeaderFocusBorderLeftOffset: 0px;
-@_sap_m_Dialog_HeaderFocusBorderRightOffset: 0px;
-@_sap_m_Dialog_BorderRadius: @sapUiElementBorderCornerRadius;
+@_sap_m_Dialog_NoStateHeaderShadow: @sapUiContentHeaderShadow;
+@_sap_m_Dialog_SuccessHeaderShadow: inset 0 -0.0625rem @sapUiSuccessBorder, @sapUiContentHeaderShadow;
+@_sap_m_Dialog_ErrorHeaderShadow: inset 0 -0.0625rem @sapUiErrorBorder, @sapUiContentHeaderShadow;
+@_sap_m_Dialog_WarningHeaderShadow: inset 0 -0.0625rem @sapUiWarningBorder, @sapUiContentHeaderShadow;
+@_sap_m_Dialog_InformationHeaderShadow: inset 0 -0.0625rem @sapUiInformationBorder, @sapUiContentHeaderShadow;
+
+@_sap_m_Dialog_HeaderFocusBorderBottomOffset: 0.125rem;
+@_sap_m_Dialog_HeaderFocusBorderTopOffset: 0.0625rem;
+@_sap_m_Dialog_HeaderFocusBorderLeftOffset: 0.0625rem;
+@_sap_m_Dialog_HeaderFocusBorderRightOffset: 0.0625rem;
+@_sap_m_Dialog_HeaderFocusBorderRadius: @sapUiElementBorderCornerRadius;
 
 // This parameter is used in sap.m.Select. TODO: remove it when it is removed from there.
 @_sap_m_Dialog_HeaderShadowColor: darken(@sapUiGroupContentBackground, 8);
@@ -36,9 +36,14 @@
 	font-size: 1rem;
 }
 
-.sapMDialogResizeHandler::before {
-	content: attr(data-sap-ui-icon-content);
-	color: @sapUiButtonLiteTextColor;
+.sapMDialogResizeHandler {
+	right: 6px;
+	bottom: 3px;
+
+	&::before {
+		content: attr(data-sap-ui-icon-content);
+		color: @sapUiButtonLiteTextColor;
+	}
 }
 
 .sapMDialogBeginButton, .sapMDialogEndButton {
@@ -77,6 +82,7 @@ html.sap-phone .sapMDialog {
 	}
 }
 
+// Responsive paddings
 .sapMDialogTitle, .sapMDialogSubHeader {
 	.sapUi-Std-PaddingS, .sapUi-Std-PaddingM,
 	.sapUi-Std-PaddingL, .sapUi-Std-PaddingXL {
@@ -105,18 +111,21 @@ html.sap-phone .sapMDialog {
 	}
 }
 
+.sapMDialog:not(.sapUiResponsiveContentPadding):not(.sapUiContentPadding) {
+	&.sapMDialog-NoHeader .sapMDialogScroll {
+		padding-top: 0.25rem;
 
-html.sap-desktop .sapMIBar.sapMFooter-CTX { // this should come from the BarBase. Test and delete later
-	border-top: none;
-}
+		html.sap-phone .sapMDialogStretched& {
+			padding-top: 0;
+		}
+	}
+
+	&.sapMDialog-NoFooter .sapMDialogScroll {
+		padding-bottom: 0.25rem;
 
-.sapMDialog footer .sapMTB.sapMFooter-CTX {
-	// override for toolbar's top rounded corners
-	border-top-left-radius: 0px;
-	border-top-right-radius: 0px;
+		html.sap-phone .sapMDialogStretched& {
+			padding-bottom: 0;
+		}
+	}
 }
 
-.sapMDialogResizeHandler {
-	right: 6px;
-	bottom: 3px;
-}

package/src/sap/m/themes/sap_horizon_dark/DynamicDateRange.less

@@ -0,0 +1,12 @@
+/* ======================================= */
+/* CSS for control sap.m/DynamicDateRange  */
+/* Evening Horizon theme                   */
+/* ======================================= */
+
+.sapUiIcon.sapMDDRDateOption {
+	color: @sapUiButtonActiveTextColor;
+}
+
+.sapMDynamicDateRangePopover section > .sapMLabel {
+	margin: 1rem 0 0.5rem 0;
+}

package/src/sap/m/themes/sap_horizon_dark/GenericTile.less

@@ -237,10 +237,6 @@ html.sap-desktop .sapMGT.sapMGTBackgroundImage:active .sapMGTFocusDiv {
 	}
 }
 
-.sapUshellSection .sapUshellSectionHeader, .sapUshellSection .sapUshellSectionDefaultArea, .sapUshellSection .sapUshellSectionFlatArea
-{
-	gap: 0.75rem !important;
-}
 
 large.sapUiSizeCompact .sapMGT.sapMGTLineMode, .sapUiMedia-GenericTileDeviceSet-large .sapUiSizeCompact .sapMGT.sapMGTLineMode {
 	margin-right: 1rem;
@@ -325,6 +321,10 @@ html.sap-desktop .sapMGT.sapMGTBackgroundImage:focus .sapMGTFocusDiv:after, html
 
 .sapMGTLineMode .sapMGTFocusDiv {
 	border-radius: 10px !important;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
 }
 
 .sapFGridContainer .sapFGridContainerItemWrapper:not(.sapFGridContainerItemWrapperNoVisualFocus):focus::before {
@@ -363,8 +363,8 @@ html.sap-desktop .sapMGT.sapMGTBackgroundImage:focus .sapMGTFocusDiv:after, html
 }
 
 .TwoByOne.sapMGTActionMode {
-	border-radius: 1rem;
+	border-radius: 1.25rem;
 	.sapMGTFocusDiv {
-		border-radius: 1rem !important;
+		border-radius: 1.25rem !important;
 	}
 }