3scale/porta

// WARNING: this is just a magic value, I do not know why it works
$table-columns-width: line-height-times(11);
$search-header-width: line-height-times(4);

table:not(.pf-c-table) {
  background-color: $body-background;
  width: 100%;

  .search th {
    height: line-height-times(3);
    vertical-align: middle;
  }

  td,
  th {
    height: line-height-times(2);
    padding: line-height-times(1/2, true) line-height-times(1/2) line-height-times(1/2) 0;
    vertical-align: top;
  }


  .title {
    max-width: line-height-times(5);
  }

  .operations:not(.pf-c-table__action),
  td.action {
    padding-right: 0;
    text-align: right;
  }
}

th.header {
  border-bottom: solid 1px $border-color;
  color: $label-color;
  font-variant: small-caps;

  padding-top: line-height-times(1.3/1.5);
  padding-top: line-height-times(2);
}

// TODO: seek and destroy .is-inline, .StatsMethodsTable

table:not(.pf-c-table) a.action,
table:not(.pf-c-table) button.action {
  margin: line-height-times(-1/4) 0 line-height-times(-1/4) line-height-times(1/4);
  white-space: nowrap;
  display: inline-block;
}

.u-fiveEqualColumns {
  td,
  th {
    width: 20%;
  }
}

.u-sixEqualColumns {
  td,
  th {
    width: 16.67%;
  }
}

table.list {
  td,
  th {
    border-bottom: $border-width solid $border-color;
    font-weight: $font-weight-normal;
  }

  .feature {
    td,
    th {
      &:last-child {
        padding-right: 0;
        text-align: right;
      }
    }
  }

  .action:last-child,
  input[type='submit']:last-child {
    clear: both;
    float: right;
    height: auto;
    line-height: $line-height-base;
    margin: 0 line-height-times(-1/2) 0 0;
  }

  border-collapse: collapse;
  border-color: transparent;
  margin-bottom: 0;
  margin-top: 0;
  width: 100%;

  th {
    border-bottom: $border-width solid $border-color;
    padding-right: line-height-times(1/2);
    text-align: left;
  }

  &.list-checkmarks tr th {
    word-break: break-word;
  }
}

table.mini {
  border: line-height-times(1) solid $white;
}

table.mini td {
  padding-right: line-height-times(1);
}

table.mini, table#configs {
  width: auto;
}

// --- components/tables.css ---

td.right {
  text-align: right;
}

table.payment_breakdown tr.total_cost th,
table.payment_breakdown tr.total_cost td {
  border-bottom: $border-width-lg solid $border-color;
  border-top: $border-width-lg solid $border-color;
  padding-bottom: line-height-times(1/4);
  padding-top: line-height-times(1/4);
}

table.payment_breakdown tr th {
  border-color: $border-color;
  border-width: $border-width;
}

table .select {
  min-width: line-height-times(1);
}

table.horizontal th {
  border-bottom: $border-width solid $border-color;
}

table.inverted th {
  font-weight: $font-weight-normal;
}

table.inverted td {
  font-weight: $font-weight-bold;
}

table#contracts_table {
  position: relative;
}

table#contracts_table ul.usage_limits {
  list-style: none;
  padding: 0;
}

table#contracts_table tr td.thhead {
  border-top-right-radius: line-height-times(1);
  margin: line-height-times(1/4);
  padding-right: 0;
  padding-top: 0;
}

table#mapping_rules {
  tr th a, tr td.actions a {
    display: inline-block;
  }

  tr td.actions a {
    margin-left: line-height-times(1/2);
  }
}

td.thhead h3 {
  margin-top: 0;
  padding-right: line-height-times(2/3);
  padding-top: line-height-times(1);
}

.u-amount {
  text-align: right;
}

// Overrides
table#mapping_rules .actions a.action.add {
  margin: line-height-times(-1/4) line-height-times(1 / 2);
}

td.metric,
td.pattern,
td.StatsMethodsTable-name {
  word-break: break-word;
}

.pf-c-table {
  // HACK: old tables that has a search form element get styled as a table-cell and it breaks the
  // total colspan. This rule makes sure the form is never visible and instead a "td" element fills
  // the colspan. Apparently this does not affect Chrome and Firefox.
  // TODO: this won't be necessary once all legacy tables have been upgraded with Patternfly.
  form.search {
    display: none;
  }

  tr.unread {
    td[data-label] a {
      font-weight: $font-weight-bold;
    }
  }
}