@openui5/sap.f 1.117.1 → 1.119.0

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

@@ -3,7 +3,7 @@
 /* Base theme                         */
 /* ================================== */
 
-@_sap_f_Card_BoxShadow: @sapUiShadowLevel0;
+@_sap_f_Card_BoxShadow: @sapUiContentShadow0;
 @_sap_f_Card_HeaderBorder: 0.0625rem solid @sapUiTileSeparatorColor; // used as top or bottom border
 @_sap_f_Card_HeaderFocusBorderRadius: none;
 @_sap_f_Card_BorderRadius: @sapUiElementBorderCornerRadius;
@@ -197,6 +197,34 @@ ui-integration-card.sapFCardTransparent > [data-sap-ui-area] > .sapFCard {
 	.sapFCardHeaderToolbarCont .sapFCardHeaderToolbar {
 		margin: -0.25rem 0 -0.25rem 0.5rem;
 	}
+
+	.sapFCardHeaderBanner {
+		display: flex;
+		justify-content: flex-end;
+		margin: 0.25rem -(@_sap_f_Card_ContentPadding) 0;
+
+		.sapFCardHeaderBannerInner {
+			padding-inline-start: 0.25rem;
+			padding-inline-end: @_sap_f_Card_ContentPadding;
+			background-color: @sapUiInfobarNonInteractiveBackground;
+			border-radius: 0.125rem 0 0 0.125rem;
+
+			.sapFCardHeaderBannerLine {
+				display: flex;
+				justify-content: flex-end;
+				padding: 0.125rem 0;
+
+				.sapMText {
+					font-size: @sapUiFontSmallSize;
+					color: @sapUiTileTitleTextColor;
+				}
+
+				.sapMText.sapFCardHeaderBannerLineDiminished {
+					color: @sapUiTileTextColor;
+				}
+			}
+		}
+	}
 }
 
 .sapFCard .sapFCardIcon.sapFAvatar {
@@ -222,7 +250,6 @@ ui-integration-card.sapFCardTransparent > [data-sap-ui-area] > .sapFCard {
 .sapFCard .sapFCardHeader.sapFCardNumericHeader {
 
 	.sapFCardHeaderContent {
-		overflow: hidden;
 		outline: none;
 		min-width: 0; // fixes Chrome issue
 		flex: 1;
@@ -239,6 +266,7 @@ ui-integration-card.sapFCardTransparent > [data-sap-ui-area] > .sapFCard {
 
 		.sapFCardHeaderUnitOfMeasurement {
 			flex-shrink: 0;
+			max-height: 1rem;
 		}
 
 		&.sapFCardSubtitleAndUnit .sapFCardHeaderUnitOfMeasurement {
@@ -252,8 +280,20 @@ ui-integration-card.sapFCardTransparent > [data-sap-ui-area] > .sapFCard {
 		color: @sapUiTileTextColor;
 	}
 
+	.sapFCardAvatarAndIndicatorsLine {
+		display: flex;
+		align-items: center;
+
+		.sapFCardIcon.sapFAvatar {
+			margin-top: 0.5rem;
+			margin-right: 0;
+		}
+	}
+
 	.sapFCardNumericIndicators {
 		margin-top: 0.25rem;
+		flex: 1;
+		min-width: 0; // allows items to shrink and truncate the content inside
 
 		.sapFCardHeaderSideIndicator .sapFCardHeaderSITitle,
 		.sapFCardHeaderSINumber,
@@ -537,4 +577,4 @@ html[data-sap-ui-browser^="cr"] .sapFCard {
 		pointer-events: all;
 		box-shadow: @sapUiShadow;
 	}
-}
+}

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

@@ -75,6 +75,7 @@ html[data-sap-ui-browser^="ie"] {
 .sapFDynamicPageContentFitContainer {
 	position: relative;
 	padding: 1rem 3rem 0 3rem;
+	box-sizing: border-box;
 }
 
 .sapFDynamicPageContent > .sapFDynamicPageContentFitContainer {
@@ -98,12 +99,12 @@ html[data-sap-ui-browser^="ie"] {
 
 // 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} * 4 ) ))";
+	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} * 4 ) ))";
+		max-height: ~"calc(100% - (@{_sap_f_DynamicPage_FooterHeight_Compact} + ( @{_sap_f_DynamicPage_FooterMarginBottom} * 2 ) ))";
 	}
 }
 

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

@@ -35,6 +35,11 @@
 		display: none;
 	}
 
+	.sapFDynamicPageTitleExpanded.sapUiHidden *,
+	.sapFDynamicPageTitleSnapped.sapUiHidden * {
+		visibility: hidden;
+	}
+
 	.sapFDynamicPageTitleMain > .sapFDynamicPageTitleMainInner {
 		.sapFDynamicPageTitleMainContent .sapMTB {
 			padding-left: 0.5rem;

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

@@ -3,6 +3,9 @@
 /* Base theme                      */
 /* =============================== */
 
+@_sap_ui_layout_Splitter_BarDecorationColors: @sapUiHighlight, fade(@sapUiHighlight, 0);
+@_sap_ui_layout_Splitter_BarActiveDecorationColors: @sapUiHighlight, @sapUiHighlight;
+
 /***** Desktop *****/
 
 // Cozy
@@ -31,7 +34,7 @@
 		border-left: none;
 		border-right: none;
 		vertical-align: top;
-		color: @sapUiHighlight;
+		color: @sapUiContentIconColor;
 		position: absolute;
 		left: -1rem;
 
@@ -39,7 +42,7 @@
 			outline: none;
 		}
 
-		&:focus::after {
+		&:focus:not(:active)::after {
 			content: "";
 			display: block;
 			position: absolute;
@@ -53,7 +56,7 @@
 		.sapFSPSplitterBarDecorationBefore {
 			width: 1rem;
 			height: 4rem;
-			background-image: linear-gradient(to top, @sapUiGroupContentBorderColor, fade(@sapUiGroupContentBorderColor, 0));
+			background-image: linear-gradient(to top, @_sap_ui_layout_Splitter_BarDecorationColors);
 			background-size: 0.0625rem 100%;
 			background-repeat: no-repeat;
 			background-position: center;
@@ -63,7 +66,7 @@
 			width: 1rem;
 			height: 4rem;
 			height: 4rem;
-			background-image: linear-gradient(to bottom, @sapUiGroupContentBorderColor, fade(@sapUiGroupContentBorderColor, 0));
+			background-image: linear-gradient(to bottom, @_sap_ui_layout_Splitter_BarDecorationColors);
 			background-size: 0.0625rem 100%;
 			background-repeat: no-repeat;
 			background-position: center;
@@ -90,6 +93,17 @@
 			}
 		}
 
+		&:active {
+			.sapFSPSplitterBarDecorationBefore {
+				flex-grow: 1;
+				background-image: linear-gradient(to top, @_sap_ui_layout_Splitter_BarActiveDecorationColors);
+			}
+			.sapFSPSplitterBarDecorationAfter {
+				flex-grow: 1;
+				background-image: linear-gradient(to bottom, @_sap_ui_layout_Splitter_BarActiveDecorationColors);
+			}
+		}
+
 		&:hover {
 			.sapFSPSplitterBarDecorationBefore,
 			.sapFSPSplitterBarDecorationAfter {
@@ -102,14 +116,6 @@
 				border-color: @sapUiButtonLiteBorderColor;
 			}
 		}
-
-		&.sapFSPSplitterActive {
-			.sapFSPSplitterBarDecorationBefore,
-			.sapFSPSplitterBarDecorationAfter {
-				flex-grow: 1;
-				background-image: linear-gradient(to left, @sapUiHighlight, @sapUiHighlight);
-			}
-		}
 	}
 
 	// Side panel
@@ -194,6 +200,7 @@
 			height: 100%;
 			min-width: 4.25rem;
 			width: 4.25rem;
+			overflow: hidden;
 		}
 
 		.sapFSPActionBarList {
@@ -339,7 +346,7 @@
 		}
 
 		.sapFSPActionBar {
-			max-width: 20rem;
+			max-width: 100%;
 			width: 100%;
 			flex-shrink: 0;
 
@@ -471,8 +478,8 @@
 
 		&.sapFSPActionBarExpanded {
 			.sapFSPSideInner .sapFSPActionBar {
-				width: 20rem;
-				max-width: 20rem;
+				width: 100%;
+				max-width: 100%;
 			}
 		}
 	}