@openui5/themelib_sap_belize 1.124.0 → 1.125.0

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

@@ -0,0 +1,59 @@
+.sapMValueStateHeaderRoot {
+	width: auto;
+	padding: 0.5625rem 1rem;
+	box-sizing: border-box;
+	position: sticky;
+	top: 0;
+	z-index: 42;
+}
+
+// When not on mobile (in sap.m.Dialog) the ValueStateHeader's width
+// must be 0 to get calculated correctly and set by the sap.m.Popover
+html.sap-desktop .sapMValueStateHeaderRoot {
+	width: 0;
+}
+
+.sapMPseudoFocus {
+	outline: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+	outline-offset: -0.125rem;
+}
+
+.sapMValueStateHeaderText {
+	display: inline-block;
+	line-height: normal;
+	white-space: pre-line;
+	word-wrap: break-word;
+	font-size: @sapMFontSmallSize;
+	color: @sapUiListTextColor;
+
+	.sapMFT {
+		font-size: @sapMFontSmallSize;
+	}
+}
+
+.sapMValueStateHeaderError,
+.sapMSuggestionsPopoverErrorState .sapMPopoverHeader {
+	background: @sapUiErrorBG;
+	color: @sapUiBaseText;
+}
+
+.sapMValueStateHeaderInformation,
+.sapMSuggestionsPopoverInformationState .sapMPopoverHeader {
+	background: @sapUiInformationBG;
+}
+
+.sapMValueStateHeaderSuccess,
+.sapMSuggestionsPopoverSuccessState .sapMPopoverHeader {
+	background: @sapUiSuccessBG;
+	color: @sapUiBaseText;
+}
+
+.sapMValueStateHeaderWarning,
+.sapMSuggestionsPopoverWarningState .sapMPopoverHeader {
+	background: @sapUiWarningBG;
+	color: @sapUiBaseText;
+}
+
+.sapMValueStateHeaderNone {
+	display: none;
+}

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

@@ -0,0 +1,35 @@
+/* ======================================== */
+/* CSS for control sap.m/ValueStateMessage  */
+/* Base theme                               */
+/* ======================================== */
+
+.sapMValueStateMessage {
+	box-sizing: border-box;
+	background: @sapUiFieldBackground;
+	display: inline-block;
+	color: @sapUiBaseText;
+	font-size: @sapMFontSmallSize;
+	font-family: @sapUiFontFamily;
+	padding: 0.3rem 0.625rem;
+	min-width: 6rem;
+	white-space: pre-line;
+	word-wrap: break-word;
+	overflow: hidden;
+	text-overflow: ellipsis;
+
+	.sapMFT {
+		font-size: @sapMFontSmallSize;
+	}
+}
+
+.sapMValueStateMessageError {
+	background: @sapErrorBackground;
+}
+
+.sapMValueStateMessageWarning {
+	background: @sapWarningBackground;
+}
+
+.sapMValueStateMessageInformation {
+	background: @sapInformationBackground;
+}

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

@@ -0,0 +1,117 @@
+/* ============================================== */
+/* CSS for control sap.m/VariantManagement    */
+/* Base theme                                     */
+/* ============================================== */
+
+.sapMVarMngmt {
+	text-align: center;
+	display: inline-block;
+}
+
+.sapMVarMngmt .sapUiHLayout.sapMVarMngmtLayout .sapUiHLayoutChildWrapper:first-child>div {
+   vertical-align: middle;
+}
+.sapMVarMngmt .sapUiHLayout.sapMVarMngmtLayout .sapUiHLayoutChildWrapper:nth-child(2)>span {
+   vertical-align: top;
+   padding-bottom: 8px;
+}
+.sapMVarMngmt .sapUiHLayout.sapMVarMngmtLayout .sapUiHLayoutChildWrapper:last-child>button {
+   vertical-align: middle;
+}
+
+.sapMVarMngmt .sapUiHLayout.sapMVarMngmtLayout {
+   display: grid;
+   grid-template-columns: minmax(0, 1fr) 12px 32px;
+   align-items: center;
+}
+.sapMVarMngmt .sapUiHLayout.sapMVarMngmtLayout.sapMVarMngmtLayoutModifiedHidden {
+   grid-template-columns: minmax(0, 1fr) 1px 32px;
+}
+.sapMVarMngmt .sapUiHLayout.sapMVarMngmtLayout .sapUiHLayoutChildWrapper:first-child {
+	grid-column: 1;
+	grid-row: 1;
+}
+.sapMVarMngmt .sapUiHLayout.sapMVarMngmtLayout .sapUiHLayoutChildWrapper:nth-child(2) {
+	grid-column: 2;
+	grid-row: 1;
+}
+.sapMVarMngmt .sapUiHLayout.sapMVarMngmtLayout .sapUiHLayoutChildWrapper:nth-child(3) {
+	grid-column: 3;
+	grid-row: 1;
+}
+
+.sapMVarMngmt .sapMTitle.sapMVarMngmtTitle  {
+    color: @sapUiLink;
+	text-shadow: @sapUiContentTextShadow;
+}
+
+.sapMVarMngmt .sapMText.sapMVarMngmtTitle  {
+    color: @sapUiLink;
+    text-shadow: @sapUiContentTextShadow;
+    font-size: 1rem;
+    white-space: nowrap;
+    vertical-align: middle;
+    position: relative;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.sapMVarMngmt .sapMVarMngmtModified {
+	color: @sapUiLink;
+	font-weight: bold;
+	padding-left: 0.125rem;
+	padding-right: 0.125rem;
+}
+
+.sapMVarMngmtErrorPopover>div {
+	padding-top: 1rem;
+}
+
+.sapMVarMngmtErrorPopover>div:last-child {
+	padding-left: 4rem;
+	padding-right: 4rem;
+}
+
+.sapMVarMngmt .sapMVarMngmtClickable:hover {
+	color: @sapUiLinkHoverColor;
+	cursor: pointer;
+}
+
+.sapMVarMngmt .sapMVarMngmtClickable:active {
+	color: @sapUiLinkActiveColor;
+	cursor: pointer;
+}
+
+.sapMVarMngmt .sapMVarMngmtDisabled {
+	opacity: 0.5;
+}
+
+.sapMVarMngmtPopover .sapMSelectList {
+	border: 0rem solid;
+}
+
+.sapMVarMngmtFavColor {
+	color: @sapUiContentMarkerIconColor;
+}
+
+.sapMVarMngmtFavNonInteractiveColor {
+	color: @sapUiContentNonInteractiveIconColor;
+}
+
+.sapMVarMngmtSaveDialog  .sapUiRespGrid.sapUiRespGridVSpace1 > div {
+	margin-bottom: 0rem;
+	margin: 0rem;
+ }
+
+.sapMVarMngmtSaveDialog .sapMVarMngmtSaveDialogLabel.sapMLabel::after {
+	content: ":";
+}
+
+.sapMVarMngmtRolesEdit {
+	padding-left: 0.5rem;
+}
+
+.sapMVarMngmtPopover .sapMIllustratedMessage.sapMVarMngmtIllustratedMessage  {
+    padding-top: 0rem;
+    padding-bottom: 0rem;
+}

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

@@ -0,0 +1,126 @@
+/* ========================================= */
+/* CSS for control sap.m/ViewSettingsDialog  */
+/* Base theme                                */
+/* ========================================= */
+
+.sapMVSD.sapMDialog.sapUiPopupWithPadding:not(.sapUiNoContentPadding) .sapMDialogScrollCont,
+.sapMVSD.sapMDialog .sapMDialogScrollCont {
+	padding: 0;
+}
+
+.sapMTB.sapMVSDFilterHeaderToolbar {
+	padding-left: 0;
+	padding-right: 1rem;
+	width: 100%;
+	.sapMBarChild.sapMCb {
+		margin-left: 0;
+		.sapMCbLabel {
+			overflow: hidden;
+			white-space: nowrap;
+			text-overflow: ellipsis;
+		}
+		.sapMCbMark {
+			white-space: normal;
+		}
+	}
+}
+
+//needed for removing not needed padding from the dialog which depends on the compatible version
+.sapMVSD.sapUiPopupWithPadding .sapMDialogScrollCont.sapMDialogStretchContent{
+	height: inherit;
+}
+
+.sapMSF.sapMVSDFilterSearchField,
+.sapUiSizeCompact .sapMSF.sapMVSDFilterSearchField {
+	padding: 0.25rem;
+}
+
+.sapUiSizeCompact .sapMTB.sapMListHdrTBar.sapMVSDFilterHeaderToolbar {
+	height: 2rem;
+	padding-left: 0.5rem;
+
+	.sapMLabel.sapMCbLabel {
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+}
+
+.sapUiSizeCompact .sapMSF.sapMVSDFilterSearchField > .sapMSFF {
+	height: 1.5rem;
+}
+
+html.sap-desktop .sapMTB.sapMListHdrTBar.sapMVSDFilterHeaderToolbar {
+	.sapMCb {
+		outline: none;
+		padding-right: 0.5rem;
+	}
+}
+
+.sapMSF.sapMVSDFilterSearchField {
+	border-bottom: 1px solid @sapUiGroupTitleBorderColor;
+}
+
+.sapMVSD .sapMTitle {
+	font-size: @sapMFontHeader5Size;
+	color: @sapUiContentLabelColor;
+}
+
+.sapUiSizeCompact .sapMTB.sapMListHdrTBar.sapMVSDFilterHeaderToolbar {
+	.sapMLabel.sapMCbLabel {
+		font-size: @sapMFontMediumSize;
+	}
+	.sapMCb.sapMBarChild:only-child {
+		padding-left: 2rem;
+	}
+}
+
+.sapUiSizeCozy .sapMTB.sapMListHdrTBar.sapMVSDFilterHeaderToolbar {
+	.sapMLabel.sapMCbLabel {
+		font-size: @sapMFontLargeSize;
+	}
+}
+
+.sapMVSD {
+	.sapMTB {
+		padding: 0 1rem 0 0.5rem;
+	}
+	.sapMLIB > .sapMLIBSelectS:first-child, .sapMLIB > .sapMLIBSelectM:first-child {
+		margin-left: -0.6875rem;
+	}
+	.sapMPageSubHeader .sapMVSDBar {
+		padding-bottom: 0.25rem;
+	}
+	.sapMTB.sapMVSDFilterHeaderToolbar .sapMBarChild.sapMCb {
+		margin-left: 0.3125rem;
+	}
+	.sapMPage > .sapMPageHeader + .sapMPageSubHeader + section {
+		top: 5.75rem;
+	}
+	.sapMPage .sapMVSDCustomTabContent {
+		max-width: 99%;
+	}
+}
+
+.sapUiSizeCompact .sapMVSD {
+	.sapMSFI {
+		height: 1.375rem;
+		line-height: 1.375rem;
+	}
+	.sapMSFB {
+		height: 1.375rem;
+		line-height: 1.375rem;
+	}
+	.sapMLIB > .sapMLIBSelectS:first-child, .sapMLIB > .sapMLIBSelectM:first-child {
+		margin-left: -0.5rem;
+	}
+	.sapMTB.sapMListHdrTBar.sapMVSDFilterHeaderToolbar {
+		padding-left: 0.1875rem;
+	}
+	.sapMPage > .sapMPageHeader + .sapMPageSubHeader + section {
+		top: 4.75rem;
+	}
+}
+
+html.sap-phone .sapMVSDSeg {
+	max-width: min-content;
+}

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

@@ -0,0 +1,344 @@
+/* =========================================== */
+/* CSS for control sap.m/WheelSlider           */
+/* Base Styles                                 */
+/* =========================================== */
+
+.sapMWS {
+	display: inline-block;
+	overflow: hidden;
+	height: 3rem;
+	vertical-align: middle;
+	text-align: center;
+	box-sizing: border-box;
+	cursor: pointer;
+	margin-top: 2rem;
+	.sapMWSLabel {
+		display: none;
+		box-sizing: border-box;
+		height: 2rem;
+		line-height: 2rem;
+		width: 4.5rem;
+		text-align: center;
+		font-size: @sapMFontSmallSize;
+		color: @sapUiContentLabelColor;
+		text-align: center;
+		vertical-align: middle;
+	}
+	.sapMWSArrows {
+		display: none;
+		box-sizing: border-box;
+	}
+	.sapMWSInner {
+		overflow: hidden;
+		height: 100%;
+		box-sizing: border-box;
+		-webkit-user-select: none;
+		-moz-user-select: none;
+		user-select: none;
+		.sapMWSItem {
+			height: 3rem;
+			line-height: 3rem;
+			width: 4.5rem;
+			box-sizing: border-box;
+			background: @sapUiSelected;
+			border: 1px solid @sapUiListBorderColor;
+			font-size: @sapMFontMediumSize;
+			color: @sapUiContentContrastTextColor;
+			text-align: center;
+			&:hover {
+				background: @sapUiHighlight;
+				color: @sapUiContentContrastTextColor;
+			}
+			&:active {
+				background: @sapUiHighlight;
+				color: @sapUiContentContrastTextColor;
+			}
+			&:focus {
+				outline: 1px dotted @sapUiContentContrastFocusColor;
+				outline-offset: -3px;
+			}
+		}
+		.sapMWSSelectionFrame {
+			width: 4.5rem;
+			height: 3rem;
+			position: absolute;
+			box-sizing: border-box;
+			display: none;
+		}
+		& > ul {
+			list-style: none;
+			margin: 0;
+			padding: 0;
+		}
+	}
+	&.sapMWSExpanded {
+		height: 100%;
+		cursor: default;
+		margin: 0;
+		.sapMWSLabel {
+			display: block;
+		}
+		.sapMWSArrows {
+			display: none;
+		}
+		.sapMWSInner {
+			height: calc(100% - 2rem);
+			max-height: 100%; //because of the SliderValuesN classes below
+			.sapMWSItem {
+				background: @sapUiListBackground;
+				color: @sapUiBaseText;
+				border: 1px solid @sapUiListBorderColor;
+				&:hover {
+					background: @sapUiHighlight;
+				}
+				&:active {
+					background: @sapUiHighlight;
+					color: @sapUiContentContrastTextColor;
+				}
+				&:focus {
+					outline: 1px dotted @sapUiContentFocusColor;
+					outline-offset: -3px;
+				}
+			}
+			.sapMWSSelectionFrame {
+				display: block;
+				outline: 0.125rem solid @sapUiContentForegroundBorderColor;
+				outline-offset: -0.313rem;
+				&:hover {
+					& + ul > li.sapMWSItem.sapMWSItemSelected {
+						background: @sapUiHighlight;
+					}
+				}
+				&:active {
+					& + ul > li.sapMWSItem.sapMWSItemSelected {
+						background: @sapUiSelected;
+						color: @sapUiContentContrastTextColor;
+					}
+				}
+			}
+		}
+		.sapMWSInner.SliderValues3 {
+			height: 9rem;
+		}
+		.sapMWSInner.SliderValues4 {
+			height: 12rem;
+		}
+		.sapMWSInner.SliderValues5 {
+			height: 15rem;
+		}
+		.sapMWSInner.SliderValues6 {
+			height: 18rem;
+		}
+		.sapMWSInner.SliderValues7 {
+			height: 21rem;
+		}
+		.sapMWSInner.SliderValues8 {
+			height: 24rem;
+		}
+		.sapMWSInner.SliderValues9 {
+			height: 27rem;
+		}
+		.sapMWSInner.SliderValues10 {
+			height: 30rem;
+		}
+		.sapMWSInner.SliderValues11 {
+			height: 33rem;
+		}
+		.sapMWSInner.SliderValues12 {
+			height: 36rem;
+		}
+	}
+	&:focus {
+		outline: none;
+	}
+}
+
+.sapUiSizeCompact {
+	.sapMWS {
+		height: 2rem;
+		.sapMWSLabel {
+			width: 4rem;
+		}
+		.sapMWSInner {
+			.sapMWSItem {
+				height: 2rem;
+				line-height: 2rem;
+				width: 4rem;
+				box-sizing: border-box;
+			}
+			.sapMWSSelectionFrame {
+				width: 4rem;
+				height: 2rem;
+			}
+		}
+		&.sapMWSExpanded {
+			height: 100%;
+			cursor: default;
+			margin: 0;
+			.sapMWSArrows {
+				display: block;
+			}
+			.sapMWSInner {
+				height: ~"calc(100% - 6rem)";
+				max-height: ~"calc(100% - 6rem)";
+			}
+			.sapMWSInner.SliderValues3 {
+				height: 6rem;
+			}
+			.sapMWSInner.SliderValues4 {
+				height: 8rem;
+			}
+			.sapMWSInner.SliderValues5 {
+				height: 10rem;
+			}
+			.sapMWSInner.SliderValues6 {
+				height: 12rem;
+			}
+			.sapMWSInner.SliderValues7 {
+				height: 14rem;
+			}
+			.sapMWSInner.SliderValues8 {
+				height: 16rem;
+			}
+			.sapMWSInner.SliderValues9 {
+				height: 18rem;
+			}
+			.sapMWSInner.SliderValues10 {
+				height: 20rem;
+			}
+			.sapMWSInner.SliderValues11 {
+				height: 22rem;
+			}
+			.sapMWSInner.SliderValues12 {
+				height: 24rem;
+			}
+		}
+	}
+}
+
+.sap-phone {
+	.sapMWS {
+		display: inline-block;
+		height: 3rem;
+		text-align: center;
+		overflow: hidden;
+		cursor: pointer;
+		vertical-align: middle;
+		box-sizing: border-box;
+		.sapMWSLabel {
+			height: 2rem;
+			width: 4.5rem;
+			display: none;
+			font-size: @sapMFontSmallSize;
+			color: @sapUiContentLabelColor;
+			text-align: center;
+			vertical-align: middle;
+		}
+		.sapMWSArrows {
+			display: none;
+		}
+		.sapMWSInner {
+			height: 100%;
+			//for Android 4.1 - 4.3 calc is not supported, so use 100% instead
+			max-height: 100%;
+			overflow: hidden;
+			.sapMWSItem {
+				height: 3rem;
+				line-height: 3rem;
+				width: 4.5rem;
+				box-sizing: border-box;
+				background: @sapUiSelected;
+				border: 1px solid @sapUiListBorderColor;
+				font-size: @sapMFontMediumSize;
+				color: @sapUiContentContrastTextColor;
+				text-align: center;
+				&:active {
+					background: @sapUiHighlight;
+					color: @sapUiContentContrastTextColor;
+				}
+				&:focus {
+					outline: 1px dotted @sapUiContentContrastFocusColor;
+					outline-offset: -3px;
+				}
+			}
+			.sapMWSSelectionFrame {
+				width: 4.5rem;
+				height: 3rem;
+				position: absolute;
+				display: none;
+				box-sizing: border-box;
+			}
+		}
+		&.sapMWSExpanded {
+			height: 100%;
+			cursor: default;
+			.sapMWSLabel {
+				display: block;
+			}
+			.sapMWSArrows {
+				display: none;
+			}
+			.sapMWSInner {
+				height: calc(100% - 2rem);
+				//for Android 4.1 - 4.3 calc is not supported, so use 100% instead
+				max-height: 100%;
+				overflow: hidden;
+				.sapMWSItem {
+					height: 3rem;
+					line-height: 3rem;
+					width: 4.5rem;
+					box-sizing: border-box;
+					background: @sapUiListBackground;
+					color: @sapUiBaseText;
+					border: 1px solid @sapUiListBorderColor;
+					&:active {
+						background: @sapUiHighlight;
+						color: @sapUiContentContrastTextColor;
+					}
+					&:focus {
+						outline: 1px dotted @sapUiContentFocusColor;
+						outline-offset: -3px;
+					}
+				}
+				.sapMWSSelectionFrame {
+					display: block;
+					outline: 0.125rem solid @sapUiContentForegroundBorderColor;
+					outline-offset: -0.313rem;
+				}
+			}
+			.sapMWSInner.SliderValues3 {
+				height: 9rem;
+			}
+			.sapMWSInner.SliderValues4 {
+				height: 12rem;
+			}
+			.sapMWSInner.SliderValues5 {
+				height: 15rem;
+			}
+			.sapMWSInner.SliderValues6 {
+				height: 18rem;
+			}
+			.sapMWSInner.SliderValues7 {
+				height: 21rem;
+			}
+			.sapMWSInner.SliderValues8 {
+				height: 24rem;
+			}
+			.sapMWSInner.SliderValues9 {
+				height: 27rem;
+			}
+			.sapMWSInner.SliderValues10 {
+				height: 30rem;
+			}
+			.sapMWSInner.SliderValues11 {
+				height: 33rem;
+			}
+			.sapMWSInner.SliderValues12 {
+				height: 36rem;
+			}
+		}
+		&:focus {
+			outline: none;
+		}
+	}
+}