mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-02-05 10:53:28 -05:00
39e94ac8ec
When a table is showing the contents of a CSV file, it should look something like a spreadsheet. The minimally skeuomorphic way to do this is by adding row numbers. This commit doesn’t - make the row numbers monospace (it’s barely noticeable and doesn’t reflect what actual spreadsheets do) - make the first column heading ‘Row’ (again, doesn’t reflect how actual spreadsheets work, and takes up more valuable space)
120 lines
1.6 KiB
SCSS
120 lines
1.6 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;
|
|
}
|
|
|
|
}
|
|
|
|
.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;
|
|
border-bottom: 1px solid $border-colour;
|
|
padding-bottom: 10px;
|
|
text-align: center;
|
|
}
|
|
|
|
a.table-show-more-link {
|
|
@include bold-16;
|
|
color: $link-colour;
|
|
}
|