superdesk/superdesk-client-core

//
// Tables.scss
// Tables for, you guessed it, tabular data
// ----------------------------------------

// BASELINE STYLES
// ---------------

.table  {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  background-color: $tableBackground;
  margin-block-end: $baseLineHeight;
  // Cells
  th,
  td {
    padding: 8px;
    line-height: $baseLineHeight;
    text-align: start;
    vertical-align: top;
    border-block-start: 1px solid $tableBorder;
  }
  th {
    font-weight: bold;
  }
  // Bottom align for column headings
  thead th {
    vertical-align: bottom;
  }
  // Remove top border from thead by default
  colgroup + thead tr:first-child th,
  colgroup + thead tr:first-child td,
  thead:first-child tr:first-child th,
  thead:first-child tr:first-child td {
    border-block-start: 0;
  }
  // Account for multiple tbody instances
  tbody + tbody {
    border-block-start: 2px solid $tableBorder;
  }
  // LAST FIELD BLANK, FULL WIDTH
  .blank-field { 
      width: 100%; 
  }
}



// CONDENSED TABLE W/ HALF PADDING
// -------------------------------

.table-condensed {
  th,
  td {
    padding: 4px 5px;
  }
}


// BORDERED VERSION
// ----------------

.table-bordered {
  border: 1px solid $tableBorder;
  border-inline-start: 0;
  border-collapse: separate; // Done so we can round those corners!
  *border-collapse: collapsed; // IE7 can't round corners anyway
  @include border-radius(4px);
  th,
  td {
    border-inline-start: 1px solid $tableBorder;
  }
  // Prevent a double border
  thead:first-child tr:first-child th,
  tbody:first-child tr:first-child th,
  tbody:first-child tr:first-child td {
    border-block-start: 0;
  }
  // For first th or td in the first row in the first thead or tbody
  thead:first-child tr:first-child th:first-child,
  tbody:first-child tr:first-child td:first-child {
    @include border-radius(4px 0 0 0);
  }
  thead:first-child tr:first-child th:last-child,
  tbody:first-child tr:first-child td:last-child {
    @include border-radius(0 4px 0 0);
  }
  // For first th or td in the first row in the first thead or tbody
  thead:last-child tr:last-child th:first-child,
  tbody:last-child tr:last-child td:first-child {
    @include border-radius(0 0 0 4px);
  }
  thead:last-child tr:last-child th:last-child,
  tbody:last-child tr:last-child td:last-child {
    @include border-radius(0 0 4px 0);
  }
}


// ZEBRA-STRIPING
// --------------

// Default zebra-stripe styles (alternating gray and transparent backgrounds)
.table-striped {
  tbody {
    tr:nth-child(odd) td,
    tr:nth-child(odd) th {
      background-color: $tableBackgroundAccent;
    }
  }
}


// HOVER EFFECT
// ------------
// Placed here since it has to come after the potential zebra striping
.table {
  tbody tr:hover td,
  tbody tr:hover th {
    background-color: $tableBackgroundHover;
  }
}


// STYLED TABLE
// ------------
.table.styled-table {
    border-block-start: 2px solid var(--sd-colour-line--medium);
    th, td {
        vertical-align: middle;
        background: var(--sd-item__main-Bg);
        &.align-right {
            text-align: end;
        }
    }
    th {
        font-size: 14px;
        font-weight: 500;
        padding: 11px;
        color: var(--color-text);
    }
}

// FIXED HEADER STYLE
// ---------------
.table--fixed-header {
  thead th {
    position: sticky;
    inset-block-start: 0;
  }
  tbody {
      max-height: calc(100vh - 250px);
      overflow: auto;
      overflow-x: hidden;
  }
  th, td {
      min-width: 80px;
  }
}