@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;
 	}
}

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

	.sapMInputBaseContentWrapper {
		min-width: @_InputBase_Control_Tokens_MinWidth;
		&.sapMInputBaseContentWrapperState {
			min-width: @_InputBase_Control_Tokens_State_MinWidth;
		}
	}

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

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

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

/* Workaround for missing disabled state of sap.m.Tokenizer */
.sapMMultiInput.sapMInputBaseDisabled  {
	pointer-events: none;
}

/* 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:-ms-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 {
				min-width: @_InputBase_Control_Tokens_State_MinWidth_Compact;
			}
		}

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

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

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

	.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 & {
			max-width: ~"calc(100% - (@{_InputBase_Control_Tokens_State_MinWidth}))";
		}

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

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

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