Files
notifications-admin/app/assets/stylesheets/views/dashboard.scss
Tom Byers 32b2f617f1 Fix links to files in dashboard table
Includes fixes for the grey text they overlap,
when the adjacent link is focused.
2020-09-15 17:19:28 +01:00

131 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;
}
}
/* 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);
}