mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-07-23 17:39:13 -04:00
e282ca2109
Means you can see, for example emails that have failed. Means adding: - logic to generate links which can have a type parameter, a status parameter, or both - a ‘pill’ UI component for seeing which filters you currently have applied - some logic to change the page title based on which filters you have applied
125 lines
1.7 KiB
SCSS
125 lines
1.7 KiB
SCSS
.table {
|
|
margin-bottom: $gutter;
|
|
}
|
|
|
|
.table-heading {
|
|
text-align: left;
|
|
margin: 40px 0 5px 0;
|
|
}
|
|
|
|
.table-field-headings {
|
|
th {
|
|
padding: 0 0 5px 0;
|
|
}
|
|
}
|
|
|
|
%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;
|
|
}
|
|
|
|
p {
|
|
margin: 0 0 5px 0;
|
|
}
|
|
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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: -20px;
|
|
margin-bottom: $gutter * 1.5;
|
|
border-bottom: 1px solid $border-colour;
|
|
padding-bottom: 10px;
|
|
text-align: center;
|
|
}
|
|
|
|
a.table-show-more-link {
|
|
@include bold-16;
|
|
color: $link-colour;
|
|
}
|