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

OpenUI5 UI Library sap.m

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

.sapMLnk {
	color: var(--sapLinkColor);
	text-decoration: var(--sapLink_TextDecoration);
	display: inline-block;
	font-family: var(--sapFontFamily);
	font-size: @sapMFontMediumSize;
	cursor: pointer;
	-webkit-touch-callout: default;

	&:visited {
		color: var(--sapLink_Visited_Color);
	}

	&:not(.sapMLnkDsbl) {

		&:active {
			color: var(--sapLink_Active_Color);
			text-decoration: var(--sapLink_Active_TextDecoration);
		}
	}

	&:not(.sapMLnkWrapping) {
		display: inline-flex;
		align-items: baseline;

		.sapMLnkText {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.sapMLnkEndIcon {
			float: inline-end;
		}
	}
}

.sapMLnkIcon {
	float: inline-start;
	margin-inline-end: 0.125rem;
	cursor: pointer;
	align-self: center;
}

.sapMLnkEndIcon {
	margin-inline-start: 0.125rem;
	cursor: pointer;
	align-self: center;
}

html.sap-desktop .sapMLnk:not(.sapMLnkDsbl) {

	&:focus {
		outline: 1px dotted var(--sapContent_FocusColor);
		outline-offset: -1px;
		text-decoration: underline;
	}

	&:hover:not(:active):not(:focus) {
		color: var(--sapLink_Hover_Color);
		text-decoration: var(--sapLink_Hover_TextDecoration);
	}
}

.sapUiInverted-CTX .sapUiLnk {
	color: var(--sapLink_InvertedColor);
}

.sapMLnk.sapMLnkWrapping {
	white-space: normal;
	word-wrap: break-word;
}

.sapMLnk.sapMLinkContainsEmptyIdicator,
.sapMLnk.sapMLinkContainsEmptyIdicator > * {
	pointer-events: none;
	text-decoration: none;
}

.sapMLnkMaxWidth {
	max-width: 100%;
}

/* Link in sap.ui.table.* tables */

.sapUiTableCell .sapMLnk {
	vertical-align: middle;
}

.sapUiSizeCondensed .sapUiTableCell .sapMLnk {
	line-height: 1.5rem;
}

.sapUiHLayoutChildWrapper > .sapMLnk {
	vertical-align: text-bottom;
}

.sapMFT .sapMLnk,
.sapMFT .sapMTitle .sapMLnk {
	vertical-align: top;
}

/* Link focus offset and visualization in sap.ui.table.* tables */
html.sap-desktop .sapUiSizeCondensed .sapUiTableCell {
	.sapMLnk:focus:not(.sapMLnkDsbl) {
		outline-offset: -2.5px;
	}
	.sapMLnkText {
		padding-left: 2.5px;
		padding-right: 2.5px;
	}
}

.sapUiForm .sapMLnk {
	min-height: 1rem; /* do give empty links a size too. Keep the Form stable */
	vertical-align: top;
}

.sapUiFormEdit .sapMLnk {
	line-height: normal;
	margin-top: 1rem; /* don't use padding as this would stretch the focus outline */
	margin-bottom: 0.75rem; /* for some reason browser adds 4px, display: block would lead to stretched focus outline */
}

.sapUiFormToolbar .sapMTB .sapMLnk {
	line-height: normal;
	margin-top: auto;
	margin-bottom: auto;
}

.sapMLnkEmphasized {
	font-family: var(--sapFontBoldFamily);
}

.sapMLnk .sapMEmptyIndicator.sapMEmptyIndicatorAuto {
	display: none;
}

.sapMShowEmpty-CTX .sapMLnk .sapMEmptyIndicator.sapMEmptyIndicatorAuto {
	display: inline-block;
}

.sapMShowEmpty-CTX .sapMLnk .sapMEmptyIndicator.sapMEmptyIndicatorAuto,
.sapMLnk .sapMEmptyIndicator {
	color: var(--sapTextColor);
	opacity: 1;
}

.sapMListTblRow.sapMLIBActive .sapMLnk,
.sapMListTblSubRow.sapMLIBActive .sapMLnk,
.sapMLIB.sapMLIBActive .sapMLink {
	text-decoration: none;
	text-shadow: none;
 }

/* Compact size */
.sapUiSizeCompact .sapUiFormEdit .sapMLnk {
	margin-top: 0.5rem;
	margin-bottom: 0.25rem;
}

.sapMLnk:-webkit-any-link:focus {
	outline: none;
}