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

.table {
  margin-bottom: $gutter;
  width: 100%;
}

.table-heading {
  text-align: left;
  margin: 40px 0 $gutter-half 0;
}

.dashboard-table {

  .table {
    table-layout: fixed;
  }

  .table-field-headings,
  .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 {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }

}

%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;
    }

  }

  &-status {

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

    &-error {

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

      a {

        &:link,
        &:visited {
          color: $error-colour;
        }

      }

    }

    &-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');
    }

  }

  &-index {
    width: 15px;
  }

  &-date {
    white-space: nowrap;
  }

  p {
    margin: 0 0 5px 0;
  }

}

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

  th {
    @include bold-19;
  }

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

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

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

}

.table-field-right-aligned {
  @extend %table-field;
  text-align: right;
}

.table-empty-message {
  @include core-16;
  color: $secondary-text-colour;
  border-bottom: 1px solid $border-colour;
  padding: 0.75em 0 0.5625em 0;
}

.table-show-more-link {
  @include core-16;
  color: $secondary-text-colour;
  margin-top: -30px;
  margin-bottom: $gutter * 1.3333;
  border-bottom: 1px solid $border-colour;
  padding: 0.75em 0 0.5625em 0;
  text-align: center;
}

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