mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-07-17 21:20:32 -04:00
cc04a924d0
When the list of areas is restricted to half the width of the page it starts to look pretty higgledy-piggledy when you have lots of areas or areas with very long names. To do this I’ve ripped out the table markup in favour of headings, paragraphs and lists. Probably pros and cons for each, but it was really hard to do the layout with the content in a table.
135 lines
2.5 KiB
SCSS
135 lines
2.5 KiB
SCSS
.dashboard {
|
|
|
|
th {
|
|
font-weight: normal;
|
|
}
|
|
|
|
> .heading-medium:first-of-type {
|
|
margin-top: govuk-spacing(3);
|
|
}
|
|
|
|
}
|
|
|
|
.keyline-block {
|
|
border-top: 1px solid $border-colour;
|
|
padding-top: govuk-spacing(3);
|
|
}
|
|
|
|
.spark-bar {
|
|
|
|
@include core-16;
|
|
box-sizing: border-box;
|
|
display: block;
|
|
width: 100%;
|
|
margin-bottom: govuk-spacing(3);
|
|
height: govuk-spacing(3);
|
|
color: $text-colour;
|
|
text-align: left;
|
|
|
|
&-bar {
|
|
@include bold-27($tabular-numbers: true);
|
|
box-sizing: border-box;
|
|
display: inline-block;
|
|
overflow: visible;
|
|
background: $panel-colour;
|
|
color: $black;
|
|
padding: 10px 6px 8px 0;
|
|
text-indent: 12px;
|
|
text-align: right;
|
|
margin: 2px 0 1px 0;
|
|
transition: width 0.6s ease-in-out;
|
|
}
|
|
|
|
}
|
|
|
|
.file-list {
|
|
|
|
&-filename {
|
|
@include bold-19;
|
|
display: block;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
padding-bottom: 30px;
|
|
padding-top: 10px;
|
|
margin-bottom: -30px;
|
|
margin-top: -10px;
|
|
}
|
|
|
|
&-filename-large {
|
|
@include bold-24;
|
|
display: block;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
padding-bottom: 30px;
|
|
padding-top: 10px;
|
|
margin-bottom: -30px;
|
|
margin-top: -10px;
|
|
}
|
|
|
|
&-filename-unlinked {
|
|
@include core-19;
|
|
}
|
|
|
|
&-hint {
|
|
@include core-16;
|
|
display: block;
|
|
color: $secondary-text-colour;
|
|
pointer-events: none;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
max-width: 580px;
|
|
}
|
|
|
|
&-hint-large {
|
|
@include core-19;
|
|
display: block;
|
|
color: $secondary-text-colour;
|
|
pointer-events: none;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
max-width: 580px;
|
|
}
|
|
|
|
&-status {
|
|
text-align: right;
|
|
}
|
|
|
|
}
|
|
|
|
/* The focus state for sibling links overlaps the hint so the hint's text colour needs to adapt */
|
|
.govuk-link:focus {
|
|
&.file-list-filename,
|
|
&.file-list-filename-large,
|
|
& + .file-list-hint,
|
|
& + .file-list-hint-large {
|
|
/* link needs non-static position to overlap the cell border, hint so it isn't overlapped itself */
|
|
position: relative;
|
|
}
|
|
|
|
&.file-list-filename,
|
|
&.file-list-filename-large {
|
|
/* override box-shadow to push underline down a bit */
|
|
box-shadow: 0 -2px $govuk-focus-colour, 0 5px $govuk-focus-text-colour;
|
|
}
|
|
|
|
& + .file-list-hint,
|
|
& + .file-list-hint-large {
|
|
color: $govuk-focus-text-colour;
|
|
}
|
|
|
|
}
|
|
|
|
.failure-highlight {
|
|
@include bold-19;
|
|
color: $error-colour;
|
|
}
|
|
|
|
.align-with-message-body {
|
|
display: block;
|
|
margin-top: govuk-spacing(5);
|
|
}
|