notifications-admin/app/assets/stylesheets/components/table.scss

.table {
  margin-bottom: govuk-spacing(6);
  width: 100%;
}

.table-heading {
  text-align: left;
  margin: govuk-spacing(3) 0 govuk-spacing(3) 0;
}

.dashboard-table {

  .heading-medium {
    margin-bottom: 5px;
  }

  .table {
    table-layout: fixed;
  }

  .table-field-headings {
    th {
      font-size: 1px;
    }
  }

  .table-field-headings-visible {
    th {
      padding-bottom: 5px;
    }
  }

  .table-field-heading-first {
    width: 52.5%;
  }

  .table-row {
    th {
      display: table-cell;
      width: 52.5%;
      font-weight: normal;

      .hint,
      p {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }

  .big-number-label {
    padding-bottom: 0;
  }

}

.template-statistics-table {

  .table {
    table-layout: fixed;
  }

  .table-heading {
    @include core-19;
    margin: 0 0 10px 0;
  }

  .table-field-heading-first {
    width: 52.5%;
  }

  .table-row {
    th {
      display: table-cell;
      width: 52.5%;
      font-weight: normal;

      .hint,
      p {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }

  &-template-name {

    @include bold-24;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 10px 0 32px 0;
    margin: -10px 0 -32px 0;

    &:focus {

      color: $text-colour;

      & + .template-statistics-table-hint {
        color: $text-colour;
      }

    }

  }

  &-hint {
    @include core-19;
    color: $secondary-text-colour;
    pointer-events: none;
  }

}

.settings-table {

  table {
    table-layout: fixed;
    margin-bottom: govuk-spacing(1);
  }

  th {

    &:first-child {
      width: 35%;  // 33.33% + fudge
    }

    &:last-child {
      width: 17.5%  // 16.67% + fudge
    }

  }

  td.table-field-left-aligned {

    &:first-child {

      div {
        white-space: normal;
      }

    }

    div {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    ul li {
      margin-bottom: 5px;
    }

  }

  .table-heading {
    margin-bottom: 20px;
  }

}

.usage-table {

  .table-field-heading-first {
    width: 35%;  // 33.33% + fudge
  }

  .table-row {
    th {
      width: 17.5%  // 16.67% + fudge
    }
  }

}

%table-field,
.table-field {

  vertical-align: top;

  &:last-child {
    padding-right: 0;
  }

  &-error {

    border-left: 5px solid $error-colour;
    padding-left: 7px;
    display: block;

    &-label {
      display: block;
      color: $error-colour;
      font-weight: bold;
    }

  }

  &-invisible-error {
    border-left: 5px solid transparent;
    padding-left: 7px;
    display: block;
  }

  &-status {

    &-default {
      color: $secondary-text-colour;
    }

    &-error {

      color: $error-colour;
      font-weight: bold;

      .status-hint {
        display: block;
        font-weight: normal;
        color: $red;
        margin-top: 5px;
      }

    }

    &-sent-international {

      .status-hint {
        display: block;
        font-weight: normal;
        margin-top: 5px;
      }

    }

    &-yes,
    &-no {
      display: block;
      text-indent: -999em;
      background-size: 19px 19px;
      background-repeat: no-repeat;
      background-position: 50% 50%;
    }

    &-yes {
      background-image: file-url('tick.png');
    }

  }

  &-noborder {
    border: 0px;
  }

  &-index {

    @include bold-16;
    width: 15px;

    a {

      &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
      }

      &:focus {

        box-shadow: none;

        &:before {
          background: $govuk-focus-colour;
          box-shadow: inset 0 -4px 0 0 $govuk-focus-text-colour;
          z-index: -1;
        }

      }

    }
  }

  p {
    margin: 0 0 5px 0;
  }

}

.table-font-xsmall td.table-field-index {  // overrides GOV.UK Elements
  @include bold-16;
}


.table-field-headings {

  th {
    padding: 1px; /* needs some height for the grey border to show */
  }

}

.table-field-headings-visible {

  height: auto;

  th {
    padding: .75em 1.25em .5625em 0;
  }

}

.table-field-headings,
.table-field-headings-visible {

  th {
    @include bold-19;
  }

  .dashboard-table &-first {
    width: 52.5%;
  }

}

.table-field-heading {

  &:last-child {
    padding-right: 0;
  }

  &-right-aligned {
    display: block;
    text-align: right;
  }

}

.table-field-right-aligned {

  @extend %table-field;
  text-align: right;

  a {

    display: block;
    position: relative;

    /* remove default focus styles in favour of those for :before pseudo class */
    &:focus {
      box-shadow: none;
    }

    &:before {
      content: "";
      display: block;

      position: absolute;

      top: -1 * govuk-spacing(3);
      right: 0;
      bottom: -1 * govuk-spacing(3) + 4px;
      left: -1 * govuk-spacing(3);

      background: transparent;
    }

    &:active:before,
    &:focus:before {
      box-shadow: inset 0px -4px $govuk-focus-text-colour, inset 0px 15px $govuk-focus-colour, inset 15px 0px $govuk-focus-colour, inset 0px -11px $govuk-focus-colour;
    }

  }

}


.table-row-group {
  border-top: 1px solid $border-colour;
  border-bottom: 1px solid $border-colour;
}

.table-empty-message,
td.table-empty-message {
  @include core-19;
  color: $secondary-text-colour;
  border-bottom: 1px solid $border-colour;
  padding: 20px 0 20px 0;
}

.table-show-more-link {

  @include core-16;
  color: $secondary-text-colour;
  margin-bottom: govuk-spacing(7);
  border-bottom: 1px solid $border-colour;
  padding: 35px 0 10px 0;
  text-align: center;

  .table + & {
    margin-top: -1 * govuk-spacing(6);
  }

}

a.table-show-more-link {
  color: $link-colour;
}

.table-no-data {
  @include core-16;
  color: $secondary-text-colour;
  margin-top: 10px;
  margin-bottom: govuk-spacing(7);
  border-top: 1px solid $border-colour;
  border-bottom: 1px solid $border-colour;
  padding: 0.75em 0 0.5625em 0;
}

.wide-left-hand-column {
  display: block;
  max-width: 560px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.truncate-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}