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

OpenUI5 UI Library sap.m

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

.sapMListTbl {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	table-layout: fixed;
}

.sapMTableDisableClearAll {
	opacity: 0.3;
	pointer-events: none;
}

.sapMListTbl .sapMLIB {
	display: table-row;
}

.sapMListTblCellNoData {
	text-align: center;
	white-space: pre-wrap;
}

.sapMTablePopinColumn {
	border: 0;
	height: 0;
	padding: 0;
	overflow: hidden;
}

.sapMListTblHeaderNone {
	height: 0;
}

.sapMTableScreenReaderOnly,
.sapMListTblCellDup > .sapMListTblCellDupCnt {
	/* hide content visually but have it available for screen readers */
	position: absolute;
	clip: rect(0, 0, 0, 0);
	height: 0;
}

tr.sapMListTblHeaderNone > .sapMTableTH {
	border: 0;
	margin-top: 0;
	padding-top: 0;
	margin-bottom: 0;
	padding-bottom: 0;
}

.sapMListTblHeaderNone > .sapMListTblSelCol > .sapMCb,
.sapMListTblHeaderNone > .sapMListTblCell > * {
	display: none;
}

/**
 * For compatibility reasons text alignment should inherit from the table headers & cells.
 * Default value of textAlign property is Begin(not Initial) for the following controls
 * therefore they always set text-align as a style attribute in DOM, this blocks
 * alignment inheritance from the table headers & cells.
 */
.sapMColumnHeader > .sapMLabel,
.sapMColumnHeader > .sapMText,
.sapMListTblCell > .sapMSlt > .sapMSltLabel,
.sapMListTblCell > .sapMObjectNumber,
.sapMListTblCell > .sapMLabel,
.sapMListTblCell > .sapMText {
	text-align: inherit !important;
}

.sapMListTblCell {
	padding: .25rem .5rem;
	font-size: @sapUiListTableTextSize;
	overflow: hidden;
	overflow: clip;
}

.sapMListTblSelCol,
.sapMListTblCell,
.sapMListTblNavCol {
	vertical-align: middle;
}

.sapMListTblNavCol {
	width: 0;
	line-height: 3rem;
}

.sapMListTblUnreadCol {
	width: 1.74rem;
}

.sapMListTblSubCnt {
	display: block;
}

.sapMListTblSubCntRow {
	overflow: hidden;
}

.sapMListTblSubCntSpr,
.sapMListTblSubCntVal {
	display: inline-flex;
}

.sapMListTblSubCntValBlock {
	display: block;
}

.sapMListTblHighlightCol,
.sapMListTblNavigatedCol {
	width: 0;
	padding: 0;
}

.sapMListTblHighlightCol + .sapMListTblHeaderCell,
.sapMListTblHighlightCell + .sapMListTblCell {
	padding-left: 1rem;
}

.sapMListHighlight .sapMListTblHighlightCol {
	width: 0.375rem;
	min-width: 0.375rem;
}

.sapMListNavigated .sapMListTblNavigatedCol {
	width: 0.1875rem;
}

.sapMListTblHighlightCell,
.sapMListTblNavigatedCell {
	padding: 0;
	position: relative;
	overflow: visible;
}

/* mixin call for creating container content padding classes (arguments: rootContainer, contentSelector) */
.sapUiContainerContentPadding(~".sapMListTbl");

.sapMListTblNavCol,
.sapMListTblSelCol {
	padding: 0;
}

.sapMListTblUnreadCol {
	display: none;
}

.sapMListTbl {
	font-size: @sapUiListTableTextSize;
}

.sapMListTbl .sapUiIcon:not(.sapMLIBImgNav):not(.sapMBtnIcon):not(.sapFAvatarTypeIcon) {
	font-size: @sapUiListTableIconSize;
}

/* Ensuring that the row height is not smaller that 3rem in Cozy mode */
.sapMListTblRow {
	height: var(--sapElement_LineHeight);
	position: static; /* override the position: relative rule of the list item */
}

.sapMListTblCell.sapMListTblCellNoData {
	font-size: 1rem;
	padding-top: .75rem;
	padding-right: 1rem;
	padding-bottom: .75rem;
	border-bottom: 1px solid var(--sapList_BorderColor);

	&.sapMListTblCellNoIllustratedMessage {
		line-height: 1.6;
	}
}

.sapMListTblSelCol {
	width: 3rem;
}

.sapMListTblHasNav .sapMListTblNavCol {
	width: 2.5rem;
}

.sapMListTblActionsCol {
	padding: 0;
}

.sapMTable1ActionsCol {
	width: 2.75rem;
}

.sapMTable2ActionsCol {
	width: 5.125rem;
}

.sapMLIB.sapMListTblRow {
	border-bottom: 0;
}

.sapMListTblCell.sapMListTblCellDup {
	border-color: transparent;
}

/* table column header */
.sapMTableTH {
	background: var(--sapList_HeaderBackground);
	border-bottom: 1px solid var(--sapList_BorderColor);
	vertical-align: middle;
}

.sapMTableClearAll {
	cursor: pointer;
}

/* backgound-clip is required in other browsers, so that focus outline is visible on all sides of the header row */
.sapMSticky .sapMListTblHeader:focus > .sapMTableTH {
	background-clip: padding-box;
}

/* sticky headerToolbar, infoToolbar and column headers */
/* sapMTableTHead --> Workaround for Safari: sticky positioning on <tr> elements is not applied to children */
.sapMSticky .sapMListTblHeader,
.sapMSticky .sapMTableTHead {
	position: sticky;
}

/* sapMSticky15 is the result of sticky groupHeaders, headerToolbar, infoToolbar and column headers */
/* sapMSticky14 is the result of sticky groupHeaders, infoToolbar and column headers */
/* sapMSticky13 is the result of sticky groupHeaders, headerToolbar and column headers */
/* sapMSticky12 is the result of sticky groupHeaders and column headers */
/* sapMSticky11 is the result of sticky groupHeaders and headerToolbar and infoToolbar */
/* sapMSticky10 is the result of sticky groupHeaders and InfoToolbar */
/* sapMSticky9 is the result of sticky groupHeaders and headerToolbar */
/* .sapMSticky7 denotes that the headerToolbar, infoToolbar and column headers are sticky */
/* .sapMSticky6 denotes that the infoToolbar and column headers are sticky */
/* .sapMSticky5 denotes that the headerToolbar and column headers are sticky */
/* .sapMSticky4 denotes that only the column headers are sticky */
/* top: 0 sticky conditions : 1st sticky elements */
.sapMSticky4 .sapMListTblHeader,
.sapMSticky4 .sapMTableTHead,
.sapMSticky5 > .sapMListHdr,
.sapMSticky6 > .sapMListInfoTBarContainer,
.sapMSticky7 > .sapMListHdr,
.sapMSticky8 .sapMGHLI,
.sapMSticky9 > .sapMListHdr,
.sapMSticky10 > .sapMListInfoTBarContainer,
.sapMSticky11 > .sapMListHdr,
.sapMSticky12 .sapMListTblHeader,
.sapMSticky12 .sapMTableTHead,
.sapMSticky13 > .sapMListHdr,
.sapMSticky14 > .sapMListInfoTBarContainer,
.sapMSticky15 > .sapMListHdr {
	z-index: 3; /* allow controls to have own z-index: 1 */
	top: 0;
}

/* top: 2rem sticky conditions : 2nd sticky elements */
.sapMSticky6 .sapMListTblHeader,
.sapMSticky14 .sapMListTblHeader,
.sapMSticky6 .sapMTableTHead,
.sapMSticky14 .sapMTableTHead,
.sapMSticky10 .sapMGHLI {
	z-index: 3;
	top: 2rem;
}

/* top: 3rem sticky conditions : 2nd sticky elements */
.sapMSticky5 .sapMListTblHeader,
.sapMSticky5 .sapMTableTHead,
.sapMSticky7 > .sapMListInfoTBarContainer,
.sapMSticky9 .sapMGHLI,
.sapMSticky11 > .sapMListInfoTBarContainer,
.sapMSticky12 .sapMGHLI,
.sapMSticky13 .sapMListTblHeader,
.sapMSticky13 .sapMTableTHead,
.sapMSticky15 > .sapMListInfoTBarContainer {
	z-index: 3;
	top: var(--sapElement_LineHeight);
}

/* top: 5rem conditions : 3rd sticky elements */
.sapMSticky7 .sapMListTblHeader,
.sapMSticky7 .sapMTableTHead,
.sapMSticky11 .sapMGHLI,
.sapMSticky14 .sapMGHLI,
.sapMSticky15 .sapMListTblHeader {
	z-index: 3;
	top: ~"calc(var(--sapElement_LineHeight) + 2rem)";
}

.sapMSticky12 .sapMGHLI {
	top: ~"calc(var(--sapElement_LineHeight) + 2px)";
}

.sapMSticky13 .sapMGHLI {
	z-index: 3;
	top: ~"calc(var(--sapElement_LineHeight) * 2 + 2px)";
}

.sapMSticky14 .sapMGHLI {
	top: ~"calc(var(--sapElement_LineHeight) + 2rem + 2px)";
}

/* busyIndicator should not block the toolbars if <table> is set busy */
.sapMSticky > .sapMListTbl > .sapUiLocalBusyIndicator {
	z-index: 3;
}

.sapMSticky15 .sapMGHLI {
	z-index: 3;
	/* sapMListHdrTBar + sapMTB + sapMListTblRow + 2px */
	top:  ~"calc(var(--sapElement_LineHeight) + 2rem + var(--sapElement_LineHeight) + 2px)";
}

.sapMSticky15:has(.sapMPluginsColumnAIAction) .sapMGHLI {
	top: ~"calc(var(--sapElement_LineHeight) + 2rem + ( 0.875rem + 1rem + 1.625rem))";
}

.sapUiSizeCompact {

	.sapMTable1ActionsCol {
		width: 2.5rem;
	}

	.sapMTable2ActionsCol {
		width: 4.625rem;
	}

	& .sapMSticky12 .sapMGHLI {
		top: 2rem;

		/* only first child needs 1px more which prevents (tiny) double borders through stacking the following groupHeaders */
		&:first-child {
			top: 2rem + 0.0625rem;
		}
	}

	& .sapMSticky13 .sapMGHLI {
		top:  ~"calc(var(--sapElement_LineHeight) + 1.95rem)";
	}

	& .sapMSticky14 .sapMGHLI {
		top:  ~"calc(var(--sapElement_LineHeight) + 1.25rem)";
	}

	& .sapMSticky15 .sapMGHLI {
		top: ~"calc(var(--sapElement_LineHeight) * 2 + 1.2rem + 1px)";
	}

	& .sapMSticky15:has(.sapMPluginsColumnAIAction) .sapMGHLI {
		top: ~"calc(var(--sapElement_LineHeight) + 2rem + ( 0.5rem + 0.5rem + 1.625rem))";
	}
}


/* define outline for the block layer */
.sapMListTblCnt > .sapMTableOverlay:focus {
	outline: @_sap_m_ListItemBase_Focus_Outline;
	outline-offset: @_sap_m_ListItemBase_Focus_OffsetWithGap;
}

/* table footer */
.sapMListTblFooter > td {
	border-top: 1px solid var(--sapList_TableFooterBorder);
}

/* footer text should be bold */
.sapMListTblFooter .sapMText,
.sapMListTblFooter .sapMLabel {
	font-weight: bold;
}

.sapMListTblDummyCell {
	padding: 0;
}

.sapMTableLastColumn ~ .sapMListTblDummyCell {
	width: 0;
}

.sapMListTblDummyCell:last-child {
	background-color: var(--sapBackgroundColor);
	border-left: 1px solid var(--sapList_TableFooterBorder);
	border-bottom: none;
}

:not(.sapMListHasGrowing):not(.sapMListShowSeparatorsInner):not(.sapMListShowSeparatorsNone) > .sapMTableTBody .sapMListTblRow:last-child > .sapMListTblDummyCell:last-child {
	border-bottom: 1px solid var(--sapList_BorderColor);
}

.sapMListTblHeader > .sapMListTblDummyCell:last-child {
	background-color: var(--sapList_HeaderBackground);
}

.sapMListTblFooter > .sapMListTblDummyCell:last-child,
.sapMTableTBody > :not(:first-child) .sapMListTblDummyCell:last-child {
	border-top-color: transparent;
}

/* grid layout for popin row */
.sapMListTblSubCntGridSmall {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
	grid-column-gap: 1rem;
}

.sapMListTblSubCntGridLarge {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(26rem, 1fr));
	grid-column-gap: 1rem;
}

.sapMListTblSubCntGridSmall > .sapMListTblSubCntRow,
.sapMListTblSubCntGridLarge > .sapMListTblSubCntRow {
	margin-top: .5rem;
}

.sapMTableTH > .sapMLnk,
.sapMTableTH > .sapMText,
.sapMTableTH > .sapMLabel,
.sapMTableTH > .sapMObjectNumber {
	vertical-align: middle;
}

.sapMListTblCell > .sapMLnk {
	vertical-align: bottom;
}

/* Column header and column header content */
.sapMListTblCell.sapMListTblHeaderCell {
	padding: 0;
}

.sapMColumnHeader {
	display: flex;
	flex: 1 1 auto;
	padding: .875rem .5rem 1rem;
	align-items: center;
}

.sapMColumnHeaderText {
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: normal;
	font-size: @sapMFontMediumSize;
}

.sapMColumnHeaderIcons {
	white-space: nowrap;
}

.sapMColumnHeaderIcons > .sapUiIcon {
	padding-left: 0.375rem;
}

.sapMListTblHighlightCol + .sapMListTblCell.sapMListTblHeaderCell {
	padding-left: .5rem;
}

.sapMColumnHeaderActive:hover {
	background-color: var(--sapList_Hover_Background);
}

.sapMColumnHeaderActive:focus {
	outline: @_sap_m_ListItemBase_Focus_Outline;
	outline-offset: @_sap_m_ListItemBase_Focus_OffsetWithGap;
}

.sapMColumnHeaderActive:active {
	color: var(--sapList_Active_TextColor);
	background-color: var(--sapList_Active_Background);
	outline-color: var(--sapContent_ContrastFocusColor);
}

/* Allows truncation of text within children of a flex item. */
.sapMColumnHeaderContent {
	min-width: 0;
}

.sapMColumnHeaderActive:active > .sapMColumnHeaderContent {
	color: var(--sapList_Active_TextColor);
}

.sapMColumnHeaderActive, .sapMColumnHeaderActive > .sapMColumnHeaderContent {
	cursor: pointer;
}

.sapMTableTH:focus {
	outline: @_sap_m_ListItemBase_Focus_Outline;
	outline-offset: @_sap_m_ListItemBase_Focus_OffsetWithGap;
}

/* sort icons */
[aria-sort=ascending] > .sapMColumnHeader::after,
[aria-sort=descending] > .sapMColumnHeader::after {
	font-family: var(--sapContent_IconFontFamily);
	font-size: @sapMFontMediumSize;
	font-weight: normal;
	align-self: center;
	padding-left: 0.5rem;
	box-sizing: border-box;
}

[aria-sort=ascending] > .sapMColumnHeader::after {
	content: '\e1fd';
}

[aria-sort=descending] > .sapMColumnHeader::after {
	content: '\e1fc';
}

/* Focus border workaround for dummy column */
.sapMListTblDummyCell:last-child {
	pointer-events: none;
}

.sapMTableRowCustomFocus:focus {
	outline: none;

	.sapMListTblCell:not(.sapMListTblCellDup) > :first-child {
		position: relative;
	}

	& > :not(.sapMListTblDummyCell:last-child),
	& + .sapMListTblSubRow > .sapMListTblSubRowCell {
		position: relative;
	}

	& + .sapMListTblSubRow > td::before,
	& > :not(.sapMListTblDummyCell:last-child)::before {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		z-index: 1;
		pointer-events: none;
		top: 0px;
		bottom: 1px; /* mimics outline-offset: -1px */
		border-top: @_sap_m_ListItemBase_Focus_Outline;
		border-bottom: @_sap_m_ListItemBase_Focus_Outline;
		margin-right: 1px; /* make the focus border clearly visible on all sides */
	}

	.sapMListTblHasPopin > &:not(.sapMGHLI,.sapMListTblRowNoData) > ::before {
		border-bottom: 0;
		bottom: 0;
	}

	& + .sapMListTblSubRow > td::before {
		border-top: 0;
		top: 0;
	}

	& > .sapMTblFirstVisibleCell::before,
	& + .sapMListTblSubRow > .sapMTblFirstVisibleCell::before {
		border-left: @_sap_m_ListItemBase_Focus_Outline;
		margin-left: 1px !important; /* mimics outline-offset */
	}

	& > .sapMTblLastVisibleCell::before,
	& + .sapMListTblSubRow > .sapMTblLastVisibleCell::before {
		border-right: @_sap_m_ListItemBase_Focus_Outline;
		margin-right: 1px !important; /* mimics outline-offset */
	}
}

html[data-sap-ui-browser^='ff'] .sapMTableRowCustomFocus:focus > :not(.sapMListTblDummyCell)::before {
	margin-right: 0; /* firefox seems fine with rendering borders clearly without additional margin */
}

.sapMTablePopinHeaders {
	display: none;
}

/********** COMPACT DESIGN ************/

.sapUiSizeCompact .sapMListTblCell.sapMListTblCellNoData {
	font-size: @sapUiListTableTextSize;
}

/* special class name to add margin to multiline contents */
/* deprecated - kept for compatibility reasons, but apps should use sapUiTinyMarginTopBottom instead */
.sapUiSizeCompact .sapMTableContentMargin {
	margin: .5rem 0;
}

/* navigation and selection columns are in the middle */
.sapUiSizeCompact .sapMListTblNavCol,
.sapUiSizeCompact .sapMListTblSelCol {
	line-height: 2rem;
	text-align: center;
}

/* decrease the navigation icon size */
.sapUiSizeCompact .sapMListTblNavCol > .sapMLIBImgNav {
	width: auto;
}

.sapUiSizeCompact .sapMListTbl:not(.sapMListModeDelete) {

	.sapMListTblSelCol,
	.sapMListTblSelCol > .sapMLIBSelectM,
	.sapMListTblSelCol > .sapMLIBSelectS {
		width: 2rem;
	}
}

/* min height for the table rows */
.sapUiSizeCompact .sapMListTblRow {
	height: 2rem;
}

/* reset height of cells when no header is defined */
.sapMListTblHeaderNone > .sapMListTblCell {
	height: 0;
	padding-top: 0;
	padding-bottom: 0;
}

/* Column header and column header content */
.sapUiSizeCompact .sapMColumnHeader {
	padding-top: .5rem;
	padding-bottom: .5rem;
}

.sapUiSizeCompact .sapMListTblCell.sapMListTblHeaderCell {
	padding: 0;
}

.sapUiSizeCompact .sapMListTblHighlightCol + .sapMListTblCell.sapMListTblHeaderCell {
	padding-left: .5rem;
}