@openui5/themelib_sap_belize 1.124.1 → 1.125.0

package/src/sap/m/themes/sap_belize_base/Label.less

@@ -0,0 +1,367 @@
+/* ============================ */
+/* CSS for control sap.m/Label  */
+/* Base theme                   */
+/* ============================ */
+
+@_sap_m_Label_AsteriskOffsetWidth: 0.5rem;
+@_sap_m_Label_ColonOffsetWidth: 0.25rem;
+@_sap_m_Label_ColonOffsetWidth_lang_FR: 0.5rem;
+@_sap_m_Label_ColonOffsetWidth_lang_ZH: 0.875rem;
+@_sap_m_Label_InsideInactiveInfoToolbarColor: @sapUiListTextColor;
+
+.sapMLabel {
+	color: @sapUiContentLabelColor;
+	font-size: @sapMFontMediumSize;
+	font-family: @sapUiFontFamily;
+	font-weight: normal;
+	display: inline-block;
+	white-space: nowrap;
+	cursor: text;
+	overflow: hidden;
+	box-sizing: border-box;
+	--_sap_m_Label_ReservedSpace: 0%;
+}
+
+.sapMLabel .sapMLabelTextWrapper {
+	text-overflow: ellipsis;
+	overflow: hidden;
+}
+
+.sapMLabel:not(.sapMLabelWrapped) .sapMLabelTextWrapper {
+	display: inline-block;
+	vertical-align: top;
+	max-width: calc(~"100% - var(--_sap_m_Label_ReservedSpace)");
+}
+
+.sapMLabel:not(.sapMLabelWrapped):not(.sapMLabelMaxWidth) {
+	&.sapMLabelRequired {
+		--_sap_m_Label_ReservedSpace: @_sap_m_Label_AsteriskOffsetWidth;
+	}
+
+	&.sapMLabelShowColon {
+		--_sap_m_Label_ReservedSpace: @_sap_m_Label_ColonOffsetWidth;
+
+		&:lang(fr) {
+			--_sap_m_Label_ReservedSpace: @_sap_m_Label_ColonOffsetWidth_lang_FR;
+		}
+
+		&:lang(zh-TW),
+		&:lang(zh-CN),
+		&:lang(zh-Hans),
+		&:lang(zh-Hant) {
+			--_sap_m_Label_ReservedSpace: @_sap_m_Label_ColonOffsetWidth_lang_ZH;
+		}
+	}
+
+	&.sapMLabelRequired.sapMLabelShowColon {
+		--_sap_m_Label_ReservedSpace: @_sap_m_Label_AsteriskOffsetWidth + @_sap_m_Label_ColonOffsetWidth;
+
+		&:lang(fr) {
+			--_sap_m_Label_ReservedSpace: @_sap_m_Label_AsteriskOffsetWidth + @_sap_m_Label_ColonOffsetWidth_lang_FR;
+		}
+
+		&:lang(zh-TW),
+		&:lang(zh-CN),
+		&:lang(zh-Hans),
+		&:lang(zh-Hant) {
+			--_sap_m_Label_ReservedSpace: @_sap_m_Label_AsteriskOffsetWidth + @_sap_m_Label_ColonOffsetWidth_lang_ZH;
+		}
+	}
+}
+
+.sapMLabelBold,
+.sapMLabel.sapMLabelBold {
+	font-weight: bold;
+}
+
+.sapMLabelMaxWidth {
+	max-width: 100%;
+}
+
+.sapMLIBActionable .sapMLabel {
+	cursor: pointer;
+}
+
+.sapMLabel .sapMLabelColonAndRequired {
+	display: inline;
+	vertical-align: top;
+}
+
+.sapMLabel .sapMLabelColonAndRequired::before {
+	vertical-align: top;
+}
+
+.sapMLabel.sapMLabelRequired .sapMLabelColonAndRequired::after {
+	content: "*";
+	color: @sapUiFieldRequiredColor;
+	font-family: @sapUiFontFamily;
+	font-size: @sapMFontLargeSize;
+	font-weight: bold;
+	vertical-align: middle;
+	line-height: 0;
+	margin-left: 0.125rem;
+}
+
+html[dir="rtl"] .sapMLabel[dir="ltr"].sapMLabelRequired .sapMLabelColonAndRequired::after,
+html[dir="ltr"] .sapMLabel[dir="rtl"].sapMLabelRequired .sapMLabelColonAndRequired::after {
+	margin-right: 0.125rem;
+	margin-left:0;
+}
+
+.sapMIBar-CTX .sapMLabel {
+	color: @sapUiContentLabelColor;
+}
+
+.sapMIBar-CTX.sapMFooter-CTX .sapMLabel {
+	font-family: @sapUiFontFamily;
+	font-size: @sapMFontMediumSize;
+	color: @sapUiPageFooterTextColor;
+}
+
+.sapMTB-Info-CTX.sapMTB.sapMTBInactive .sapMLabel {
+	color: @_sap_m_Label_InsideInactiveInfoToolbarColor;
+}
+
+/* Toolbar overflow context */
+.sapMOverflowToolbarMenu-CTX {
+	.sapMLabel {
+		max-width: 20rem;
+		margin-top: 0.375rem;
+		margin-bottom: 0.375rem;
+		white-space: normal;
+
+		&.sapMLabelMediumMarginTop {
+			margin-top: 0.625rem;
+			margin-bottom: 0.125rem;
+		}
+
+		& + .sapMLabel {
+			margin-top: 0.75rem;
+		}
+	}
+
+	.sapMCb .sapMLabel {
+		margin-top: 0;
+
+		&.sapMLabelMediumMarginTop,
+		& + .sapMLabel {
+			margin-top: 0;
+		}
+	}
+}
+
+/* ============================ */
+/* Overwrites for Label in Form */
+/* ============================ */
+
+/* GridLayout */
+td.sapUiFormElementLbl:not(.sapUiGridLabelFull) > .sapMLabel{
+	text-align: end !important; /* to overwrite setting on label */
+	width: 100%; /* to react on touch/click on whole label cell */
+}
+
+/* ResponsiveGridLayout */
+/* make labels right aligned if left from fields*/
+.sapUiRespGridMedia-Std-Phone.sapUiFormResGridCont > .sapUiFormElementLbl:not(.sapUiRespGridSpanS12) > .sapMLabel,
+.sapUiRespGridMedia-Std-Tablet.sapUiFormResGridCont > .sapUiFormElementLbl:not(.sapUiRespGridSpanM12) > .sapMLabel,
+.sapUiRespGridMedia-Std-Desktop.sapUiFormResGridCont > .sapUiFormElementLbl:not(.sapUiRespGridSpanL12) > .sapMLabel,
+.sapUiRespGridMedia-Std-LargeDesktop.sapUiFormResGridCont > .sapUiFormElementLbl:not(.sapUiRespGridSpanXL12) > .sapMLabel {
+	float: right;
+}
+
+/* ResponsiveLayout */
+/* If label is above the fields it's left aligned, if it's left of the fields it's right aligned */
+.sapUiFormResLayout .sapUiRFLRow:first-child > .sapUiRFLContainer:first-child > .sapUiRFLContainerContent > .sapMLabel {
+	text-align: end !important; /* to overwrite setting on label */
+	width: 100%; /* to react on touch/click on whole label cell */
+}
+
+/* ================================== */
+/* Label in Form - Colon and Asterisk */
+/* ================================== */
+.sapUiFormLblColon {
+	// Label alone on row, truncating. Don't let ":" and "*" truncate by using flex
+	.sapUiFormElementLbl > .sapMLabel:not(.sapMLabelWrapped) {
+		display: inline-flex;
+
+		&.sapMLabelRequired .sapMLabelTextWrapper {
+			max-width: 100%;
+		}
+	}
+
+	// Label side by side with a field
+	// In this case we need to align all : and * in the form
+	/* GridLayout */
+	td:not(.sapUiGridLabelFull),
+	/* ResponsiveGridLayout */
+	.sapUiRespGridMedia-Std-Phone.sapUiFormResGridCont > :not(.sapUiRespGridSpanS12),
+	.sapUiRespGridMedia-Std-Tablet.sapUiFormResGridCont > :not(.sapUiRespGridSpanM12),
+	.sapUiRespGridMedia-Std-Desktop.sapUiFormResGridCont > :not(.sapUiRespGridSpanL12),
+	.sapUiRespGridMedia-Std-LargeDesktop.sapUiFormResGridCont > :not(.sapUiRespGridSpanXL12),
+	/* ResponsiveLayout */
+	.sapUiFormResLayout .sapUiRFLRow:first-child > .sapUiRFLContainer:first-child:not(.sapUiRFLFullLength) > .sapUiRFLContainerContent,
+	/* ColumnLayout*/
+	.sapUiFormCL.sapUiFormCLSmallColumns :not(.sapUiFormCLCellsS12),
+	.sapUiFormCL.sapUiFormCLWideColumns :not(.sapUiFormCLCellsL12) {
+		&.sapUiFormElementLbl > .sapMLabel {
+			display: inline-block;
+			position: relative;
+
+			// Accommodate space for colon + asterisk
+			// The use of em is intentional since it has to relate to the current font size applied to the label
+			padding-right: 0.85em;
+
+			&:lang(fr) {
+				padding-right: 1.125em;
+			}
+			&:lang(zh-TW) {
+				padding-right: 1.59em;
+			}
+			&:lang(zh-CN) {
+				padding-right: 1.59em;
+			}
+			&:lang(zh-Hans) {
+				padding-right: 1.59em;
+			}
+			&:lang(zh-Hant) {
+				padding-right: 1.59em;
+			}
+
+			.sapMLabelColonAndRequired {
+				position: absolute;
+			}
+		}
+	}
+}
+
+.sapUiFormResLayout .sapUiRFLRow:first-child > .sapUiRFLContainer.sapUiRFLFullLength > .sapUiRFLContainerContent > .sapMLabel{
+	text-align: start !important; /* to overwrite setting on label */
+	padding-bottom: 2px;
+}
+
+/* ResponsiveGridLayout */
+.sapUiFormResGridCont > .sapUiFormElementLbl > .sapMLabel{
+	width: 100%;
+}
+
+/* collapse lines in a form */
+.sapUiForm .sapUiFormElementLbl > .sapMLabel{
+	height: auto;
+}
+
+.sapUiForm.sapUiFormEdit .sapUiFormElementLbl > .sapMLabel{
+	vertical-align: top; /* align vertically to multiline texts */
+}
+
+.sapMLabel.sapMLabelShowColon,
+.sapUiFormLblColon .sapUiFormElementLbl > .sapMLabel {
+	.sapMLabelColonAndRequired::before {
+		content: attr(data-colon);
+		white-space: pre;
+	}
+}
+
+/* Wrapping of the Label's text */
+.sapMLabel.sapMLabelWrapped {
+	white-space: pre-line;
+	overflow: hidden;
+	word-wrap: break-word;
+}
+
+.sapUiFormLblColon .sapUiFormElementLbl > .sapMLabel.sapMLabelNoText .sapMLabelColonAndRequired::before {
+	content: none;
+}
+
+.sapMLIBUnread .sapMLabel,
+.sapMLIBUnread + .sapMListTblSubRow .sapMLabel{
+	font-family: @sapUiFontFamily;
+	font-weight: bold;
+}
+
+.sapMListTbl .sapMLIBActive .sapMLabel,
+.sapMLIBActive .sapMLabel {
+	color: @sapUiListActiveTextColor;
+}
+
+/* Transparent Toolbar Context*/
+.sapMTB-Transparent-CTX .sapMLabel{
+	font-weight: @sapUiFontHeaderWeight;
+	font-family: @sapUiFontHeaderFamily;
+	color: @sapUiGroupTitleTextColor;
+}
+
+/* HorizontalLayout */
+.sapUiHLayoutChildWrapper > .sapMLabel {
+	vertical-align: text-bottom;
+}
+
+/* ================================ */
+/* SMALL,  MEDIUM and LARGE DEVICES */
+/* ================================ */
+.sapUiRespGridMedia-Std-Phone.sapUiFormResGridCont > .sapUiFormElementLbl:not(.sapUiRespGridSpanS12) > .sapMLabel,
+.sapUiRespGridMedia-Std-Tablet.sapUiFormResGridCont > .sapUiFormElementLbl:not(.sapUiRespGridSpanM12) > .sapMLabel,
+.sapUiRespGridMedia-Std-Desktop.sapUiFormResGridCont > .sapUiFormElementLbl:not(.sapUiRespGridSpanL12) > .sapMLabel,
+.sapUiRespGridMedia-Std-LargeDesktop.sapUiFormResGridCont > .sapUiFormElementLbl:not(.sapUiRespGridSpanXL12) > .sapMLabel {
+	text-align: end !important; /* to overwrite style set on element */
+	float: none; /* as label has 100% width not needed (will bring wrong alignments on iPad) */
+}
+
+/* ========================================================== */
+/* Form - ColumnLayout                                        */
+/* ========================================================== */
+.sapUiFormCL .sapUiFormElementLbl > .sapMLabel {
+	width: 100%;
+}
+
+.sapUiFormCL.sapUiFormCLSmallColumns .sapUiFormElementLbl:not(.sapUiFormCLCellsS12) > .sapMLabel,
+.sapUiFormCL.sapUiFormCLWideColumns .sapUiFormElementLbl:not(.sapUiFormCLCellsL12) > .sapMLabel {
+	text-align: end !important; /* to overwrite style set on element */
+	float: none; /* otherwise ":" is inside of Elements padding */
+}
+
+/* ========================================================== */
+/* COMPACT + CONDENSED SIZE + SPECIALS FOR SAP.UI.TABLE.TABLE */
+/* ========================================================== */
+
+.sapUiSizeCompact,
+.sapUiSizeCondensed.sapUiTable,
+.sapUiSizeCondensed .sapUiTable {
+	.sapMIBar-CTX.sapMPageHeader .sapMLabel,
+	.sapMDialog-CTX .sapMIBar-CTX .sapMLabel {
+		font-size: @sapMFontHeader6Size;
+	}
+}
+
+.sapUiSizeCompact,
+.sapUiSizeCondensed {
+	.sapUiTableCell:not(.sapUiTableHeaderDataCell) .sapMLabel {
+		font-weight: normal;
+		font-size: @sapMFontHeader6Size;
+	}
+}
+
+.sapUiSizeCondensed {
+	.sapUiTableDataCell {
+		:not(.sapMRbBLabel):not(.sapMCbLabel) .sapMLabel {
+			line-height: 1.5rem;
+		}
+	}
+}
+
+.sapUiTableCell .sapMLabel {
+	color: @sapUiListTextColor;
+	vertical-align: middle;
+}
+
+.sapUiAnalyticalTable {
+	.sapUiTableCell .sapMLabel {
+		width: 100%;
+	}
+}
+
+.sapUiTableHeaderDataCell .sapMLabel,
+.sapMListTbl .sapMColumnHeader .sapMLabel {
+	font-weight: @sapUiColumnHeaderFontWeight;
+	font-size: @sapUiColumnHeaderFontSize;
+	color: @sapUiListHeaderTextColor;
+}

package/src/sap/m/themes/sap_belize_base/LightBox.less

@@ -0,0 +1,231 @@
+/* =============================== */
+/* CSS for control sap.m/LightBox  */
+/* Base theme                      */
+/* =============================== */
+
+@_sap_m_LightBox_MinHeight: 18rem;
+@_sap_m_LightBox_FooterOneLineHeightCompact: 2.5rem;
+@_sap_m_LightBox_FooterTwoLinesHeightCompact: 3.5rem;
+@_sap_m_LightBox_FooterOneLineHeightCozy: 3rem;
+@_sap_m_LightBox_FooterTwoLinesHeightCozy: 3.5rem;
+@_sap_m_LightBox_TitleSectionPadding: 1rem;
+@_sap_m_LightBox_TitleSectionPaddingTwoLines: 0.5rem;
+@_sap_m_LightBox_BusyIndicatorHeight: 1rem;
+@_sap_m_LightBox_SubtitleMarginTop: 0.5rem;
+@_sap_m_LightBox_OverlayBackground: @sapUiBlockLayerBackground;
+@_sap_m_LightBox_ContainerBackground: @sapUiGlobalBackgroundColor;
+@_sap_m_LightBox_OverlayOpacity: 0.9;
+@_sap_m_LightBox_FontFamily: @sapUiFontFamily;
+
+/* ==========================================================================
+   Container
+  ========================================================================== */
+
+.sapMLightBox {
+	min-width: 20rem;
+	max-width: 100%;
+	min-height: 18rem;
+	max-height: 100%;
+	border-radius: @sapUiElementBorderCornerRadius;
+	background-color: @_sap_m_LightBox_ContainerBackground;
+	box-shadow: @sapUiShadowLevel3;
+	outline: none;
+}
+
+html[data-sap-ui-browser^='sf'] .sapMLightBox {
+	-webkit-transform: translateZ(0px); // fixes displaying the control behind the block layer in Safari
+}
+
+.sap-desktop .sapMLightBox {
+	max-width: calc(~"100% - 4rem");
+	max-height: calc(~"100% - 4rem");
+}
+
+.sap-tablet .sapMLightBox {
+	max-width: calc(~"100% - 2rem");
+	max-height: calc(~"100% - 2rem");
+}
+
+.sap-phone .sapMLightBox {
+	max-width: calc(~"100% - 1rem");
+	max-height: calc(~"100% - 1rem");
+}
+
+.sapMLightBoxFooter {
+	background-color: @sapUiPageFooterBackground;
+	border-top: 1px solid @sapUiPageFooterBorderColor;
+}
+
+/* ==========================================================================
+   Overlay
+  ========================================================================== */
+.sapMLightBox + .sapUiBLy {
+	background: @_sap_m_LightBox_OverlayBackground;
+	opacity: @_sap_m_LightBox_OverlayOpacity;
+}
+
+/* ==========================================================================
+   Image
+  ========================================================================== */
+
+.sapMLightBox .sapMImg {
+	margin: auto;
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+}
+
+.sapMLightBox.sapMLightBoxTopCornersRadius .sapMImg {
+	border-radius: @sapUiElementBorderCornerRadius @sapUiElementBorderCornerRadius 0 0;
+}
+
+/* ==========================================================================
+   Footer
+  ========================================================================== */
+
+.sapMLightBoxFooter {
+	display: flex;
+	flex-direction: row;
+	width: 100%;
+	position: absolute;
+	bottom: 0;
+	-webkit-box-direction: normal;
+	-webkit-box-orient: horizontal;
+	-webkit-box-align: start;
+	justify-content: space-between;
+	height: @_sap_m_LightBox_FooterOneLineHeightCozy;
+	align-items: flex-end;
+	border-radius: 0 0 @sapUiElementBorderCornerRadius @sapUiElementBorderCornerRadius;
+
+	&.sapMLightBoxFooterTwoLines {
+		height: @_sap_m_LightBox_FooterTwoLinesHeightCozy;
+	}
+}
+
+.sapMLabel.sapMLightBoxSubtitle  {
+	margin-top: @_sap_m_LightBox_SubtitleMarginTop;
+}
+
+.sapMLightBoxTitleSection {
+	margin: 0 1rem;
+	padding: @_sap_m_LightBox_TitleSectionPadding 0;
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+	flex: 1;
+}
+
+.sapMLightBoxTwoLines .sapMLightBoxTitleSection {
+	padding: @_sap_m_LightBox_TitleSectionPaddingTwoLines 0;
+}
+
+.sapMLightBoxFooter .sapMBtn {
+	padding-right: 0.25rem;
+}
+
+.sapMTitle.sapMLightBoxTitle,
+.sapMLabel.sapMLightBoxSubtitle {
+	white-space: nowrap;
+	overflow: hidden;
+	text-align: left;
+	text-overflow: ellipsis;
+}
+
+/* ==========================================================================
+   Footer title
+  ========================================================================== */
+
+.sapMLightBoxImageContainer {
+	min-height: calc(@_sap_m_LightBox_MinHeight - 3.5rem);
+	position: absolute;
+	top: 0;
+	bottom: @_sap_m_LightBox_FooterOneLineHeightCozy;
+	width: 100%;
+}
+
+.sapMLightBoxImageContainerTwoLines {
+	height: calc(~"100% - " @_sap_m_LightBox_FooterTwoLinesHeightCozy);
+	position: absolute;
+	top: 0;
+	width: 100%;
+}
+
+/* ==========================================================================
+   Busy Indicator
+  ========================================================================== */
+.sapMLightBox {
+	.sapUiSizeCompact {
+		.sapMBusyIndicator {
+			display: block;
+			margin-top: (@_sap_m_LightBox_MinHeight - @_sap_m_LightBox_BusyIndicatorHeight - @_sap_m_LightBox_FooterOneLineHeightCompact) / 2;
+		}
+
+		.sapMLightBoxTwoLines {
+			.sapMBusyIndicator {
+				height: 14rem;
+				margin-top: (@_sap_m_LightBox_MinHeight - @_sap_m_LightBox_BusyIndicatorHeight - @_sap_m_LightBox_FooterTwoLinesHeightCompact) / 2;
+			}
+		}
+	}
+}
+
+.sapMLightBox {
+	.sapMBusyIndicator {
+		display: block;
+		margin-top: (@_sap_m_LightBox_MinHeight - @_sap_m_LightBox_BusyIndicatorHeight - @_sap_m_LightBox_FooterOneLineHeightCozy) / 2;
+	}
+
+	.sapMLightBoxTwoLines {
+		.sapMBusyIndicator {
+			height: 14rem;
+			margin-top: (@_sap_m_LightBox_MinHeight - @_sap_m_LightBox_BusyIndicatorHeight - @_sap_m_LightBox_FooterTwoLinesHeightCozy) / 2;
+		}
+	}
+}
+
+/* ==========================================================================
+   Error State
+  ========================================================================== */
+
+.sapMLightBox.sapMLightBoxError .sapMLightBoxFooter {
+	position: initial;
+}
+
+/* ==========================================================================
+   Compact
+  ========================================================================== */
+
+.sapUiSizeCompact {
+
+	.sapMLightBoxImageContainer {
+		bottom: @_sap_m_LightBox_FooterOneLineHeightCompact;
+	}
+
+	.sapMLightBoxImageContainerTwoLines {
+		bottom: @_sap_m_LightBox_FooterTwoLinesHeightCompact;
+		height: calc(~"100% - " @_sap_m_LightBox_FooterTwoLinesHeightCompact);
+	}
+
+	.sapMLightBoxFooter {
+		height: @_sap_m_LightBox_FooterOneLineHeightCompact;
+
+		&.sapMLightBoxFooterTwoLines {
+			height: @_sap_m_LightBox_FooterTwoLinesHeightCompact;
+		}
+	}
+
+	.sapMLightBoxTitleSection {
+		padding: 0.75rem 0;
+	}
+
+	.sapMLightBoxTwoLines .sapMLightBoxTitleSection {
+		padding: @_sap_m_LightBox_TitleSectionPaddingTwoLines 0;
+	}
+
+	.sapMLightBoxFooter .sapMBtn {
+		padding-right: 0.5rem;
+		margin-bottom: 0.25rem;
+	}
+}