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

OpenUI5 UI Library sap.m

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

@_sap_m_InputWithTokens_TokenizerMinWidth: 3.25rem;

/*MIN-WIDTH variables*/
/* rounding values to 2 symbols, because of IE and Edge */
@_InputBase_Control_Tokens_MinWidth: round((@_InputBase_Control_OneIcon_MinWidth + @_sap_m_InputWithTokens_TokenizerMinWidth), 2);
@_InputBase_Control_Tokens_ReadOnly_MinWidth: round((@_InputBase_Control_MinWidth + @_sap_m_InputWithTokens_TokenizerMinWidth), 2);
@_InputBase_Control_Tokens_State_MinWidth: round((@_InputBase_Control_Tokens_MinWidth + @_sap_m_InputBaseWrapper_Sum_Border), 2);

@_InputBase_Control_Tokens_MinWidth_Compact: round((@_InputBase_Control_OneIcon_MinWidth_Compact + @_sap_m_InputWithTokens_TokenizerMinWidth), 2);
@_InputBase_Control_Tokens_ReadOnly_MinWidth_Compact: round((@_InputBase_Control_MinWidth_Compact + @_sap_m_InputWithTokens_TokenizerMinWidth), 2);
@_InputBase_Control_Tokens_State_MinWidth_Compact: round((@_InputBase_Control_Tokens_MinWidth_Compact + @_sap_m_InputBaseWrapper_Sum_Border), 2);



.sapMMultiInput:not(.sapMMultiInputHasTokens) {
	& .sapMTokenizer {
		padding-left: 0;
 	}
}

.sapMMultiInput.sapMMultiInputHasTokens .sapMTokenizer.sapMTokenizerNoNMore {
	min-width: 2rem;
}

/* handle min-width calculation */
.sapMMultiInput.sapMMultiInputHasTokens {
	.sapMTokenizer {
		min-width: @_sap_m_InputWithTokens_TokenizerMinWidth;
	}

	.sapMInputBaseContentWrapper {
		min-width: @_InputBase_Control_Tokens_MinWidth;
		&.sapMInputBaseContentWrapperState:not(.sapMInputBaseContentWrapperSuccess) {
			min-width: @_InputBase_Control_Tokens_State_MinWidth;
		}
	}

	&.sapMInputBaseReadonly .sapMInputBaseContentWrapper {
		min-width: @_InputBase_Control_Tokens_ReadOnly_MinWidth;
	}
}

.sapMMultiInput.sapMMultiInputHasTokens {
	& .sapMInputBaseInner {
		padding-left: 0;
	}
}

.sapMMultiInput .sapMTokenizer {
	max-height: 100%;
}

// prevent placing the multiinput over a busy indicator overlay
.sapUiLocalBusy .sapMMultiInput .sapMTokenizer {
	z-index: 0;
}

/* Keep placeholder invisible, when at least one token is chosen */
.sapMMultiInputHasTokens .sapMInputBaseInner::-moz-placeholder {
	color: transparent;
}

.sapMMultiInputHasTokens .sapMInputBaseInner::-webkit-input-placeholder {
	color: transparent;
}

.sapMMultiInputHasTokens .sapMInputBaseInner:-moz-placeholder {
	color: transparent;
}

.sapUiSizeCompact {
	/* min-width calculations */
	.sapMMultiInput.sapMMultiInputHasTokens {
		.sapMInputBaseContentWrapper {
			min-width: @_InputBase_Control_Tokens_MinWidth_Compact;
			&.sapMInputBaseContentWrapperState:not(.sapMInputBaseContentWrapperSuccess) {
				min-width: @_InputBase_Control_Tokens_State_MinWidth_Compact;
				outline-offset: -3px;
				.sapMToken {
					margin-top: 0.0625rem;
					margin-bottom: 0.0625rem;
				}
				.sapMTokenizerIndicator {
					line-height: 1rem;
				}
			}
		}

		&.sapMInputBaseReadonly .sapMInputBaseContentWrapper {
			min-width: @_InputBase_Control_Tokens_ReadOnly_MinWidth_Compact;
		}
	}
}

.sapUiSizeCondensed .sapUiTableDataCell {

	.sapMTokenizer .sapMToken {
		height: 1.125rem;
		margin-top: 0.125rem;
		margin-bottom: 0.125rem;
	}

	.sapMTokenText {
		height: 100%;
		line-height: 1rem;
	}

	.sapMToken .sapMTokenIcon {
		line-height: 1rem;
	}

	.sapMMultiInput .sapMInputBaseInner {
		height: 1.25rem;
	}

	.sapMMultiInputIndicator {
		line-height: 1.25rem;
	}
}

/* MultiInput with description */
.sapMMultiInput.sapMMultiInputHasTokens {
	.sapMInputDescriptionWrapper {
		max-width: ~"calc(100% - (@{_InputBase_Control_Tokens_MinWidth}))";
		.sapMInputBaseState:not(.sapMInputBaseContentWrapperSuccess) & {
			max-width: ~"calc(100% - (@{_InputBase_Control_Tokens_State_MinWidth}))";
		}

		.sapMInputBaseReadonly & {
			max-width: ~"calc(100% - (@{_InputBase_Control_Tokens_ReadOnly_MinWidth}))";
		}
	}

	&.sapMInputFocused .sapMTokenizer {
		left: 0.125rem;
	}

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

			.sapMInputBaseReadonly & {
				max-width: ~"calc(100% - (@{_InputBase_Control_Tokens_ReadOnly_MinWidth_Compact}))";
			}
		}
	}
}