mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-06-30 04:10:31 -04:00
a9f79bcf07
The first column of a table is a heading, and will always be 50% wide. It makes the table harder to scan when the information in the first column breaks onto multiple lines, and introduces uneven whitespace in the table. This commit adds some CSS to force things in the first column to only ever be one line. If they are too long to fit, they get truncated with an ellipsis (`…`)
148 lines
2.0 KiB
SCSS
148 lines
2.0 KiB
SCSS
.table {
|
|
margin-bottom: $gutter;
|
|
width: 100%;
|
|
table-layout: fixed;
|
|
}
|
|
|
|
.table-heading {
|
|
text-align: left;
|
|
margin: 40px 0 $gutter-half 0;
|
|
}
|
|
|
|
.table-field-headings {
|
|
th {
|
|
padding: 0 0 5px 0;
|
|
}
|
|
}
|
|
|
|
.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-heading {
|
|
|
|
&-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;
|
|
}
|