@openui5/themelib_sap_belize 1.124.0 → 1.125.0

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

@@ -0,0 +1,64 @@
+/* =========================================== */
+/* CSS for control sap.m/WheelSliderContainer  */
+/* Base Styles                                 */
+/* =========================================== */
+
+.sapMWSContainer {
+	width: 100%;
+	height: 100%;
+	min-width: 20rem;
+	box-sizing: border-box;
+	padding: 1rem;
+	text-align: center;
+	position: relative;
+	&:before {
+		content: '';
+		display: inline-block;
+		height: 100%;
+		vertical-align: middle;
+	}
+	.sapMWSContainerLabel {
+		display: none;
+		box-sizing: border-box;
+	}
+	.sapMWSContainerLabel {
+		font-size: @sapMFontHeader5Size;
+		color: @sapUiCalendarColorToday;
+	}
+}
+
+.sapUiSizeCompact {
+	.sapMWSContainer {
+		padding: 0.5rem;
+		margin: auto;
+	}
+}
+
+.sap-phone {
+	.sapMWSContainer {
+		max-height: 38rem; // 12 * item height + label's height
+		height: 100%;
+		padding: 1rem;
+		box-sizing: border-box;
+		margin: auto;
+		text-align: center;
+		&:before {
+			content: '';
+			display: inline-block;
+			height: 100%;
+			margin-right: -0.25rem;
+			vertical-align: middle;
+		}
+		.sapMWSContainerLabel {
+			position: absolute;
+			top: 0;
+			left: 50%;
+			transform: translate(-50%, 0);
+			display: block;
+			height: 2rem;
+			line-height: 2rem;
+			font-size: @sapMFontHeader5Size;
+			color: @sapUiCalendarColorToday;
+		}
+	}
+}

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

@@ -0,0 +1,110 @@
+/* ============================= */
+/* CSS for control sap.m/Wizard  */
+/* Base theme                    */
+/* ============================= */
+
+@_sap_m_Wizard_NavHeight: 4rem;
+@_sap_m_WizardStep_Animation_Duration: 0.4s;
+
+.sapMWizard {
+	height: 100%;
+	position: relative;
+	counter-reset: steps-counter;
+	overflow: hidden;
+	background-color: transparent;
+
+	.sapMWizardStepContainer {
+		position: relative;
+		height: ~"calc(100% - 4rem)"; /* 4rem is the height of the Progress Navigator*/
+		box-sizing: border-box;
+		padding: 0 1rem 1rem 1rem;
+	}
+
+	.sapMWizardStep:first-child {
+		margin-top: 1rem;
+	}
+
+	.sapMWizardStep  {
+		position: relative;
+		padding-bottom: 2rem;
+		display: none;
+	}
+
+	.sapMWizardStepActivated {
+		display: block;
+	}
+
+	&.sapMWizardModeScroll .sapMWizardStepTitle::before {
+		counter-increment: steps-counter;
+		content: counter(steps-counter) ". ";
+	}
+
+	.sapMWizardNextButtonHidden {
+		bottom: -3rem;
+		opacity: 0;
+		animation-name: hideWizardButton
+	}
+
+	.sapMWizardNextButtonVisible {
+		margin-top: 0.5rem;
+		bottom: 0rem;
+		opacity: 1;
+		animation-name: showWizardButton
+	}
+
+	.sapMDialogSection {
+		height: auto;
+	}
+
+
+	&.sapMWizardBgStandard .sapMWizardStepContainer {
+		background-color: @sapUiBaseBG;
+	}
+
+	&.sapMWizardBgSolid .sapMWizardStepContainer {
+		background-color: @sapUiBaseBG;
+	}
+
+	&.sapMWizardBgTransparent .sapMWizardStepContainer {
+		background-color: transparent;
+	}
+
+	&.sapMWizardBgList .sapMWizardStepContainer {
+		background-color: @sapUiGroupContentBackground;
+	}
+}
+
+.sapMWizard:not(.sapMWizardModePage) .sapMWizardLastActivatedStep {
+	min-height: ~"calc(100% - 1rem)"; /* 1rem is the margin from the top of the container*/
+}
+
+html[data-sap-ui-animation='on'] .sapMWizardNextButtonVisible,
+html[data-sap-ui-animation='on'] .sapMWizardNextButtonVisible {
+	animation-timing-function: linear;
+	animation-duration: @_sap_m_WizardStep_Animation_Duration;
+}
+
+@keyframes showWizardButton {
+	from {opacity: 0; bottom: -3rem}
+	to {opacity: 1; bottom: 0rem}
+}
+
+@keyframes hideWizardButton {
+	from {opacity: 1; bottom: 0rem}
+	to {opacity: 0; bottom: -3rem}
+}
+
+html.sap-desktop .sapMWizard .sapMWizardNextButtonVisible,
+html.sap-tablet .sapMWizard .sapMWizardNextButtonVisible {
+	display: block;
+}
+
+html.sap-phone .sapMWizard {
+	.sapMWizardNextButtonVisible {
+		position: fixed;
+		left: 50%;
+		-webkit-transform: translate(-50%, 0);
+		transform: translate(-50%, 0);
+		bottom: 3rem;
+	}
+}

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

@@ -0,0 +1,262 @@
+/* ============================================== */
+/* CSS for control sap.m/WizardProgressNavigator  */
+/* Base theme                                     */
+/* ============================================== */
+
+@_sap_m_WizardProgressNavigator_NavHeight: 4rem;
+@_sap_m_WizardProgressNavigator_ListHeight: 2rem;
+@_sap_m_WizardProgressNavigator_ListItemHeight: 3rem;
+@_sap_m_WizardProgressNavigator_StepWidth: 2rem;
+@_sap_m_WizardProgressNavigator_StepPadding: 0.5rem;
+@_sap_m_WizardProgressNavigator_SmallSeparator: 0.25rem;
+@_sap_m_WizardProgressNavigator_StepUnderlineHeight: 0.125rem;
+@_sap_m_WizardProgressNavigator_StepOverlapOnPhone: 1.75rem;
+
+.sapMWizardProgressNav {
+	box-sizing: border-box;
+	height: @_sap_m_WizardProgressNavigator_NavHeight;
+	padding: 1rem 1rem 0 1rem;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	user-select: none;
+	background: @sapUiObjectHeaderBackground;
+	font-size: @sapMFontMediumSize;
+	box-shadow: @sapUiShadowHeader;
+}
+
+.sapMWizardProgressNavList,
+.sapMWizardProgressNavListVarying {
+	display: table;
+	table-layout: fixed;
+	position: relative;
+	list-style: none;
+	margin: 0;
+	padding: 0;
+	width: 100%;
+	height: @_sap_m_WizardProgressNavigator_ListItemHeight;
+}
+
+.sapMWizardProgressNavStepContainer {
+	display: inline-block;
+	cursor: pointer;
+	position: relative;
+	text-align: center;
+	text-decoration: none;
+}
+
+.sapMWizardProgressNavStep[data-sap-ui-wpn-step-open="true"] .sapMWizardProgressNavStepContainer {
+	max-width: 100%;
+}
+
+.sapMWizardProgressNavStep {
+	display: table-cell;
+	position: relative;
+	padding: 0 @_sap_m_WizardProgressNavigator_StepPadding;
+
+	&:focus {
+		outline: none;
+
+		.sapMWizardProgressNavStepContainer {
+			outline: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+			outline-offset: 1px;
+		}
+	}
+}
+
+// the separator connecting every two steps
+.sapMWizardProgressNavStep::after {
+	content: "";
+	display: block;
+	position: absolute;
+	top: @_sap_m_WizardProgressNavigator_ListHeight / 2;
+	left: @_sap_m_WizardProgressNavigator_StepWidth + (2 * @_sap_m_WizardProgressNavigator_StepPadding);
+	right: 0;
+	border-bottom-width: 1px;
+	border-bottom-style: solid;
+	z-index: -1;
+}
+
+// we do not have a separator at the end for known number of steps
+.sapMWizardProgressNavList .sapMWizardProgressNavStep:last-child::after {
+	display: none;
+}
+
+// we have a dashed separator at the end when the number of steps can change
+.sapMWizardProgressNavListVarying .sapMWizardProgressNavStep:last-child::after {
+	display: block;
+	border-bottom-style: dashed;
+}
+
+// the currently selected step
+.sapMWizardProgressNavStep[data-sap-ui-wpn-step-current="true"] {
+
+	// the current step is underlined as to have a visual cue
+	.sapMWizardProgressNavStepContainer::after {
+		content: "";
+		display: block;
+		position: absolute;
+		width: 100%;
+		height: @_sap_m_WizardProgressNavigator_StepUnderlineHeight;
+
+		// negative values are needed for the right positioning - (2rem - 4rem) / 2 = -1
+		// bottom:0 positions it at the bottom of the list but we want it at the bottom of the nav
+		bottom: (@_sap_m_WizardProgressNavigator_ListHeight - @_sap_m_WizardProgressNavigator_NavHeight) / 2;
+	}
+	//all steps after the current one are right aligned so that they dont overflow to the right
+	& ~ .sapMWizardProgressNavStep > .sapMWizardProgressNavStepContainer {
+		right: 0;
+	}
+}
+
+// the step up to which progress has been reached
+.sapMWizardProgressNavStep[data-sap-ui-wpn-step-active="true"] {
+
+	//all steps after the active one have the default cursor and no focus
+	& ~ .sapMWizardProgressNavStep > .sapMWizardProgressNavStepContainer {
+		cursor: default;
+		display: inline;
+	}
+
+	& ~ .sapMWizardProgressNavStep:focus > .sapMWizardProgressNavStepContainer {
+		outline: none;
+	}
+}
+
+// all steps that are grouped
+.sapMWizardProgressNavStep[data-sap-ui-wpn-step-open="false"] {
+	width: @_sap_m_WizardProgressNavigator_StepWidth - @_sap_m_WizardProgressNavigator_StepOverlapOnPhone;
+	padding: 0;
+
+	.sapMWizardProgressNavStepContainer {
+		position: absolute;
+		top: 0;
+	}
+
+	.sapMWizardProgressNavStepTitleContainer {
+		display: none;
+	}
+}
+
+// when there are no titles and the number of steps is know the last step should align to the end
+.sapMWizardProgressNavList.sapMWizardProgressNavListNoTitles .sapMWizardProgressNavStep:last-child {
+	width: @_sap_m_WizardProgressNavigator_StepWidth;
+}
+
+// override the previous rule when more than one step is grouped because we want the last step to be
+// shrunk and show below the previous step with [data-sap-ui-wpn-step-open="false"]
+.sapMWizardProgressNavStep[data-sap-ui-wpn-step-open="false"] + .sapMWizardProgressNavStep[data-sap-ui-wpn-step-open="false"] {
+	width: @_sap_m_WizardProgressNavigator_StepWidth - @_sap_m_WizardProgressNavigator_StepOverlapOnPhone;
+}
+
+// select the first grouped step on the right and style it so that it does not collapse
+.sapMWizardProgressNavStep[data-sap-ui-wpn-step-open="true"] + .sapMWizardProgressNavStep[data-sap-ui-wpn-step-open="false"] {
+	width: @_sap_m_WizardProgressNavigator_StepWidth;
+	padding-left: @_sap_m_WizardProgressNavigator_StepPadding;
+}
+
+// select the last grouped step on the left and style it so that it does not collapse
+// add the needed padding to the right so that the separator between the steps is visible
+// the second selector is needed for a corner case
+.sapMWizardProgressNavStep[data-sap-ui-wpn-step-open-prev="true"],
+.sapMWizardProgressNavStep[data-sap-ui-wpn-step-open="false"] +  .sapMWizardProgressNavStep[data-sap-ui-wpn-step-open-prev="true"] {
+	width: @_sap_m_WizardProgressNavigator_StepWidth;
+	padding-right: @_sap_m_WizardProgressNavigator_StepPadding + @_sap_m_WizardProgressNavigator_SmallSeparator;
+
+	&::after {
+		left: @_sap_m_WizardProgressNavigator_StepWidth + @_sap_m_WizardProgressNavigator_StepPadding;
+	}
+}
+
+.sapMWizardProgressNavStepCircle {
+	display: inline-block;
+	box-sizing: border-box;
+	vertical-align: middle;
+	text-align: center;
+	width: @_sap_m_WizardProgressNavigator_StepWidth;
+	height: @_sap_m_WizardProgressNavigator_ListHeight;
+	line-height: @_sap_m_WizardProgressNavigator_ListHeight;
+	border-width: 1px;
+	border-style: solid;
+	border-radius: 50%;
+	color: @sapUiBaseText;
+	background: @sapUiObjectHeaderBackground;
+	border-color: @sapUiObjectHeaderBorderColor;
+	font-size: @sapMFontMediumSize;
+	.sapUiIcon {
+		font-size: @sapMFontLargeSize;
+	}
+}
+
+.sapMSplitContainerDetail .sapMWizardProgressNav {
+	padding: 1rem 1rem 0 1rem;
+}
+
+html.sap-phone .sapMWizardProgressNav {
+	padding: 1rem 0.5rem;
+}
+
+.sapMWizardProgressNavStep:hover .sapMWizardProgressNavStepCircle {
+	background: @sapUiHighlight;
+}
+
+.sapMWizardProgressNavStepIcon {
+	font-size: @sapMFontLargeSize;
+	cursor: pointer;
+}
+
+.sapMWizardProgressNavStep::after {
+	border-bottom-color: @sapUiObjectHeaderBorderColor;
+}
+
+.sapMWizardProgressNavStep[data-sap-ui-wpn-step-current="true"] {
+	& .sapMWizardProgressNavStepContainer::after {
+		background: @sapUiSelected;
+		height: 0.25rem;
+	}
+
+	& .sapMWizardProgressNavStepCircle {
+		background: @sapUiSelected;
+		color: @sapUiContentContrastIconColor;
+	}
+
+	& ~ .sapMWizardProgressNavStep .sapMWizardProgressNavStepIcon {
+		cursor: default;
+	}
+}
+
+
+.sapMWizardProgressNavStepTitleContainer {
+	display: inline-block;
+	vertical-align: middle;
+	text-align: left;
+	padding: 0 @_sap_m_WizardProgressNavigator_StepPadding;
+	max-height: 3rem;
+	overflow: hidden;
+	max-width: ~"calc(100% - 3rem)";
+	background: @sapUiObjectHeaderBackground;
+}
+
+.sapMWizardProgressNavStepTitle {
+	overflow: hidden;
+	max-width: 100%;
+	max-height: 2.875rem;
+	line-height: @_sap_m_WizardProgressNavigator_ListHeight  / 2;
+	font-size: @sapMFontMediumSize;
+	color: @sapUiGroupTitleTextColor;
+	vertical-align: middle;
+	display: -webkit-inline-box;
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: 2;
+}
+
+.sapMWizardProgressNavStepTitleOptional {
+	-webkit-line-clamp: 1;
+	line-height: 100%;
+}
+
+.sapMWizardProgressNavStepLabelOptional {
+	display: table-row;
+	font-size: @sapMFontSmallSize;
+	color: @sapUiContentLabelColor;
+	overflow: hidden;
+}

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

@@ -0,0 +1,23 @@
+/* ================================= */
+/* CSS for control sap.m/WizardStep  */
+/* Base theme                        */
+/* ================================= */
+
+.sapMWizardStep {
+	box-sizing: border-box;
+
+	.sapMWizardStepTitle {
+		font-size: 1.25rem;
+		font-weight: normal;
+		margin-top: 0;
+		margin-bottom: 1rem;
+	}
+
+	.sapUiFormResLayout > div {
+		background-color: inherit;
+	}
+}
+
+.sapMWizardStep .sapMWizardStepTitle {
+	color: @sapUiGroupTitleTextColor;
+}

package/src/sap/m/themes/sap_belize_base/library.source.less

@@ -0,0 +1,194 @@
+/*!
+ * 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 "shared.less";
+
+@import "AbstractContainer.less";
+@import "ActionListItem.less";
+@import "ActionSelect.less";
+@import "ActionSheet.less";
+@import "ActionTile.less";
+@import "ActionTileContent.less";
+@import "App.less";
+@import "Avatar.less";
+@import "Bar.less";
+@import "BarBase.less";
+@import "Breadcrumbs.less";
+@import "BusyDialog.less";
+@import "BusyIndicator.less";
+@import "Button.less";
+@import "Carousel.less";
+@import "CheckBox.less";
+@import "ColumnListItem.less";
+@import "ColumnMenu.less";
+@import "ColorPalette.less";
+@import "CustomTile.less";
+@import "DateRangeSelection.less";
+@import "DatePicker.less";
+@import "DateTimePicker.less";
+@import "Dialog.less";
+@import "DisplayListItem.less";
+@import "DraftIndicator.less";
+@import "DynamicDateRange.less";
+@import "ExpandableText.less";
+@import "AdditionalTextButton.less";
+@import "MessagePage.less";
+@import "FacetFilter.less";
+@import "FacetFilterItem.less";
+@import "FacetFilterList.less";
+@import "FeedContent.less";
+@import "FeedInput.less";
+@import "FeedListItem.less";
+@import "FlexBox.less";
+@import "FormattedText.less";
+@import "GenericTag.less";
+@import "GenericTile.less";
+@import "GroupHeaderListItem.less";
+@import "HeaderContainer.less";
+@import "IconTabBar.less";
+@import "IconTabBarSelectList.less";
+@import "Illustration.less";
+@import "IllustratedMessage.less";
+@import "Image.less";
+@import "ImageContent.less";
+@import "Input.less";
+@import "InputBase.less";
+@import "LinkTileContent.less";
+
+/* note: the following three files are not in alphabetical order and should be imported after InputBase.less */
+@import "ComboBoxTextField.less";
+@import "ComboBoxBase.less";
+@import "ComboBox.less";
+
+@import "InputListItem.less";
+@import "Label.less";
+@import "LightBox.less";
+@import "Link.less";
+@import "ListBase.less";
+@import "ListItemBase.less";
+
+/* Note: The following file is not in alphabetical order and should be imported after ListItemBase.less */
+@import "CustomListItem.less";
+
+@import "Menu.less";
+@import "MenuButton.less";
+@import "MenuListItem.less";
+@import "MessageBox.less";
+@import "MessageStrip.less";
+@import "MessagePopover.less";
+@import "MessageView.less";
+@import "MessageToast.less";
+@import "MultiComboBox.less";
+@import "MultiInput.less";
+@import "NavContainer.less";
+@import "NewsContent.less";
+@import "NotificationListBase.less";
+@import "NotificationListGroup.less";
+@import "NotificationListItem.less";
+@import "NumericContent.less";
+@import "ObjectAttribute.less";
+@import "ObjectHeader.less";
+@import "ObjectIdentifier.less";
+@import "ObjectListItem.less";
+@import "ObjectMarker.less";
+@import "ObjectNumber.less";
+@import "ObjectStatus.less";
+@import "OverflowToolbarAssociativePopover.less";
+@import "P13nColumnsPanel.less";
+@import "P13nConditionPanel.less";
+@import "P13nDialog.less";
+@import "p13n.Container.less";
+@import "p13n.QueryPanel.less";
+@import "p13n.SelectionPanel.less";
+@import "P13nFilterPanel.less";
+@import "P13nSortPanel.less";
+@import "Page.less";
+@import "PagingButton.less";
+@import "Panel.less";
+@import "PDFViewer.less";
+@import "PlanningCalendar.less";
+@import "PlanningCalendarHeader.less";
+@import "PlanningCalendarLegend.less";
+@import "Popover.less";
+@import "ProgressIndicator.less";
+@import "PullToRefresh.less";
+@import "QuickView.less";
+@import "RadioButton.less";
+@import "RadioButtonGroup.less";
+@import "RangeSlider.less";
+@import "RatingIndicator.less";
+@import "ScrollBar.less";
+@import "ScrollContainer.less";
+@import "SearchField.less";
+@import "SegmentedButton.less";
+@import "Select.less";
+@import "SelectDialog.less";
+@import "SelectList.less";
+@import "SelectionDetails.less";
+@import "SelectionDetailsItem.less";
+@import "SemanticPage.less";
+@import "SimpleFixFlex.less";
+@import "SuggestionsPopover.less";
+@import "ValueStateHeader.less";
+@import "Shell.less";
+@import "SinglePlanningCalendar.less";
+@import "SinglePlanningCalendarGrid.less";
+@import "SinglePlanningCalendarMonthGrid.less";
+@import "Slider.less";
+@import "SliderTooltip.less";
+@import "SliderTooltipContainer.less";
+@import "SlideTile.less";
+@import "SplitButton.less";
+@import "SplitContainer.less";
+@import "StandardListItem.less";
+@import "StandardTreeItem.less";
+@import "StandardTile.less";
+@import "StepInput.less";
+@import "SuggestionItem.less";
+@import "Support.less";
+@import "Switch.less";
+@import "TabContainer.less";
+@import "Table.less";
+@import "TablePersoDialog.less";
+@import "TableSelectDialog.less";
+@import "TabStrip.less";
+@import "Text.less";
+@import "TextArea.less";
+@import "Tile.less";
+@import "TileContent.less";
+@import "TileContainer.less";
+@import "TimePicker.less";
+@import "TimePickerInputs.less";
+@import "TimePickerClock.less";
+@import "TimePickerClocks.less";
+@import "TimePickerSliders.less";
+@import "Title.less";
+@import "ToggleButton.less";
+@import "Token.less";
+@import "Tokenizer.less";
+@import "Toolbar.less";
+@import "ToolbarSeparator.less";
+@import "ToolbarSpacer.less";
+@import "TreeItemBase.less";
+@import "UploadCollection.less";
+@import "UploadSet.less";
+@import "UploadSetwithTable.less";
+@import "ValueStateMessage.less";
+@import "VariantManagement.less";
+@import "ViewSettingsDialog.less";
+@import "WheelSlider.less";
+@import "WheelSliderContainer.less";
+@import "Wizard.less";
+@import "WizardProgressNavigator.less";
+@import "WizardStep.less";
+
+/* import plugin less files */
+@import "CellSelector.less";
+@import "ColumnResizer.less";
+@import "PasteProvider.less";
+@import "ContextMenuSetting.less";

package/src/sap/m/themes/sap_belize_base/p13n.Container.less

@@ -0,0 +1,21 @@
+.sapMP13nContainer {
+
+}
+
+//Change background color for the container control
+.sapMP13nContainer .sapMITB {
+    line-height: 3rem;
+}
+
+//Remove padding to align the ITB with the rest of the p13n related controls (left aligned)
+.sapMP13nContainer .sapMITH {
+    padding: 0;
+}
+
+.sapMP13nContainer .p13nContainerDefaultList .sapMLIB{
+    padding: 1.5rem;
+}
+
+.sapMP13nContainer .p13nContainerDefaultList .sapMLIB.sapMMenuDivider {
+    border-top: 2px solid @sapList_GroupHeaderBorderColor;
+}

package/src/sap/m/themes/sap_belize_base/p13n.QueryPanel.less

@@ -0,0 +1,12 @@
+.sapMP13nQueryPanel {
+
+}
+
+.sapMP13nQueryPanel .sapUiRespGrid {
+    display: flex;
+    align-items: center;
+}
+
+.sapMP13nQueryPanel .sapUiRespGrid.sapUiRespGridVSpace1 > div {
+    margin-bottom: 0;
+}