notifications-admin/app/assets/stylesheets/views/dashboard.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;

      // This simulates a 50% column in a govuk grid on smaller screens
      // govuk grid columns go to 100% width on smaller screens
      width: 100%;

      // This simulates a 50% column in a govuk grid on larger screens
      // as with govuk grid, this includes a gap between columns to ensure the contents
      // are separated by a space
      @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
    }

    & > .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);
}