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

OpenUI5 UI Library sap.m

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

@_sap_m_SelectList_ItemHeight: 2.5rem;
@_sap_m_SelectList_ItemCompactHeight: 2rem;

/* commons styles */

.sapMSelectList,
.sapMSelectListItemBase {
	box-sizing: border-box;
}

/* disabled */

.sapMSelectListDisabled {
	pointer-events: none;
}

/* list */

.sapMSelectList {
	margin: 0;
	padding: 0;
	outline: none;
	list-style-type: none;
	background: var(--sapList_Background);
}

/* item */

.sapMSelectListItemBase {
	outline: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	color: var(--sapList_TextColor);
	font-size: @sapMFontMediumSize;
	height: @_sap_m_SelectList_ItemHeight;
	cursor: pointer;
}

.sapMSelectListItem {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding: 0 1rem 0 1rem;
	line-height: @_sap_m_SelectList_ItemHeight;
}

.sapMSelectListItemIcon {
	padding-right: 0.4375rem;
}

li.sapMSelectListItemBaseInvisible {
	display: none;
}

/* elements inside the select effects the size of the browsers default dragging ghost element */
.sapUiDnDDragging .sapMSelectListItemBase + .sapMSelectListItemBase {
	display: none;
}

/* disabled */
.sapMSelectListItemBaseDisabled {
	cursor: unset;
}

/* hover */
.sapMSelectListItemBaseHoverable:hover {
	background: var(--sapList_Hover_Background);
}

/* hover selected */
.sapMSelectListItemBaseSelected.sapMSelectListItemBaseHoverable:hover {
	background-color: @sapUiListSelectionHoverBackground;
}

/* pressed and pressed selected */
:not(.sapMSelectListItemBaseDisabled).sapMSelectListItemBase.sapMSelectListItemBasePressed,
:not(.sapMSelectListItemBaseDisabled).sapMSelectListItemBase.sapMSelectListItemBasePressed.sapMSelectListItemBaseSelected {
	color: var(--sapList_Active_TextColor);
	background: var(--sapList_Active_Background);
}

/* focus */
html.sap-desktop .sapMSelectListItemBase:focus {
	outline: dotted 1px;
	outline-offset: -2px;
}

/* row */

.sapMSelectListRow {
	display: table-row;
}

/* cell */

.sapMSelectListCell {
	display: table-cell;
	vertical-align: middle;
	padding-left: 1rem;
}

.sapMSelectListLastCell {
	text-align: right;
	padding-right: 1rem;
}

/* separator */

.sapMSelectListSeparatorItem {
	border: 1px solid var(--sapList_BorderColor);
}

/* compact size  */

/* commons styles */

.sapUiSizeCompact .sapMSelectListItemBase {
	height: @_sap_m_SelectList_ItemCompactHeight;
}

.sapUiSizeCompact .sapMSelectListItem {
	line-height: @_sap_m_SelectList_ItemCompactHeight;
}