@openui5/themelib_sap_belize 1.124.0 → 1.125.0

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

@@ -0,0 +1,94 @@
+/* ======================================= */
+/* CSS for control sap.m/ObjectIdentifier  */
+/* Base theme                              */
+/* ======================================= */
+
+.sapMObjectIdentifierIcons {
+	overflow: hidden;
+    text-align: right;
+    font-size: 1rem;
+	color: @sapUiContentNonInteractiveIconColor;
+	display: inline-block;
+	vertical-align: middle;
+}
+
+.sapMObjectIdentifierIconSpan {
+	padding-top: 0;
+	padding-bottom: 0;
+	padding-left: 0.5rem;
+}
+
+.sapMObjectIdentifierTitle .sapMLnk,
+.sapMObjectIdentifierTitle .sapMText {
+	overflow: visible;
+	font-weight: bold;
+	font-size: 1rem;
+	display: inline;
+	word-wrap: break-word;
+	word-break: break-word;
+	white-space: normal;
+}
+
+html[data-sap-ui-browser^="ff"] {
+	.sapMObjectIdentifierTitle .sapMLnk,
+	.sapMObjectIdentifierTitle .sapMText {
+		display: inline-block;
+	}
+}
+
+.sapMObjectIdentifierTitle .sapMText {
+	color: @sapUiGroupTitleTextColor;
+}
+
+.sapMObjectIdentifierTitle .sapMLnk,
+.sapMOITitleActive .sapMLnk {
+	color: @sapUiLink;
+}
+
+.sapMObjectIdentifierText .sapMText,
+.sapMObjectIdentifierText,
+.sapMObjectIdentifier {
+	color: @sapUiContentLabelColor;
+}
+
+.sapMObjectIdentifierText {
+	font-size: @sapMFontMediumSize;
+	padding-top: 0;
+}
+
+.sapMObjectIdentifierTextBellow{
+	margin-top: 0.5rem;
+}
+
+.sapMLIBActive .sapMObjectIdentifier {
+	color: @sapUiListActiveTextColor;
+}
+
+/* ObjectIdentifier inside a table */
+.sapMListTbl .sapMObjectIdentifierTitle .sapMLnk,
+.sapMListTbl .sapMObjectIdentifierTitle .sapMText {
+	font-size: @sapMFontMediumSize;
+	padding-top: 0;
+}
+
+.sapMListTbl .sapMObjectIdentifierTitle .sapMText {
+	font-weight: bold;
+	color: @sapUiListTextColor;
+}
+
+.sapMListTbl .sapMObjectIdentifierText .sapMText {
+	line-height: 1.4;
+	padding-top: 0;
+}
+
+.sapMObjectIdentifierTitle {
+	display: inline;
+}
+
+.sapMObjectIdentifier .sapMEmptyIndicator.sapMEmptyIndicatorAuto {
+	display: none;
+}
+
+.sapMShowEmpty-CTX .sapMObjectIdentifier .sapMEmptyIndicator.sapMEmptyIndicatorAuto {
+	display: inline-block;
+}

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

@@ -0,0 +1,253 @@
+/* ===================================== */
+/* CSS for control sap.m/ObjectListItem  */
+/* Base theme                            */
+/* ===================================== */
+
+.sapMObjLItem {
+	box-sizing: border-box;
+	vertical-align: baseline;
+	/* set this otherwise if one of the parents has "nowrap" style this
+	affects the whole arrangement of the ObjectListItem */
+	white-space: normal;
+}
+
+.sapMLIB.sapMObjLItem {
+	padding: 1rem;
+}
+
+.sapMObjLItem .sapMLIBImgNav:active,
+.sapMObjLItem .sapMLIBIconDet:active,
+.sapMObjLItem .sapMLIBIconDel:active {
+	border-bottom: none;
+}
+
+.sapMObjLTopRow {
+	float: left;
+	width: 100%;
+}
+
+.sapMObjLIntro {
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	font-family: @sapUiFontFamily;
+	color: @sapUiContentLabelColor;
+	font-size: @sapMFontMediumSize;
+	padding-bottom: .75rem;
+}
+
+.sapMText.sapMObjLTitle {
+	vertical-align: top;
+	word-break: break-word;
+	color: @sapUiGroupTitleTextColor;
+	font-size: @sapMFontHeader4Size;
+	font-weight: @sapUiFontHeaderWeight;
+	line-height: 1.5rem;
+}
+
+html.sap-phone .sapMText.sapMObjLTitle,
+.sapUiMedia-Std-Phone .sapMText.sapMObjLTitle,
+html .sapUiContainer-Narrow .sapMText.sapMObjLTitle {
+	word-break: break-all;
+}
+
+/*Object header title must break words, otherwise it may be to wide if used within
+  a layout control with fixed width. */
+.sapMOHTitle:not(.sapMOHRTitleNoWordBreak) > .sapMText {
+	/* to break all words even browser does not know the width */
+	word-break: break-word;
+	-webkit-hyphens: auto;
+	-moz-hyphens: auto;
+	hyphens: auto;
+}
+
+.sapMObjLNumberDiv {
+	float: right;
+	padding-left: 1rem;
+
+	.sapMObjectNumber {
+		line-height: initial;
+	}
+}
+
+.sapMObjLNumberDiv .sapMObjectNumber.sapMObjectNumberStatusNone {
+	color: @sapUiGroupTitleTextColor;
+}
+
+.sapMObjLNumberDiv .sapMObjectNumber .sapMObjectNumberText {
+	font-family: @sapUiFontHeaderFamily;
+	font-size: 1.375rem;
+	line-height: 1.375rem;
+	font-weight: @sapUiFontHeaderWeight;
+	white-space: nowrap;
+}
+
+.sapMObjLNumberDiv .sapMObjectNumber .sapMObjectNumberUnit {
+	padding: 0;
+	display: block;
+}
+
+.sapMObjLBottomRow {
+	margin-top: .25rem;
+}
+
+.sapMObjLAttrRow {
+	padding-top: .313rem;
+}
+
+.sapMObjLAttrDiv {
+	box-sizing: border-box;
+	display: inline-block;
+	width: 50%;
+	text-align: left;
+	vertical-align: top;
+}
+
+html[dir=rtl] .sapMObjLAttrDiv {
+	text-align: right;
+}
+
+.sapMObjLAttrDiv .sapMObjectAttributeDiv {
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	overflow: hidden;
+	width: 100%;
+	&.sapMObjectAttributeActive {
+		.sapMObjectAttributeTitle,
+		.sapMObjectAttributeText {
+			text-overflow: ellipsis;
+			white-space: nowrap;
+			overflow: hidden;
+			max-width: 50%;
+		}
+		&.sapMObjectAttributeTextOnly {
+			.sapMObjectAttributeTitle,
+			.sapMObjectAttributeText {
+				max-width: 100%;
+			}
+		}
+
+	}
+}
+
+/* First and second attributes get one line with ellipsis */
+.sapMObjLAttrRow:nth-child(1)>.sapMObjLAttrDiv .sapMObjectAttributeDiv,
+.sapMObjLAttrRow:nth-child(2)>.sapMObjLAttrDiv .sapMObjectAttributeDiv{
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	width: 100%;
+}
+
+.sapMObjLAttrDiv .sapMObjectAttributeDiv {
+	display: inline-block;
+}
+
+.sapMObjLStatusDiv {
+	box-sizing: border-box;
+	display: inline-block;
+	width: 50%;
+	text-align: right;
+	vertical-align: top;
+	padding-left: 0.5rem;
+}
+
+html[dir=rtl] .sapMObjLStatusDiv {
+	text-align: left;
+	padding-left: 0;
+	padding-right: 0.5rem;
+}
+
+.sapMObjLAttrRow .sapMObjStatus {
+	overflow: visible;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	width: 100%;
+	.sapMObjStatusText {
+		word-break: normal;
+	}
+}
+
+// invertedStatus in ObjectListItem
+.sapMObjLAttrRow .sapMObjStatusInverted {
+	min-height: 1rem;
+	line-height: 0.75rem;
+}
+
+.sapMObjLBottomRow .sapMObjStatusIcon {
+	font-size: 1rem;
+}
+
+.sapMObjLItem > .sapMLIBContent {
+	-webkit-box-flex: 1;
+	flex: 1 1 auto;
+}
+
+.sapMObjLListModeDiv {
+	display: -webkit-box;
+	display: flex;
+	-webkit-box-orient: horizontal;
+	-webkit-box-align: center;
+	flex-direction: row;
+	align-items: center;
+}
+
+/* overwrite transform for the markers favorite and flag icon */
+html[dir=rtl] .sapMObjStatusMarker > .sapUiIcon.sapUiIconMirrorInRTL {
+	-webkit-transform: none; /* Chrome, Safari, Opera */
+	transform: none;
+}
+
+.sapMObjLIconDiv > .sapMImg {
+	max-height: 3rem;
+	max-width: 3rem;
+}
+
+.sapMObjLItem .sapMObjStatusMarker .sapMObjectMarkerText,
+.sapMObjLItem .sapMObjStatusMarker .sapMObjectMarkerIcon {
+	margin-left: 0.5rem;
+}
+
+.sapMObjLItem .sapMObjStatusMarker .sapMText,
+.sapMObjLItem .sapMObjStatusMarker .sapUiIcon {
+	font-size: 0.875rem;
+}
+
+.sapMObjLItem .sapMObjStatusMarker .sapUiIcon:before {
+	vertical-align: top;
+}
+
+.sapMObjLIcon {
+	margin-top: 2px;
+	color: @sapUiContentIconColor;
+}
+
+.sapMLIBActive .sapMObjLIcon {
+	color: @sapUiContentContrastIconColor;
+}
+
+.sapMLIBActive .sapMObjLNumberDiv .sapMObjectNumber,
+.sapMLIBActive .sapMObjStatusMarker .sapMObjectMarker .sapUiIcon {
+	color: @sapUiListActiveTextColor;
+}
+
+.sapMObjLIconDiv {
+	float: left;
+	margin-right: .75rem;
+	width: 3rem;
+	height: 3rem;
+	text-align: center;
+	box-sizing: border-box;
+}
+
+.sapMObjLItem .sapMObjLAttrDiv {
+	color: @sapUiContentLabelColor;
+}
+
+.sapMObjLAdditAttribs {
+	color: @sapUiContentLabelColor;
+}
+
+.sapMObjLAttrDiv.sapMObjAttrWithMarker {
+	padding-top: .1875rem
+}

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

@@ -0,0 +1,50 @@
+/* =================================== */
+/* CSS for control sap.m/ObjectMarker  */
+/* Base theme                          */
+/* =================================== */
+
+.sapMObjectMarker {
+	display: inline-block;
+	.sapUiIcon {
+		font-size: 1rem;
+		color: @sapUiContentMarkerIconColor;
+		&:before {
+			vertical-align: middle;
+		}
+		&:not([data-sap-ui-icon-content]) {
+			display: none;
+		}
+	}
+	.sapMLnk {
+		overflow: visible;
+		padding-bottom: 1px;
+	}
+	.sapMText {
+		color: @sapUiContentLabelColor;
+	}
+	&.sapMObjectMarkerIcon.sapMObjectMarkerText .sapUiIcon {
+		margin-right: 0.25rem;
+	}
+}
+
+.sapUiTableCellInner .sapMObjectMarkerIcon,
+.sapMListTbl .sapMObjectMarkerIcon {
+	.sapMText {
+		padding-top: 0; //Icon in table should not be padded
+	}
+	.sapUiIcon:before {
+		vertical-align: inherit;//Icon in table should not be vertically aligned
+	}
+}
+
+.sapMListTbl .sapMObjectMarker .sapMText {
+	color: @sapUiContentLabelColor;
+}
+
+.sapMListTbl .sapMObjectMarker {
+	word-break: break-all;
+}
+
+.sapUiTableCellInner .sapMObjectMarkerIcon .sapUiIcon {
+	margin-top: 0.0625rem;
+}

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

@@ -0,0 +1,307 @@
+/* =================================== */
+/* CSS for control sap.m/ObjectNumber  */
+/* Base theme                          */
+/* =================================== */
+
+@sapMONInformativeElement: @sapUiInformativeElement;
+
+.sapMObjectNumberLarge .sapMObjectNumberText,
+.sapMObjectNumberLarge .sapMObjectNumberUnit {
+	font-size: 1.5rem;
+}
+
+.sapMObjectNumber {
+	display: block;
+	white-space: normal;
+	max-width: 100%;
+	text-overflow: ellipsis;
+	word-wrap: normal;
+	overflow: visible;
+	min-height: 1rem;
+	font-family: @sapUiFontFamily;
+	font-size: @sapMFontMediumSize;
+
+	&.sapMObjectNumberLarge {
+		vertical-align: middle;
+		height: 2rem;
+		&.sapMObjectNumberInverted .sapMObjectNumberInner{
+			padding: 0 0.25rem;
+		}
+		& .sapMObjectNumberInner {
+			height: 2rem;
+		}
+		.sapMObjectNumberText,
+		.sapMObjectNumberUnit {
+			line-height: 2rem;
+			vertical-align: middle;
+			height: 2rem;
+		}
+	}
+
+	&.sapMObjectNumberLongText{
+
+		.sapMObjectNumberInner {
+			height: initial;
+		}
+
+		.sapMObjectNumberText {
+			display: inline;
+			word-break: break-word;
+			text-overflow: unset;
+			white-space: break-spaces;
+			-webkit-box-orient: unset;
+		}
+	}
+}
+
+.sapMObjectNumberText {
+	display: inline-block;
+	white-space: pre;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	max-width: 100%;
+	text-decoration: none;
+	min-height: 1rem;
+	vertical-align: middle;
+	line-height: 1rem;
+	font-family: @sapUiFontFamily;
+	text-shadow: @sapUiContentTextShadow;
+}
+
+.sapMObjectNumberEmph .sapMObjectNumberText {
+	font-weight: bold;
+}
+
+.sapMObjectNumberUnit {
+	display: inline-block;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	max-width: 100%;
+	text-decoration: none;
+	height: 1rem;
+	line-height: 1rem;
+	vertical-align: middle;
+	font-family: @sapUiFontLightFamily;
+ 	text-shadow: @sapUiContentTextShadow;
+}
+
+// Android fix
+html[data-sap-ui-os^="Android"] {
+	.sapMObjectNumberUnit {
+		padding-top: 0;
+	}
+}
+
+.sapUiForm .sapMObjectNumberUnit,
+.sapUiForm .sapMObjectNumberText {
+	vertical-align: top;
+}
+
+.sapUiForm.sapUiFormEdit .sapMObjectNumber {
+	margin-top: 0.875rem;
+	&.sapMObjectNumberLarge {
+		line-height: initial;
+		margin-top: 0.375rem;
+	}
+}
+
+.sapUiSizeCompact .sapUiForm.sapUiFormEdit .sapMObjectNumber {
+	margin-top: 0.5rem;
+	&.sapMObjectNumberLarge {
+		line-height: initial;
+		margin-top: 0;
+	}
+}
+
+.sapMLIBActive {
+	.sapMObjectNumberText,
+	.sapMObjectNumberUnit {
+		color: @sapUiListActiveTextColor;
+		text-shadow: none;
+	}
+}
+
+.sapMObjectNumberStatusNone {
+	color: @sapUiNeutralText;
+}
+
+.sapMObjectNumberStatusError {
+	color: @sapUiNegativeText;
+}
+
+.sapMObjectNumberStatusWarning {
+	color: @sapUiCriticalText;
+}
+
+.sapMObjectNumberStatusSuccess {
+	color: @sapUiPositiveText;
+}
+
+.sapMObjectNumberStatusInformation {
+	color: @sapUiInformativeText;
+}
+
+// focus
+
+.sapMObjectNumberActive .sapMObjectNumberInner {
+	cursor: pointer;
+}
+
+.sapMObjectNumberInner {
+	position: relative;
+	box-sizing: border-box;
+	display: inline-block;
+	min-height: 1rem;
+	line-height: 0.875rem;
+	vertical-align: text-top;
+}
+
+html.sap-desktop .sapMObjectNumberActive:focus {
+
+	outline: none;
+
+	.sapMObjectNumberInner::after {
+		pointer-events: none;
+		display: block;
+		content: "";
+		position: absolute;
+		top: -1px;
+		left: 1px;
+		bottom: 0px;
+		right: 1px;
+		height: 1.125rem;
+		outline: 1px dotted @sapUiContentFocusColor;
+	}
+
+	&.sapMObjectNumberInverted .sapMObjectNumberInner::after {
+		top: -1px;
+		left: 1px;
+		bottom: -1px;
+		right: 1px;
+		height: 1.125rem;
+		outline: 1px dotted @sapUiContentFocusColor;
+	}
+
+
+
+	&.sapMObjectNumberLarge {
+
+		.sapMObjectNumberInner::after {
+			top: 0px;
+			left: 1px;
+			bottom: 0px;
+			right: 1px;
+			height: 2rem;
+		}
+
+		&.sapMObjectNumberInverted .sapMObjectNumberInner::after {
+			top: 3px;
+			left: 3px;
+			bottom: 3px;
+			right: 3px;
+			height: 1.625rem;
+			outline: 1px dotted @sapContent_ContrastFocusColor;
+		}
+
+	}
+}
+
+.sapMObjectNumberActive:not(.sapMObjectNumberInverted) .sapMObjectNumberInner {
+	* {
+		text-decoration: underline;
+	}
+}
+
+.sapMObjectNumberActive:not(.sapMObjectNumberInverted) {
+	&.sapMObjectNumberPressed .sapMObjectNumberInner,
+	& .sapMObjectNumberInner:hover,
+	& .sapMObjectNumberInner:active {
+		* {
+			text-decoration: none;
+		}
+	}
+}
+
+// inverted classes
+
+.sapMObjectNumberInverted {
+
+	vertical-align: initial;
+
+	.sapMObjectNumberInner {
+		height: 1rem;
+		width: auto;
+		min-width: 1.25rem;
+		padding: 0 0.25rem;
+		border-radius: @sapUiElementBorderCornerRadius;
+		line-height: 0.75rem;
+	}
+
+	.sapMObjectNumberInner::after {
+		top: -1px;
+		left: 1px;
+		bottom: 1px;
+		right: 1px;
+		height: 1.25rem;
+		outline: 1px dotted @sapUiContentFocusColor;
+	}
+
+	&:not(.sapMObjectNumberLarge) {
+		font-weight: bold;
+	}
+
+	.sapMObjectNumberText,
+	.sapMObjectNumberUnit {
+		font-family: @sapUiFontFamily;
+		font-size: @sapMFontSmallSize;
+		text-shadow: none;
+	}
+
+	&.sapMObjectNumberLarge {
+
+		height: 2rem;
+
+		.sapMObjectNumberText,
+		.sapMObjectNumberUnit {
+			font-size: 1.25rem;
+			line-height: 2rem;
+		}
+
+	}
+}
+
+.objectNumberStatusMixIn(@class, @innerBackgroundColor, @innerColor, @activeInnerBackgroundColor, @activeInnerColor, @pressedInnerBackgroundColor) {
+	.sapMObjectNumberInverted.@{class} {
+		.sapMObjectNumberInner {
+			background-color: @innerBackgroundColor;
+			color: @innerColor;
+		}
+
+		&.sapMObjectNumberActive {
+			.sapMObjectNumberInner:hover {
+				background-color: @activeInnerBackgroundColor;
+			}
+
+			.sapMObjectNumberInner:active,
+			&.sapMObjectNumberPressed .sapMObjectNumberInner {
+				background-color: @pressedInnerBackgroundColor;
+				color: @activeInnerColor;
+			}
+		}
+	}
+}
+
+.sapMObjectNumber .sapMEmptyIndicator.sapMEmptyIndicatorAuto {
+	display: none;
+}
+
+.sapMShowEmpty-CTX .sapMObjectNumber .sapMEmptyIndicator.sapMEmptyIndicatorAuto {
+	display: inline-block;
+}
+
+.objectNumberStatusMixIn(sapMObjectNumberStatusError, @sapUiButtonNegativeBackground, @sapUiButtonNegativeTextColor, @sapUiButtonNegativeHoverBackground, @sapUiButtonNegativeHoverTextColor, @sapUiButtonNegativeActiveBackground);
+.objectNumberStatusMixIn(sapMObjectNumberStatusWarning, @sapUiButtonCriticalBackground, @sapUiButtonCriticalTextColor, @sapUiButtonCriticalHoverBackground, @sapUiButtonCriticalHoverTextColor, @sapUiButtonCriticalActiveBackground);
+.objectNumberStatusMixIn(sapMObjectNumberStatusSuccess, @sapUiButtonSuccessBackground, @sapUiButtonSuccessTextColor, @sapUiButtonSuccessHoverBackground, @sapUiButtonSuccessHoverTextColor, @sapUiButtonSuccessActiveBackground);
+.objectNumberStatusMixIn(sapMObjectNumberStatusInformation, @sapMONInformativeElement, @sapUiButtonInformationTextColor, @sapUiButtonInformationHoverBackground, @sapUiButtonInformationHoverTextColor, @sapUiButtonInformationActiveBackground);
+.objectNumberStatusMixIn(sapMObjectNumberStatusNone, @sapUiButtonNeutralBackground, @sapUiButtonNeutralTextColor, @sapUiButtonNeutralHoverBackground, @sapUiButtonNeutralHoverTextColor, @sapUiButtonNeutralActiveBackground);