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

OpenUI5 UI Library sap.m

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

@_sap_m_InputBase_InnerMinWidth: 3rem;
@_sap_m_InputBase_InnerPadding: 0 0.75rem;
@_sap_m_InputBase_DisabledOpacity: 0.5;
@_sap_m_InputBase_IconLineHeight: 2.375rem;
@_sap_m_InputBase_IconWidth: 2.375rem;
@_sap_m_InputBase_Compact_IconWidth: 2rem;
@_sap_m_InputBase_IconMinWidth: 2.375rem;
@_sap_m_InputBaseWrapper_Sum_Border: 0.125rem;
@_sap_m_InputBase_InnerMinWidth_Compact: 2rem;
@_sap_m_InputBase_Compact_InnerPadding: 0 0.5rem;
@_sap_m_InputBase_FocusOffset: 1px;
@_sap_m_InputBase_FocusOffset_Busy: @_sap_m_InputBase_FocusOffset + 1px;
@_sap_m_InputBase_FocusBorderRadius: 0;
@_sap_m_InputBase_ReadOnly_FocusOffset: 0.125rem;
@_sap_m_InputBase_ReadOnly_BorderRadius: 0.125rem;


/* MIN-WIDTH variables */
/* rounding values to 2 symbols, because of IE and Edge */
@_InputBase_Control_MinWidth: round((@_sap_m_InputBase_InnerMinWidth + @_sap_m_InputBaseWrapper_Sum_Border), 2);
@_InputBase_Control_OneIcon_MinWidth: round((@_InputBase_Control_MinWidth + @_sap_m_InputBase_IconWidth), 2);
@_InputBase_Control_TwoIcons_MinWidth: round((@_InputBase_Control_MinWidth + @_sap_m_InputBase_IconWidth * 2), 2);
@_InputBase_Control_State_MinWidth: round((@_InputBase_Control_MinWidth + @_sap_m_InputBaseWrapper_Sum_Border), 2);
@_InputBase_Control_TwoIcons_State_MinWidth: round((@_InputBase_Control_TwoIcons_MinWidth + @_sap_m_InputBaseWrapper_Sum_Border), 2);
@_InputBase_Control_OneIcon_State_MinWidth: round((@_InputBase_Control_OneIcon_MinWidth + @_sap_m_InputBaseWrapper_Sum_Border), 2);

@_InputBase_Control_MinWidth_Compact: round((@_sap_m_InputBase_InnerMinWidth_Compact + @_sap_m_InputBaseWrapper_Sum_Border), 2);
@_InputBase_Control_OneIcon_MinWidth_Compact: round((@_InputBase_Control_MinWidth_Compact + @_sap_m_InputBase_Compact_IconWidth), 2);
@_InputBase_Control_TwoIcons_MinWidth_Compact: round((@_InputBase_Control_MinWidth_Compact + @_sap_m_InputBase_Compact_IconWidth * 2), 2);
@_InputBase_Control_State_MinWidth_Compact: round((@_InputBase_Control_MinWidth_Compact + @_sap_m_InputBaseWrapper_Sum_Border), 2);
@_InputBase_Control_TwoIcons_State_MinWidth_Compact: round((@_InputBase_Control_TwoIcons_MinWidth_Compact + @_sap_m_InputBaseWrapper_Sum_Border), 2);
@_InputBase_Control_OneIcon_State_MinWidth_Compact: round((@_InputBase_Control_OneIcon_MinWidth_Compact + @_sap_m_InputBaseWrapper_Sum_Border), 2);

.sapMInputBase {
	height: var(--sapElement_Height);
	background: transparent;
	position: relative;
	display: inline-block;
	vertical-align: top;
	outline: none;
	box-sizing: border-box;
	line-height: 0;
}

.sapMInputBaseHeightMargin {
	margin: 0.25rem 0;
}

/* handle min-width calculation */
.sapMInputBaseHasEndIcons,
.sapMInputBaseHasBeginIcons {

	.sapMInputBaseContentWrapper {
		min-width: @_InputBase_Control_OneIcon_MinWidth;

		&.sapMInputBaseContentWrapperState:not(.sapMInputBaseContentWrapperSuccess) {
			min-width: @_InputBase_Control_OneIcon_State_MinWidth;
		}
	}
}

.sapMInputBaseHasEndIcons.sapMInputBaseHasBeginIcons {

	.sapMInputBaseContentWrapper {
		min-width: @_InputBase_Control_TwoIcons_MinWidth;

		&.sapMInputBaseContentWrapperState:not(.sapMInputBaseContentWrapperSuccess) {
			min-width: @_InputBase_Control_TwoIcons_State_MinWidth;
		}
	}
}

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

	.sapMInputBaseContentWrapper {
		min-width: @_InputBase_Control_MinWidth;

		&.sapMInputBaseContentWrapperState:not(.sapMInputBaseContentWrapperSuccess) {
			min-width: @_InputBase_Control_State_MinWidth;
		}
	}
}

.sapMInputBaseInner {
	background: transparent;
	border: none;
	font-style: normal;
	-webkit-appearance: none;
	-moz-appearance: textfield;
	font-size: var(--sapFontSize);
	font-family: var(--sapFontFamily);
	color: var(--sapField_TextColor);
	line-height: normal;
	padding: @_sap_m_InputBase_InnerPadding;
	height: 100%;
	box-sizing: border-box;
	min-width: @_sap_m_InputBase_InnerMinWidth;
	overflow: hidden;
	text-overflow: ellipsis;
	vertical-align: inherit;
}

.sapMInputBaseReadonly .sapMInputBaseIconContainer {
	height: 0;
}

.sapMInputBase:not(.sapMInputBaseHasEndIcons):not(.sapMInputBaseHasBeginIcons) .sapMInputBaseInner,
.sapMInputBaseNoWidth .sapMInputBaseInner {
	width: 100%;
}

.sapMInputBaseInner {

	.sapMInputBaseHasEndIcons &,
	.sapMInputBaseHasBeginIcons & {
		width: calc(~'100% - @{_sap_m_InputBase_IconWidth}');
	}

	.sapMInputBaseHasEndIcons.sapMInputBaseHasBeginIcons & {
		width: calc(~'100% - @{_sap_m_InputBase_IconWidth}*2');
	}
}

.sapMInputBaseContentWrapper {
	height: 100%;
	box-sizing: border-box;
	display: inline-block;
	position: relative;
	overflow: hidden;
	border-radius: 0;
	vertical-align: middle;
	margin: 0;
	background: var(--sapField_BackgroundStyle);
	background-color: var(--sapField_Background);
	border: var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor);
	border-radius: var(--sapField_BorderCornerRadius);
}

.sapMInputBaseContentWrapper:not(.sapMInputBaseReadonlyWrapper):not(.sapMInputBaseContentWrapperState) {
	box-shadow: var(--sapField_Shadow);
}

.sapMILI-CTX .sapMInputBaseContentWrapperError,
.sapMInputBaseContentWrapperError {
	background: var(--sapField_InvalidBackgroundStyle);
	background-color: var(--sapField_InvalidBackground);
	border: var(--sapField_InvalidBorderWidth) var(--sapField_InvalidBorderStyle) var(--sapField_InvalidColor);
	box-shadow: var(--sapField_InvalidShadow);
}

.sapMInputBaseContentWrapperWarning {
	background: var(--sapField_WarningBackgroundStyle);
	background-color: var(--sapField_WarningBackground);
	border: var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle) var(--sapField_WarningColor);
	box-shadow: var(--sapField_WarningShadow);
}

.sapMInputBaseContentWrapperSuccess {
	background: var(--sapField_SuccessBackgroundStyle);
	background-color: var(--sapField_SuccessBackground);
	border: var(--sapField_SuccessBorderWidth) var(--sapField_SuccessBorderStyle) var(--sapField_SuccessColor);
	box-shadow: var(--sapField_SuccessShadow);
}

.sapMInputBaseContentWrapperInformation {
	background: var(--sapField_InformationBackgroundStyle);
	background-color: var(--sapField_InformationBackground);
	border: var(--sapField_InformationBorderWidth) var(--sapField_InformationBorderStyle) var(--sapField_InformationColor);
	box-shadow: var(--sapField_InformationShadow);
}

.sapMInputBaseIconContainer {
	display: inline-block;
	vertical-align: inherit;
	height: 100%;
	width: auto;
	outline: none;
}

.sapMInputBaseHasBeginIcons .sapMInputBaseInner {
	padding-left: 0.25rem;
}

.sapMInputBaseHasEndIcons .sapMInputBaseInner {
	padding-right: 0.25rem;
}

.sapMInputBaseIcon {
	width: @_sap_m_InputBase_IconWidth;
	min-width: @_sap_m_InputBase_IconMinWidth;
	height: 100%;
	cursor: pointer;
	background: transparent;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

.sapMInputBaseIconContainer .sapUiIcon.sapMInputBaseIcon {
	line-height: @_sap_m_InputBase_IconLineHeight;
}

.sapMFocus.sapMInputBase .sapMInputBaseContentWrapper:not(.sapMInputBaseDisabledWrapper) {

	&::before {
		border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
		border-radius: @_sap_m_InputBase_FocusBorderRadius;
		content: '';
		position: absolute;
		top: @_sap_m_InputBase_FocusOffset;
		left: @_sap_m_InputBase_FocusOffset;
		right: @_sap_m_InputBase_FocusOffset;
		bottom: @_sap_m_InputBase_FocusOffset;
		z-index: 2;
		pointer-events: none;
	}
}

.sapMInputBase .sapUiLocalBusyIndicator:focus::after {
	top: @_sap_m_InputBase_FocusOffset_Busy;
	left: @_sap_m_InputBase_FocusOffset_Busy;
	right: @_sap_m_InputBase_FocusOffset_Busy;
	bottom: @_sap_m_InputBase_FocusOffset_Busy;
	border-radius: @_sap_m_InputBase_FocusBorderRadius;
}

.sapMInputBaseInner::-webkit-input-placeholder {
	font-size: @sapMFontMediumSize;
	font-style: italic;
	padding: 0 .125rem;
}

.sapMInputBaseInner::-moz-placeholder {
	font-size: @sapMFontMediumSize;
	font-style: italic;
	padding: 0 .125rem;
}

.sapMInputBaseInner::-webkit-outer-spin-button,
.sapMInputBaseInner::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.sapMInputBaseInner:focus {
	outline: none;
	outline-width: 0;
}

.sapMPointer>.sapMInputBaseInner {
	cursor: pointer;
}

.sapMInputBaseDisabled {
	opacity: @_sap_m_InputBase_DisabledOpacity;

	.sapMInputBaseIcon {
		cursor: default;
	}
}

.sapMInputBaseInner[placeholder] {
	text-overflow: ellipsis;
}

.sapMInputBaseInner::-webkit-input-placeholder {
	color: var(--sapField_PlaceholderTextColor);
	text-overflow: ellipsis !important;
	/* important is necessary to overwrite inline style of shadow dom */
}

.sapMInputBaseInner::-moz-placeholder {
	color: var(--sapField_PlaceholderTextColor);
}

input.sapMInputBaseInner:invalid {
	/* disable native browser input validation visualization e.g. for type email or number */
	box-shadow: none;
}

/*read only*/

.sapMInputBaseReadonly:not(.sapMInputBaseDisabled) .sapMInputBaseContentWrapper {
	border-color: var(--sapField_ReadOnly_BorderColor);
	border-style: var(--sapField_ReadOnly_BorderStyle);
	background: var(--sapField_ReadOnly_BackgroundStyle);
	background-color: var(--sapField_ReadOnly_Background);
}

/* read only focus (::before) */

.sapMInputBaseReadonly.sapMInputBaseReadonly:not(.sapMInputBaseDisabled) .sapMInputBaseContentWrapper.sapMInputBaseContentWrapper::before {
    border-radius: @_sap_m_InputBase_ReadOnly_BorderRadius;
    top: @_sap_m_InputBase_ReadOnly_FocusOffset;
    left: @_sap_m_InputBase_ReadOnly_FocusOffset;
    right: @_sap_m_InputBase_ReadOnly_FocusOffset;
    bottom: @_sap_m_InputBase_ReadOnly_FocusOffset;
}

.sapMInputBaseInner:not(.sapMInputBaseReadonlyWrapper):not(.sapMInputBaseContentWrapperState):focus {
	border-color: var(--sapField_Focus_BorderColor);
}

.sapMInputBase:not(.sapMFocus) .sapMInputBaseContentWrapper:not(.sapMInputBaseReadonlyWrapper):not(.sapMInputBaseContentWrapperState):not(.sapMInputBaseDisabledWrapper) {

	&:hover {
		background: var(--sapField_Hover_BackgroundStyle);
		background-color: var(--sapField_Hover_Background);
		border-color: var(--sapField_Hover_BorderColor);
		box-shadow: var(--sapField_Hover_Shadow);
	}
}

.sapMInputBaseContentWrapper:not(.sapMInputBaseReadonlyWrapper):not(.sapMInputBaseContentWrapperState):not(.sapMInputBaseDisabledWrapper) {

	&:hover {
		border-color: var(--sapField_Hover_BorderColor);
	}

	&:active {
		background: @sapUiFieldFocusBackground;
		border-color: var(--sapField_Hover_BorderColor);
	}
}

.sapMInputBase:not(.sapMFocus) .sapMInputBaseContentWrapperState:hover,
.sapMInputBase:not(.sapMFocus).sapMInputBaseIconPressed .sapMInputBaseContentWrapperState {

	&.sapMInputBaseContentWrapperWarning:hover,
	&.sapMInputBaseContentWrapperWarning {
		box-shadow: var(--sapField_Hover_WarningShadow);
	}

	&.sapMInputBaseContentWrapperSuccess:hover,
	&.sapMInputBaseContentWrapperSuccess {
		box-shadow: var(--sapField_Hover_SuccessShadow);
	}

	&.sapMInputBaseContentWrapperError:hover,
	&.sapMInputBaseContentWrapperError {
		box-shadow: var(--sapField_Hover_InvalidShadow);
	}

	&.sapMInputBaseContentWrapperInformation:hover,
	&.sapMInputBaseContentWrapperInformation {
		box-shadow: var(--sapField_Hover_InformationShadow);
	}
}

.sapMInputBase:not(.sapMInputBaseDisabled) {

	&.sapMInputBaseIconPressed .sapMInputBaseIcon,
	.sapMInputBaseIcon:active,
	.sapMInputBaseIcon:hover {
		box-shadow: var(--sapField_Hover_Shadow);
	}

	&.sapMInputBaseIconPressed .sapMInputBaseContentWrapperError .sapMInputBaseIconContainer .sapMInputBaseIcon,
	.sapMInputBaseContentWrapperError .sapMInputBaseIconContainer .sapMInputBaseIcon:active,
	.sapMInputBaseContentWrapperError .sapMInputBaseIconContainer .sapMInputBaseIcon:hover {
		box-shadow: var(--sapField_Hover_InvalidShadow);
	}

	&.sapMInputBaseIconPressed .sapMInputBaseContentWrapperWarning .sapMInputBaseIconContainer .sapMInputBaseIcon,
	.sapMInputBaseContentWrapperWarning .sapMInputBaseIconContainer .sapMInputBaseIcon:active,
	.sapMInputBaseContentWrapperWarning .sapMInputBaseIconContainer .sapMInputBaseIcon:hover {
		box-shadow: var(--sapField_Hover_WarningShadow);
	}

	&.sapMInputBaseIconPressed .sapMInputBaseContentWrapperSuccess .sapMInputBaseIconContainer .sapMInputBaseIcon,
	.sapMInputBaseContentWrapperSuccess .sapMInputBaseIconContainer .sapMInputBaseIcon:active,
	.sapMInputBaseContentWrapperSuccess .sapMInputBaseIconContainer .sapMInputBaseIcon:hover {
		box-shadow: var(--sapField_Hover_SuccessShadow);
	}

	&.sapMInputBaseIconPressed .sapMInputBaseContentWrapperInformation .sapMInputBaseIconContainer .sapMInputBaseIcon,
	.sapMInputBaseContentWrapperInformation .sapMInputBaseIconContainer .sapMInputBaseIcon:active,
	.sapMInputBaseContentWrapperInformation .sapMInputBaseIconContainer .sapMInputBaseIcon:hover {
		box-shadow: var(--sapField_Hover_InformationShadow);
	}
}

/* Compact size */

.sapUiSizeCompact {

	.sapMInputBase {
		line-height: 1rem;
		height: var(--sapElement_Compact_Height);
	}

	.sapMInputBaseContentWrapper {
		height: var(--sapElement_Compact_Height);
	}

	.sapMInputBaseInner {
		padding: @_sap_m_InputBase_Compact_InnerPadding;
		min-width: @_sap_m_InputBase_InnerMinWidth_Compact;
	}

	.sapMInputBaseHasEndIcons .sapMInputBaseInner,
	.sapMInputBaseHasBeginIcons .sapMInputBaseInner {
		width: calc(~'100% - @{_sap_m_InputBase_Compact_IconWidth}');
	}

	.sapMInputBaseHasEndIcons.sapMInputBaseHasBeginIcons .sapMInputBaseInner {
		width: calc(~'100% - @{_sap_m_InputBase_Compact_IconWidth}*2');
	}

	.sapMInputBaseIcon {
		width: @_sap_m_InputBase_Compact_IconWidth;
		min-width: 2rem;
	}

	.sapMInputBaseIconContainer .sapUiIcon.sapMInputBaseIcon {
		line-height: 1.5rem;
	}

	.sapMInputBaseContentWrapper.sapMInputBaseContentWrapperState:not(.sapMInputBaseContentWrapperSuccess) .sapMInputBaseIcon {
		line-height: 1.375rem;
	}

	.sapMInputBaseHasBeginIcons .sapMInputBaseInner {
		padding-left: 0.25rem;
	}

	.sapMInputBaseHasEndIcons .sapMInputBaseInner {
		padding-right: 0.25rem;
	}

	/* handle min-width calculation */
	.sapMInputBaseHasEndIcons,
	.sapMInputBaseHasBeginIcons {

		.sapMInputBaseContentWrapper {
			min-width: @_InputBase_Control_OneIcon_MinWidth_Compact;

			&.sapMInputBaseContentWrapperState:not(.sapMInputBaseContentWrapperSuccess) {
				min-width: @_InputBase_Control_OneIcon_State_MinWidth_Compact;
			}
		}
	}

	.sapMInputBaseHasEndIcons.sapMInputBaseHasBeginIcons {

		.sapMInputBaseContentWrapper {
			min-width: @_InputBase_Control_TwoIcons_MinWidth_Compact;

			&.sapMInputBaseContentWrapperState:not(.sapMInputBaseContentWrapperSuccess) {
				min-width: @_InputBase_Control_TwoIcons_State_MinWidth_Compact;
			}
		}
	}

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

		.sapMInputBaseContentWrapper {
			min-width: @_InputBase_Control_MinWidth_Compact;

			&.sapMInputBaseContentWrapperState:not(.sapMInputBaseContentWrapperSuccess) {
				min-width: @_InputBase_Control_State_MinWidth_Compact;
			}
		}
	}

	.sapMInputBaseHeightMargin {
		margin: 0.1875rem 0;
	}
}

/* Condensed size */

.sapUiSizeCondensed .sapUiTableCell {

	.sapMInputBase {
		height: 1.375rem;
		/* + 2*1px padding = 1.5rem */
		padding: 0 0.0625rem;
		/* 1px padding only */
	}

	.sapMInputBaseHeightMargin {
		margin: 0;
	}

	.sapMInputBaseInner:not(.sapMInputBaseContentWrapperState) {
		border-color: transparent;
	}

	.sapMInputBaseContentWrapper:not(.sapMInputBaseContentWrapperSuccess) {
		height: 1.375rem;
	}
}

/* Input selection fix -
 * Due to the fact that the CSS parsing rules require dropping the whole rule when encountering an invalid
 * pseudo-element, two separate rules must be written */

.sapMInputBaseInner {

	&::selection,
	&::-moz-selection {
		background: var(--sapSelectedColor);
		color: var(--sapContent_ContrastTextColor);
	}
}

/* Google chrome and Safari input selection fix:
 * The browser renders the selection background with 50% opacity by default.
 * The solution is to use fade with a value for alpha 99 if it's set 100 the browser ignores it.
 */

html[data-sap-ui-browser^='sf'],
html[data-sap-ui-browser^='cr'] {

	.sapMInputBaseInner::selection {
		background: fade(@sapUiSelected, 99);
		color: fade(@sapUiContentContrastTextColor, 99);
	}
}

/* When disabled or read-only hide placeholder by setting opacity to 0 */
.sapMInputBaseDisabled {

	.sapMInputBaseInner::-webkit-input-placeholder {
		opacity: 0;
	}

	.sapMInputBaseInner::-moz-placeholder {
		opacity: 0;
	}
}

.sapMInputBaseReadonly {

	.sapMInputBaseInner::-webkit-input-placeholder {
		opacity: 0;
	}

	.sapMInputBaseInner::-moz-placeholder {
		opacity: 0;
	}
}

.sapMInputBaseDisabledWrapper .sapMInputBaseIcon {
	color: var(--sapContent_DisabledTextColor);
}

/* pressed */

.sapMInputBaseIconPressed .sapMInputBaseIcon,
.sapMInputBaseIconPressed .sapMInputBaseIcon:hover {
	background: @sapUiToggleButtonPressedBackground;
}

.sapMInputBaseIconPressed .sapMInputBaseIcon::before {
	color: @sapUiToggleButtonPressedTextColor;
}

.sapMInputBaseIconPressed .sapMInputBaseContentWrapper:not(.sapMInputBaseReadonlyWrapper):not(.sapMInputBaseContentWrapperState):not(.sapMInputBaseDisabledWrapper) {
	border-color: var(--sapField_Active_BorderColor);
}

.sapUiSizeCondensed .sapUiTableDataCell {

	.sapMInputBaseContentWrapper {
		height: 1.375rem;
	}

	.sapMInputBaseContentWrapper:not(.sapMInputBaseContentWrapperState) {
		border: none;
	}

	.sapMInputBase .sapMInputBaseIcon {
		height: 1.375rem;
		width: 1.375rem;
		line-height: 1.375rem;
	}
}

.sapMInputBase .sapUiLocalBusyIndicator:focus {
	outline: none;
}