@openui5/sap.f 1.124.2 → 1.126.0

package/src/sap/f/themes/sap_hcb/base_CardLoading.less

@@ -0,0 +1,268 @@
+/* ================================== */
+/* 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%);
+
+.sapFCard {
+
+	.sapFCardHeader.sapFCardHeaderLoading,
+	&.sapFCardPreview .sapFCardHeader {
+
+		.sapFCardHeaderImage.sapFCardHeaderItemBinded {
+			height: 3rem;
+			width: 3rem;
+			margin-right: 0.75rem;
+			//hide the fallback icon
+		}
+
+		.sapFCardHeaderImage .sapFCardHeaderItemBinded::after {
+			max-height: 2rem;
+			max-width: 2rem;
+			margin-top: 0.5rem;
+		}
+
+		.sapFCardHeaderText .sapFCardStatus.sapFCardHeaderItemBinded {
+			margin-top: 0;
+		}
+
+		.sapFCardHeaderTextSecondLine .sapFCardHeaderItemBinded::after {
+			margin-top: 0.2rem;
+		}
+
+		.sapFCardHeaderDetailsWrapper>.sapFCardHeaderItemBinded::after {
+			max-width: 70%;
+			margin-top: 0.2rem;
+		}
+
+		.sapFCardSubtitle.sapFCardHeaderItemBinded::after {
+			margin-top: 0.3rem;
+		}
+
+		.sapFCardHeaderTextSecondLine .sapFCardHeaderItemBinded::after,
+		.sapFCardSubtitle.sapFCardHeaderItemBinded::after,
+		.sapFCardHeaderDetailsWrapper .sapFCardHeaderItemBinded::after,
+		.sapFCardNumericIndicatorsSide .sapFCardHeaderItemBinded::after,
+		.sapFCardNumericIndicatorsSide .sapFCardHeaderItemBinded.sapMText::after {
+			max-height: 0.6rem;
+		}
+
+		.sapFCardNumericIndicatorsMain .sapFCardHeaderItemBinded::after {
+			margin-top: 0.5rem;
+			width: 80%;
+		}
+
+		.sapFCardHeaderItemBinded {
+			visibility: hidden; // hide the loaded elements (texts, icons, etc.) behind the loading indicators
+		}
+
+		.sapFCardHeaderItemBinded::after {
+			visibility: visible; // ... but show the loading indicator
+		}
+
+		.sapFCardHeaderText .sapFCardHeaderTextFirstLine {
+
+			.sapFCardTitle.sapFCardHeaderItemBinded {
+				flex: 1 0;
+				position: relative;
+			}
+
+			.sapFCardStatus.sapFCardHeaderItemBinded {
+				min-width: 1.5rem;
+				min-height: 1rem;
+			}
+		}
+
+		.sapFCardHeaderItemBinded::after {
+			.sapFCardLoadingShimmerMixin();
+			content: "";
+			position: absolute;
+			width: 100%;
+			height: 100%;
+			max-height: 1rem;
+			top: 0;
+			left: 0;
+		}
+	}
+
+	&.sapUiIntCardTileFlat,
+	&.sapUiIntCardTileFlatWide {
+		.sapFCardHeader.sapFCardHeaderLoading,
+		&.sapFCardPreview .sapFCardHeader {
+			.sapFAvatar.sapFCardHeaderItemBinded::after,
+			.sapFAvatar.sapFCardHeaderItemBinded::after {
+				margin-top: 0;
+				margin-left: 0;
+			}
+
+			.sapFCardAvatarAndIndicatorsLine .sapFCardIcon.sapFAvatar.sapFCardHeaderItemBinded,
+			.sapFCardAvatarAndIndicatorsLine .sapFCardIcon.sapFAvatar.sapFCardHeaderItemBinded {
+				margin-right: 0.5rem;
+			}
+
+			.sapFCardNumericIndicatorsMain .sapFCardHeaderItemBinded::after {
+				margin-top: -2px;
+			}
+		}
+	}
+
+	// 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
+	}
+
+	&.sapFCardPreview .sapFCardFilter,
+	.sapFCardFilterLoading {
+		position: relative;
+		&::after {
+			.sapFCardLoadingShimmerMixin();
+			content: "";
+			position: absolute;
+			top: 2px;
+			bottom: 2px;
+			left: 0;
+			right: 0;
+		}
+	}
+
+	&.sapFCardPreview .sapFCardFooter,
+	.sapFCardFooterLoading {
+		.sapUiIntActionsStrip {
+			position: relative;
+			&::after {
+				content: "";
+				position: absolute;
+				width: 100%;
+				height: 100%;
+				background-color: @sapUiTileBackground;
+			}
+		}
+	}
+
+	.sapFCardNumericHeader.sapFCardHeaderLoading,
+	&.sapFCardPreview .sapFCardNumericHeader {
+		.sapFCardNumericIndicatorsMain .sapFCardHeaderItemBinded {
+			min-width: 5rem;
+		}
+
+		.sapFCardHeaderSideIndicator.sapFCardHeaderItemBinded {
+			flex: 1 0;
+			min-height: 2rem;
+		}
+
+		.sapFCardHeaderDetails.sapFCardHeaderItemBinded {
+			flex: 1 0;
+			min-height: 1rem;
+			width: 100%;
+		}
+	}
+
+	.sapFCardContent {
+
+		.sapFCardContentHidden {
+			display: none;
+		}
+
+		.sapFCardBaseContent.sapFCardContentLoading:not(.sapFCardObjectContent) > :not(.sapFCardContentPlaceholder):not(.sapFCardContentMessageContainer) {
+			display: none;
+		}
+
+		.sapFCardContentPlaceholder {
+			outline: none;
+		}
+
+		.sapFCardContentPlaceholder:focus::before {
+			content: '';
+			display: block;
+			position: absolute;
+			left: 1px;
+			bottom: 1px;
+			right: 1px;
+			top: 1px;
+			border: @_sap_f_Card_FocusBorderWidth dotted @sapUiContentFocusColor;
+			pointer-events: none;
+		}
+
+		.sapFCardContentGenericPlaceholder,
+		.sapFCardContentAnalyticalPlaceholder {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			width: 100%;
+			height: 100%;
+
+			.sapFCardSVG {
+				fill: @sapUiTileBackground;
+			}
+		}
+
+		.sapFCardContentAnalyticalPlaceholder > div {
+			padding: 0.5rem;
+		}
+
+		.sapFCardContentGenericPlaceholder {
+			.sapFCardLoadingShimmer {
+				max-width: 144px;
+				max-height: 144px;
+				height: ~"calc(100% - 4px)"; /* leave place for the focus */
+			}
+		}
+	}
+
+	.sapFCardLoadingShimmer {
+		.sapFCardLoadingShimmerMixin();
+	}
+
+	.sapFCardLoadingShimmerMixin() {
+		background-color: @_sap_f_Card_Background_Placeholder_Color;
+		background-image: @_sap_f_Card_Placeholder_Gradient;
+		background-repeat: no-repeat;
+		background-size: 800px 100%;
+		position: relative;
+		border-radius: 0.25rem;
+
+		[data-sap-ui-animation-mode="full"] & {
+			animation-duration: 2.5s;
+			animation-fill-mode: forwards;
+			animation-iteration-count: infinite;
+			animation-name: placeHolderShimmer;
+			animation-timing-function: linear;
+		}
+
+		[data-sap-ui-animation-mode="basic"] &,
+		[data-sap-ui-animation-mode="minimal"] & {
+			animation-duration: 8s;
+			animation-fill-mode: forwards;
+			animation-iteration-count: infinite;
+			animation-name: placeHolderShimmer;
+			animation-timing-function: linear;
+		}
+	}
+
+	@keyframes placeHolderShimmer {
+		0% {
+			background-position: -468px 0;
+		}
+
+		100% {
+			background-position: 468px 0;
+		}
+	}
+
+	&.sapFCardPreview {
+		.sapFCardHeaderItemBinded::after,
+		.sapFCardFilter::after,
+		.sapFCardLoadingShimmer,
+		.sapUiIntActionsStrip::after {
+			background-image: unset !important;
+			animation-name: unset !important;
+		}
+	}
+}

package/src/sap/f/themes/sap_hcb/base_CardNumericIndicators.less

@@ -0,0 +1,38 @@
+/* ============================================= */
+/* CSS for control sap.f.cards/NumericIndicators */
+/* Base theme                                    */
+/* ============================================= */
+
+.sapFCardNumericIndicators {
+	display: flex;
+	align-items: flex-start;
+
+	&.sapFCardNumericIndicatorsSideAlignBegin .sapFCardNumericIndicatorsGap {
+		max-width: 3rem;
+	}
+
+	.sapFCardNumericIndicatorsMain .sapMNC.WithoutMargin {
+		height: 100%;
+
+		.sapMNCInner.WithoutMargin {
+			position: relative;
+		}
+	}
+
+	.sapFCardNumericIndicatorsGap {
+		flex: 1 0 1rem;
+	}
+
+	.sapFCardNumericIndicatorsSide {
+		min-width: 0; // allows items to shrink and truncate the content inside
+		display: flex;
+
+		.sapFCardHeaderSideIndicator {
+			margin-right: 1rem;
+			position: relative;
+		}
+		.sapFCardHeaderSideIndicator:last-child {
+			margin-right: 0;
+		}
+	}
+}

package/src/sap/f/themes/sap_hcb/base_DynamicPage.less

@@ -0,0 +1,418 @@
+/* ================================== */
+/* CSS for control sap.f/DynamicPage  */
+/* Base theme                         */
+/* ================================== */
+
+@_sap_f_DynamicPage_FooterHeight: 3rem;
+@_sap_f_DynamicPage_FooterHeight_Compact: 2.5rem;
+@_sap_f_DynamicPage_FooterMarginBottom: 0.5rem;
+
+.sapFDynamicPage {
+	width: 100%;
+	height: 100%;
+	position: relative;
+	isolation: isolate;
+	z-index: 0;
+
+	.sapFDynamicPageContentWrapperStandard,
+	.sapFDynamicPageContentWrapperSolid {
+		&>.sapFDynamicPageContent {
+			background: @sapUiBaseBG;
+		}
+	}
+
+	.sapFDynamicPageHeaderSolid {
+		background: @sapUiBaseBG;
+	}
+
+	.sapFDynamicPageContentWrapperTransparent>.sapFDynamicPageContent {
+		background: transparent;
+	}
+
+	.sapFDynamicPageContentWrapperList>.sapFDynamicPageContent {
+		background: @sapUiGroupContentBackground;
+	}
+}
+
+.sapFDynamicPageTitleWrapper {
+	position: absolute;
+	padding-right: 0;
+	top: 0;
+	right: 0;
+	left: 0;
+	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 {
+	 .sapFDynamicPageTitleWrapper {
+		right: 17px;
+	}
+
+	.sapFDynamicPageFooter .sapFDynamicPageActualFooterControl {
+		right: 17px;
+	}
+}
+
+.sapFDynamicPageContent {
+	flex-grow: 1;
+	-webkit-flex-grow: 1;
+	z-index: 0;
+
+	.sapFDynamicPageAlignContent {
+		margin-left: -@sapUiMarginSmall;
+		margin-right: -@sapUiMarginSmall;
+	}
+}
+
+/* TODO remove after the end of support for Internet Explorer */
+html[data-sap-ui-browser^="ie"] {
+	.sapFDynamicPageContent {
+		flex-shrink: 0;
+	}
+}
+
+.sapFDynamicPageContent,
+.sapFDynamicPageContentFitContainer {
+	position: relative;
+	padding: 1rem 3rem 0 3rem;
+	box-sizing: border-box;
+}
+
+.sapFDynamicPageContent > .sapFDynamicPageContentFitContainer {
+	position: absolute;
+	left: 0;
+	right: 0;
+	top: 0;
+	bottom: 0;
+}
+
+// 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)
+.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;
+	}
+}
+
+.sapFDynamicPage-Std-Phone {
+	.sapFDynamicPageContent,
+	.sapFDynamicPageContentFitContainer {
+		padding: 2rem 1rem 0 1rem;
+	}
+}
+
+.sapUiContainerContentPadding(~".sapFDynamicPage", ~".sapFDynamicPageContent");
+.sapUiContainerContentPadding(~".sapFDynamicPage", ~".sapFDynamicPageContentFitContainer");
+
+.sapFDynamicPage.sapUiContentPadding,
+.sapFDynamicPage.sapUiNoContentPadding,
+.sapFDynamicPage.sapUiResponsiveContentPadding {
+	.sapFDynamicPageAlignContent {
+		margin: 0;
+	}
+}
+
+.sapFDynamicPage.sapUiContentPadding {
+	.sapFDynamicPage-Std-Phone {
+		.sapFDynamicPageAlignContent {
+			margin: 0 -1rem;
+		}
+	}
+}
+
+.sapFDynamicPage.sapUiResponsiveContentPadding {
+	&.sapFDynamicPage-Std-Phone {
+		.sapFDynamicPageContent,
+		.sapFDynamicPageContentFitContainer {
+			padding: 0;
+			padding-top: 1rem;
+		}
+	}
+
+	&.sapFDynamicPage-Std-Tablet {
+		.sapFDynamicPageContent,
+		.sapFDynamicPageContentFitContainer {
+			padding: 1rem;
+		}
+	}
+
+	&.sapFDynamicPage-Std-Desktop {
+		.sapFDynamicPageContent,
+		.sapFDynamicPageContentFitContainer {
+			padding: 1rem 2rem;
+		}
+	}
+}
+
+.sapFDynamicPageFooterVisible .sapFDynamicPageContentWrapper,
+.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;"] {
+		scroll-padding-bottom: ~"calc(@{_sap_f_DynamicPage_FooterHeight_Compact} +  @{_sap_f_DynamicPage_FooterMarginBottom} + 2px)";
+	}
+}
+
+.sapFDynamicPageContentWrapper {
+	width: 100%;
+	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
+	overflow-anchor: none;
+
+	overflow-y: auto;
+}
+
+.sapFDynamicPageSupressScroll {
+	.sapFDynamicPageContentWrapper {
+		overflow: hidden;
+	}
+}
+
+.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;
+	}
+
+	.sapFDynamicPageFooter .sapFDynamicPageActualFooterControl {
+		right: 12px;
+	}
+}
+
+.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
+.sapFDynamicPage.sapFDynamicPageTitleClickEnabled {
+	.sapFDynamicPageTitle:hover,
+	&.sapFDynamicPageTitleForceHovered .sapFDynamicPageTitle {
+		cursor: pointer;
+
+		.sapMFlexBox {
+			cursor: default;
+		}
+	}
+}
+
+// Overstyle for Comparison Pattern
+.sapFDynamicPage.sapFDynamicPageTitleClickEnabled.sapUiComparisonContainer {
+	.sapFDynamicPageTitleMainInner:hover {
+		cursor: pointer;
+	}
+
+	.sapFDynamicPageTitle:hover,
+	&.sapFDynamicPageTitleForceHovered .sapFDynamicPageTitle {
+		cursor: default;
+	}
+}
+
+// Reflection: Overwritten styles
+.sapFDynamicPageTitleMainHeading,
+.sapFDynamicPageTitleMainContent,
+.sapFDynamicPageTitleMainActions {
+	// BCP: 1870261908 - CSS cursor reset is needed here to prevent showing pointer for not clickable control types
+	cursor: default;
+}
+
+.sapFDynamicPage {
+	.sapFDynamicPageFooter {
+		position: relative;
+
+		.sapFDynamicPageActualFooterControl {
+			position: absolute;
+			height: @_sap_f_DynamicPage_FooterHeight;
+			width: auto;
+			bottom: 0;
+			right: 0;
+			left: 0;
+			border-radius: 0.25rem;
+			margin-left: 0.5rem;
+			margin-right: 0.5rem;
+			margin-bottom: @_sap_f_DynamicPage_FooterMarginBottom;
+		}
+	}
+}
+
+.sapUiSizeCompact .sapFDynamicPage .sapFDynamicPageFooter .sapFDynamicPageActualFooterControl {
+	height: @_sap_f_DynamicPage_FooterHeight_Compact;
+}
+
+/* ============================== */
+/* Toggle Header Visual Indicator */
+/* ============================== */
+.sapFDynamicPageToggleHeaderIndicator.sapMBtn,
+.sapFDynamicPageHeaderPinButton.sapMBtn {
+	position: absolute;
+	left: 50%;
+	padding: 0;
+
+	// Reflection: Overwritten styles
+	.sapMBtnInner {
+		position: absolute !important;
+		border-radius: 0.1875rem;
+	}
+}
+
+/* Tablet and Desktop */
+.sapFDynamicPageToggleHeaderIndicator,
+.sapFDynamicPageHeaderPinButton {
+	bottom: -1.375rem;
+}
+
+.sapFDynamicPageToggleHeaderIndicator,
+.sapFDynamicPageToggleHeaderIndicator.sapUiHidden ~ .sapFDynamicPageHeaderPinButton {
+	margin-left: -1.25rem;
+}
+
+.sapFDynamicPageHeaderPinnable .sapFDynamicPageToggleHeaderIndicator {
+	margin-left: -2.5rem;
+}
+
+.sapFDynamicPageHeaderPinButton {
+	margin-left: 0.25rem;
+}
+
+/* Compact */
+.sapUiSizeCompact {
+	.sapFDynamicPageToggleHeaderIndicator,
+	.sapFDynamicPageHeaderPinButton {
+		bottom: -0.875rem;
+
+		// Reflection: Overwritten styles
+		.sapMBtnInner.sapMBtnIconFirst:not(.sapMBtnBack) {
+			padding-left: 0;
+			padding-right: 0;
+		}
+	}
+}
+
+/* ============= */
+/* 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%);
+			opacity: 0;
+		}
+		100% {
+			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%);
+			opacity: 1;
+		}
+		100% {
+			transform: translateY(100%);
+			opacity: 0;
+		}
+	}
+}
+
+
+/* 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. */
+.sapUiComparisonContent .sapUiComparisonItem  {
+	padding-left: 2.25rem;
+	padding-right: 1rem;
+}
+
+.sapUiComparisonContent :first-child.sapUiComparisonItem {
+	padding-left: 1rem;
+}
+
+.sapUiComparisonContainer .sapFDynamicPageTitleSnapped + .sapFDynamicPageContentWrapper .sapUiComparisonContent  {
+	margin-right: -1rem;
+}