@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;
}

html[data-sap-ui-browser='ie11'] .sapMListTbl,
html[data-sap-ui-browser^='ed'] .sapMListTbl {
	padding: 1px; /* outline must be visible */
}

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

.sapMListTbl .sapMTableTH:focus,
.sapMListTbl td:focus {
	outline: none;
}

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

.sapMListTblHeaderNone {
	height: 0;
}

.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;
}

.sapMListTbl .sapMLabel {
	word-wrap: normal;
}

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

.sapMListTblNone {
	display: none;
}

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

.sapMListTblUnreadCol {
	width: 1.74rem;
}

.sapMListTblSubCnt {
	display: block;
}

.sapMListTblSubCntRow {
	overflow : hidden;
}

.sapMListTblSubCntSpr,
.sapMListTblSubCntHdr,
.sapMListTblSubCntVal {
	display: inline-block;
	vertical-align: top;
}

.sapMListTblSubCntValBlock {
	display: block;
}

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

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

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

.sapMListTblHighlightCell {
	padding: 0;
	position: relative;
	overflow: hidden;
}

html[data-sap-ui-browser='ie11'] .sapMListTblHighlightCell > .sapMLIBHighlight {
	height: 40rem; /* IE11 cannot stretch the height of the cell content */
}

/* responsive table approach */
@media screen and (max-width: 1119px) {
	.sapMListTblCell.sapMSize-xxlarge{
		display: none;
	}
}

@media screen and (max-width: 1023px) {
	.sapMListTblCell.sapMSize-desktop{
		display: none;
	}
}

@media screen and (max-width: 959px) {
	.sapMListTblCell.sapMSize-xlarge{
		display: none;
	}
}

@media screen and (max-width: 767px) {
	.sapMListTblCell.sapMSize-large{
		display: none;
	}
}

@media screen and (max-width: 599px) {
	.sapMListTblCell.sapMSize-tablet{
		display: none;
	}
}

@media screen and (max-width: 559px) {
	.sapMListTblCell.sapMSize-medium{
		display: none;
	}
}

@media screen and (max-width: 479px) {
	.sapMListTblCell.sapMSize-small{
		display: none;
	}
}

@media screen and (max-width: 319px) {
	.sapMListTblCell.sapMSize-xsmall{
		display: none;
	}
}

@media screen and (max-width: 239px) {
	.sapMListTblCell.sapMSize-xxsmall,
	.sapMListTblCell.sapMSize-phone{
		display: none;
	}
}

/* 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 .sapMText,
.sapMListTbl .sapMLabel {
	font-size: @sapUiListTableTextSize;
	color: @sapUiListTextColor;
	font-weight: normal;
}

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

.sapMListTblCell {
	padding: .875rem .5rem;
	vertical-align: top;
	font-size: @sapUiListTableTextSize;
}

/* Ensuring that the row height is not smaller that 3rem in Cozy mode */
.sapMListTblRow {
	height: 3rem;
}

.sapMListTblCell.sapMListTblCellNoData {
	font-size: 1rem;
	padding-top: .75rem;
	padding-bottom: .75rem;
	line-height: 1.6;
	border-bottom: 1px solid @sapUiListBorderColor;
}

.sapMListTblNone:first-child + .sapMListTblCell {
	padding-left: 1rem;
}

.sapMListTblCell.sapMListTblCellNoData,
.sapMListTblCell:nth-last-child(2) {
	padding-right: 1rem;
}

.sapMListTblHasNav .sapMListTblCell:nth-last-child(2) {
	padding-right: 0;
}

.sapMListTblSelCol,
.sapMListTblHasNav .sapMListTblNavCol {
	width: 3rem;
}

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

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

.sapMListModeMultiSelect .sapMListTblSubCnt,
.sapMListModeSingleSelectLeft .sapMListTblSubCnt {
	padding-left: 3rem;
}

/* table column header */
.sapMListTblHeader > .sapMTableTH {
	background: @sapUiListHeaderBackground;
	border-bottom: 1px solid @sapUiListBorderColor;
	background-clip: padding-box;
	vertical-align: middle;
}

/* sticky headerToolbar, infoToolbar and column headers */
.sapMSticky .sapMTableTH {
	position: sticky;
	position: -webkit-sticky;
	z-index: 1;
}

/* .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 */
.sapMSticky4 .sapMTableTH,
.sapMSticky5 > .sapMListHdr,
.sapMSticky6 > .sapMListInfoTBarContainer,
.sapMSticky7 > .sapMListHdr {
	top: 0;
}

/* top: 2rem sticky conditions */
.sapMSticky6 .sapMTableTH {
	top: 2rem;
}

/* top: 3rem sticky conditions */
.sapMSticky5 .sapMTableTH,
.sapMSticky7 > .sapMListInfoTBarContainer {
	top: 3rem;
}

/* top: 5rem conditions */
.sapMSticky7 .sapMTableTH {
	top: 5rem;
}

/* to make the focus outline visible on the all sides */
.sapMSticky > .sapMListTbl {
	padding: 1px 1px 0 1px;
}

/* sticky headerToolbar/headerText background color when toolbar is transparent */
.sapMSticky > .sapMTB-Transparent-CTX,
.sapMSticky > .sapMListHdrText {
	background: @sapUiListHeaderBackground;
}

/* busyIndicator should not overlapped by the sticky elements */
.sapMSticky > .sapUiLocalBusyIndicator {
	z-index: 3;
}

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

/* make the focus outline border visible on all sides of the column header row */
.sapMSticky .sapMListTblHeader:focus {
	outline-offset: 0;
}

/* table footer */
.sapMListTblFooter > td {
	border-top: 1px solid @sapUiListTableFooterBorder;
}

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

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

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

/* overwite cell style */
.sapUiSizeCompact .sapMListTblCell {
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
	vertical-align: middle;
}

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

/* overwrite text control styles */
.sapUiSizeCompact .sapMListTblCell > .sapMLnk,
.sapUiSizeCompact .sapMListTblCell > .sapMText,
.sapUiSizeCompact .sapMListTblCell > .sapMLabel,
.sapUiSizeCompact .sapMListTblCell > .sapMObjectNumber {
	vertical-align: middle;
	line-height: 1.4;
}

/* special class name to add margin to multiline contents */
.sapUiSizeCompact .sapMTableContentMargin {
	margin: .5rem 0;
}

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

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

.sapUiSizeCompact .sapMListTblSelCol,
.sapUiSizeCompact .sapMListTblHasNav .sapMListTblNavCol {
	width: 2rem;
}

.sapUiSizeCompact .sapMListTblHasNav .sapMListTblNavCol:last-child,
.sapUiSizeCompact .sapMListTblSelCol:last-child {
	width: 2.5rem;
}

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

/* overwrite padding if Navigation is present, to align header and cell content */
.sapUiSizeCompact .sapMListTblHasNav .sapMListTblCell:nth-last-child(2) {
	padding-right: 0;
}

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