mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-08-20 14:29:51 -04:00
9d32316a67
Using `width` doesn't work for flex-items with flex-grow set above 0 because they will expand to fill the space, whatever its value. The intention for this line was always to constrain how much these ones can grow to half the space minus the gap between. `max-width`, which is still honored by flex-items with `flex-grow` above 0, meaning they will expand up to that size.
200 lines
4.4 KiB
SCSS
200 lines
4.4 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 {
|
|
|
|
// for file-lists with section-like content and a single item
|
|
&--sectioned {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
text-align: justify; // fallback for browsers that don't support flexbox
|
|
justify-content: space-between;
|
|
|
|
// note: first-child of a section should be a heading
|
|
& > :first-child,
|
|
& > .area-list {
|
|
width: 100%;
|
|
}
|
|
|
|
& > .file-list-hint-large,
|
|
& > .file-list-status {
|
|
// fallback for browsers that don't support flexbox - let `text-align: justify` on parent
|
|
// and making children inline mimic `justify-content: space-between`
|
|
display: inline-block;
|
|
|
|
// simulate govuk-grid-column-one-half spacing - smaller screens
|
|
width: 100%;
|
|
flex-grow: 1;
|
|
|
|
// simulate govuk-grid-column-one-half spacing - larger screens
|
|
@include govuk-media-query($from: tablet) {
|
|
max-width: calc(50% - #{$govuk-gutter-half});
|
|
}
|
|
}
|
|
|
|
& > .file-list-status {
|
|
overflow: hidden; // old IE hack to make it vertically line up with the hint
|
|
margin-bottom: 0; // cancel margin-bottom from .govuk-hint class
|
|
|
|
@include govuk-media-query($from: tablet) {
|
|
margin-bottom: 10px; // match margin-bottom on hint
|
|
}
|
|
}
|
|
|
|
& > .file-list-hint-large {
|
|
text-align: left; // reset for text-align fallback on parent
|
|
}
|
|
}
|
|
|
|
&-hint,
|
|
&-hint-large,
|
|
&-status {
|
|
pointer-events: none; // delegate clicks to the overlapping link
|
|
position: relative; // make non-static to sit above the overlapping focus style
|
|
}
|
|
|
|
&-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-large-no-hint {
|
|
padding-bottom: 0;
|
|
padding-top: 5px;
|
|
margin-bottom: 0;
|
|
margin-top: 5px;
|
|
overflow: visible; // don't cut off thicker underline
|
|
}
|
|
|
|
&-filename-unlinked {
|
|
@include core-19;
|
|
}
|
|
|
|
&-hint {
|
|
@include core-16;
|
|
display: block;
|
|
color: $secondary-text-colour;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
max-width: 580px;
|
|
}
|
|
|
|
&-hint-large {
|
|
@include core-19;
|
|
display: block;
|
|
color: $secondary-text-colour;
|
|
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 {
|
|
/* override box-shadow to push underline down a bit */
|
|
box-shadow: 0 -2px $govuk-focus-colour, 0 5px $govuk-focus-text-colour;
|
|
|
|
// File-list items contained by keyline-blocks have more spacing at the top so adapt to cover it
|
|
.keyline-block > .file-list & {
|
|
box-shadow: 0 -5px $govuk-focus-colour, 0 5px $govuk-focus-text-colour;
|
|
}
|
|
}
|
|
|
|
& + .file-list-hint,
|
|
& + .file-list-hint-large {
|
|
color: $govuk-focus-text-colour;
|
|
}
|
|
|
|
}
|
|
|
|
// Note: this selector should use the :has() pseudo-class in the future when it is supported
|
|
// which will remove the need for JS
|
|
.file-list .js-child-has-focus {
|
|
|
|
& + .file-list-hint-large,
|
|
& ~ .file-list-status {
|
|
color: $govuk-focus-text-colour;
|
|
}
|
|
|
|
}
|
|
|
|
.failure-highlight {
|
|
@include bold-19;
|
|
color: $error-colour;
|
|
}
|
|
|
|
.align-with-message-body {
|
|
display: block;
|
|
margin-top: govuk-spacing(5);
|
|
}
|