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

OpenUI5 UI Library sap.m

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

.sapMListTblRow.sapMListTblRowTop > td {
	vertical-align: top;
}

/* Adapt padding for vAlign="Middle" according to UX vAlign specs */
.sapMListTblRow.sapMListTblRowMiddle > td {
	vertical-align: middle;
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
}

.sapMListTblRow.sapMListTblRowBottom > td {
	vertical-align: bottom;
}

.sapMListBGTransparent .sapMListTblSubRow {
	background: fade(@sapUiListBackground, 0%);
}

.sapMListTblSubRow {
	background: @sapUiListBackground;
}

/* adding alternating rows background color */
/* alternating rows color for Table without popin */
.sapMListTblAlternateRowColors > :nth-child(even),
.sapMListTblAlternateRowColorsGrouped > .sapMListTblRowAlternate,
.sapMListTblAlternateRowColorsGrouped > .sapMListTblRowAlternate + .sapMListTblSubRow {
	background-color: darken(@sapUiListBackground, 2);
}

/* alternating rows color for Table with popins (main row "sapMListTblRow") */
.sapMListTblAlternateRowColorsPopin > :nth-child(4n-1) {
	background-color: darken(@sapUiListBackground, 2);
}

/* alternating rows color for popin rows (popin row "sapMListTblSubRow") */
.sapMListTblAlternateRowColorsPopin > :nth-child(4n) {
	background-color: darken(@sapUiListBackground, 2);
}

.sapMLIBHoverable:hover + .sapMListTblSubRow {
	background : @sapUiListHoverBackground;
}

.sapMLIBSelected + .sapMListTblSubRow,
.sapMLIBSelected.sapMListTblRowAlternate + .sapMListTblSubRow {
	background: @sapUiListSelectionBackgroundColor;
}

.sapMLIB.sapMLIBActive + .sapMListTblSubRow {
	color: @sapUiListActiveTextColor;
	background: @sapUiListActiveBackground;
}

.sapMLIBHoverable.sapMLIBSelected:hover + .sapMListTblSubRow {
	background : @sapUiListSelectionHoverBackground;
}

.sapMLIBHoverable.sapMLIBSelected.sapMLIBActive:hover + .sapMListTblSubRow {
	background: @sapUiListActiveBackground;
}

/* table popin */
.sapMListTblSubCnt {
	padding: .5rem 1rem;
	box-sizing: border-box;
}

.sapMListTblSubCntRow{
	padding-bottom: 0;
}

.sapMListTblSubCntSpr {
	font-size: @sapMFontMediumSize;
}

.sapMListTblSubCntRow + .sapMListTblSubCntRow {
	margin-top: .5rem;
}

.sapMListTblSubCntValBlock {
	margin-top: .25rem;
	display : block;
}

.sapMListTblSubCntValInline{
	display: inline-block;
}

.sapMListTblSubCntRow > .sapMListTblSubCntSpr,
.sapMListTblSubCntRow > .sapMListTblSubCntHdr .sapMText,
.sapMListTblSubCntRow > .sapMListTblSubCntHdr .sapMLabel {
	color: @sapUiContentLabelColor;
	padding-top: 0;
}

.sapMListTblSubCntRow > .sapMListTblSubCntVal .sapMText,
.sapMListTblSubCntRow > .sapMListTblSubCntVal .sapMLabel {
	color: @sapUiListTextColor;
	padding-top: 0;
}

.sapMListTblSubCntSpr {
	padding-right: .5rem;
}

 /* separators */
 .sapMLIBShowSeparator > td {
	border-top: 1px solid @sapUiListBorderColor;
}

.sapMListShowSeparatorsNone .sapMLIBShowSeparator > td,
.sapMListShowSeparatorsInner .sapMLIBShowSeparator:first-child > td {
	border-color: transparent;
}

.sapMListShowSeparatorsAll .sapMListTblSubRow:last-child > td,
.sapMListShowSeparatorsAll .sapMLIBShowSeparator:last-child > td {
	border-bottom: 1px solid @sapUiListBorderColor;
}

.sapMListShowSeparatorsAll .sapMLIBShowSeparator:last-child > td,
.sapMListShowSeparatorsAll .sapMListTblSubRow:last-child > td{
	border-bottom: 1px solid @sapUiListTableFooterBorder;
}

.sapMListShowSeparatorsInner .sapMLIBShowSeparator:last-child > td,
.sapMListShowSeparatorsInner .sapMListTblSubRow:last-child > td {
	border-bottom-color: transparent;
}

.sapMListShowSeparatorsNone .sapMListTblFooter > td{
	border-top-width: 2px;
}

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

/* decrease vertical popin paddings */
.sapUiSizeCompact .sapMListTblSubCnt {
	padding-top: .25rem;
	padding-bottom: .25rem;
}

/* popin padding */
.sapUiSizeCompact .sapMListModeMultiSelect .sapMListTblSubCnt,
.sapUiSizeCompact .sapMListModeSingleSelectLeft .sapMListTblSubCnt {
	padding-left: 2.5rem;
}