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

OpenUI5 UI Library sap.m

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

.sapMInputDescriptionText {
	padding-left: 0.5rem;
	font-size: @sapMFontMediumSize;
	line-height: 2.5rem;
	color: @sapUiFieldTextColor;
	font-family: @sapUiFontFamily;
	font-style: normal;
	font-weight: normal;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.sapMInputWithDescription {
	white-space: nowrap;
}

.sapMDialog.sapMInputSuggestionPopup .sapMDialogScrollCont {
	padding: 0;
}

.sapMInputSuggestionTableHidden {
	display: none;
}

.sapMInputSuggestionPopup .sapMDLIValue {
	font-size: @sapMFontMediumSize;
	color: @sapUiListTextColor;
	padding-right: 1rem;
}

.sapMInputSuggestionPopup .sapMLIBActive .sapMDLIValue {
	color: @sapUiListActiveTextColor;
}

.sapMInputSuggestionPopup .sapMDLILabel {
	font-size: @sapMFontMediumSize;
}

.sapMInputDescriptionWrapper {
	display: inline-flex;
}

/* Input with description */
.sapMInputBaseHasEndIcons, .sapMInputBaseHasBeginIcons {
	.sapMInputDescriptionWrapper {
		max-width: ~"calc(100% - (@{_InputBase_Control_OneIcon_MinWidth}))";
		.sapMInputBaseState & {
			max-width: ~"calc(100% - (@{_InputBase_Control_OneIcon_State_MinWidth}))";
		}
	}
}

.sapMInputBaseHasEndIcons.sapMInputBaseHasBeginIcons {
	.sapMInputDescriptionWrapper {
		max-width: ~"calc(100% - (@{_InputBase_Control_TwoIcons_MinWidth}))";
		.sapMInputBaseState & {
			max-width: ~"calc(100% - (@{_InputBase_Control_TwoIcons_State_MinWidth}))";
		}
	}
}

.sapMInputBase:not(.sapMInputBaseHasEndIcons):not(.sapMInputBaseHasBeginIcons) {
	.sapMInputDescriptionWrapper {
		max-width: ~"calc(100% - (@{_InputBase_Control_MinWidth}))";
		.sapMInputBaseState & {
			max-width: ~"calc(100% - (@{_InputBase_Control_State_MinWidth}*2))";
		}
	}
}

.sapUiSizeCompact {
	.sapMInputBaseHasEndIcons, .sapMInputBaseHasBeginIcons {
		.sapMInputDescriptionWrapper {
			max-width: ~"calc(100% - (@{_InputBase_Control_OneIcon_MinWidth_Compact}))";
			.sapMInputBaseState & {
				max-width: ~"calc(100% - (@{_InputBase_Control_OneIcon_State_MinWidth_Compact}))";
			}
		}
	}

	.sapMInputBaseHasEndIcons.sapMInputBaseHasBeginIcons {
		.sapMInputDescriptionWrapper {
			max-width: ~"calc(100% - (@{_InputBase_Control_TwoIcons_MinWidth_Compact}))";
			.sapMInputBaseState & {
				max-width: ~"calc(100% - (@{_InputBase_Control_TwoIcons_State_MinWidth_Compact}))";
			}
		}
	}

	.sapMInputBase:not(.sapMInputBaseHasEndIcons):not(.sapMInputBaseHasBeginIcons) {
		.sapMInputDescriptionWrapper {
			max-width: ~"calc(100% - (@{_InputBase_Control_MinWidth_Compact}))";
			.sapMInputBaseState & {
				max-width: ~"calc(100% - (@{_InputBase_Control_State_MinWidth_Compact}*2))";
			}
		}
	}
}

.sapMInputHighlight {
	font-weight: bold;
}