_tables.less

//
// Tables
// --------------------------------------------------

.config-map-table {
  .key, .truncated-content {
    font-family: @font-family-monospace;
  }
}

.data-toolbar, .table-toolbar {
  .vertical-divider {
    // Controls are stacked at mobile, so hide the divider.
    display: none;
  }
  @media (min-width: @screen-sm-min) {
    .vertical-divider {
      // @gray-light is too dark, and @gray-lighter is too light.
      // Choose another gray from the Patternfly palette.
      //   https://www.patternfly.org/styles/color-palette/
      border-left: 1px solid #bbbbbb;
      display: inline-block;
      height: 27px;
      margin: 0 7px;
      vertical-align: middle;
      width: 1px;
    }
  }
}

.events .data-toolbar {
  .form-group {
    margin-bottom: 0;
  }
  .search-pf {
    margin-bottom: 10px;
    width: 100%;
  }
  .sort-label {
    margin-right: 4px;
    vertical-align: -1px;
  }
  .sort-controls {
    display: inline-block;
  }
  @media (min-width: @screen-sm-min) {
    .filter-controls, .sort-group {
      // Inline controls at wider widths.
      display: inline-block;
    }
    .search-pf {
      margin-bottom: 0;
      width: 300px;
    }
  }
}

.events-table {
  .pficon {
    vertical-align: middle;
  }
  .severity-icon-td {
    padding-left: 0;
    padding-right: 0;
  }
  th#kind {
    width: 160px;
  }
  th#kind-name {
    width: 190px;
  }
  th#message {
    width: 100%;// ensures it gets remaining width
  }
  th#reason {
    width: 150px;
  }
  th#severity {
    padding:0;
    width:10px;
  }
  th#time {
    width: 90px;
  }
}

.table {
  background-color: #fff;
  &.key-value-table > tbody > tr > td {
    &.key {
      padding-right: 10px;
      vertical-align: top;
    }
    &.value {
      width: 100%;
      .truncated-content {
        white-space: pre;
      }
    }
  }
  &.table-bordered {
    > tbody, > thead {
      > tr > {
        td, th {
          border-left: 0;
          border-right: 0;
          padding-bottom: @table-cell-padding-bottom;
          padding-top: @table-cell-padding-top;
          vertical-align: middle;
        }
      }
    }
  }
  &.table-bordered-columns > {
    tbody, thead {
      > tr > {
        td, th {
          border-left: 1px solid @table-border-color;
          border-right: 1px solid @table-border-color;
        }
      }
    }
  }
  // use if you have long, unbroken strings in cells you need to wrap
  // you will probably want to use in conjunction with colgroup to size cols since this will make all cols equal size
  &.table-layout-fixed {
    table-layout: fixed;
    td {
      .word-break();
    }
  }
  > tbody + tbody {
    border-top-width: 1px;
  }
  th .pficon-help {
    color: #999;
    cursor: help;
    &:not(:first-child) {
      margin-left: 5px;
    }
  }
}

.table-borderless > tbody > tr > th,
.table-borderless > tfoot > tr > th,
.table-borderless > tbody > tr > td,
.table-borderless > thead > tr > td,
.table-borderless > tfoot > tr > td {
  border-top: none;
}

.table-filter-extension {
  background-color: #f9f9f9;
  border-left: 1px solid @table-border-color;
  border-right: 1px solid @table-border-color;
  border-top: 1px solid @table-border-color;
  padding: 5px 10px;
}

@media (max-width: @screen-xs-max) {
  .table-mobile {
    border-top-width: 0;
    // so that .word-break() will work
    table-layout: fixed;
    colgroup, col {
      display: none;
    }
    thead, tbody, th, td, tr {
      display: block;
    }
    thead tr {
      /* Hide table headers (but not display: none;, for accessibility) */
      .sr-only();
    }
    &.table-empty {
      border: 0;
      > tbody {
        > tr {
          > td {
            border: 0;
            padding-left: 0;
          }
        }
      }
    }
    > tbody {
      > tr {
        border-top: 2px solid @table-border-color;
        > td {
           /* Behave like a row */
          border: none;
          border-bottom: 1px solid lighten(@table-border-color, 5%);
          // prevent empty td from collapsing
          min-height:  (@table-cell-padding-top + @table-cell-padding-bottom) + (@line-height-base * @font-size-base);
          padding-left: 35%;
          position: relative;
          &:last-child {
            border-bottom: none;
          }
          &:before {
            /* Act as mobile table header */
            content: attr(data-title);
            position: absolute;
            top: 8px;
            left: 6px;
            width: 35%;
            padding-right: 10px;
            white-space: nowrap;
          }
        }
      }
    }
  }
}

.table-responsive {
  margin-bottom: @line-height-computed;
  &.scroll-shadows-horizontal {
    .scroll-shadows-horizontal-table();
    .table.table-bordered {
      border-left: 0;
      border-right: 0;
      td,
      th {
        &:first-child {
          border-left: 0;
        }
        &:last-child {
          border-right: 0;
        }
      }
    }
  }
  .table {
    margin-bottom: 0;
    &.table-bordered {
      > tbody, > thead {
        > tr:first-child {
          > td,
          > th {
            border-top: 0;
          }
        }
      }
    }
  }
}

.table-row-variant(disabled; @color-pf-black-150);

td[role="presentation"] {
  @media(max-width: @screen-xs-max) {
    // hide td[role="presentation"] at mobile
    display: none;
  }
  &.arrow:after {
    content: "\2192";
  }
}