lucid-ui/src/components/DataTable/DataTable.less

A UI component library from AppNexus.

@import (reference) '../../styles/variables.less';
@import (reference) '../../styles/mixins.less';

.@{prefix}-DataTable-EmptyStateWrapper {
	&-has-fixed-header {
		height: 100%;
	}
}

.@{prefix}-DataTable {
	&.@{prefix}-DataTable-full-width {
		width: 100%;
	}

	&-fixed {
		height: 100%;
		display: flex;
		flex-direction: column;

		// The borders on a light table screw with size of the header and mess up
		// alignment for fixed table headers. This works, but an alternate approach
		// would be to add 1px transparent border to the trs in the body. Not sure
		// which is better so I'm starting with this.
		.@{prefix}-Table.@{prefix}-Table-has-light-header > .@{prefix}-Table-Thead {
			border: none;
		}
	}

	&-fixed-header {
		display: flex;
		flex-shrink: 0;

		// `border-box` ensures that padding and borders are included in the total
		// `width` of the element
		.@{prefix}-Table-Th {
			box-sizing: border-box;
		}

		&-fixed-columns {
			flex-shrink: 0;

			// Very high specifity to beat Table styles
			& > .@{prefix}-Table > .@{prefix}-Table-Thead > .@{prefix}-Table-Tr > .@{prefix}-Table-is-last-col.@{prefix}-Table-is-last-col {
				border-right: @border-table-header;
			}

			&-Table {
				table-layout: fixed;
			}
		}

		&-unfixed-columns {
			overflow-x: hidden;
			overflow-y: scroll;

			&-Table {
				table-layout: fixed;
				width: 100%;
			}
		}
	}

	&-fixed-body {
		display: flex;
		overflow: auto;

		.@{prefix}-Table-Td {
			// `border-box` ensures that padding and borders are included in the total
			// `width` of the element
			box-sizing: border-box;
		}

		&-fixed-columns {
			overflow-x: scroll;
			overflow-y: hidden;
			flex-shrink: 0;

			&-Table {
				table-layout: fixed;
			}
		}

		&-unfixed-columns {
			overflow: scroll;

			&-Table {
				table-layout: fixed;
				width: 100%;

				// Very high specifity to beat Table styles
				&.@{prefix}-Table > .@{prefix}-Table-Tbody > .@{prefix}-Table-Tr.@{prefix}-Table-is-active > .@{prefix}-Table-Td.@{prefix}-Table-is-first-single::after,
				&.@{prefix}-Table > .@{prefix}-Table-Tbody > .@{prefix}-Table-Tr.@{prefix}-Table-is-actionable:not(.@{prefix}-Table-is-active):hover > .@{prefix}-Table-Td.@{prefix}-Table-is-first-single::after {
					display: none;
				}

				&.@{prefix}-Table > .@{prefix}-Table-Tbody > .@{prefix}-Table-Tr {
					// place hidden marker on first cell
					.selectFirstCellOnRow({ .left-marker(0); });

					// show marker on hover
					&:hover {
						.selectFirstCellOnRow({ .left-marker(0); });
					}
				}
			}
		}
	}
}

// Select the first 1-height cell on the current body row and apply the given styles
.selectFirstCellOnRow(@ruleset) {
	& > .@{prefix}-Table-Td {
		&.@{prefix}-Table-is-first-single {
			@ruleset();
			> .@{prefix}-Checkbox {
				vertical-align: middle;
			}
		}
	}
}