@openui5/sap.m/src/sap/m/themes/base/ObjectNumber.less

OpenUI5 UI Library sap.m

/* =================================== */
/* 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 {
	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) {
	&.sapMObjectNumberPressed,
	&:hover,
	&:active {
		* {
			text-decoration: underline;
		}
	}
}

// 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;
				color: @activeInnerColor;
			}
			.sapMObjectNumberInner:active,
			&.sapMObjectNumberPressed .sapMObjectNumberInner {
				background-color: @pressedInnerBackgroundColor;
				color: @sapUiButtonActiveTextColor;
			}
		}
	}
}

.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);