react-toolbox/components/table/theme.css

@import '../colors.css';
@import '../variables.css';

:root {
  --table-font-size: calc(1.3 * var(--unit));
  --table-header-font-size: calc(1.2 * var(--unit));
  --table-header-sort-icon-size: calc(1.6 * var(--unit));
  --table-header-color: color(#000 a(54%));
  --table-header-sorted-color: color(#000 a(87%));
  --table-header-sorted-icon-hover-color: color(#000 a(26%));
  --table-dividers: 1px solid #e6e6e6;
  --table-row-color: color(#000 a(87%));
  --table-hover-color: #eee;
  --table-selection-color: #f5f5f5;
  --table-row-height: calc(4.8 * var(--unit));
  --table-column-spacing: calc(3.6 * var(--unit));
  --table-column-padding: calc(var(--table-column-spacing) / 2);
  --table-cell-padding: calc(2.4 * var(--unit));
  --table-cell-top: calc(var(--table-cell-padding) / 2);
}

.table {
  background-color: var(--color-white);
  border-collapse: collapse;
  font-size: var(--table-font-size);
  width: 100%;

  @apply --reset;
}

.table > head,
.head {
  padding-bottom: calc(0.3 * var(--unit));
  white-space: nowrap;
}

.table > tbody > tr,
.row {
  color: var(--table-row-color);
  height: var(--table-row-height);
  transition-duration: 0.28s;
  transition-property: background-color;
  transition-timing-function: var(--animation-curve-default);

  &:hover,
  &.selected:hover { background-color: var(--table-hover-color); }
  &.selected { background-color: var(--table-selection-color); }
}

/* common styles for all kinds of cells */
.table > thead > tr > th,
.table > tbody > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.rowCell,
.headCell {
  border-bottom: var(--table-dividers);
  height: var(--table-row-height);
  padding: 0 var(--table-column-padding) 12px var(--table-column-padding);
  text-align: left;

  &:first-of-type { padding-left: 24px; }
  &:last-of-type { padding-right: 24px; }
  &.numeric { text-align: right; }

  &.checkboxCell {
    padding-right: 5px;
    width: calc(1.8 * var(--unit));
  }
}

/* styles for both header and normal body cells */
.table > tbody > tr > th,
.table > tbody > tr > td,
.rowCell {
  border-top: var(--table-dividers);
  padding-top: var(--table-cell-top);
  vertical-align: middle;

  &.checkboxCell {
    & > * {
      margin: 0;
    }
  }
}

/* styles for header cells both in body and header */
.table > thead > tr > th,
.table > tbody > tr > th,
.headCell {
  color: var(--table-header-color);
  font-size: var(--table-header-font-size);
  font-weight: 500;
  height: var(--table-row-height);
  line-height: calc(2.4 * var(--unit));
  text-overflow: ellipsis;
}

/* styles for all cells in header */
.table > thead > tr > th,
.table > thead > tr > td,
.headCell {
  padding-bottom: 8px;
  vertical-align: bottom;

  &.checkboxCell {
    & > * {
      margin: 0 0 3px;
    }
  }

  &.sorted {
    color: var(--table-header-sorted-color);
    cursor: pointer;

    &:hover .sortIcon {
      color: var(--table-header-sorted-icon-hover-color);
    }
  }
}

.sortIcon {
  display: inline-block;
  font-size: calc(1.6 * var(--unit));
  margin-right: 3px;
  transition: 0.28s transform var(--animation-curve-default);
  vertical-align: sub;

  &.asc {
    transform: rotate(180deg);
  }
}