app/webpack/stylesheets/components/_table.scss
// 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;
}