@c8y/style/styles/_tables.less

Styles for Cumulocity IoT applications

table {
  background-color: @component-background-default;
}

caption {
  padding-top: @table-cell-padding-default;
  padding-bottom: @table-cell-padding-default;
  color: @component-color-text-muted;
  text-align: left;
}

th {
  text-align: left;
}

// Baseline styles
.table {
  clear: both;
  margin-bottom: @line-height-computed;
  max-width: 100%;
  width: 100%;

  .card & {
    margin-bottom: 0;
  }
  > thead,
  > tbody,
  > tfoot {
    > tr{
      > th,
      > td {
        border-top: 1px solid @component-border-color;
        vertical-align: top;
        line-height: @line-height-base;
        label {
          margin: 0;
          &.c8y-checkbox,
          &.c8y-radio {
            line-height: 1.6;
          }
        }
      }
      > th {
        padding: 10px @margin-8;
      }
      > td {
        padding: @table-cell-padding-default @margin-8;
        min-height: 48px;
      }
    }
    > tr.expanded-row {
      > td {
        border-top: 0;
      }
    }
  } 
  // Bottom align for column headings
  // no top border on cells inside the first row on body when there's a thead
  thead + tbody tr:first-child{
    > td, > th {
      border-top: 0;
    }
  }

  > thead > tr > th {
    border-top: 0;
    border-bottom: 0;
    box-shadow: inset 0 -2px 0 @component-border-color;
    vertical-align: bottom;
  }
  > caption + thead,
  > colgroup + thead,
  > thead:first-child {
    > tr:first-child {
      > th,
      > td {
        color: @component-form-label-color;
        vertical-align: bottom;
        text-transform: uppercase;
        font-size: 12px;
        line-height: 20px;
        [class^='dlt-c8y-icon-'],
        [class*=' dlt-c8y-icon-'] {
          font-size: 14px;
        }
      }
    }
  } // Account for multiple tbody instances
  > tbody + tbody {
    border-top: 2px solid @component-border-color;
  } // Nesting
  .table {
    background-color: transparent;
  } // Column widths
  > thead > tr > th {
    &.fixed {
      width: 1px;
      white-space: nowrap;
    }
    &.text-truncate {
      display: table-cell;
      overflow: hidden;
      max-width: 1px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    &.auto-grow {
      min-width: 150px;

      overflow-wrap: break-word;
    }
  }
  > tbody > tr > td {
    &.fixed {
      white-space: nowrap;
    }

    &.text-truncate {
      display: table-cell;
      overflow: hidden;
      max-width: 1px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    &.auto-grow {
      min-width: 150px;

      overflow-wrap: break-word;
    }
  }
}

// Condensed table w/ half padding
.table-condensed {
  > thead,
  > tbody,
  > tfoot {
    > tr {
      > td {
        padding: calc(@table-cell-padding-condensed - 1px) @table-cell-padding-condensed;
        font-size: 12px;
        > c8y-device-status-display {
          display: block;
          height: 12px;
        }
      }
      > th {
        padding: @table-cell-padding-condensed;
        font-size: 10px !important;
      }
    }
  }
}

// Bordered version
// Add borders all around the table and between all the columns.
.table-bordered {
  border: 1px solid @component-border-color;
  > thead,
  > tbody,
  > tfoot {
    > tr {
      > th,
      > td {
        border: 1px solid @component-border-color;
      }
    }
  }
  > thead > tr {
    > th,
    > td {
      border-bottom-width: 2px;
    }
  }
}

// Zebra-striping
// Default zebra-stripe styles (alternating gray and transparent backgrounds)
.table-striped {
  > tbody > tr:not(.even):not(.odd):not(.expanded-row):nth-of-type(odd),
  > tbody > tr.odd{
    background: @component-background-odd;
    + tr.expanded-row {
      background: @component-background-odd;
    }
  }
  > tbody > tr.even{
    background: @component-background-default;
  }
}

// Hover effect
// Placed here since it has to come after the potential zebra striping
.table-hover {
  > tbody > tr:hover {
    background: @component-background-hover;
  }
}

// Custom table header underline color
.table-header-branding-line {
  > thead > tr > th {
    border-bottom-width: 1px;
    border-bottom-color: @component-border-color;
  }
  > tbody:first-child > tr > td {
    border-top-width: 1px;
    border-top-color: @component-border-color;
  }
}

// Table cell sizing
// Reset default table behavior
table col[class*='col-'] {
  position: static; // Prevent border hiding in Firefox and IE9-11 (see https://github.com/twbs/bootstrap/issues/11623)
  display: table-column;
  float: none;
}

table {
  td,
  th {
    &[class*='col-'] {
      position: static; // Prevent border hiding in Firefox and IE9-11 (see https://github.com/twbs/bootstrap/issues/11623)
      display: table-cell;
      float: none;
    }
  }
}

// Table backgrounds
// Exact selectors below required to override `.table-striped` and prevent inheritance to nested tables.
// Generate the contextual variants
.table-row-variant(active;
@component-background-active);
.table-row-variant(success;
@state-success-bg);
.table-row-variant(info;
@state-info-bg);
.table-row-variant(warning;
@state-warning-bg);
.table-row-variant(danger;
@state-danger-bg);
// Responsive tables
// Wrap your tables in `.table-responsive` and we'll make them mobile friendly
// by enabling horizontal scrolling. Only applies <768px. Everything above that will display normally.
.table-responsive {
  overflow-x: auto;
  min-height: 0.01%; // Workaround for IE9 bug (see https://github.com/twbs/bootstrap/issues/14837)

  &.full-page {
    overflow-y: auto;
    max-height: calc(~'100vh - 145px');
    @media (min-width: @screen-sm-min) {
      max-height: calc(~'100vh - 256px');
    }
  }
  @media screen and (max-width: @screen-xs-max) {
    overflow-y: hidden;
    margin-bottom: calc(@line-height-computed * 0.75);
    width: 100%;
    border: 1px solid @component-border-color; // Tighten up spacing

    -ms-overflow-style: -ms-autohiding-scrollbar;
    > .table {
      margin-bottom: 0; // Ensure the content doesn't wrap
      > thead,
      > tbody,
      > tfoot {
        > tr {
          > th,
          > td {
            overflow: hidden;
            max-width: @screen-xs-max;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    } // Special overrides for the bordered tables
    > .table-bordered {
      border: 0; // Nuke the appropriate borders so that the parent can handle them
      > thead,
      > tbody,
      > tfoot {
        > tr {
          > th:first-child,
          > td:first-child {
            border-left: 0;
          }
          > th:last-child,
          > td:last-child {
            border-right: 0;
          }
        }
      } // Only nuke the last row's bottom-border in `tbody` and `tfoot` since
      // chances are there will be only one `tr` in a `thead` and that would
      // remove the border altogether.
      > tbody,
      > tfoot {
        > tr:last-child {
          > th,
          > td {
            border-bottom: 0;
          }
        }
      }
    }
  }
}

.table-borderless td,
.table-borderless tr,
.table-borderless th {
  border: 0 !important;
}

.table-vertical-middle * {
  vertical-align: middle !important;
}

.table-cell-truncate {
  position: relative;
}

.table-cell-truncate .truncated-cell-content {
  position: absolute;
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table-fixed {
  table-layout: fixed;
  th,
  td {
    word-break: break-all;
  }
}

.table-header-sticky {
  th {
    position: sticky;
    background-color: @component-background-default;
  }
}

.table-permissions {
  > tbody:nth-child(odd) {
    background-color: @component-background-odd;
  }
}

.c8y-table-responsive {
  thead {
    display: none;
  }
  > tbody > tr {
    border-bottom: 1px solid @component-border-color;
    > td,
    > th {
      display: block;
      padding: 6px 10px;
      border: 0;
      &:before {
        display: inline-block;
        padding-right: 10px;
        min-width: 20%;
        content: attr(data-label);
        text-transform: uppercase;
        font-weight: bold;
        font-size: 10px;
      }
    }
  }
  @media (min-width: @screen-sm-min) {
    thead {
      display: table-header-group;
    }
    > tbody > tr:not(.expanded-row) {
      border: 0;
      > td,
      > th {
        display: table-cell;
        border-top: 1px solid @component-border-color;
        &:before {
          display: none;
        }
      }
    }
  }
}