@openui5/themelib_sap_belize 1.124.1 → 1.125.0

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

@@ -0,0 +1,60 @@
+/* =================================== */
+/* CSS for control sap.f/GridContainer */
+/* Base theme                          */
+/* =================================== */
+
+@_sap_f_GridContainer_FocusBorderOffset: 0;
+
+.sapFGridContainer {
+	.sapFGridContainerDummyArea {
+		position: fixed;
+	}
+}
+
+.sapFGridContainerListUl {
+	position: relative;
+	display: grid;
+	outline: none;
+
+	&.sapFGridContainerDenseFill {
+		grid-auto-flow: row dense;
+	}
+
+	&.sapFGridContainerSnapToRow .sapFGridContainerItemWrapper > * {
+		min-height: 100%;
+	}
+
+	.sapFGridContainerItemWrapper.sapFGridContainerItemFixedRows > * {
+		max-height: 100%;
+	}
+
+	.sapFGridContainerItemWrapper {
+		min-width: 0;
+		outline: none;
+
+		&.sapFGridContainerInvisiblePlaceholder {
+			display: none;
+		}
+	}
+
+	.sapFGridContainerItemWrapper:not(.sapFGridContainerItemWrapperNoVisualFocus):focus::before {
+		content: '';
+		position: absolute;
+		left: @_sap_f_GridContainer_FocusBorderOffset;
+		bottom: @_sap_f_GridContainer_FocusBorderOffset;
+		right: @_sap_f_GridContainer_FocusBorderOffset;
+		top: @_sap_f_GridContainer_FocusBorderOffset;
+		z-index: 1;
+		border: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+		pointer-events: none;
+
+	}
+
+	.sapFGridContainerItemWrapper {
+		position: relative;
+	}
+
+	.sapUiIntCard.sapUiIntCardAnalytical {
+		min-height: 100%;
+	}
+}

package/src/sap/f/themes/sap_belize_base/GridDragAndDrop.less

@@ -0,0 +1,5 @@
+.sapUiDnDGridIndicator {
+	background: fade(@sapUiContentDragAndDropActiveColor, 5%);
+	border: 0.125rem solid @sapUiContentDragAndDropActiveColor;
+	box-sizing: border-box;
+}

package/src/sap/f/themes/sap_belize_base/GridList.less

@@ -0,0 +1,103 @@
+/* ============================== */
+/* CSS for control sap.f/GridList */
+/* Base theme                     */
+/* ============================== */
+
+@_sap_f_GridList_ItemFocusBorderRadius: unset;
+@_sap_f_GridList_ItemHighlightBorderRadius: 0px;
+@_sap_f_GridList_ItemFocusedHighlightOffset: 0px;
+@_sap_f_GridList_ItemOverflow: unset;
+
+.sapFGridList {
+	/* List headers overrides */
+	& > .sapMListHdrText,
+	& > .sapMListHdrTBar {
+		margin-bottom: 0.5rem;
+	}
+
+	.sapMLIBCounter {
+		padding-right: 1rem;
+	}
+
+	> .sapMListUl {
+		> .sapMLIBFocusable:focus {
+			outline: none;
+		}
+
+		> .sapMLIBFocusable:focus::after {
+			border: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+			border-radius: @_sap_f_GridList_ItemFocusBorderRadius;
+			position: absolute;
+			content: " ";
+			top: 1px;
+			right: 1px;
+			bottom: 1px;
+			left: 1px;
+			z-index: 2;
+			pointer-events: none;
+		}
+	}
+
+}
+
+.sapFGridList ul {
+	margin-bottom: 0.5rem;
+}
+
+.sapFGridListDefault {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+	grid-gap: 0.5rem 0.5rem;
+}
+
+/* List Group headers overrides. */
+.sapFGridListGroup {
+	& > .sapMLIB.sapMGHLI {
+		background: none;
+		border: none;
+		padding-top: 0.25rem;
+		grid-column: ~"1 / -1";
+		width: 100%;
+
+		& .sapMGHLITitle {
+			font-size: 1.125rem;
+			color: @sapUiGroupTitleTextColor;
+		}
+	}
+}
+
+// Overrides for various list items, except for GridListItem. It has its own independent styles
+.sapFGridList > .sapMListUl > .sapMLIB:not(.sapMGHLI):not(.sapFGLI) {
+	border-radius: @sapUiTileBorderCornerRadius;
+	border: none;
+	box-shadow: @sapUiContentShadow0;
+	overflow: @_sap_f_GridList_ItemOverflow;
+
+	// Highlighted items
+	> .sapMLIBHighlight {
+		border-top-left-radius: 0.25rem;
+		border-bottom-left-radius: 0.25rem;
+	}
+	
+	&.sapMLIBFocusable:focus > .sapMLIBHighlight {
+		top: @_sap_f_GridList_ItemFocusedHighlightOffset;
+		bottom: @_sap_f_GridList_ItemFocusedHighlightOffset;
+		border-top-left-radius: @_sap_f_GridList_ItemHighlightBorderRadius;
+		border-bottom-left-radius: @_sap_f_GridList_ItemHighlightBorderRadius;
+	}
+
+	> .sapMLIBContent {
+		height: 100%;
+	}
+}
+
+.sapFGridList > .sapMListUl.sapMGrowingList {
+	border-radius: @sapUiTileBorderCornerRadius;
+}
+
+.sapFGridList > .sapMListUl > .sapUiBlockLayerTabbable {
+	// There are "span" helpers, which purpose is to block navigation into the blocked controls content.
+	// If the focus reaches the span before the blocked/busy control it is forwarded to the one after the control.
+	// These spans should not be visible.
+	position: absolute;
+}

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

@@ -0,0 +1,111 @@
+/* =================================== */
+/* CSS for control sap.f/GridListItem  */
+/* Base theme                          */
+/* =================================== */
+
+@_sap_f_GridListItem_HeaderBoxShadow: inset 0 -0.0625rem @sapUiPageHeaderBorderColor;
+@_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;
+
+.sapFGLI {
+	padding: 0;
+	border-radius: @sapUiTileBorderCornerRadius;
+	border: none;
+	box-shadow: @sapUiContentShadow0;
+	overflow: @_sap_f_GridListItem_Overflow;
+
+	// Highlighted items
+	> .sapMLIBHighlight {
+		z-index: 1;
+		border-top-left-radius: @_sap_f_GridListItem_HighlightBorderRadius;
+		border-bottom-left-radius: @_sap_f_GridListItem_HighlightBorderRadius;
+	}
+
+	&.sapMLIBFocusable:focus > .sapMLIBHighlight {
+		top: @_sap_f_GridListItem_FocusedHighlightOffset;
+		bottom: @_sap_f_GridListItem_FocusedHighlightOffset;
+		border-top-left-radius: @_sap_f_GridListItem_FocusedHighlightBorderRadius;
+		border-bottom-left-radius: @_sap_f_GridListItem_FocusedHighlightBorderRadius;
+	}
+
+	.sapFGLIWrapper {
+		width: 100%;
+		height: 100%;
+
+		// Header Toolbar
+		.sapFGLIToolbar {
+			height: @_sap_f_GridListItem_HeaderHeight;
+			box-shadow: @_sap_f_GridListItem_HeaderBoxShadow;
+			padding: 0 0.5rem;
+			display: flex;
+			align-items: center;
+
+			.sapFGLIToolbarSpacer {
+				flex: 1;
+			}
+
+			.sapMLIBCounter {
+				padding: 0;
+			}
+
+			// add spacing between the items, except for the first item
+			>:not(:first-child) {
+				margin: 0 0 0 0.5rem;
+			}
+		}
+
+		// Content
+		.sapMLIBContent {
+			height: 100%;;
+		}
+
+		.sapFGLIToolbar + .sapMLIBContent {
+			height: calc(100% ~"-" @_sap_f_GridListItem_HeaderHeight);
+		}
+	}
+}
+
+/* GridList with highlighted GridListItems */
+.sapFGridList .sapMListHighlight .sapFGLI .sapFGLIWrapper {
+
+	.sapMLIBContent:first-child {
+		margin-left: 0;
+	}
+}
+
+.sapFGLI.sapMLIBActionable .sapFGLIWrapper .sapMLIBImgNav {
+	cursor: pointer;
+}
+
+/* Interaction states */
+.sapFGLI {
+	&.sapMLIBHoverable:hover {
+		box-shadow: 0 0 0 0.0625rem @sapUiTileInteractiveBorderColor;
+	}
+
+	&.sapMLIB.sapMLIBSelected {
+		border-bottom: none;
+		box-shadow: 0 0 0 0.125rem @sapUiListSelectionBorderColor;
+	}
+}
+
+/* Compact size */
+.sapUiSizeCompact .sapFGLI .sapFGLIWrapper {
+
+	.sapFGLIToolbar {
+		height: @_sap_f_GridListItem_Compact_HeaderHeight;
+	}
+
+	// Content
+	.sapMLIBContent {
+		height: 100%;;
+	}
+
+	.sapFGLIToolbar + .sapMLIBContent {
+		height: calc(100% ~"-" @_sap_f_GridListItem_Compact_HeaderHeight);
+	}
+}

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

@@ -0,0 +1,53 @@
+/* ==================================================== */
+/* CSS for control sap.f.cards.loading/ListPlaceholder  */
+/* Base theme                                           */
+/* ==================================================== */
+
+.sapFCardListPlaceholderItem {
+	height: 2.75rem;
+	padding: 0 1rem 0 1rem;
+	box-sizing: border-box;
+	display: flex;
+	position: relative;
+	align-items: center;
+	flex: 1 1 auto;
+
+	.sapFCardListPlaceholderImg {
+		margin: 0rem 0.75rem 0rem 0rem;
+		height: 2rem;
+		width: 2rem;
+		display: inline-block;
+	}
+
+	.sapFCardListPlaceholderRows {
+		flex-grow: 1;
+
+		.sapFCardListPlaceholderRow {
+			height: 0.75rem;
+			margin-bottom: 0.5rem;
+			margin-top: 0.5rem;
+			display: flex;
+
+			&.sapFCardListPlaceholderRowCombined {
+				height: 1.5rem;
+				max-width: 35%;
+			}
+
+			.sapFCardListPlaceholderAttr {
+				flex-grow: 1;
+
+				&:first-of-type {
+					margin-right: 1rem;
+				}
+
+				&:only-child {
+					max-width: 25%;
+				}
+			}
+		}
+	}
+}
+
+.sapUiSizeCompact .sapFCardListPlaceholderItem {
+	height: 2rem;
+}

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

@@ -0,0 +1,43 @@
+/* ====================================================== */
+/* CSS for control sap.f.cards.loading/ObjectPlaceholder  */
+/* Base theme                                             */
+/* ====================================================== */
+
+.sapFCardContentObjectPlaceholder {
+	display: flex;
+	column-gap: 2rem;
+	padding: 0 1rem 1rem 1rem;
+	position: absolute;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	right: 0;
+	z-index: 1;
+
+	.sapFCardObjectPlaceholderColumn {
+		flex: 1;
+
+		.sapFCardObjectPlaceholderGroupFirstRow {
+			height: 1rem;
+			width: 100%;
+			margin-bottom: 0.25rem;
+			margin-top: 1rem;
+		}
+
+		.sapFCardObjectPlaceholderGroupSecondRow {
+			width: 65%;
+			height: 1rem;
+		}
+	}
+
+}
+
+.sapFCardObjectContent.sapFCardContentLoading {
+	> div:not(.sapFCardContentObjectPlaceholder) {
+		visibility: hidden;
+	}
+}
+
+.sapUiIntCardWithFooter .sapFCardContentObjectPlaceholder {
+	padding-bottom: 0;
+}

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

@@ -0,0 +1,3 @@
+.sapMPopoverCont .sapFProductSwitch-Popover-CTX {
+	padding: 1.5rem 1rem;
+}

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

@@ -0,0 +1,160 @@
+.sapFPSItemContainer {
+	border-radius: @sapUiElementBorderCornerRadius;
+	background: @sapUiListBackground;
+	padding: 0.5rem;
+	width: 11.25rem;
+	height: 7rem;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	color: @sapUiContentIconColor;
+	box-sizing: border-box;
+	text-decoration: none;
+	cursor: pointer;
+	user-select: none;
+
+	.sapFPSItemTextSection {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+
+	.sapFPSItemMainTitle {
+		font-size: @sapMFontHeader6Size;
+		color: @sapUiGroupTitleTextColor;
+	}
+
+	.sapFPSItemIconPlaceholder {
+		height: 3rem;
+	}
+
+	.sapFPSItemTitle {
+		line-height: 1.25rem;
+		max-width: 10.25rem;
+		cursor: pointer;
+		text-align: center;
+	}
+
+	.sapUiIcon {
+		cursor: pointer;
+		font-size: 1.5rem;
+		line-height: 3rem;
+	}
+
+	.sapFPSItemSubTitle {
+		font-size: @sapMFontSmallSize;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		overflow: hidden;
+		color: @sapUiContentLabelColor;
+	}
+
+	&:hover {
+		background: @sapUiListHoverBackground;
+	}
+
+	&.sapFPSItemActive,
+	&.sapFPSItemSelected.sapFPSItemActive,
+	&:active,
+	&.sapFPSItemSelected:active,
+	&.sapFPSItemSelected:hover:active {
+		background: @sapUiListActiveBackground;
+		color: @sapUiListActiveTextColor;
+		border: none;
+
+		.sapFPSItemMainTitle,
+		.sapFPSItemSubTitle {
+			color: @sapUiListActiveTextColor;
+		}
+	}
+
+	&.sapFPSItemSelected:not(:active) {
+		background: @sapUiListSelectionBackgroundColor;
+		border: 0.125rem solid @sapUiListSelectionBorderColor;
+		padding: 0.375rem;;
+	}
+}
+
+.sapUiMedia-Std-Phone .sapFPSItemContainer {
+	flex-direction: row;
+	height: 5rem;
+	padding: 0;
+	width: 100%;
+	border-radius: 0;
+
+	&.sapFPSItemSelected:not(:active) {
+		padding: 0;
+	}
+
+	.sapFPSItemTextSection {
+		align-items: flex-start;
+		box-sizing: border-box;
+		padding-right: 1rem;
+		width: 100%;
+	}
+
+	.sapFPSItemIconPlaceholder {
+		padding-left: 1rem;
+		padding-right: 0.75rem;
+	}
+
+	.sapUiIcon {
+		cursor: pointer;
+		font-size: 1.25rem;
+		width: 3rem;
+		color: @sapUiContentNonInteractiveIconColor;
+	}
+
+	&.sapFPSItemActive,
+	&:active {
+		.sapUiIcon {
+			color: @sapUiListActiveTextColor;
+		}
+	}
+
+	.sapFPSItemTitle {
+		width: 100%;
+		max-width: 100%;
+		line-height: normal;
+		text-align: left;
+	}
+
+	.sapFPSItemSubTitle {
+		padding-top: 0.75rem;
+	}
+
+	&.sapFPSItemSelected {
+		border: none;
+		border-bottom: 0.0625rem solid @sapUiListSelectionBorderColor;
+	}
+}
+
+.sapFPSItemContainer:focus {
+	outline-width: @sapUiContentFocusWidth;
+	outline-color: @sapUiContentFocusColor;
+	outline-offset: -2px;
+	outline-style: @sapUiContentFocusStyle;
+}
+
+.sapFPSItemContainer.sapFPSItemSelected:focus {
+	outline-offset: -4px;
+}
+
+.sapFPSItemSelected.sapFPSItemActive:focus,
+.sapFPSItemActive:focus,
+.sapFPSItemContainer:active:focus {
+	outline-color: @sapUiContentContrastFocusColor;
+	outline-offset: -2px;
+}
+
+.sapUiMedia-Std-Phone .sapFPSItemContainer.sapFPSItemSelected:focus {
+	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/sap_belize_base/SemanticPage.less

@@ -0,0 +1,34 @@
+/* =================================== */
+/* CSS for control sap.f/SemanticPage  */
+/* Base theme                          */
+/* =================================== */
+
+.sapFSemanticPage {
+	width: 100%;
+	height: 100%;
+	position: relative;
+	overflow: hidden;
+
+	.sapFDynamicPageContent {
+		.sapFSemanticPageAlignContent {
+			margin-left: -@sapUiMarginSmall;
+			margin-right: -@sapUiMarginSmall;
+		}
+	}
+
+	.sapFDynamicPage.sapUiContentPadding,
+	.sapFDynamicPage.sapUiNoContentPadding,
+	.sapFDynamicPage.sapUiResponsiveContentPadding {
+		.sapFSemanticPageAlignContent {
+			margin: 0;
+		}
+	}
+
+	.sapFDynamicPage.sapUiContentPadding {
+		.sapFDynamicPage-Std-Phone {
+			.sapFSemanticPageAlignContent {
+				margin: 0 -@sapUiMarginSmall;
+			}
+		}
+	}
+}