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

OpenUI5 UI Library sap.m

/* ============================= */
/* CSS for control sap.m/Select  */
/* High Contrast Black theme     */
/* ============================= */

/* ------------------------------ */
/* field                          */
/* ------------------------------ */

.sapMSlt.sapMSltIconOnly {
	border-radius: 0.365rem;
}

/* hover and focus */

.sapMSlt:focus:not(.sapMSltPressed):not(.sapMSltIconOnly) {
	outline: 0.125rem dotted @sapUiContentFocusColor;
	outline-offset: -0.1875rem;
}

html.sap-desktop .sapMSlt:not(.sapMSltIconOnly):not(.sapMSltDisabled):focus,
.sapMSltHoverable:not(.sapMSltIconOnly):hover {
	border-color: @sapUiFieldHoverBorderColor;
}

/* FIX: IE and Edge do not support css outline-offset */

html[data-sap-ui-browser^="ie"].sap-desktop,
html[data-sap-ui-browser^="ed"].sap-desktop {
	.sapMSlt:focus:not(.sapMSltPressed) {
		outline: none;
		position: relative;
	}

	.sapMSlt:focus:not(.sapMSltDisabled):not(.sapMSltPressed)::before {
		content: "";
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		border: 0.125rem dashed @sapUiContentFocusColor;
	}
}

/* FIX: In FF bottom outline-offset is not working as expected when Select is in sap.m.Bar and is left-aligned */

html[data-sap-ui-browser^="ff"] .sapMBar .sapMSlt:focus {
		line-height: 0;
}

/* icon only hover and focus */

.sapMSlt.sapMSltIconOnly.sapMSltHoverable:hover {
	background: @sapUiButtonLiteHoverBackground;
}

.sapMSlt.sapMSltIconOnly:focus.sapMSltHoverable:hover {
	background: @sapUiButtonLiteHoverBackground;
	border-color: transparent;
}

/* FIX: IE and Edge do not support css outline-offset */

html[data-sap-ui-browser^="ie"].sap-desktop,
html[data-sap-ui-browser^="ed"].sap-desktop {

	.sapMSlt:focus.sapMSltIconOnly:not(.sapMSltExpanded) {
		outline:          none;
		position:         relative;
	}

	.sapMSlt:focus.sapMSltIconOnly:not(.sapMSltExpanded):before {
		content: "";
		box-sizing:       border-box;
		width:            100%;
		height:           100%;
		position:         absolute;
		left:             0;
		top:              0;
		border:           0.125rem dashed @sapUiContentFocusColor;
	}
}

/* pressed */

html.sap-desktop .sapMSltPressed.sapMSltIconOnly:not(.sapMSltDisabled) {
	border-color: transparent;
}

/* pressed and hover */

.sapMSltIconOnly.sapMSltPressed.sapMSltHoverable:hover {
	background: @sapUiToggleButtonPressedHoverBackground;
	border-color: transparent;
}

/* value state */

.sapMSltWarning,
.sapMSltError {
	border-style: dashed;
}

/* disabled */

.sapMSltDisabled {
	background: @sapUiHcReducedBackground;
	border-color: @sapUiHcReducedForeground;
	color: @sapUiContentDisabledTextColor;
}

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

/* value state */

.sapMSltLabelWarning,
.sapMSltLabelError {
	font-style: italic;
}

.sapMSltLabelError {
	font-weight: bold;
}

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

/* hover */

.sapMSltHoverable:not(.sapMSltPressed):hover > .sapMSltArrow {
	border-left: 0.0625rem solid @sapUiFieldHoverBorderColor;
}

/* pressed */

.sapMSltPressed > .sapMSltArrow {
	border-left: 0.0625rem solid @sapUiFieldActiveBorderColor;
}

/* ====================================================== */
/* Select inside a Bar: all contexts                      */
/* ====================================================== */

/* focus: Select IconOnly in all contexts get dotted outline */

html.sap-desktop .sapMBar-CTX .sapMSltIconOnly:focus:not(.sapMSltPressed):not(.sapMSltExpanded),
html.sap-desktop .sapMSltIconOnly:focus:not(.sapMSltPressed):not(.sapMSltExpanded) {
	outline: 0.125rem dotted @sapUiContentFocusColor;
	outline-offset: -0.125rem;
	border-color: transparent;
}

/* hover: Select IconOnly in all contexts */

html.sap-desktop .sapMHeader-CTX .sapMSltIconOnly:hover:not(.sapMSltPressed):not(.sapMTSSlt),
html.sap-desktop .sapMSubHeader-CTX .sapMSltIconOnly:hover:not(.sapMSltPressed):not(.sapMTSSlt),
html.sap-desktop .sapMFooter-CTX .sapMSltIconOnly:hover:not(.sapMSltPressed):not(.sapMTSSlt),
html.sap-desktop .sapMSltIconOnly:hover:not(.sapMSltPressed):not(.sapMTSSlt) {
	color: @sapUiContentIconColor;
	background-color: @sapUiButtonLiteHoverBackground;
}