@spaced-out/ui-design-system/lib/components/Table/Table.module.css

Sense UI components library

@value (
  colorFillPrimary,
  colorFillSecondary,
  colorTextPrimary,
  colorTextSecondary,
  colorBorderPrimary,
  colorBorderSecondary,
  colorFillSecondary,
  colorBackgroundPrimary,
  colorBackgroundTertiary,
  colorGrayLightest
) from '../../styles/variables/_color.css';
@value (spaceNone, spaceXXSmall, spaceXSmall, spaceSmall, spaceMedium) from '../../styles/variables/_space.css';
@value (sizeFluid, size2, size48, size60, size240, size300) from '../../styles/variables/_size.css';
@value (borderWidthNone, borderWidthPrimary, borderRadiusNone, borderRadiusMedium, borderWidthSecondary) from '../../styles/variables/_border.css';
@value (fontLineHeight170) from '../../styles/variables/_font.css';
@value (elevationCard) from '../../styles/variables/_elevation.css';

@value tableRowTotalPadding: calc(spaceMedium * 2);

.fooBar {
  color: colorFillPrimary;
}

.tableContainer {
  --border-radius: borderRadiusMedium;
  --table-width: sizeFluid;
  composes: borderPrimary from '../../styles/border.module.css';
  width: sizeFluid;
  overflow-x: auto;
  border-radius: var(--border-radius);
}

.defaultTable {
  min-width: sizeFluid;
  height: fit-content;
  flex-flow: column;
  overflow-x: auto;
  border-collapse: collapse;
  box-sizing: border-box;
  border-radius: var(--border-radius);
  box-shadow: borderWidthNone borderWidthNone borderWidthNone borderWidthPrimary
    colorBorderPrimary;
  table-layout: fixed;
  white-space: nowrap;
}
.fullHeightTable {
  height: sizeFluid;
}
.defaultTableBody {
  flex-flow: column;
  border-radius: borderRadiusNone borderRadiusNone var(--border-radius)
    var(--border-radius);
  background: colorBackgroundTertiary;
}

.defaultSelectedBodyRow {
  background: colorFillSecondary;
}

.labelContents {
  display: flex;
  justify-content: space-between;
  flex: 1;
}
.labelContainer {
  align-items: center;
}

.defaultHeaderCellSortable.sorted .sortArrow {
  visibility: visible;
}

.defaultCell,
.defaultSingleCell,
.defaultDoubleCell {
  height: size48;
  align-items: center;
  padding: spaceNone spaceXSmall;
  background: colorBackgroundTertiary;
}

.defaultDoubleCell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.paddedTitleBlock {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.defaultSingleCell {
  /*used to retain bottom border on cell if content is full-bleed */
  padding-bottom: borderWidthPrimary;
}

.defaultHeadCell {
  composes: defaultCell;
  background: colorBackgroundPrimary;
}

.defaultDoubleCell {
  height: size60;
}

.singleContentCell {
  composes: defaultCell;
  padding: spaceNone spaceXSmall;
}
.doubleContentCell {
  composes: defaultDoubleCell;
  padding: spaceNone spaceXSmall;
}

.doubleTitle {
  margin: spaceNone;
}
.doubleSubtitle {
  display: block;
  height: fontLineHeight170;
}

.stickyHeaderCell,
.stickyCell {
  position: sticky;
  left: spaceNone;
  z-index: calc(elevationCard / 2);
}

.stickyHeaderCell::after,
.stickyCell::after {
  content: '';
  position: absolute;
  right: calc(borderWidthPrimary * -1);
  top: spaceNone;
  width: calc(size2 / 2);
  height: sizeFluid;
  background: colorBorderSecondary;
}

.stickyHeaderCell {
  background: colorBackgroundPrimary;
}

/**
  Row CSS
*/

.defaultRow {
  composes: borderBottomPrimary from '../../styles/border.module.css';
  height: size48;
  background: colorBackgroundTertiary;
}

.defaultTable .defaultRow:last-child td:first-child {
  border-bottom-left-radius: var(--border-radius);
}

.defaultTable .defaultRow:last-child td:last-child {
  border-bottom-right-radius: var(--border-radius);
}

.defaultTable .defaultRow:last-child {
  border-bottom: none;
}

.emptyRow {
  display: flex;
  width: calc(var(--table-width) - tableRowTotalPadding);
  position: sticky;
  left: spaceMedium;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
}

.defaultLoader {
  display: flex;
  align-items: center;
  justify-content: center;
  height: size240;
}

.defaultEmptyText {
  display: flex;
  align-items: center;
  justify-content: center;
  height: size240;
}

.checkbox {
  padding: spaceSmall spaceMedium spaceSmall spaceNone;
  max-width: size60;
}

.defaultTable td:first-child {
  padding-left: spaceMedium;
}

.defaultTable th:first-child {
  padding-left: spaceMedium;
}

/* Header CSS */

.defaultTableHead {
  flex-flow: column;
  border-radius: var(--border-radius) var(--border-radius) borderRadiusNone
    borderRadiusNone;
  composes: borderBottomPrimary from '../../styles/border.module.css';
  padding: spaceSmall;
}

.defaultHeaderRow {
  box-sizing: border-box;
  background: colorBackgroundPrimary;
  border-radius: var(--border-radius) var(--border-radius) borderRadiusNone
    borderRadiusNone;
}

.labelContents {
  display: flex;
  justify-content: flex-start;
  flex: 1;
  flex-direction: row;
  align-items: flex-start;
  padding: spaceNone;
  gap: spaceXXSmall;
}

.labelContainer {
  align-items: center;
}

.defaultHeaderCellSortable {
  cursor: pointer;
}

.defaultHeaderCell,
.defaultHeaderCellSortable {
  padding: spaceNone spaceXSmall;
  text-align: left;
  align-items: center;
}

.defaultHeaderCell:first-child {
  border-top-left-radius: var(--border-radius);
}

.defaultHeaderCell:last-child {
  border-top-right-radius: var(--border-radius);
}

.defaultHeaderCell:not(.selectedHeader):hover {
  background: colorGrayLightest;
}

.selectedHeader {
  color: colorTextPrimary;
  background: colorFillSecondary;
}

.sortArrow {
  color: colorTextSecondary;
}

.selectedSortArrow {
  color: colorTextPrimary;
}

.stickyHeader {
  position: sticky;
  top: spaceNone;
  z-index: elevationCard;
}

.stickyHeader::after {
  content: '';
  position: absolute;
  bottom: calc(borderWidthSecondary * -1);
  left: spaceNone;
  width: sizeFluid;
  height: calc(size2 / 2);
  background: colorBorderPrimary;
}