@openui5/themelib_sap_belize 1.124.2 → 1.126.0

package/src/sap/ui/integration/themes/sap_belize_base/ListContentItem.less

@@ -0,0 +1,164 @@
+/* =========================================================== */
+/* CSS for control sap.ui.integration.controls/ListContentItem */
+/* Base theme                                                  */
+/* =========================================================== */
+
+@_sap_ui_integration_ListContentItem_BottomBorderHeight: 1px;
+@_sap_ui_integration_ListContentItem_TextShadow: 0 0 @sapUiListTextColor;
+
+.sapUiIntLCI {
+	padding: unset;
+
+	// apply the padding to the contents, to prevent clipping when buttons are hovered for example, due to overflow
+	.sapUiIntLCIContent > * {
+		padding: 0 1rem;
+	}
+
+	&.sapUiIntLCIOneLine .sapUiIntLCIIconAndLines {
+		height: calc(2.75rem ~"-" @_sap_ui_integration_ListContentItem_BottomBorderHeight);
+		align-items: center
+	}
+
+	&.sapUiIntLCIOneLine.sapUiIntLCIWithActionsStrip .sapUiIntLCIIconAndLines {
+		height: 2.75rem;
+	}
+
+	&.sapUiIntLCITwoLines .sapUiIntLCIIconAndLines,
+	&.sapUiIntLCIOneLine.sapUiIntLCIThumbnail .sapUiIntLCIIconAndLines {
+		height: calc(5rem ~"-" @_sap_ui_integration_ListContentItem_BottomBorderHeight);
+		align-items: center
+	}
+
+	&.sapUiIntLCITwoLines.sapUiIntLCIWithActionsStrip .sapUiIntLCIIconAndLines,
+	&.sapUiIntLCIOneLine.sapUiIntLCIThumbnail.sapUiIntLCIWithActionsStrip .sapUiIntLCIIconAndLines {
+		height: 5rem;
+	}
+
+	&.sapUiIntLCIMultipleLines {
+		padding-top: 1rem;
+		padding-bottom: calc(1rem ~"-" @_sap_ui_integration_ListContentItem_BottomBorderHeight);
+
+		.sapUiIntActionsStrip {
+			margin-top: 0.5rem;
+		}
+	}
+
+	&.sapUiIntLCITwoLines,
+	&.sapUiIntLCIMultipleLines {
+		.sapUiIntLCITitleWrapper {
+			margin-bottom: 0.25rem;
+		}
+	}
+
+
+	&.sapUiIntLCIWithActionsStrip {
+		padding-bottom: calc(0.5rem ~"-" @_sap_ui_integration_ListContentItem_BottomBorderHeight);
+	}
+
+	.sapUiIntLCIIconAndLines {
+		display: flex;
+
+		> .sapFCardIcon {
+			flex-shrink: 0;
+		}
+
+		.sapUiIntLCILines {
+			flex: 1;
+			overflow: hidden;
+			display: flex;
+			flex-direction: column;
+			row-gap: 0.5rem;
+			justify-content: center;
+
+			.sapUiIntLCIAttrRow {
+				display: flex;
+				align-items: center;
+			}
+
+			.sapUiIntLCIAttrSecondCell {
+				justify-content: flex-end;
+
+				.sapMObjStatus {
+					text-align: end;
+				}
+			}
+
+			.sapUiIntLCIAttrCell {
+				flex: 1;
+				display: flex;
+				align-items: center;
+			}
+
+			.sapMObjStatusNone .sapMObjStatusText {
+				color: @sapUiContentLabelColor;
+			}
+		}
+	}
+
+	.sapUiIntLCITitleWrapper,
+	.sapUiIntLCIDescriptionWrapper {
+		display: flex;
+	}
+
+	&.sapMLIBShowSeparator:last-child {
+		border-bottom: 1px solid transparent;
+	}
+}
+
+.sapUiIntLCITitle {
+	color: @sapUiListTextColor;
+	text-shadow: @_sap_ui_integration_ListContentItem_TextShadow;
+	font-size: @sapMFontMediumSize;
+	flex: 1;
+}
+
+.sapUiIntLCIDescription {
+	color: @sapUiContentLabelColor;
+	font-size: @sapMFontMediumSize;
+	flex: 1;
+}
+
+.sapUiIntLCIInfo {
+	display: flex;
+	font-size: @sapMFontMediumSize;
+	text-align: right;
+	margin-left: 1rem;
+	max-width: 40%;
+}
+
+.sapUiIntLCITitle,
+.sapUiIntLCIDescription,
+.sapUiIntLCIInfo {
+	line-height: 1rem;
+	font-family: @sapUiFontFamily;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.sapUiIntLCIContent .sapUiIntLCIInfo {
+	white-space: normal;
+}
+
+// Interactive states
+.sapUiIntLCI.sapMLIBActive {
+	.sapFCardIcon.sapFAvatar .sapUiIcon,
+	.sapUiIntLCIInfo {
+		color: @sapUiListActiveTextColor;
+	}
+}
+
+// Styles for compact mode only
+.sapUiSizeCompact .sapUiIntLCI {
+	&.sapUiIntLCIOneLine .sapUiIntLCIIconAndLines {
+		height: calc(2rem ~"-" @_sap_ui_integration_ListContentItem_BottomBorderHeight);
+	}
+
+	&.sapUiIntLCIOneLine.sapUiIntLCIWithActionsStrip .sapUiIntLCIIconAndLines {
+		height: 2rem;
+	}
+
+	&.sapUiIntLCIOneLine.sapUiIntLCIThumbnail .sapUiIntLCIIconAndLines {
+		height: 5rem;
+	}
+}

package/src/sap/ui/integration/themes/sap_belize_base/Microchart.less

@@ -0,0 +1,62 @@
+/* ====================================================== */
+/* CSS for control sap.ui.integration.controls/Microchart */
+/* Base theme                                             */
+/* ====================================================== */
+
+
+.sapUiIntMicrochartValue {
+	&Neutral {
+		color: @sapUiNeutralText;
+	}
+
+	&Good {
+		color: @sapUiPositiveText;
+	}
+
+	&Error {
+		color: @sapUiNegativeText;
+	}
+
+	&Critical {
+		color: @sapUiCriticalText;
+	}
+}
+
+.sapUiIntMicrochartChartWrapper {
+	min-height: 1rem;
+	max-height: 3rem;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+
+	.sapUiIntMicrochartChart {
+		flex-grow: 1;
+		.sapUiIntMicrochartChartInner {
+			height: 100%;
+		}
+	}
+}
+
+.sapUiIntMicrochartInHeader.sapUiIntMicrochartChartWrapper {
+	flex-grow: 1;
+	margin-top: 0.5rem;
+	max-width: 8.5rem;
+	min-width: 5rem;
+
+	&:has(.sapUiIntMicrochartSizeS) {
+		max-height: 3.5rem;
+		margin-top: 0.25rem;
+		max-width: 8.25rem;
+
+		&:has(.sapMSLIInfo) {
+			max-width: 13rem;
+		}
+	}
+	.sapUiIntMicrochartSizeS {
+		height: 3.5rem;
+	}
+
+	&:only-child {
+		max-width: 100%;
+	}
+}

package/src/sap/ui/integration/themes/sap_belize_base/MicrochartLegend.less

@@ -0,0 +1,52 @@
+/* ============================================================ */
+/* CSS for control sap.ui.integration.controls/MicrochartLegend */
+/* Base theme                                                   */
+/* ============================================================ */
+
+.sapUiIntMicrochartLegend {
+	padding-top: 0.5rem;
+	padding-left: 1rem;
+
+	.sapUiIntMicrochartLegendItem {
+		display: inline-flex;
+		margin-right: 3rem;
+		margin-bottom: 0.5rem;
+		max-width: 100%;
+
+		// color segment
+		:first-child {
+			flex-shrink: 0;
+			width: 0.75rem;
+			height: 0.75rem;
+			margin-right: 0.5rem;
+		}
+
+		// title
+		:nth-child(2) {
+			height: 0.75rem;
+			font-size: 0.75rem;
+			overflow: hidden;
+			white-space: nowrap;
+			text-overflow: ellipsis;
+		}
+
+	}
+}
+
+.sapUiIntMicrochartLegendItem {
+	&Neutral {
+		background: @sapUiChartPaletteSemanticNeutral;
+	}
+
+	&Good {
+		background: @sapUiChartPaletteSemanticGood;
+	}
+
+	&Error {
+		background: @sapUiChartPaletteSemanticBad;
+	}
+
+	&Critical {
+		background: @sapUiChartPaletteSemanticCritical;
+	}
+}

package/src/sap/ui/integration/themes/sap_belize_base/ObjectContent.less

@@ -0,0 +1,181 @@
+/* ====================================================== */
+/* CSS for control sap.ui.integration.cards/ObjectContent */
+/* Base theme                                             */
+/* ====================================================== */
+
+.sapFCardObjectContent {
+	padding: 1rem;
+
+	&.sapFCardObjectContentWithOverlay {
+		.sapMFlexBox.sapUiIntImgWithOverlayLayout,
+		.sapMFlexBox.sapFCardObjectGroup:has( > .sapUiIntImageWithOverlay:only-child ),
+		 > .sapMFlexBox,
+		.sapUiIntImageWithOverlay:only-child {
+			height: 100%;
+		}
+	}
+}
+
+.sapUiIntCardWithFooter .sapFCardObjectContent {
+	padding-bottom: 0;
+}
+
+.sapFCardObjectGroup {
+
+	.sapFCardObjectItemTitle {
+		margin-bottom: 0.5rem;
+	}
+
+	> .sapFCardObjectItemLabel {
+		margin-top: 1rem;
+	}
+
+	&:not(.sapFCardObjectGroupLastInColumn) {
+		padding-bottom: 1.75rem;
+	}
+
+	&:not(.sapFCardObjectGroupWithTitle) {
+
+		/* Don't apply margin to the first label when there is no title */
+		> .sapFCardObjectItemLabel {
+			margin-top: 0;
+		}
+
+		/* Apply margin to the rest of the labels */
+		> .sapFCardObjectItemLabel ~ .sapFCardObjectItemLabel {
+			margin-top: 1rem;
+		}
+	}
+
+	// Don't add margin top to the value if it's the first element in the group (not labeled)
+	.sapFCardObjectItemValue:not(:first-child) {
+		margin-top: 0.25rem;
+	}
+
+	.sapFCardObjectItemPairContainer {
+		min-width: 0; // prevent overflow of the flex container
+	}
+
+	.sapFCardObjectItemAvatar {
+		margin-right: 0.5rem;
+		flex-shrink: 0;
+	}
+
+	// Rating Indicator
+	.sapMRI {
+		margin-bottom: 0;
+	}
+
+	// Image
+
+	> .sapFCardObjectImage:not(:first-child) {
+		margin-top: 1rem;
+	}
+
+	.sapUiIntImageWithOverlay.sapFCardObjectImageFullWidth:first-child,
+	.sapMImg.sapFCardObjectImageFullWidth:first-child {
+		top: -16px;
+		margin-top: 0;
+		height: ~"calc(100% + 16px)";
+	}
+
+	.sapUiIntImageWithOverlay.sapFCardObjectImageFullWidth:last-child,
+	.sapMImg.sapFCardObjectImageFullWidth:last-child {
+		margin-bottom: -16px;
+	}
+
+	.sapUiIntImageWithOverlay.sapFCardObjectImageFullWidth:only-child,
+	.sapMImg.sapFCardObjectImageFullWidth:only-child {
+		margin-bottom: -32px;
+	}
+
+	.sapUiIntImageWithOverlay.sapFCardObjectImageFullWidth,
+	.sapMImg.sapFCardObjectImageFullWidth {
+		width: ~"calc(100% + 32px)";
+		left: -16px;
+	}
+
+	.sapFCardObjectImage  {
+		position: relative;
+	}
+}
+
+.sapFCardObjectSpaceBetweenGroup {
+	margin-right: 2rem;
+}
+
+.sapFCard .sapFCardContent {
+	.sapFCardObjectContent .sapUiAFLayout .sapUiAFLayoutItem.sapFCardInvisibleContent {
+		display: none;
+	}
+}
+
+// Removing top space of NumericIndicators
+.sapUiIntOCNumericIndicators {
+	// size L
+	&:not(.sapMTileSmallPhone) {
+		// number
+		.sapMNCValue >:first-child {
+			padding-top: 0;
+			height: 2.5rem;
+			line-height: 2rem;
+		}
+
+		// trend and unit
+		.sapMNCValue :nth-child(2) {
+			padding-top: 0;
+			height: 2rem;
+		}
+	}
+
+	// size S
+	&.sapMTileSmallPhone {
+		.sapMNC {
+			width: auto;
+		}
+
+		// number
+		.sapMNCValue :first-child {
+			padding-top: 0.25rem;
+		}
+
+		// trend and unit
+		.sapMNCValue .sapMNCIndScale {
+			padding-top: 0px;
+
+			.sapMNCScale,
+			.sapMNCIndIcon {
+				padding-top: 0;
+			}
+		}
+	}
+}
+
+.sapUiIntOCNumericIndicators .sapUiIntOCNumericIndicatorsDetails {
+	color: @sapUiTileTextColor;
+	height: 1rem;
+}
+
+.sapFCardObjectContent {
+
+	.sapFAvatarGroupInactive {
+		pointer-events: none;
+
+		&.sapFAvatarGroupIndividual .sapFAvatarGroupItem {
+			pointer-events: none;
+		}
+	}
+
+	.sapFAvatarGroupMoreButton.sapMBtnDisabled {
+		cursor: default;
+		opacity: 1;
+	}
+
+	.sapUiIntCardObjectButtonGroup {
+		padding-left: 0;
+
+		.sapMBarChild:first-child {
+			margin-left: 0;
+		}
+	}
+}

package/src/sap/ui/integration/themes/sap_belize_base/ObjectStatus.less

@@ -0,0 +1,58 @@
+/* ============================================================ */
+/* CSS for control sap.ui.integration.controls/ObjectStatus     */
+/* Base theme                                                   */
+/* ============================================================ */
+
+.sapUiIntObjStatus .sapMObjStatusWrapper {
+	display: inline;
+}
+
+.sapUiIntCard .sapMObjStatus {
+	&.sapMObjStatusShowIcon {
+		&::before {
+			display: inline;
+			font-size: 1rem;
+			line-height: 1;
+			font-family: 'SAP-icons';
+			padding-inline-end: 0.25rem;
+		}
+
+		.sapMObjStatusText {
+			display: inline;
+		}
+
+		&.sapMObjStatusError::before {
+			color: @sapUiNegativeElement;
+			content: "\e1ec";
+		}
+
+		&.sapMObjStatusWarning::before {
+			color: @sapUiCriticalElement;
+			content: "\e053";
+		}
+
+		&.sapMObjStatusSuccess::before {
+			color: @sapUiPositiveElement;
+			content: "\e1c1";
+		}
+
+		&.sapMObjStatusInformation::before {
+			color: @sapUiInformativeElement;
+			content: "\e289";
+		}
+	}
+
+	&:not(.sapMObjStatusShowCustomIcon) .sapMObjStatusIcon {
+		display: none
+	}
+
+	&.sapMObjStatusShowCustomIcon {
+		.sapMObjStatusIcon {
+			display: inline;
+		}
+
+		.sapMObjStatusText {
+			display: inline;
+		}
+	}
+}

package/src/sap/ui/integration/themes/sap_belize_base/Paginator.less

@@ -0,0 +1,125 @@
+/* ====================================================== */
+/* CSS for control sap.ui.integration.controls/Paginator */
+/* Base theme                                             */
+/* ====================================================== */
+
+@_sap_ui_integration_Paginator_IconOutlineOffset: -3px;
+@_sap_ui_integration_Paginator_BulletActiveBackground: @sapUiSelected;
+@_sap_ui_integration_Paginator_BulletActiveBorder: @_sap_ui_integration_Paginator_BulletActiveBackground;
+
+@_sap_ui_integration_Paginator_BulletInactiveBackground: @sapUiContentNonInteractiveIconColor;
+@_sap_ui_integration_Paginator_BulletInactiveBorderColor: @sapUiContentNonInteractiveIconColor;
+@_sap_ui_integration_Paginator_BulletInactiveHoverBackground: none;
+
+@_sap_ui_integration_Paginator_BulletInactiveWidth: 0.25rem;
+@_sap_ui_integration_Paginator_BulletInactivePadding: 0.375rem;
+
+.sapUiIntPaginator {
+	.sapMCrslControls {
+		.sapMCrslControlsContainer {
+			margin: 0;
+		}
+
+		.sapMCrslPrev,
+		.sapMCrslNext {
+			background: none;
+			border: none;
+			transition: opacity 0.25s ease-out;
+		}
+
+		.sapUiIcon {
+			pointer-events: auto;
+			border-radius: 50%;
+			background-color: @sapUiButtonBackground;
+			border: 1px solid @sapUiButtonBorderColor;
+
+			outline-offset: @_sap_ui_integration_Paginator_IconOutlineOffset;
+
+			&:focus {
+				outline: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+			}
+		}
+
+		.sapUiIcon:hover {
+			background: @sapUiButtonHoverBackground;
+		}
+
+		.sapUiIcon:active {
+			background: @sapUiButtonActiveBackground;
+			color: @sapUiButtonActiveTextColor;
+		}
+
+		.sap-desktop & {
+			.sapMCrslPrev,
+			.sapMCrslNext {
+				opacity: 0;
+			}
+		}
+
+		.sap-desktop &:hover,
+		.sap-desktop &:focus-within {
+			.sapMCrslPrev,
+			.sapMCrslNext {
+				opacity: 1;
+			}
+		}
+
+		.sapMCrslBulleted > span {
+			transition: margin 0.2s, padding 0.2s, width 0.2s, height 0.2s;
+			content: "";
+			box-sizing: border-box;
+			display: block;
+			width: @_sap_ui_integration_Paginator_BulletInactiveWidth;
+			height: @_sap_ui_integration_Paginator_BulletInactiveWidth;
+			border-radius: 50%;
+			background-color: @_sap_ui_integration_Paginator_BulletInactiveBackground;
+			border: 1px solid @_sap_ui_integration_Paginator_BulletInactiveBorderColor;
+
+			&.sapMCrslActive {
+				padding: 0.1875rem;
+				width: 0.5rem;
+				height: 0.5rem;
+				background-color: @_sap_ui_integration_Paginator_BulletActiveBackground;
+				border: 1px solid @_sap_ui_integration_Paginator_BulletActiveBorder;
+			}
+
+			&:not(.sapMCrslActive) {
+				cursor: pointer;
+
+				&:hover {
+					padding: 0.1875rem;
+					margin: 0 0.25rem;
+					background-color: @_sap_ui_integration_Paginator_BulletInactiveHoverBackground;
+					width: 0.5rem;
+					height: 0.5rem;
+				}
+			}
+		}
+	}
+}
+
+.sapUiIntCard  {
+	.sapFCardContentCloned {
+		position: absolute;
+		left: 0;
+		right: 0;
+	}
+
+	.sapFCardContentTransition {
+		transition: transform 0.4s linear;
+	}
+
+	.sapFCardContentOriginal,
+	.sapFCardContentCloned.sapFCardContentTransition.sapFCardContentReverseAnim {
+		transform: translate(0, 100%);
+	}
+
+	.sapFCardContentOriginal.sapFCardContentReverseAnim,
+	.sapFCardContentCloned.sapFCardContentTransition {
+		transform: translate(0, -100%);
+	}
+
+	.sapFCardContentOriginal.sapFCardContentTransition {
+		transform: translate(0, 0);
+	}
+}

package/src/sap/ui/integration/themes/sap_belize_base/WebPageContent.less

@@ -0,0 +1,16 @@
+/* ======================================================= */
+/* CSS for control sap.ui.integration.cards/WebPageContent */
+/* Base theme                                              */
+/* ======================================================= */
+
+.sapFCardWebPageContent {
+	padding: 1px;
+
+	.sapUiIntWPCFrame {
+		display: block;
+		box-sizing: border-box;
+		border: none;
+		width: 100%;
+		min-height: 100%;
+	}
+}

package/src/sap/ui/integration/themes/sap_belize_base/library.source.less

@@ -0,0 +1,28 @@
+/*!
+ * OpenUI5
+ * (c) Copyright 2009-2024 SAP SE or an SAP affiliate company.
+ * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
+ */
+
+@import "../../../../../sap/ui/core/themes/base/base.less";
+@import "../../../../../sap/ui/core/themes/base/global.less";
+
+@import "ActionsStrip.less";
+@import "AdaptiveCard.less";
+@import "AnalyticsCloudContent.less";
+@import "BlockingMessage.less";
+@import "CalendarContent.less";
+@import "Card.less";
+@import "CardTileVariant.less";
+@import "CustomElementBase.less";
+@import "CustomElementCard.less";
+@import "Paginator.less";
+@import "Footer.less";
+@import "ImageWithOverlay.less";
+@import "LinkWithIcon.less";
+@import "ListContentItem.less";
+@import "Microchart.less";
+@import "MicrochartLegend.less";
+@import "ObjectContent.less";
+@import "ObjectStatus.less";
+@import "WebPageContent.less";

package/src/sap/ui/integration/themes/sap_belize_hcb/library.source.less

@@ -4,6 +4,15 @@
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 
-@import "../base/library.source.less";
+/* ============================================================================ */
+/* Due to deprecation of the Belize theme family with SAPUI5 version 1.120 the  */
+/* inheritance of the base theme is now updated to an inheritance of a static   */
+/* copy of the base theme named sap_belize_base. The respective                 */
+/* control css files of base are copied to the sap_belize_base theme folder.    */
+/* This decoupling of the base theme is introduced with SAPUI5 version 1.125.   */
+/* ============================================================================ */
+
+
+@import "../sap_belize_base/library.source.less";
 @import "../../../../../sap/ui/core/themes/sap_belize_hcb/base.less";
 @import "../../../../../sap/ui/core/themes/sap_belize_hcb/global.less";