@openui5/sap.f 1.134.0 → 1.135.0

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

@@ -1,7 +1,7 @@
-/* ======================================================== */
-/* CSS for control sap.f.cards.loading/CalendarPlaceholder	*/
-/* Base theme																							 */
-/* ======================================================== */
+/* ========================================== */
+/* CSS for control sap.f/CalendarPlaceholder  */
+/* Base theme                                 */
+/* ========================================== */
 
 .sapFCard .sapFCardContentCalendarPlaceholder .sapFCardLoadingShimmer {
 	background-size: unset;
@@ -12,32 +12,40 @@
 }
 
 .sapFCardContentCalendarPlaceholder {
+
 	.sapFCardContentCalendarPartPlaceholder {
 		height: 13rem;
 		min-width: 18rem;
 		margin: 1rem;
 	}
+
 	.sapFCardContentLegendItemsListPlaceholder {
 		column-width: 9rem;
 	}
+
 	.sapFCardContentItemsListPlaceholder {
 		margin: 1rem;
 	}
+
 	.sapFCardListPlaceholderItem {
 		height: 4.75rem;
 		display: block;
+
 		&.sapFCardListPlaceholderLegendItem {
 			width: 15rem;
 			height: 1.75rem;
+
 			.sapFCardListPlaceholderImg,
 			.sapFCardListPlaceholderRows {
 				display: inline-block;
 			}
+
 			.sapFCardListPlaceholderImg {
 				margin: 0.5rem 0.5rem 0.5rem 0;
 				height: 1rem;
 				width: 1rem;
 			}
+
 			.sapFCardListPlaceholderRows {
 				.sapFCardListPlaceholderRow {
 					width: 6rem;
@@ -46,16 +54,20 @@
 				width: 8rem;
 			}
 		}
+
 		.sapFCardListPlaceholderFromTo {
 			height: 1rem;
 			width: 5rem;
 			display: inline-block;
 		}
+
 		.sapFCardListPlaceholderRows {
+
 			.sapFCardListPlaceholderRow {
 				height: 1rem;
 				width: 8rem;
 				margin-left: 2rem;
+
 				&.sapFCardListPlaceholderTextRow {
 					height: 0.75rem;
 					width: 6rem;

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

@@ -88,6 +88,10 @@ ui-integration-card.sapFCardTransparent > [data-sap-ui-area] > .sapFCard {
 .sapFCard .sapFCardHeader {
 	border-bottom: @_sap_f_Card_HeaderBorder;
 	border-radius: @_sap_f_Card_BorderRadius @_sap_f_Card_BorderRadius 0 0;
+
+	.sapFCardHeaderMainPart {
+		border-radius: @_sap_f_Card_BorderRadius @_sap_f_Card_BorderRadius 0 0;
+	}
 }
 
 .sapFCard .sapFCardIcon.sapFAvatar {
@@ -219,6 +223,18 @@ html[data-sap-ui-browser^='cr'] .sapFCard {
 .sapFCard.sapFCardInteractive:not(.sapFCardDisableMouseInteraction):hover {
 	box-shadow: var(--sapContent_Shadow2);
 	cursor: pointer;
+
+	.sapMText,
+	.sapMLabel,
+	.sapMTitle,
+	.sapFCardNumericIndicators .sapUiIcon {
+		cursor: pointer;
+	}
+
+	.sapMLIB:not(.sapMLIBActionable) .sapMText,
+	.sapMListTblHeader  .sapMText {
+		cursor: text;
+	}
 }
 
 /* Todo HC should use the active background: --sapTile_Hover_Background */

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

@@ -1,3 +1,8 @@
+/* ================================ */
+/* CSS for control sap.f/CardBadge  */
+/* Base theme                       */
+/* ================================ */
+
 .sapFCardBadgePlaceholder {
 	z-index: 100;
 	position: absolute;
@@ -9,6 +14,7 @@
 }
 
 .sapUiIntCard .sapFCardBadgePlaceholder .sapMObjStatus:not(.sapMObjStatusShowCustomIcon) {
+
 	.sapMObjStatusIcon {
 		display: initial;
 	}
@@ -32,7 +38,7 @@
 			padding: 0 0.25rem;
 		}
 
-		.sapMObjStatusIcon{
+		.sapMObjStatusIcon {
 			padding: 0;
 		}
 
@@ -43,13 +49,12 @@
 			white-space: nowrap;
 			max-width: inherit;
 		}
-
 	}
-
 }
 
 /* Padding between icon and text is too much */
-.sapFCardBadgePlaceholder .sapMObjStatus.sapMObjStatusInverted.sapFCardBadgeTextIcon{
+.sapFCardBadgePlaceholder .sapMObjStatus.sapMObjStatusInverted.sapFCardBadgeTextIcon {
+
 	.sapMObjStatusWrapper {
 
 		.sapMObjStatusIcon {
@@ -60,4 +65,4 @@
 			padding: 0 0.375rem 0 0.25rem;
 		}
 	}
-}
+}

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

@@ -9,7 +9,6 @@
 @_sap_f_CardHeaders_HeaderFocusBorderBottomOffset: 1px;
 @_sap_f_CardHeaders_HeaderFocusBorderRightOffset: 1px;
 @_sap_f_CardHeaders_HeaderFocusBorderTopOffset: 1px;
-@_sap_f_CardHeaders_MainHeaderBorderRadius: 0;
 
 .sapFCardHeader {
 	position: relative;
@@ -25,7 +24,7 @@
 		height: fit-content;
 		padding: @_sap_f_CardHeaders_Padding @_sap_f_CardHeaders_Padding 0.75rem @_sap_f_CardHeaders_Padding;
 		position: relative;
-		border-radius: @_sap_f_CardHeaders_MainHeaderBorderRadius;
+		border-radius: 0;
 	}
 
 	.sapFCardHeaderImage {

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

@@ -2,9 +2,10 @@
 /* CSS for control sap.f/CardLoading  */
 /* Base theme                         */
 /* ================================== */
+
 @_sap_f_Card_FocusBorderWidth: 1px;
-@_sap_f_Card_Background_Placeholder_Color: @sapUiContentPlaceholderloadingBackground;
-@_sap_f_Card_Placeholder_Gradient: linear-gradient(to right, @sapUiContentPlaceholderloadingBackground 0%, @sapUiContentPlaceholderloadingBackground 35%, darken(@sapUiContentPlaceholderloadingBackground, 5) 50%, @sapUiContentPlaceholderloadingBackground 65%, @sapUiContentPlaceholderloadingBackground 100%);
+@_sap_f_Card_Background_Placeholder_Color: var(--sapContent_Placeholderloading_Background);
+@_sap_f_Card_Placeholder_Gradient: linear-gradient(to right, var(--sapContent_Placeholderloading_Background) 0%, var(--sapContent_Placeholderloading_Background) 35%, darken(@sapUiContentPlaceholderloadingBackground, 5) 50%, var(--sapContent_Placeholderloading_Background) 65%, var(--sapContent_Placeholderloading_Background) 100%);
 
 .sapFCard {
 
@@ -15,10 +16,10 @@
 			height: 3rem;
 			width: 3rem;
 			margin-right: 0.75rem;
-			//hide the fallback icon
+			/* hide the fallback icon */
 		}
 
-		.sapFCardHeaderImage .sapFCardHeaderItemBinded::after {
+		.sapFCardHeaderMainPart .sapFCardHeaderImage .sapFCardHeaderItemBinded::after {
 			max-height: 2rem;
 			max-width: 2rem;
 			margin-top: 0.5rem;
@@ -41,25 +42,25 @@
 			margin-top: 0.3rem;
 		}
 
-		.sapFCardHeaderTextSecondLine .sapFCardHeaderItemBinded::after,
-		.sapFCardSubtitle.sapFCardHeaderItemBinded::after,
-		.sapFCardHeaderDetailsWrapper .sapFCardHeaderItemBinded::after,
-		.sapFCardNumericIndicatorsSide .sapFCardHeaderItemBinded::after,
-		.sapFCardNumericIndicatorsSide .sapFCardHeaderItemBinded.sapMText::after {
+		.sapFCardHeaderMainPart .sapFCardHeaderTextSecondLine .sapFCardHeaderItemBinded::after,
+		.sapFCardHeaderMainPart .sapFCardSubtitle.sapFCardHeaderItemBinded::after,
+		.sapFCardNumericHeaderNumericPart .sapFCardHeaderDetailsWrapper .sapFCardHeaderItemBinded::after,
+		.sapFCardNumericHeaderNumericPart .sapFCardNumericIndicatorsSide .sapFCardHeaderItemBinded::after,
+		.sapFCardNumericHeaderNumericPart .sapFCardNumericIndicatorsSide .sapFCardHeaderItemBinded.sapMText::after {
 			max-height: 0.6rem;
 		}
 
-		.sapFCardNumericIndicatorsMain .sapFCardHeaderItemBinded::after {
+		.sapFCardNumericHeaderNumericPart .sapFCardNumericIndicatorsMain .sapFCardHeaderItemBinded::after {
 			margin-top: 0.5rem;
 			width: 80%;
 		}
 
 		.sapFCardHeaderItemBinded {
-			visibility: hidden; // hide the loaded elements (texts, icons, etc.) behind the loading indicators
+			visibility: hidden; /* hide the loaded elements (texts, icons, etc.) behind the loading indicators */
 		}
 
 		.sapFCardHeaderItemBinded::after {
-			visibility: visible; // ... but show the loading indicator
+			visibility: visible; /* ... but show the loading indicator */
 		}
 
 		.sapFCardHeaderText .sapFCardHeaderTextFirstLine {
@@ -75,9 +76,9 @@
 			}
 		}
 
-		&:not(.sapFCardLoadingDelayed).sapFCardHeaderItemBinded::after {
+		&:not(.sapFCardLoadingDelayed) .sapFCardHeaderItemBinded::after {
 			.sapFCardLoadingShimmerMixin();
-			content: "";
+			content: '';
 			position: absolute;
 			width: 100%;
 			height: 100%;
@@ -89,8 +90,10 @@
 
 	&.sapUiIntCardTileFlat,
 	&.sapUiIntCardTileFlatWide {
+
 		.sapFCardHeader.sapFCardHeaderLoading,
 		&.sapFCardPreview .sapFCardHeader {
+
 			.sapFAvatar.sapFCardHeaderItemBinded::after,
 			.sapFAvatar.sapFCardHeaderItemBinded::after {
 				margin-top: 0;
@@ -108,14 +111,14 @@
 		}
 	}
 
-	// no sapFCardHeaderItemBinded class present for the filter?
+	/* no sapFCardHeaderItemBinded class present for the filter? */
 	.sapFCardFilterLoading::after {
 		height: 2rem;
 		margin-top: 0.25rem;
 	}
 
 	.sapFCardFilterLoading .sapMSlt {
-		visibility: hidden; // hide the loaded Select behind the loading indicator
+		visibility: hidden; /* hide the loaded Select behind the loading indicator */
 	}
 
 	&.sapFCardPreview .sapFCardFilter,
@@ -123,7 +126,7 @@
 		position: relative;
 		&::after {
 			.sapFCardLoadingShimmerMixin();
-			content: "";
+			content: '';
 			position: absolute;
 			top: 2px;
 			bottom: 2px;
@@ -134,20 +137,23 @@
 
 	&.sapFCardPreview .sapFCardFooter,
 	.sapFCardFooterLoading {
+
 		.sapUiIntActionsStrip {
 			position: relative;
+
 			&::after {
-				content: "";
+				content: '';
 				position: absolute;
 				width: 100%;
 				height: 100%;
-				background-color: @sapUiTileBackground;
+				background-color: var(--sapTile_Background);
 			}
 		}
 	}
 
 	.sapFCardNumericHeader.sapFCardHeaderLoading,
 	&.sapFCardPreview .sapFCardNumericHeader {
+
 		.sapFCardNumericIndicatorsMain .sapFCardHeaderItemBinded {
 			min-width: 5rem;
 		}
@@ -186,7 +192,7 @@
 			bottom: 1px;
 			right: 1px;
 			top: 1px;
-			border: @_sap_f_Card_FocusBorderWidth dotted @sapUiContentFocusColor;
+			border: @_sap_f_Card_FocusBorderWidth dotted var(--sapContent_FocusColor);
 			pointer-events: none;
 		}
 
@@ -199,7 +205,7 @@
 			height: 100%;
 
 			.sapFCardSVG {
-				fill: @sapUiTileBackground;
+				fill: var(--sapTile_Background);
 			}
 		}
 
@@ -266,3 +272,8 @@
 		}
 	}
 }
+
+.sapUiSizeCompact .sapFCard .sapFCardFilterLoading::after {
+	height: 1.75rem;
+	margin-top: 0;
+}

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

@@ -1,11 +1,12 @@
-/* =================================== */
-/* CSS for control sap.f/GridContainer */
-/* Base theme                          */
-/* =================================== */
+/* ==================================== */
+/* CSS for control sap.f/GridContainer  */
+/* Base theme                           */
+/* ==================================== */
 
 @_sap_f_GridContainer_FocusBorderOffset: 0;
 
 .sapFGridContainer {
+
 	.sapFGridContainerDummyArea {
 		position: fixed;
 	}
@@ -54,4 +55,4 @@
 	.sapUiIntCard.sapUiIntCardAnalytical {
 		min-height: 100%;
 	}
-}
+}

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

@@ -3,22 +3,22 @@
 /* Base theme                          */
 /* =================================== */
 
-@_sap_f_GridListItem_HeaderBoxShadow: inset 0 -0.0625rem @sapUiPageHeaderBorderColor;
+@_sap_f_GridListItem_HeaderBoxShadow: inset 0 -0.0625rem var(--sapPageHeader_BorderColor);
 @_sap_f_GridListItem_Overflow: unset;
 @_sap_f_GridListItem_HeaderHeight: 3rem;
 @_sap_f_GridListItem_Compact_HeaderHeight: 2rem;
 @_sap_f_GridListItem_FocusedHighlightOffset: 0.125rem;
 @_sap_f_GridListItem_HighlightBorderRadius: 0.25rem;
-@_sap_f_GridListItem_FocusedHighlightBorderRadius: 0px;
+@_sap_f_GridListItem_FocusedHighlightBorderRadius: 0;
 
 .sapFGLI {
 	padding: 0;
-	border-radius: @sapUiTileBorderCornerRadius;
+	border-radius: var(--sapTile_BorderCornerRadius);
 	border: none;
-	box-shadow: @sapUiContentShadow0;
+	box-shadow: var(--sapContent_Shadow0);
 	overflow: @_sap_f_GridListItem_Overflow;
 
-	// Highlighted items
+	/* Highlighted items */
 	> .sapMLIBHighlight {
 		z-index: 1;
 		border-top-left-radius: @_sap_f_GridListItem_HighlightBorderRadius;
@@ -36,7 +36,7 @@
 		width: 100%;
 		height: 100%;
 
-		// Header Toolbar
+		/* Header Toolbar */
 		.sapFGLIToolbar {
 			height: @_sap_f_GridListItem_HeaderHeight;
 			box-shadow: @_sap_f_GridListItem_HeaderBoxShadow;
@@ -52,13 +52,13 @@
 				padding: 0;
 			}
 
-			// add spacing between the items, except for the first item
-			>:not(:first-child) {
+			/* add spacing between the items, except for the first item */
+			> :not(:first-child) {
 				margin: 0 0 0 0.5rem;
 			}
 		}
 
-		// Content
+		/* Content */
 		.sapMLIBContent {
 			height: 100%;;
 		}
@@ -83,13 +83,14 @@
 
 /* Interaction states */
 .sapFGLI {
+
 	&.sapMLIBHoverable:hover {
-		box-shadow: 0 0 0 0.0625rem @sapUiTileInteractiveBorderColor;
+		box-shadow: 0 0 0 0.0625rem var(--sapTile_Interactive_BorderColor);
 	}
 
 	&.sapMLIB.sapMLIBSelected {
 		border-bottom: none;
-		box-shadow: 0 0 0 0.125rem @sapUiListSelectionBorderColor;
+		box-shadow: 0 0 0 0.125rem var(--sapList_SelectionBorderColor);
 	}
 }
 
@@ -100,7 +101,7 @@
 		height: @_sap_f_GridListItem_Compact_HeaderHeight;
 	}
 
-	// Content
+	/* Content */
 	.sapMLIBContent {
 		height: 100%;;
 	}
@@ -108,4 +109,4 @@
 	.sapFGLIToolbar + .sapMLIBContent {
 		height: calc(100% ~"-" @_sap_f_GridListItem_Compact_HeaderHeight);
 	}
-}
+}