ministryofjustice/Claim-for-Crown-Court-Defence

View on GitHub
app/webpack/stylesheets/components/_table.scss

Summary

Maintainability
Test Coverage
// stylelint-disable max-nesting-depth, selector-class-pattern, selector-no-qualifying-type

tr {
  &.error.injection-error {
    border-left: 5px solid $govuk-error-colour;
    color: inherit;

    td {
      padding-top: $govuk-gutter;

      .error-message-container {
        position: relative;
        padding-left: $gutter-half;
      }

      .error-message {
        position: absolute;
        top: -$govuk-gutter;
        width: 320px;
        color: $govuk-error-colour;
        text-align: left;
      }
    }
  }

  &.injection-warning {
    border-left: 5px solid govuk-colour("orange");

    td {
      padding-top: $govuk-gutter;

      .warning-message-container {
        position: relative;
      }

      .warning-message {
        position: absolute;
        top: -$govuk-gutter;
        width: 320px;
        color: govuk-colour("orange");
        text-align: left;
      }
    }
  }
}

.mobile-sort {
  display: none;
}

.app-table--responsive {
  @include govuk-media-query($until: desktop, $media-type: screen) {
    tr {
      display: block;
      margin-bottom: $gutter-one-third;
      border-bottom: 3px solid govuk-colour("light-grey");

      .govuk-table__header:last-child,
      .govuk-table__cell:last-child,
      th,
      td {
        display: block;
        padding: $gutter-half;
        border-bottom: 1px solid govuk-colour("light-grey");
        text-align: right;

        br {
          display: none;
        }
      }

      &.mobile-sort {
        @include govuk-clearfix;
        display: inline-block;
        width: govuk-grid-widths('full');

        background-color: govuk-colour("white");
        vertical-align: inherit;

        th {
          text-align: left;

          a {
            display: inline-block;
            margin: $gutter-one-sixth $gutter-half - 3;
          }
        }
      }
    }

    tbody tr td:first-child {
      background-color: $govuk-border-colour;
      font-weight: 700;

      a {
        display: block;
      }
    }

    thead {
      display: none;
    }

    tbody tr:nth-child(odd),
    tbody tr:nth-child(even) {
      background-color: none;
    }

    th::before,
    td::before {
      content: attr(data-label);
      float: left;
      font-weight: 700;
      text-transform: uppercase;
    }

    .unique-id-small {
      display: none;
    }

    .state {
      display: inline;
    }
  }
}

// DataTables
.dt-container {
  .dt-search {
    float: none;
    text-align: left;
  }

  .dt-search,
  .dt-length {
    .dt-input {
      padding: govuk-spacing(1);
      border: $govuk-border-width-form-element solid $govuk-input-border-colour;
      border-radius: 0;
    }
  }

  .dt-info {
    float: right;
  }

  .select-item {
    margin-left: govuk-spacing(3);
    font-weight: bold;
  }

  .dt-paging {
    padding-top: 0;
    float: right;

    button.dt-paging-button {
      font-family: inherit;
      font-size: inherit;

      &.current {
        border: 1px solid transparent;
        background: none;
        font-weight: bold;
      }
    }
  }

  .dt-processing {
    margin-top: govuk-spacing(3);
  }
}

table.dataTable {
  border-collapse: collapse;

  &.no-footer {
    border-bottom: none;
  }

  &.expenses-data-table {
    margin-bottom: govuk-spacing(6);

    .govuk-table__header--numeric,
    .govuk-table__cell--numeric {
      text-align: right;
    }
  }
}

.app-jq-datatable {
  thead th {
    vertical-align: middle;
  }
}

td.active {
  background: govuk-colour("light-grey");
  text-align: center;
}