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

OpenUI5 UI Library sap.m

/* =================================== */
/* CSS for control sap.m/ObjectNumber  */
/* Base theme                          */
/* =================================== */

@sapMONInformativeElement: var(--sapInformativeElementColor);

.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: var(--sapFontFamily);
	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: var(--sapFontFamily);
	text-shadow: var(--sapContent_TextShadow);
}

.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: var(--sapFontLightFamily);
 	text-shadow: var(--sapContent_TextShadow);
}

/* 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: var(--sapList_Active_TextColor);
		text-shadow: none;
	}
}

.sapMObjectNumberStatusNone {
	color: var(--sapNeutralTextColor);
}

.sapMObjectNumberStatusError {
	color: var(--sapNegativeTextColor);
}

.sapMObjectNumberStatusWarning {
	color: var(--sapCriticalTextColor);
}

.sapMObjectNumberStatusSuccess {
	color: var(--sapPositiveTextColor);
}

.sapMObjectNumberStatusInformation {
	color: var(--sapInformativeTextColor);
}

/* 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: 0;
		right: 1px;
		height: 1.125rem;
		outline: 1px dotted var(--sapContent_FocusColor);
	}

	&.sapMObjectNumberInverted .sapMObjectNumberInner::after {
		top: -1px;
		left: 1px;
		bottom: -1px;
		right: 1px;
		height: 1.125rem;
		outline: 1px dotted var(--sapContent_FocusColor);
	}

	&.sapMObjectNumberLarge {

		.sapMObjectNumberInner::after {
			top: 0;
			left: 1px;
			bottom: 0;
			right: 1px;
			height: 2rem;
		}

		&.sapMObjectNumberInverted .sapMObjectNumberInner::after {
			top: 3px;
			left: 3px;
			bottom: 3px;
			right: 3px;
			height: 1.625rem;
			outline: 1px dotted var(--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: var(--sapElement_BorderCornerRadius);
		line-height: 0.75rem;
	}

	.sapMObjectNumberInner::after {
		top: -1px;
		left: 1px;
		bottom: 1px;
		right: 1px;
		height: 1.25rem;
		outline: 1px dotted var(--sapContent_FocusColor);
	}

	&:not(.sapMObjectNumberLarge) {
		font-weight: bold;
	}

	.sapMObjectNumberText,
	.sapMObjectNumberUnit {
		font-family: var(--sapFontFamily);
		font-size: var(--sapFontSmallSize);
		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
);