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

OpenUI5 UI Library sap.m

/* ==================================== */
/* CSS for control sap.m/MultiComboBox  */
/* 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);

/* hande min-width calculation */
.sapMMultiComboBox.sapMMultiComboBoxHasToken {
	.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;
	}
}

.sapMMultiComboBox:not(.sapMMultiComboBoxHasToken) .sapMTokenizer {
	padding-left: 0;
}

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

.sapMMultiComboBoxHasToken .sapMInputBaseInner {
	padding-left: 0;
}

.sapMMultiComboBoxReadOnlyPopover {
	.sapMLIB {
		pointer-events: none;
		border-bottom: 0;

		&.sapMLIBHoverable:hover {
			background: none;
		}
	}
}

.sapMMultiComboBox.sapMInputBaseNoWidth {
	width: 100%;
}

li.sapMMultiComboBoxItem .sapMCbBg {
	top: 0;
	bottom: 0;
	margin: auto;
}

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

/* ------------------------------ */
/* BorderDiv                      */
/* ------------------------------ */

.sapUiSizeCompact .sapMMultiComboBox  .sapMTokenizer .sapMToken:first-child {
	margin-left: 0.25rem;
}

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

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

.sapMMultiComboBoxHasToken .sapMInputBaseInner:-ms-input-placeholder {
	color: transparent;
}

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

/* ------------------------------ */
/* ListItem                       */
/* ------------------------------ */

.sapMMultiComboBoxItem .sapMCb {
	height: 2.5rem;
	line-height: 2.5rem;
}

li.sapMMultiComboBoxItem {
	height: 2.5rem;
}

.sapMMultiComboBoxPicker .sapMSLITitleOnly {
	font-size: 0.875rem;
}

html.sap-desktop li.sapMMultiComboBoxItemRangeSelection {
	background-color: @sapUiListHoverBackground;
}

/* Compact size */
.sapUiSizeCompact {
	.sapMMultiComboBoxItem .sapMCb {
		height: 2rem;
		line-height: 2rem;
	}

	/* handle min-width calculation */
	.sapMMultiComboBox.sapMMultiComboBoxHasToken {
		.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;
		}
	}
}