@openui5/sap.f 1.136.1 → 1.138.0

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

@@ -16,21 +16,22 @@
 
 	.sapFDynamicPageContentWrapperStandard,
 	.sapFDynamicPageContentWrapperSolid {
-		&>.sapFDynamicPageContent {
-			background: @sapUiBaseBG;
+
+		& > .sapFDynamicPageContent {
+			background: var(--sapBackgroundColor);
 		}
 	}
 
 	.sapFDynamicPageHeaderSolid {
-		background: @sapUiBaseBG;
+		background: var(--sapBackgroundColor);
 	}
 
-	.sapFDynamicPageContentWrapperTransparent>.sapFDynamicPageContent {
+	.sapFDynamicPageContentWrapperTransparent > .sapFDynamicPageContent {
 		background: transparent;
 	}
 
-	.sapFDynamicPageContentWrapperList>.sapFDynamicPageContent {
-		background: @sapUiGroupContentBackground;
+	.sapFDynamicPageContentWrapperList > .sapFDynamicPageContent {
+		background: var(--sapGroup_ContentBackground);
 	}
 }
 
@@ -47,8 +48,9 @@
 	z-index: 3;
 }
 
-html[data-sap-ui-browser^="ff"].sap-desktop .sapFDynamicPage.sapFDynamicPageWithScroll,
-html[data-sap-ui-os^="win"][data-sap-ui-browser^="cr"].sap-desktop .sapFDynamicPage.sapFDynamicPageWithScroll {
+html[data-sap-ui-browser^='ff'].sap-desktop .sapFDynamicPage.sapFDynamicPageWithScroll,
+html[data-sap-ui-os^='win'][data-sap-ui-browser^='cr'].sap-desktop .sapFDynamicPage.sapFDynamicPageWithScroll {
+
 	 .sapFDynamicPageTitleWrapper {
 		right: 17px;
 	}
@@ -60,7 +62,6 @@ html[data-sap-ui-os^="win"][data-sap-ui-browser^="cr"].sap-desktop .sapFDynamicP
 
 .sapFDynamicPageContent {
 	flex-grow: 1;
-	-webkit-flex-grow: 1;
 	z-index: 0;
 
 	.sapFDynamicPageAlignContent {
@@ -69,13 +70,6 @@ html[data-sap-ui-os^="win"][data-sap-ui-browser^="cr"].sap-desktop .sapFDynamicP
 	}
 }
 
-/* TODO remove after the end of support for Internet Explorer */
-html[data-sap-ui-browser^="ie"] {
-	.sapFDynamicPageContent {
-		flex-shrink: 0;
-	}
-}
-
 .sapFDynamicPageContent,
 .sapFDynamicPageContentFitContainer {
 	position: relative;
@@ -91,29 +85,32 @@ html[data-sap-ui-browser^="ie"] {
 	bottom: 0;
 }
 
-// adds space underneath the footer (when page in scrollable mode)
+/* adds space underneath the footer (when page in scrollable mode) */
 .sapFDynamicPageContentFitContainerFooterVisible:not(.sapFDynamicPageContentFitContainer) {
 	padding-bottom: ~"calc(@{_sap_f_DynamicPage_FooterHeight} + ( @{_sap_f_DynamicPage_FooterMarginBottom} * 2 ) )";
 }
 
 .sapUiSizeCompact {
+
 	.sapFDynamicPageContentFitContainerFooterVisible:not(.sapFDynamicPageContentFitContainer) {
 		padding-bottom: ~"calc(@{_sap_f_DynamicPage_FooterHeight_Compact} + ( @{_sap_f_DynamicPage_FooterMarginBottom} * 2 ) )";
 	}
 }
 
-// adds space underneath the footer (when page in non-scrollable mode)
+/* adds space underneath the footer (when page in non-scrollable mode) */
 .sapFDynamicPageContentFitContainerFooterVisible.sapFDynamicPageContentFitContainer {
 	max-height: ~"calc(100% - (@{_sap_f_DynamicPage_FooterHeight} + ( @{_sap_f_DynamicPage_FooterMarginBottom} * 2 ) ))";
 }
 
 .sapUiSizeCompact {
+
 	.sapFDynamicPageContentFitContainerFooterVisible.sapFDynamicPageContentFitContainer {
 		max-height: ~"calc(100% - (@{_sap_f_DynamicPage_FooterHeight_Compact} + ( @{_sap_f_DynamicPage_FooterMarginBottom} * 2 ) ))";
 	}
 }
 
 .sapFDynamicPage-Std-Tablet {
+
 	.sapFDynamicPageContent,
 	.sapFDynamicPageContentFitContainer {
 		padding: 2rem 2rem 0 2rem;
@@ -121,6 +118,7 @@ html[data-sap-ui-browser^="ie"] {
 }
 
 .sapFDynamicPage-Std-Phone {
+
 	.sapFDynamicPageContent,
 	.sapFDynamicPageContentFitContainer {
 		padding: 2rem 1rem 0 1rem;
@@ -128,18 +126,22 @@ html[data-sap-ui-browser^="ie"] {
 }
 
 .sapUiContainerContentPadding(~".sapFDynamicPage", ~".sapFDynamicPageContent");
+
 .sapUiContainerContentPadding(~".sapFDynamicPage", ~".sapFDynamicPageContentFitContainer");
 
 .sapFDynamicPage.sapUiContentPadding,
 .sapFDynamicPage.sapUiNoContentPadding,
 .sapFDynamicPage.sapUiResponsiveContentPadding {
+
 	.sapFDynamicPageAlignContent {
 		margin: 0;
 	}
 }
 
 .sapFDynamicPage.sapUiContentPadding {
+
 	.sapFDynamicPage-Std-Phone {
+
 		.sapFDynamicPageAlignContent {
 			margin: 0 -1rem;
 		}
@@ -147,7 +149,9 @@ html[data-sap-ui-browser^="ie"] {
 }
 
 .sapFDynamicPage.sapUiResponsiveContentPadding {
+
 	&.sapFDynamicPage-Std-Phone {
+
 		.sapFDynamicPageContent,
 		.sapFDynamicPageContentFitContainer {
 			padding: 0;
@@ -156,6 +160,7 @@ html[data-sap-ui-browser^="ie"] {
 	}
 
 	&.sapFDynamicPage-Std-Tablet {
+
 		.sapFDynamicPageContent,
 		.sapFDynamicPageContentFitContainer {
 			padding: 1rem;
@@ -163,6 +168,7 @@ html[data-sap-ui-browser^="ie"] {
 	}
 
 	&.sapFDynamicPage-Std-Desktop {
+
 		.sapFDynamicPageContent,
 		.sapFDynamicPageContentFitContainer {
 			padding: 1rem 2rem;
@@ -171,13 +177,14 @@ html[data-sap-ui-browser^="ie"] {
 }
 
 .sapFDynamicPageFooterVisible .sapFDynamicPageContentWrapper,
-.sapFDynamicPageFooterVisible .sapFDynamicPageContentFitContainer *[style*="overflow: hidden auto;"] {
+.sapFDynamicPageFooterVisible .sapFDynamicPageContentFitContainer *[style*='overflow: hidden auto;'] {
 	scroll-padding-bottom: ~"calc(@{_sap_f_DynamicPage_FooterHeight} +  @{_sap_f_DynamicPage_FooterMarginBottom} + 2px)";
 }
 
 .sapUiSizeCompact {
+
 	.sapFDynamicPageFooterVisible .sapFDynamicPageContentWrapper,
-	.sapFDynamicPageFooterVisible .sapFDynamicPageContentFitContainer *[style*="overflow: hidden auto;"] {
+	.sapFDynamicPageFooterVisible .sapFDynamicPageContentFitContainer *[style*='overflow: hidden auto;'] {
 		scroll-padding-bottom: ~"calc(@{_sap_f_DynamicPage_FooterHeight_Compact} +  @{_sap_f_DynamicPage_FooterMarginBottom} + 2px)";
 	}
 }
@@ -187,24 +194,19 @@ html[data-sap-ui-browser^="ie"] {
 	height: 100%;
 	position: relative;
 	will-change: scroll-position;
-	-webkit-overflow-scrolling: auto;
-
-	display: -webkit-box;
-	display: -webkit-flex;
 	display: flex;
-
-	-webkit-flex-direction: column;
 	flex-direction: column;
 
-	// Scroll anchoring adjusts the scroll position to prevent visible jumps (or "reflows"),
-	// when content changes above the viewport.
-	// See: https://github.com/WICG/ScrollAnchoring/blob/master/explainer.md
+	/* Scroll anchoring adjusts the scroll position to prevent visible jumps (or "reflows"),
+	when content changes above the viewport.
+	See: https://github.com/WICG/ScrollAnchoring/blob/master/explainer.md */
 	overflow-anchor: none;
 
 	overflow-y: auto;
 }
 
 .sapFDynamicPageSupressScroll {
+
 	.sapFDynamicPageContentWrapper {
 		overflow: hidden;
 	}
@@ -212,14 +214,12 @@ html[data-sap-ui-browser^="ie"] {
 
 .sapFDynamicPage .sapFDynamicPageTitleWrapper {
 	display: flex;
-	display: -webkit-flex;
 	flex-direction: column;
-	-webkit-flex-direction: column;
 	flex-shrink: 0;
-	-webkit-flex-shrink: 0;
 }
 
 html.sap-desktop .sapFDynamicPage.sapFDynamicPageWithScroll {
+
 	.sapFDynamicPageTitleWrapper {
 		right: 12px;
 	}
@@ -230,21 +230,18 @@ html.sap-desktop .sapFDynamicPage.sapFDynamicPageWithScroll {
 }
 
 .sapFDynamicPageContentWrapper {
-	-webkit-flex-grow: 1;
 	flex-grow: 1;
 }
 
 .sapFDynamicPage,
 .sapFDynamicPage.sapFNavItem {
-	display: -webkit-box;
-	display: -webkit-flex;
 	display: flex;
-	-webkit-flex-direction: column;
 	flex-direction: column;
 }
 
-// DynamicPageTitle hover
+/* DynamicPageTitle hover */
 .sapFDynamicPage.sapFDynamicPageTitleClickEnabled {
+
 	.sapFDynamicPageTitle:hover,
 	&.sapFDynamicPageTitleForceHovered .sapFDynamicPageTitle {
 		cursor: pointer;
@@ -255,8 +252,9 @@ html.sap-desktop .sapFDynamicPage.sapFDynamicPageWithScroll {
 	}
 }
 
-// Overstyle for Comparison Pattern
+/* Overstyle for Comparison Pattern */
 .sapFDynamicPage.sapFDynamicPageTitleClickEnabled.sapUiComparisonContainer {
+
 	.sapFDynamicPageTitleMainInner:hover {
 		cursor: pointer;
 	}
@@ -267,15 +265,16 @@ html.sap-desktop .sapFDynamicPage.sapFDynamicPageWithScroll {
 	}
 }
 
-// Reflection: Overwritten styles
+/* Reflection: Overwritten styles */
 .sapFDynamicPageTitleMainHeading,
 .sapFDynamicPageTitleMainContent,
 .sapFDynamicPageTitleMainActions {
-	// BCP: 1870261908 - CSS cursor reset is needed here to prevent showing pointer for not clickable control types
+	/* BCP: 1870261908 - CSS cursor reset is needed here to prevent showing pointer for not clickable control types */
 	cursor: default;
 }
 
 .sapFDynamicPage {
+
 	.sapFDynamicPageFooter {
 		position: relative;
 
@@ -298,16 +297,17 @@ html.sap-desktop .sapFDynamicPage.sapFDynamicPageWithScroll {
 	height: @_sap_f_DynamicPage_FooterHeight_Compact;
 }
 
-/* ============================== */
-/* Toggle Header Visual Indicator */
-/* ============================== */
+/* =============================== */
+/* Toggle Header Visual Indicator  */
+/* =============================== */
+
 .sapFDynamicPageToggleHeaderIndicator.sapMBtn,
 .sapFDynamicPageHeaderPinButton.sapMBtn {
 	position: absolute;
 	left: 50%;
 	padding: 0;
 
-	// Reflection: Overwritten styles
+	/* Reflection: Overwritten styles */
 	.sapMBtnInner {
 		position: absolute !important;
 		border-radius: 0.1875rem;
@@ -335,11 +335,12 @@ html.sap-desktop .sapFDynamicPage.sapFDynamicPageWithScroll {
 
 /* Compact */
 .sapUiSizeCompact {
+
 	.sapFDynamicPageToggleHeaderIndicator,
 	.sapFDynamicPageHeaderPinButton {
 		bottom: -0.875rem;
 
-		// Reflection: Overwritten styles
+		/* Reflection: Overwritten styles */
 		.sapMBtnInner.sapMBtnIconFirst:not(.sapMBtnBack) {
 			padding-left: 0;
 			padding-right: 0;
@@ -347,30 +348,20 @@ html.sap-desktop .sapFDynamicPage.sapFDynamicPageWithScroll {
 	}
 }
 
-/* ============= */
-/* Animations    */
-/* ============= */
+/* =========== */
+/* Animations  */
+/* =========== */
 
 html[data-sap-ui-animation='on'] .sapFDynamicPage {
+
 	.sapFDynamicPageActualFooterControlShow {
-		-webkit-animation: bounceShow 0.35s forwards ease-in-out;
 		animation: bounceShow 0.35s forwards ease-in-out;
 	}
+
 	.sapFDynamicPageActualFooterControlHide {
-		-webkit-animation: bounceHide 0.35s forwards ease-in-out;
 		animation: bounceHide 0.35s forwards ease-in-out;
 	}
 
-	@-webkit-keyframes bounceShow {
-		0% {
-			-webkit-transform: translateY(100%);
-			transform: translateY(100%);
-			opacity: 0;
-		}
-		100% {
-			opacity: 1;
-		}
-	}
 	@keyframes bounceShow {
 		0% {
 			transform: translateY(100%);
@@ -380,18 +371,7 @@ html[data-sap-ui-animation='on'] .sapFDynamicPage {
 			opacity: 1;
 		}
 	}
-	@-webkit-keyframes bounceHide {
-		0% {
-			-webkit-transform: translateY(-5%);
-			transform: translateY(-5%);
-			opacity: 1;
-		}
-		100% {
-			-webkit-transform: translateY(100%);
-			transform: translateY(100%);
-			opacity: 0;
-		}
-	}
+
 	@keyframes bounceHide {
 		0% {
 			transform: translateY(-5%);
@@ -404,7 +384,6 @@ html[data-sap-ui-animation='on'] .sapFDynamicPage {
 	}
 }
 
-
 /* Vertically align items in the table-like view with the items in the sap.m.Carousel control,
 part of DynamicPageTitle snapped content and DynamicPageHeader content.
 To be used in Comparison pattern scenario. */
@@ -421,7 +400,7 @@ To be used in Comparison pattern scenario. */
 	margin-right: -1rem;
 }
 
-// Avoid visible gap between content and header when title is snapped
+/* Avoid visible gap between content and header when title is snapped */
 .sapFDynamicPageTitleWrapper.sapFDynamicPageTitleSnapped + .sapFDynamicPageContentWrapper > .sapFDynamicPageHeaderWrapper {
-	background: @sapUiObjectHeaderBackground;
-}
+	background: var(--sapObjectHeader_Background);
+}

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

@@ -3,10 +3,10 @@
 /* Base theme                               */
 /* ======================================== */
 
-// Synced with ObjectPageLayout.HEADER_CONTENT_PADDING_BOTTOM and DynamicPage.HEADER_CONTENT_PADDING_BOTTOM
+/* Synced with ObjectPageLayout.HEADER_CONTENT_PADDING_BOTTOM and DynamicPage.HEADER_CONTENT_PADDING_BOTTOM */
 @_sap_f_DynamicPageHeader_PaddingBottom: 1rem;
 
-// Default base icon for the pin button
+/* Default base icon for the pin button */
 @_sap_f_DynamicPageHeader_PinButton_Icon: pushpin-off;
 
 .sapFDynamicPageHeader {
@@ -16,12 +16,12 @@
 	-webkit-flex-shrink: 0;
 	flex-shrink: 0;
 	box-sizing: border-box;
-	background: @sapUiObjectHeaderBackground;
+	background: var(--sapObjectHeader_Background);
 }
 
 .sapFDynamicPageHeader.sapFDynamicPageHeaderWithContent {
 	padding: 1rem 3rem @_sap_f_DynamicPageHeader_PaddingBottom 3rem;
-	box-shadow: @sapUiContentHeaderShadow;
+	box-shadow: var(--sapContent_HeaderShadow);
 }
 
 .sapFDynamicPageHeader.sapFDynamicPageHeaderPinnable {
@@ -37,6 +37,7 @@
 }
 
 .sapFDynamicPage-Std-Tablet {
+
 	.sapFDynamicPageHeaderWithContent {
 		padding: 1rem 2rem @_sap_f_DynamicPageHeader_PaddingBottom 2rem;
 	}
@@ -47,12 +48,14 @@
 }
 
 .sapFDynamicPage-Std-Phone {
+
 	.sapFDynamicPageHeaderWithContent {
 		padding: 0.5rem 1rem @_sap_f_DynamicPageHeader_PaddingBottom 1rem;
 	}
 }
 
 .sapFDynamicPageHeader.sapFDynamicPageHeaderWithContent {
+
 	.sapMObjectAttributeDiv .sapMText,
 	.sapMObjectAttributeDiv .sapMObjectAttributeTitle,
 	.sapMObjectAttributeDiv .sapMObjectAttributeColon,

package/src/sap/f/themes/base/ListPlaceholder.less

@@ -1,5 +1,5 @@
 /* ==================================================== */
-/* CSS for control sap.f.cards.loading/ListPlaceholder  */
+/* CSS for control sap.f/cards/loading/ListPlaceholder  */
 /* Base theme                                           */
 /* ==================================================== */
 

package/src/sap/f/themes/base/ObjectPlaceholder.less

@@ -1,5 +1,5 @@
 /* ====================================================== */
-/* CSS for control sap.f.cards.loading/ObjectPlaceholder  */
+/* CSS for control sap.f/cards/loading/ObjectPlaceholder  */
 /* Base theme                                             */
 /* ====================================================== */
 
@@ -33,6 +33,7 @@
 }
 
 .sapFCardObjectContent.sapFCardContentLoading {
+
 	> div:not(.sapFCardContentObjectPlaceholder) {
 		visibility: hidden;
 	}
@@ -40,4 +41,4 @@
 
 .sapUiIntCardWithFooter .sapFCardContentObjectPlaceholder {
 	padding-bottom: 0;
-}
+}

package/src/sap/f/themes/base/ProductSwitch.less

@@ -1,3 +1,8 @@
+/* ==================================== */
+/* CSS for control sap.f/ProductSwitch  */
+/* Base theme                           */
+/* ==================================== */
+
 .sapMPopoverCont .sapFProductSwitch-Popover-CTX {
 	padding: 1.5rem 1rem;
 }

package/src/sap/f/themes/base/ProductSwitchItem.less

@@ -1,13 +1,18 @@
+/* ======================================== */
+/* CSS for control sap.f/ProductSwitchItem  */
+/* Base theme                               */
+/* ======================================== */
+
 .sapFPSItemContainer {
-	border-radius: @sapUiElementBorderCornerRadius;
-	background: @sapUiListBackground;
+	border-radius: var(--sapElement_BorderCornerRadius);
+	background: var(--sapUiListBackground);
 	padding: 0.5rem;
 	width: 11.25rem;
 	height: 7rem;
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	color: @sapUiContentIconColor;
+	color: var(--sapContent_IconColor);
 	box-sizing: border-box;
 	text-decoration: none;
 	cursor: pointer;
@@ -20,8 +25,8 @@
 	}
 
 	.sapFPSItemMainTitle {
-		font-size: @sapMFontHeader6Size;
-		color: @sapUiGroupTitleTextColor;
+		font-size: var(--sapFontHeader6Size);
+		color: var(--sapGroup_TitleTextColor);
 	}
 
 	.sapFPSItemIconPlaceholder {
@@ -42,15 +47,15 @@
 	}
 
 	.sapFPSItemSubTitle {
-		font-size: @sapMFontSmallSize;
+		font-size: var(--sapFontSmallSize);
 		white-space: nowrap;
 		text-overflow: ellipsis;
 		overflow: hidden;
-		color: @sapUiContentLabelColor;
+		color: var(--sapContent_LabelColor);
 	}
 
 	&:hover {
-		background: @sapUiListHoverBackground;
+		background: var(--sapList_Hover_Background);
 	}
 
 	&.sapFPSItemActive,
@@ -58,19 +63,19 @@
 	&:active,
 	&.sapFPSItemSelected:active,
 	&.sapFPSItemSelected:hover:active {
-		background: @sapUiListActiveBackground;
-		color: @sapUiListActiveTextColor;
+		background: var(--sapList_Active_Background);
+		color: var(--sapList_Active_TextColor);
 		border: none;
 
 		.sapFPSItemMainTitle,
 		.sapFPSItemSubTitle {
-			color: @sapUiListActiveTextColor;
+			color: var(--sapList_Active_TextColor);
 		}
 	}
 
 	&.sapFPSItemSelected:not(:active) {
-		background: @sapUiListSelectionBackgroundColor;
-		border: 0.125rem solid @sapUiListSelectionBorderColor;
+		background: var(--sapList_SelectionBackgroundColor);
+		border: 0.125rem solid var(--sapList_SelectionBorderColor);
 		padding: 0.375rem;;
 	}
 }
@@ -102,13 +107,14 @@
 		cursor: pointer;
 		font-size: 1.25rem;
 		width: 3rem;
-		color: @sapUiContentNonInteractiveIconColor;
+		color: var(--sapContent_NonInteractiveIconColor);
 	}
 
 	&.sapFPSItemActive,
 	&:active {
+
 		.sapUiIcon {
-			color: @sapUiListActiveTextColor;
+			color: var(--sapList_Active_TextColor);
 		}
 	}
 
@@ -125,15 +131,13 @@
 
 	&.sapFPSItemSelected {
 		border: none;
-		border-bottom: 0.0625rem solid @sapUiListSelectionBorderColor;
+		border-bottom: 0.0625rem solid var(--sapList_SelectionBorderColor);
 	}
 }
 
 .sapFPSItemContainer:focus {
-	outline-width: @sapUiContentFocusWidth;
-	outline-color: @sapUiContentFocusColor;
+	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 	outline-offset: -2px;
-	outline-style: @sapUiContentFocusStyle;
 }
 
 .sapFPSItemContainer.sapFPSItemSelected:focus {
@@ -143,7 +147,7 @@
 .sapFPSItemSelected.sapFPSItemActive:focus,
 .sapFPSItemActive:focus,
 .sapFPSItemContainer:active:focus {
-	outline-color: @sapUiContentContrastFocusColor;
+	outline-color: var(--sapContent_ContrastFocusColor);
 	outline-offset: -2px;
 }
 
@@ -151,10 +155,6 @@
 	outline-offset: -2px;
 }
 
-html[data-sap-ui-browser^="ed"].sap-desktop .sapFPSItemContainer:focus {
-	outline-style: dashed;
-}
-
 html[dir="rtl"].sapUiMedia-Std-Phone .sapFPSItemContainer .sapFPSItemTitle {
 	text-align: right;
 }

package/src/sap/f/themes/base/SemanticPage.less

@@ -10,6 +10,7 @@
 	overflow: hidden;
 
 	.sapFDynamicPageContent {
+
 		.sapFSemanticPageAlignContent {
 			margin-left: -@sapUiMarginSmall;
 			margin-right: -@sapUiMarginSmall;
@@ -19,13 +20,16 @@
 	.sapFDynamicPage.sapUiContentPadding,
 	.sapFDynamicPage.sapUiNoContentPadding,
 	.sapFDynamicPage.sapUiResponsiveContentPadding {
+
 		.sapFSemanticPageAlignContent {
 			margin: 0;
 		}
 	}
 
 	.sapFDynamicPage.sapUiContentPadding {
+
 		.sapFDynamicPage-Std-Phone {
+
 			.sapFSemanticPageAlignContent {
 				margin: 0 -@sapUiMarginSmall;
 			}