@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                 */
/* ------------------------------ */

.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 > .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 @sapUiFieldBorderColor;
	background: @sapUiFieldBackground;
}

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

/* pressed */

.sapMSltPressed:not(.sapMSltDisabled):not(.sapMSltState) {
	border-color: @sapUiFieldActiveBorderColor;
}

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

/* value state */

.sapMSltError {
	background: @sapUiFieldInvalidBackground;
	border-color: @sapUiFieldInvalidColor;
}

.sapMSltWarning {
	background: @sapUiFieldWarningBackground;
	border-color: @sapUiFieldWarningColor;
}

.sapMSltSuccess {
	background: @sapUiFieldSuccessBackground;
	border-color: @sapUiFieldSuccessColor;
}

.sapMSltInformation {
	background: @sapUiFieldBackground;
	border-color: @sapUiHighlight;
}

/* ------------------------------ */
/* 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;
	-ms-user-select: none;
	line-height: 2.375rem;
	color: @sapUiFieldTextColor;
	font-style: normal;
	font-size: @sapMFontMediumSize;
}

.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: @sapUiContentIconColor;

	/* prevent IE to focus the icon (non-focusable element) */
	pointer-events: none;
}

.sapMSltAutoAdjustedWidth .sapMSltIcon {
	position: relative;
}

/* pressed */

.sapMSltPressed > .sapMSltIcon {
	color: @sapUiContentContrastIconColor;
}

/* ------------------------------ */
/* arrow                          */
/* ------------------------------ */

/* TODO remove after 1.62 version */
html[data-sap-ui-browser^="ie"] .sapMSltWithArrow .sapMSltArrow {
	pointer-events: none;
}

html[data-sap-ui-browser^="ed"] .sapMSltWithArrow .sapMSltArrow {
	pointer-events: auto;
}

.sapMSltArrow {
	position: absolute;
	text-align: center;
	width: 2.5rem;
	line-height: 2.5rem;
	top: 0;
	right: 0;
	color: @sapUiContentIconColor;
}

.sapMSltArrow::before {
	font-family: "SAP-icons";
	speak: none;
	content: "\e1ef";
}

/* hover */

.sapMSltHoverable:not(.sapMSltPressed):hover > .sapMSltArrow {
	background: @sapUiButtonLiteHoverBackground;
}

/* 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                  */
/* ------------------------------ */

.sapUiTableCell .sapMSlt,
.sapUiSizeCondensed .sapUiTableCell .sapMSlt,
.sapUiSizeCompact .sapUiTableCell .sapMSlt {
	margin: 0;
}

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

/* ---------------------------------------- */
/* 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: @sapUiContentContrastIconColor;
}

.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: @sapUiButtonLiteHoverBorderColor;
	background: @sapUiButtonLiteHoverBackground;
}

.sapMHeader-CTX .sapMSltIconOnly:not(.sapMSltPressed),
.sapMSubHeader-CTX .sapMSltIconOnly:not(.sapMSltPressed) {
	border-color: @sapUiButtonLiteBorderColor;
	background-color: @sapUiButtonLiteBackground;
}

/* ------------------------------ */
/* icon                           */
/* ------------------------------ */

.sapMSubHeader-CTX .sapMSltPressed > .sapMSltIcon {
	color: @sapUiContentContrastIconColor;
}

/* ====================================================== */
/* Select inside a Bar: footer context                    */
/* ====================================================== */

.sapMFooter-CTX .sapMSltIconOnly.sapMSltHoverable:not(.sapMSltPressed):hover {
	background: @sapUiButtonFooterHoverBackground;
	border-color: @sapUiButtonLiteBorderColor;
}

/* ------------------------------ */
/* icon                           */
/* ------------------------------ */

.sapMFooter-CTX .sapMSltIconOnly {
	background: @sapUiButtonLiteBackground;
	border-color: @sapUiButtonLiteBorderColor;
}

/* ------------------------------ */
/* label                          */
/* ------------------------------ */

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

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

/* ------------------------------ */
/* picker                         */
/* ------------------------------ */

div.sapMSltPicker {
	border: none;
	box-shadow: @sapUiShadowLevel1;
}

/* ------------------------------ */
/* dialog                         */
/* ------------------------------ */

div.sapMSltPicker .sapMDialogScrollCont {
	padding: 0;
}

/* ================================================================================== */
/* 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 .sapMSltLabel,
.sapUiSizeCompact .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: @sapUiFieldHoverBorderColor;
}

/* ------------------------------ */
/* commons styles                 */
/* ------------------------------ */

.sapUiSizeCondensed .sapUiTableCell .sapMSltLabelState,
.sapUiSizeCondensed .sapUiTableCell .sapMSltArrowState {
	line-height: 1.25rem;
}