@openui5/sap.ui.core/src/sap/ui/core/themes/base/Icon.less

OpenUI5 Core Library sap.ui.core

/* ================================= */
/* CSS for control sap.ui.core/Icon  */
/* Base theme                        */
/* ================================= */

.sapUiIcon {
	cursor: default;
	text-align: center;
	display: inline-block;
	vertical-align: baseline;
	line-height: 1;
	position: relative;
}

.sapUiTableCell > .sapUiTableCellInner > .sapUiIcon,
.sapMListTblCell > .sapUiIcon {
	vertical-align: middle;
}

.sapUiIconPointer {
	cursor: pointer;
}

.sapUiIcon:focus {
	outline-width: var(--sapContent_FocusWidth);
	outline-style: var(--sapContent_FocusStyle);
	outline-color: var(--sapContent_FocusColor);
}

.sapUiIcon::before {
	content: attr(data-sap-ui-icon-content);
	speak: none;
	font-weight: normal;
	-webkit-font-smoothing: antialiased;
}

.sapUiIcon > .sapUiIconTitle {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}

/*
 * The mirroring of icon is done on the pesudo element and not the root DOM.
 * Because:
 *  1. All direction related css styles are flipped in RTL, for example padding-left
 *   is changed to padding right in RTL.
 *  2. The mirroring of an icon in RTL mode flips the css style again which results
 *   in the wrong direction.
 *  3. Custom CSS style should be set on the root DOM and not the pesudo element.
 */
html[dir='rtl'] .sapUiIconMirrorInRTL:not(.sapUiIconSuppressMirrorInRTL) {

	&::before,
	&::after /* some controls render the icon using 'after' pesudo element */ {
		transform: scale(-1, 1);
		display: inline-block; /* pesudo element has display: inline by default and can't apply the transform css style for RTL mode*/
	}
}

/**
 * The Default color and the semantic colors for Icon which always points to the variable across themes.
 */
.sapUiIconColorDefault {
	color: var(--sapContent_IconColor);
}

.sapUiIconColorContrast {
	color: var(--sapContent_ContrastIconColor);
}

.sapUiIconColorNeutral {
	color: var(--sapNeutralElementColor);
}

.sapUiIconColorCritical {
	color: var(--sapCriticalElementColor);
}

.sapUiIconColorPositive {
	color: var(--sapPositiveElementColor);
}

.sapUiIconColorNegative {
	color: var(--sapNegativeElementColor);
}

.sapUiIconColorNonInteractive {
	color: var(--sapContent_NonInteractiveIconColor);
}

.sapUiIconColorTile {
	color: var(--sapTile_IconColor);
}

.sapUiIconColorMarker {
	color: var(--sapContent_MarkerIconColor);
}

.sapUiIconBGColorDefault {
	color: var(--sapGroup_ContentBackground);
	background-color: var(--sapContent_IconColor);
}

.sapUiIconBGColorContrast {
	color: var(--sapContent_IconColor);
	background-color: var(--sapContent_ContrastIconColor);
}

.sapUiIconBGColorNeutral {
	color: var(--sapGroup_ContentBackground);
	background-color: var(--sapNeutralElementColor);
}

.sapUiIconBGColorCritical {
	color: var(--sapGroup_ContentBackground);
	background-color: var(--sapCriticalElementColor);
}

.sapUiIconBGColorPositive {
	color: var(--sapGroup_ContentBackground);
	background-color: var(--sapPositiveElementColor);
}

.sapUiIconBGColorNegative {
	color: var(--sapGroup_ContentBackground);
	background-color: var(--sapNegativeElementColor);
}

.sapUiIconBGColorNonInteractive {
	color: var(--sapGroup_ContentBackground);
	background-color: var(--sapContent_NonInteractiveIconColor);
}

.sapUiIconBGColorTile {
	color: var(--sapGroup_ContentBackground);
	background-color: var(--sapTile_IconColor);
}

.sapUiIconBGColorMarker {
	color: var(--sapGroup_ContentBackground);
	background-color: var(--sapContent_MarkerIconColor);
}