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

OpenUI5 UI Library sap.m

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

:root {
	--sPopoverMaxWidth: 640;
}

.sapMListFocus .sapMLIBFocused {
	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
	outline-offset: -0.125rem;
}

.sapMInputDescriptionText {
	padding-left: 0.5rem;
	font-size: var(--sapFontSize);
	line-height: normal;
	color: var(--sapField_TextColor);
	font-family: var(--sapFontFamily);
	font-style: normal;
	font-weight: normal;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.sapMInputWithDescription {
	white-space: nowrap;
}

.sapMInputDescriptionWrapper {
	display: inline-flex;
}

/* Input with description */
.sapMInputBaseHasEndIcons,
.sapMInputBaseHasBeginIcons {

	.sapMInputDescriptionWrapper {
		max-width: ~"calc(100% - (@{_InputBase_Control_OneIcon_MinWidth}))";

		.sapMInputBaseState:not(.sapMInputBaseContentWrapperSuccess) & {
			max-width: ~"calc(100% - (@{_InputBase_Control_OneIcon_State_MinWidth}))";
		}
	}
}

.sapMInputBaseHasEndIcons.sapMInputBaseHasBeginIcons {

	.sapMInputDescriptionWrapper {
		max-width: ~"calc(100% - (@{_InputBase_Control_TwoIcons_MinWidth}))";

		.sapMInputBaseState:not(.sapMInputBaseContentWrapperSuccess) & {
			max-width: ~"calc(100% - (@{_InputBase_Control_TwoIcons_State_MinWidth}))";
		}
	}
}

.sapMInputBase:not(.sapMInputBaseHasEndIcons):not(.sapMInputBaseHasBeginIcons) {

	.sapMInputDescriptionWrapper {
		max-width: ~"calc(100% - (@{_InputBase_Control_MinWidth}))";

		.sapMInputBaseState:not(.sapMInputBaseContentWrapperSuccess) & {
			max-width: ~"calc(100% - (@{_InputBase_Control_State_MinWidth}*2))";
		}
	}
}

.sapUiSizeCompact {

	.sapMInputBaseHasEndIcons,
	.sapMInputBaseHasBeginIcons {

		.sapMInputDescriptionWrapper {
			max-width: ~"calc(100% - (@{_InputBase_Control_OneIcon_MinWidth_Compact}))";

			.sapMInputBaseState:not(.sapMInputBaseContentWrapperSuccess) & {
				max-width: ~"calc(100% - (@{_InputBase_Control_OneIcon_State_MinWidth_Compact}))";
			}
		}
	}

	.sapMInputBaseHasEndIcons.sapMInputBaseHasBeginIcons {

		.sapMInputDescriptionWrapper {
			max-width: ~"calc(100% - (@{_InputBase_Control_TwoIcons_MinWidth_Compact}))";

			.sapMInputBaseState:not(.sapMInputBaseContentWrapperSuccess) & {
				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:not(.sapMInputBaseContentWrapperSuccess) & {
				max-width: ~"calc(100% - (@{_InputBase_Control_State_MinWidth_Compact}*2))";
			}
		}
	}
}

.sapMInputHighlight {
	font-weight: bold;
}

/* Overrides due to experimental flex layouting after IE drop */

.sapMInput.sapMInputBaseHasEndIcons .sapMInputBaseInner,
.sapMInput.sapMInputBaseHasBeginIcons .sapMInputBaseInner {
	width: auto;
	flex: 1
}

.sapMInput .sapMInputBaseContentWrapper {
	display: inline-flex;
}