@openui5/themelib_sap_horizon 1.136.2 → 1.138.0

package/src/sap/f/themes/sap_horizon_dark/DynamicPage.less

@@ -9,6 +9,7 @@
 }
 
 .sapFDynamicPage-Std-Desktop-XL {
+
 	.sapFDynamicPageContent,
 	.sapFDynamicPageContentFitContainer {
 		padding: 1rem 3rem 0 3rem;
@@ -16,7 +17,9 @@
 }
 
 .sapFDynamicPage.sapUiResponsiveContentPadding {
+
 	&.sapFDynamicPage-Std-Phone {
+
 		.sapFDynamicPageContent,
 		.sapFDynamicPageContentFitContainer {
 			padding-left: 1rem;
@@ -25,6 +28,7 @@
 	}
 
 	&.sapFDynamicPage-Std-Tablet {
+
 		.sapFDynamicPageContent,
 		.sapFDynamicPageContentFitContainer {
 			padding-left: 2rem;
@@ -33,6 +37,7 @@
 	}
 
 	&.sapFDynamicPage-Std-Desktop-XL {
+
 		.sapFDynamicPageContent,
 		.sapFDynamicPageContentFitContainer {
 			padding-left: 3rem;
@@ -42,12 +47,14 @@
 }
 
 .sapFDynamicPage {
+
 	.sapFDynamicPageContentWrapperSolid>.sapFDynamicPageContent {
-		background: @sapUiShellBackground;
+		background: var(--sapShell_Background);
 	}
 
-	// DynamicPageTitle and Toggle Header Visual Indicator hover state
+	/* DynamicPageTitle and Toggle Header Visual Indicator hover state */
 	&.sapFDynamicPageTitleClickEnabled {
+
 		&.sapFDynamicPageTitleForceHovered .sapFDynamicPageTitle {
 			.title-hover(@sapUiObjectHeaderBackground);
 		}
@@ -59,7 +66,6 @@
 		&.sapFDynamicPageTitleForceHovered .sapFDynamicPageTitleTransparent {
 			.title-hover(transparent);
 		}
-
 	}
 }
 
@@ -80,9 +86,9 @@
 .sapFDynamicPageHeaderPinButton {
 	width: 1.5rem;
 	height: 2rem;
-	bottom: -0.95rem; // needs refactoring in the base file
+	bottom: -0.95rem; /* needs refactoring in the base file */
 
-	// Reflection: styles overwritten
+	/* Reflection: styles overwritten */
 	.sapMBtnInner {
 		min-width: 1.5rem;
 		width: 1.5rem;
@@ -96,45 +102,43 @@
 		}
 	}
 
-	overflow: visible; // enforcement needed for IE11
-
-	&:before,
-	&:after {
-		content: "";
+	&::before,
+	&::after {
+		content: '';
 		position: absolute;
 		width: 4rem;
-		top: 50%; // enforcement needed for IE11
 		height: 0.0625rem;
 	}
 
-	&:before {
-		background-image: linear-gradient(to left, @sapUiObjectHeaderBorderColor, transparent);
+	&::before {
+		background-image: linear-gradient(to left, var(--sapObjectHeader_BorderColor), transparent);
 		right: 100%;
 	}
 
-	&:after {
-		background-image: linear-gradient(to right, @sapUiObjectHeaderBorderColor, transparent);
+	&::after {
+		background-image: linear-gradient(to right, var(--sapObjectHeader_BorderColor), transparent);
 		left: 100%;
 	}
 }
 
-// when we have both pin and toggle header indicator, pseudo-elements overlap siblings on EDGE
-html[data-sap-ui-browser^="ed"] .sapFDynamicPageToggleHeaderIndicator ~ .sapFDynamicPageHeaderPinButton:before {
-  	display: none;
+/* when we have both pin and toggle header indicator, pseudo-elements overlap siblings on EDGE */
+html[data-sap-ui-browser^='ed'] .sapFDynamicPageToggleHeaderIndicator ~ .sapFDynamicPageHeaderPinButton::before {
+	display: none;
 }
 
-html[data-sap-ui-browser^="cr"] .sapFDynamicPageToggleHeaderIndicator,
-html[data-sap-ui-browser^="cr"] .sapFDynamicPageHeaderPinButton {
+html[data-sap-ui-browser^='cr'] .sapFDynamicPageToggleHeaderIndicator,
+html[data-sap-ui-browser^='cr'] .sapFDynamicPageHeaderPinButton {
 	.sapMBtnInner .sapMBtnIcon {
-		line-height: 1.375rem; // in Chrome we need to subtract the border bottom and top (total 2px) from original line-height
+		line-height: 1.375rem; /* in Chrome we need to subtract the border bottom and top (total 2px) from original line-height */
 	}
 }
 
 /* Compact */
 .sapUiSizeCompact {
+
 	.sapFDynamicPageToggleHeaderIndicator,
 	.sapFDynamicPageHeaderPinButton {
-		bottom: -0.95rem; // needs refactoring in the base file
+		bottom: -0.95rem; /* needs refactoring in the base file */
 
 		.sapMBtnInner {
 			bottom: 0.25rem;
@@ -142,20 +146,21 @@ html[data-sap-ui-browser^="cr"] .sapFDynamicPageHeaderPinButton {
 	}
 }
 
-// Note:
-// The footer selector can`t be nested in the sapFDynamicPage less structure,
-// because the contrast container would not work, as the theme generates css like ".sapContrast.sapFDynamicPageFooter"
-// and will never match ".sapFDynamicPage .sapFDynamicPageFooter"
+/* Note:
+The footer selector can`t be nested in the sapFDynamicPage less structure,
+because the contrast container would not work, as the theme generates css like ".sapContrast.sapFDynamicPageFooter"
+and will never match ".sapFDynamicPage .sapFDynamicPageFooter" */
 .sapFDynamicPageFooter .sapFDynamicPageActualFooterControl.sapMTB {
-	background: @sapUiPageFooterBackground;
-	color: @sapUiPageFooterTextColor;
-	box-shadow: @sapUiContentShadow1;
-	border-radius: @sapUiElementBorderCornerRadius;
+	background: var(--sapPageFooter_Background);
+	color: var(--sapPageFooter_TextColor);
+	box-shadow: var(--sapContent_Shadow1);
+	border-radius: var(--sapElement_BorderCornerRadius);
 	border: none;
 }
 
 .sapFDynamicPage-Std-Tablet,
 .sapFDynamicPage-Std-Phone {
+
 	.sapFDynamicPageFooter .sapFDynamicPageActualFooterControl.sapMIBar {
 		height: 2.75rem;
 	}
@@ -171,16 +176,19 @@ To be used in Comparison pattern scenario. */
 	margin-right: 0;
 }
 
-// =====================================
-// Dynamic page Header collapse Buttons
-// =====================================
+/* ===================================== */
+/* Dynamic page Header collapse Buttons  */
+/* ===================================== */
 
-.sapFDynamicPageToggleHeaderIndicator.sapMBtn .sapMBtnInner, .sapFDynamicPageHeaderPinButton.sapMBtn .sapMBtnInner {
-    border-radius: @sapButton_BorderCornerRadius;
-    box-shadow: @sapContent_Shadow0;
-    background-color: @sapObjectHeader_Background;
+.sapFDynamicPageToggleHeaderIndicator.sapMBtn .sapMBtnInner,
+.sapFDynamicPageHeaderPinButton.sapMBtn .sapMBtnInner {
+	border-radius: var(--sapButton_BorderCornerRadius);
+	box-shadow: var(--sapContent_Shadow0);
+	background-color: var(--sapObjectHeader_Background);
 }
 
-.sapMBtn:hover:not(.sapMBtnDisabled):not(.sapMSBActive)>.sapMBtnHoverable:not(.sapMBtnDisabled):not(.sapMBtnActive):not(.sapMToggleBtnPressed):not(.sapMBtnTransparent).sapMBtnDefault .sapUiIcon, .sapMBtn:hover:not(.sapMBtnDisabled):not(.sapMSBActive)>.sapMBtnHoverable:not(.sapMBtnDisabled):not(.sapMBtnActive):not(.sapMToggleBtnPressed):not(.sapMBtnTransparent).sapMBtnBack .sapUiIcon, .sapMBtn:hover:not(.sapMBtnDisabled):not(.sapMSBActive)>.sapMBtnHoverable:not(.sapMBtnDisabled):not(.sapMBtnActive):not(.sapMToggleBtnPressed):not(.sapMBtnTransparent).sapMBtnGhost .sapUiIcon {
-    border-radius: @sapButton_BorderCornerRadius;
-}
+.sapMBtn:hover:not(.sapMBtnDisabled):not(.sapMSBActive) > .sapMBtnHoverable:not(.sapMBtnDisabled):not(.sapMBtnActive):not(.sapMToggleBtnPressed):not(.sapMBtnTransparent).sapMBtnDefault .sapUiIcon,
+.sapMBtn:hover:not(.sapMBtnDisabled):not(.sapMSBActive) > .sapMBtnHoverable:not(.sapMBtnDisabled):not(.sapMBtnActive):not(.sapMToggleBtnPressed):not(.sapMBtnTransparent).sapMBtnBack .sapUiIcon,
+.sapMBtn:hover:not(.sapMBtnDisabled):not(.sapMSBActive) > .sapMBtnHoverable:not(.sapMBtnDisabled):not(.sapMBtnActive):not(.sapMToggleBtnPressed):not(.sapMBtnTransparent).sapMBtnGhost .sapUiIcon {
+	border-radius: var(--sapButton_BorderCornerRadius);
+}

package/src/sap/f/themes/sap_horizon_dark/DynamicPageHeader.less

@@ -3,19 +3,19 @@
 /* Evening Horizon theme                    */
 /* ======================================== */
 
-// Specific icon for the pin button for the horizon theme
+/* Specific icon for the pin button for the horizon theme */
 @_sap_f_DynamicPageHeader_PinButton_Icon: pushpin-on;
 
 .sapFDynamicPageHeader.sapFDynamicPageHeaderSolid,
 .sapFDynamicPageHeader.sapFDynamicPageHeaderTranslucent {
-	background: @sapUiObjectHeaderBackground;
+	background: var(--sapObjectHeader_Background);
 }
 
 .sapFDynamicPageHeader.sapFDynamicPageHeaderTransparent {
 	background: transparent;
 }
 
-.sapFDynamicPageToggleHeaderIndicator:not(.sapUiHidden) + .sapFDynamicPageHeaderPinButton:before {
+.sapFDynamicPageToggleHeaderIndicator:not(.sapUiHidden) + .sapFDynamicPageHeaderPinButton::before {
 	display: none;
 }