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

OpenUI5 UI Library sap.m

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

/* commons styles                 */
.sapMSltPicker-CTX {

	.sapMSelectList {

		.sapMSelectListRow {
			height: auto;
			display: flex;
			box-sizing: border-box;
			word-break: break-all;

			.sapMSelectListFirstCell {
				height: auto;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				display: block;
				box-sizing: border-box;
			}

			.sapMSelectListLastCell {
				display: block;
				box-sizing: border-box;
			}

			.sapMSelectListFirstCell,
			.sapMSelectListLastCell {
				padding-top: 0.75rem;
				padding-bottom: 0.75rem;
				word-break: break-word;
				&:empty {
					height: 2.5rem;
				}
			}
		}

		&.sapMSelectListWrappedItems {

			.sapMSelectListItem.sapMSelectListItemWithIcon,
			.sapMSelectListRow.sapMSelectListItemWithIcon .sapMSelectListFirstCell {
				position: relative;
				padding-left: 2.25rem;

				.sapMSelectListItemIcon {
					position: absolute;
					left: 1rem;
				}
			}

			.sapMSelectListItem {
				white-space: normal;
				padding-top: 0.75rem;
				padding-bottom: 0.75rem;
				line-height: 1rem;
				height: auto;

				&:empty {
					height: 2.5rem;
				}
			}

			.sapMSelectListRow {
				display: table-row;

				.sapMSelectListFirstCell {
					white-space: normal;
				}

				.sapMSelectListLastCell {
					vertical-align: top;
				}

				.sapMSelectListCell {
					display: table-cell;
				}
			}
		}

		.sapMSelectListItem {
			display: flex;
			align-items: center;
		}
	}
}

/* sets max-width of 600px to selectList, only when wrapItemsText property is false */
.sapMSltPicker-CTX:not(.sapMPickerWrappedItems) {
	max-width: 600px;

	.sapMSelectList:not(.sapMSelectListWrappedItems) {
		max-width: 600px;

		.sapMSelectListRow {
			max-width: 600px;
		}
	}
}

/* When wrapItemsText is true, make the picker fit its content width */
.sapMSltPicker-CTX.sapMPickerWrappedItems {
	max-width: max-content;
	width: fit-content;

	.sapMSelectList.sapMSelectListWrappedItems {
		width: fit-content;

		.sapMSelectListTableLayout {
			width: auto;
		}
	}
}

/* defines the ratio of columns inside selectList, when text is truncated */
.sapMSltPicker-CTX .sapMSelectList:not(.sapMSelectListWrappedItems) {

	.sapMSelectListFirstCell {
		width: 60%;
	}

	.sapMSelectListLastCell {
		width: 40%;
	}
}

/* sets max-width of 100% to selectList, only when wrapItemsText property is true */
.sapMSltPicker-CTX.sapMDialogPhone {
	max-width: 100%;

	.sapMSelectList:not(.sapMSelectListWrappedItems) {
		max-width: 100%;

		.sapMSelectListRow {
			max-width: 100%;
		}
	}
}

.sapUiSizeCompact .sapMSltPicker-CTX .sapMSelectList {

	.sapMSelectListRow {

		.sapMSelectListFirstCell,
		.sapMSelectListLastCell {
			padding-top: 0.5rem;
			padding-bottom: 0.5rem;

			&:empty {
				height: 2rem;
			}
		}
	}

	&.sapMSelectListWrappedItems .sapMSelectListItem {
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;

		&:empty {
			height: 2rem;
		}
	}
}

.sapMSlt,
.sapMSlt > .sapMSltLabel {
	box-sizing: border-box;
}

.sapMSlt,
.sapMSltLabel,
.sapMSltArrow {
	display: inline-block;
}

.sapMSlt,
.sapMSltLabel {
	overflow: hidden;
}

.sapMSlt:not(.sapMSltDisabled),
.sapMSlt:not(.sapMSltDisabled) > .sapMSltLabel,
.sapMSltIconOnly:not(.sapMSltDisabled) .sapMSltIcon {
	cursor: pointer;
}

.sapMSlt.sapMSltReadonly {
	border-color: var(--sapField_ReadOnly_BorderColor);
	background: var(--sapField_ReadOnly_Background);

	.sapMSltArrow {
		display: none;
	}
}

.sapMSlt > .sapMSltLabel,
.sapMSltArrow {
	height: 100%;
}

.sapMSlt > .sapMSltLabel,
.sapMSlt .sapMSelectListItemBase {
	padding: 0 0.625rem;
}

.sapMSltWithArrow > .sapMSltLabel,
.sapMSltWithArrow .sapMSelectListItemBase {
	padding: 0 3rem 0 0.625rem;
}

/* field                          */
.sapMSlt {
	position: relative;
	vertical-align: top;
	outline: none;
	height: 2.5rem;
	margin: 0.25rem 0 0.25rem 0;
	border: 1px solid var(--sapField_BorderColor);
	background: var(--sapField_Background);
	line-height: initial;
}

.sapMSltMinWidth {
	min-width: 5.125rem; /* enough for one letter, the ellipsis and the Select`s arrow */
}

/* pressed */

.sapMSltPressed:not(.sapMSltDisabled):not(.sapMSltState) {
	border-color: var(--sapField_Active_BorderColor);
}

.sapMSltPressed.sapMSltIconOnly:not(.sapMSltDisabled) {
	background: @sapUiToggleButtonPressedBackground;
	text-shadow: none;
}

/* value state */

.sapMSltError {
	background: var(--sapField_InvalidBackground);
	border-color: var(--sapField_InvalidColor);
}

.sapMSltWarning {
	background: var(--sapField_WarningBackground);
	border-color: var(--sapField_WarningColor);
}

.sapMSltSuccess {
	background: var(--sapField_SuccessBackground);
	border-color: var(--sapField_SuccessColor);
}

.sapMSltInformation {
	background: var(--sapField_Background);
	border-color: var(--sapHighlightColor);
}

/* label                          */
.sapMSlt > .sapMSltLabel {
	position: absolute;
	width: 100%;
	left: 0;
	right: 0;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-decoration: none;
	text-indent: 0;
	text-align: start;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	color: var(--sapField_TextColor);
	font-style: normal;
	font-size: @sapMFontMediumSize;
	vertical-align: middle;

	&::after {
		content: '';
		height: 100%;
		display: inline-block;
		vertical-align: middle;
		width: 0;
	}

	.sapMSelectListItemText {
		vertical-align: middle;
	}

	.sapMSelectListItemIcon {
		vertical-align: middle;
	}
}

.sapMSltAutoAdjustedWidth > .sapMSltLabel {
	position: relative;
	vertical-align: top;
}

/* icon                           */
.sapMSltIcon {
	position: absolute;
	display: block;
	font-size: 1.375rem;
	line-height: 2.375rem;
	padding: 0 0.4375rem;
	color: var(--sapContent_IconColor);
}

.sapMSltAutoAdjustedWidth .sapMSltIcon {
	position: relative;
}

/* pressed */

.sapMSltPressed > .sapMSltIcon {
	color: var(--sapContent_ContrastIconColor);
}

/* arrow                          */
.sapMSltArrow {
	position: absolute;
	text-align: center;
	width: 2.5rem;
	line-height: 2.5rem;
	top: 0;
	right: 0;
	color: var(--sapContent_IconColor);
	font-size: var(--sapFontLargeSize);
}

.sapMSltArrow::before {
	font-family: var(--sapContent_IconFontFamily);
	speak: none;
	content: '\e1ef';
}

/* hover */
.sapMSltHoverable:not(.sapMSltPressed):hover > .sapMSltArrow {
	background: var(--sapButton_Lite_Hover_Background);
}

/* pressed */
.sapMSltPressed > .sapMSltArrow {
	background: @sapUiToggleButtonPressedBackground;
}

.sapMSltPressed > .sapMSltArrow::before {
	color: @sapUiToggleButtonPressedTextColor;
}

/* dropdown list                  */
.sapMSlt > .sapMSelectList {
	visibility: hidden;
	position: relative;
	cursor: inherit;
	border: none;
	margin: 0;
	padding: 0;
	min-width: 6rem;
}

/* table context                  */
.sapUiSizeCondensed .sapUiTableCell .sapMSlt {
	margin: 0;
}

.sapUiSizeCondensed .sapUiTableCell .sapMSlt:not(.sapMSltState) {
	border-color: transparent;
}

.sapMSelectListTableLayout {
	border-collapse: collapse;
}

/* value states commons styles adaptations  */
.sapMSltLabelState,
.sapMSltArrowState {
	line-height: 2.25rem;
}


/* Select inside a Bar: header and sub-header contexts */
.sapMSubHeader-CTX .sapMSltPressed > .sapMSltIcon {
	color: var(--sapContent_ContrastIconColor);
}

.sapMHeader-CTX .sapMSltPressed,
.sapMSubHeader-CTX .sapMSltPressed {

	/* pressed selects arrow and icon look wrong with text-shadow */
	text-shadow: none;
}

.sapMHeader-CTX .sapMSltIconOnly.sapMSltHoverable:hover,
.sapMSubHeader-CTX .sapMSltIconOnly.sapMSltHoverable:hover {
	border-color: var(--sapButton_Lite_Hover_BorderColor);
	background: var(--sapButton_Lite_Hover_Background);
}

.sapMHeader-CTX .sapMSltIconOnly:not(.sapMSltPressed),
.sapMSubHeader-CTX .sapMSltIconOnly:not(.sapMSltPressed) {
	border-color: var(--sapButton_Lite_BorderColor);
	background-color: var(--sapButton_Lite_Background);
}

/* icon                           */
.sapMSubHeader-CTX .sapMSltPressed > .sapMSltIcon {
	color: var(--sapContent_ContrastIconColor);
}

/* Select inside a Bar: footer context */
.sapMFooter-CTX .sapMSltIconOnly.sapMSltHoverable:not(.sapMSltPressed):hover {
	background: @sapUiButtonFooterHoverBackground;
	border-color: var(--sapButton_Lite_BorderColor);
}

/* icon                           */
.sapMFooter-CTX .sapMSltIconOnly {
	background: var(--sapButton_Lite_Background);
	border-color: var(--sapButton_Lite_BorderColor);
}

/* label                          */
.sapMIBar-CTX.sapMFooter-CTX .sapMSltArrow {
	text-shadow: none;
}

.sapMFooter-CTX .sapMSltLabel {
	text-shadow: none;
}

/* picker                         */
div.sapMSltPicker {
	border: none;
	box-shadow: @sapUiShadowLevel1;

	&.sapUiPopupWithPadding .sapMDialogScrollCont.sapMDialogStretchContent {
		height: 100%;
	}

	.sapMSltPickerValueState {
		padding: 0.5625rem 1rem;
		color: var(--sapTextColor);
		font-size: var(--sapFontSmallSize);
		box-shadow: inset 0 -0.0625rem var(--sapPageHeader_BorderColor);

		&.sapMSltPickerErrorState {
			background: var(--sapErrorBackground);
		}

		&.sapMSltPickerSuccessState {
			background: var(--sapSuccessBackground);
		}

		&.sapMSltPickerWarningState {
			background: var(--sapWarningBackground);
		}

		&.sapMSltPickerInformationState {
			background: var(--sapInformationBackground);
		}

		&.sapMSltPickerNoneState {
			display: none;
		}
	}
}

/* dialog                         */
div.sapMSltPicker .sapMDialogScrollCont {
	padding: 0;
}

.sap-phone {
	.sapMSelectListTableLayout {
		display: inline;
	}
	.sapMSelectListWrappedItems.sapMSelectListTableLayout {
		display: table;
	}
}
/* CSS for control sap.m/Select.control Belize theme smaller sizes - common part */

/* commons styles                 */
.sapUiSizeCompact .sapMSltLabel,
.sapUiSizeCompact .sapMSlt .sapMSelectListItemBase,
.sapUiSizeCondensed .sapUiTableCell .sapMSltLabel,
.sapUiSizeCondensed .sapUiTableCell .sapMSlt .sapMSelectListItemBase {
	padding-right: 2.5rem;
	padding-left: 0.5rem;
}

.sapUiSizeCompact .sapMSlt > .sapMSltArrow {
	line-height: 1.5rem;
}

/* arrow                          */
.sapUiSizeCompact .sapMSltArrow {
	width: 2rem;
}

/* label and arrow commons styles */
.sapUiSizeCompact .sapMSltLabelState,
.sapUiSizeCompact .sapMSltArrowState {
	line-height: 1.375rem;
}

/* icon                           */
.sapUiSizeCompact .sapMSltIcon {
	font-size: 1rem;
	line-height: 1.5rem;
}

.sapUiSizeCondensed .sapUiTableCell .sapMSltIcon {
	font-size: 1rem;
	line-height: 1.375rem; /* + 2*1px padding = 1.5rem */
}

/* compact size              */

/* field                          */
.sapUiSizeCompact .sapMSlt {
	height: 1.625rem;
	margin-top: 0.1875rem;
	margin-bottom: 0.1875rem;
}

/* condensed size (table context) */


/* field                          */
.sapUiSizeCondensed .sapUiTableCell .sapMSlt {
	height: 1.375rem; /* + 2*1px padding = 1.5rem */
}

/* label                          */
.sapUiSizeCondensed .sapUiTableCell .sapMSlt .sapMSltLabel {
	line-height: 1.375rem;
}

/* arrow                          */
.sapUiSizeCondensed .sapUiTableCell .sapMSltArrow {
	line-height: 1.375rem;
}

.sapUiSizeCondensed .sapUiTableCell .sapMSltHoverable:not(.sapMSltState):hover {
	border-color: var(--sapField_Hover_BorderColor);
}

/* commons styles                 */
.sapUiSizeCondensed .sapUiTableCell .sapMSltLabelState,
.sapUiSizeCondensed .sapUiTableCell .sapMSltArrowState {
	line-height: 1.25rem;
}

/* hidden focus element */

.sapMSltHiddenSelect {
	width: 100%;
	height: 100%;
	border: none;
}

/* when the Busy Indicator is inside Select it should be with different positions - BCP 1870362962 */
.sapMSlt .sapUiLocalBusyIndicator:focus::after {
	left: 1px;
	top: 1px;
	right: 1px;
	bottom: 1px;
}