defra_ruby_template 3.15.0 → 5.4.0

data/vendor/assets/stylesheets/components/summary-list/_index.scss

@@ -6,21 +6,40 @@
       display: table;
       width: 100%;
       table-layout: fixed; // Required to allow us to wrap words that overflow.
+      border-collapse: collapse;
     }
     margin: 0; // Reset default user agent styles
     @include govuk-responsive-margin(6, "bottom");
   }
 
   .govuk-summary-list__row {
+    border-bottom: 1px solid $govuk-border-colour;
+
     @include govuk-media-query($until: tablet) {
       margin-bottom: govuk-spacing(3);
-      border-bottom: 1px solid $govuk-border-colour;
     }
     @include govuk-media-query($from: tablet) {
       display: table-row;
     }
   }
 
+  // Remove right padding from the last column in the row
+  .govuk-summary-list__row:not(.govuk-summary-list__row--no-actions) > :last-child {
+    padding-right: 0;
+  }
+
+  // Provide an empty 'cell' for rows that don't have actions – otherwise the
+  // bottom border is not drawn for that part of the row in some browsers.
+  .govuk-summary-list__row--no-actions {
+    @include govuk-media-query($from: tablet) {
+      &::after {
+        content: "";
+        display: table-cell;
+        width: 20%;
+      }
+    }
+  }
+
   .govuk-summary-list__key,
   .govuk-summary-list__value,
   .govuk-summary-list__actions {
@@ -31,7 +50,6 @@
       padding-top: govuk-spacing(2);
       padding-right: govuk-spacing(4);
       padding-bottom: govuk-spacing(2);
-      border-bottom: 1px solid $govuk-border-colour;
     }
   }
 
@@ -39,7 +57,6 @@
     margin-bottom: govuk-spacing(3);
     @include govuk-media-query($from: tablet) {
       width: 20%;
-      padding-right: 0;
       text-align: right;
     }
   }
@@ -63,16 +80,6 @@
     @include govuk-media-query($until: tablet) {
       margin-bottom: govuk-spacing(3);
     }
-    @include govuk-media-query($from: tablet) {
-      width: 50%;
-    }
-  }
-
-  // Expand width when value is last column (no action)
-  .govuk-summary-list__value:last-child {
-    @include govuk-media-query($from: tablet) {
-      width: 70%;
-    }
   }
 
   .govuk-summary-list__value > p {
@@ -90,56 +97,181 @@
   }
 
   .govuk-summary-list__actions-list-item {
-    display: inline;
-    margin-right: govuk-spacing(2);
-    padding-right: govuk-spacing(2);
+    display: inline-block;
   }
 
-  // In older browsers such as IE8, :last-child is not available,
-  // so only show the border divider where it is available.
-  .govuk-summary-list__actions-list-item:not(:last-child) {
-    border-right: 1px solid $govuk-border-colour;
+  @include govuk-media-query($until: tablet) {
+    .govuk-summary-list__actions-list-item {
+      margin-right: govuk-spacing(2);
+      padding-right: govuk-spacing(2);
+      border-right: 1px solid $govuk-border-colour;
+    }
+
+    .govuk-summary-list__actions-list-item:last-child {
+      margin-right: 0;
+      padding-right: 0;
+      border: 0;
+    }
   }
 
-  .govuk-summary-list__actions-list-item:last-child {
-    margin-right: 0;
-    padding-right: 0;
-    border: 0;
+  @include govuk-media-query($from: tablet) {
+    .govuk-summary-list__actions-list-item {
+      margin-left: govuk-spacing(2);
+      padding-left: govuk-spacing(2);
+    }
+
+    .govuk-summary-list__actions-list-item:not(:first-child) {
+      border-left: 1px solid $govuk-border-colour;
+    }
+
+    .govuk-summary-list__actions-list-item:first-child {
+      margin-left: 0;
+      padding-left: 0;
+      border: 0;
+    }
+  }
+
+  // Large groups of action links may wrap onto multiple lines. Because the link
+  // focus styles are applied outside of the link's bounding box, there are
+  // situations where the focus style on a link can be overlapped by subsequent
+  // links. We don't want this, so let's create a new stacking context on focus
+  // so the link always appears to be 'on top'.
+  .govuk-summary-list__actions-list-item .govuk-link:focus {
+    isolation: isolate;
   }
 
   // No border on entire summary list
   .govuk-summary-list--no-border {
-    @include govuk-media-query($until: tablet) {
-      .govuk-summary-list__row {
-        border: 0;
-      }
+    .govuk-summary-list__row {
+      border: 0;
     }
 
+    // Increase padding by 1px to compensate for 'missing' border
     @include govuk-media-query($from: tablet) {
       .govuk-summary-list__key,
       .govuk-summary-list__value,
       .govuk-summary-list__actions {
-        // Remove 1px border, add 1px height back on
         padding-bottom: govuk-spacing(2) + 1px;
-        border: 0;
       }
     }
   }
 
   // No border on specific rows
   .govuk-summary-list__row--no-border {
-    @include govuk-media-query($until: tablet) {
-      border: 0;
-    }
+    border: 0;
 
+    // Increase padding by 1px to compensate for 'missing' border
     @include govuk-media-query($from: tablet) {
       .govuk-summary-list__key,
       .govuk-summary-list__value,
       .govuk-summary-list__actions {
-        // Remove 1px border, add 1px height back on
         padding-bottom: govuk-spacing(2) + 1px;
-        border: 0;
       }
     }
   }
+
+  // Additional block for the summary card
+  .govuk-summary-card {
+    @include govuk-responsive-margin(6, "bottom");
+    border: 1px solid $govuk-border-colour;
+  }
+
+  .govuk-summary-card__title-wrapper {
+    padding: govuk-spacing(3);
+
+    // Ensures the card header appears separate to the summary list in forced colours mode
+    border-bottom: 1px solid transparent;
+    background-color: govuk-colour("light-grey");
+
+    @include govuk-media-query($from: "tablet") {
+      display: flex;
+      justify-content: space-between;
+      flex-wrap: nowrap;
+      padding: govuk-spacing(3) govuk-spacing(4);
+    }
+  }
+
+  .govuk-summary-card__title {
+    @include govuk-font($size: 19, $weight: bold);
+    @include govuk-text-colour;
+    margin: govuk-spacing(1) govuk-spacing(4) govuk-spacing(2) 0;
+
+    @include govuk-media-query($from: "tablet") {
+      margin-bottom: govuk-spacing(1);
+    }
+  }
+
+  .govuk-summary-card__actions {
+    @include govuk-font-size($size: 19);
+    @include govuk-typography-weight-bold;
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 10px;
+    margin: govuk-spacing(1) 0;
+    padding: 0;
+    list-style: none;
+
+    @include govuk-media-query($from: "tablet") {
+      justify-content: right;
+      text-align: right;
+    }
+  }
+
+  .govuk-summary-card__action {
+    display: inline;
+    margin: 0 govuk-spacing(2) 0 0;
+    padding-right: govuk-spacing(2);
+    border-right: 1px solid $govuk-border-colour;
+
+    @include govuk-media-query($from: "tablet") {
+      margin-right: 0;
+    }
+
+    // We use the following media query to target IE11 and 10 only to add margin
+    // between actions.
+    //
+    // We do this because we're using row-gap to create space between actions on
+    // more evergreen browsers which IE doesn't support. @supports currently isn't
+    // a viable solution, see https://github.com/w3c/csswg-drafts/issues/3559.
+    //
+    // Solution taken from https://stackoverflow.com/questions/11173106/apply-style-only-on-ie#answer-36448860
+    // which also includes an explanation of why this works
+    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+      margin-bottom: govuk-spacing(1);
+    }
+  }
+
+  .govuk-summary-card__action:last-child {
+    margin: 0;
+    padding-right: 0;
+    border-right: none;
+
+    @include govuk-media-query($from: "tablet") {
+      padding-left: govuk-spacing(2);
+    }
+
+    // See above comment for why this is here
+    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+      margin-bottom: 0;
+    }
+  }
+
+  .govuk-summary-card__content {
+    padding: govuk-spacing(3) govuk-spacing(3) 0;
+
+    @include govuk-media-query($from: "tablet") {
+      padding: govuk-spacing(3) govuk-spacing(4);
+    }
+
+    .govuk-summary-list {
+      margin-bottom: 0;
+    }
+
+    .govuk-summary-list__row:last-of-type {
+      margin-bottom: 0;
+      border-bottom: none;
+    }
+  }
 }
+
+/*# sourceMappingURL=_index.scss.map */

data/vendor/assets/stylesheets/components/summary-list/_summary-list.scss

@@ -1,2 +1,4 @@
 @import "../../base";
 @import "./index";
+
+/*# sourceMappingURL=_summary-list.scss.map */

data/vendor/assets/stylesheets/components/table/_index.scss

@@ -9,6 +9,16 @@
     border-collapse: collapse;
   }
 
+  @if $govuk-new-typography-scale {
+    // Modifier for tables with a lot of data. Tables with lots of data benefit
+    // from a smaller font size on small screens.
+    .govuk-table--small-text-until-tablet {
+      @include govuk-media-query($until: tablet) {
+        @include govuk-font-size($size: 16);
+      }
+    }
+  }
+
   .govuk-table__header {
     @include govuk-typography-weight-bold;
   }
@@ -19,16 +29,10 @@
     border-bottom: 1px solid $govuk-border-colour;
     text-align: left;
     vertical-align: top;
-    // GOV.UK Elements sets the font-size and line-height for all headers and cells
-    // in tables.
-    @include govuk-compatibility(govuk_elements) {
-      font-size: inherit;
-      line-height: inherit;
-    }
   }
 
   .govuk-table__cell--numeric {
-    @include govuk-font($size: false, $tabular: true);
+    @include govuk-font-tabular-numbers;
   }
 
   .govuk-table__header--numeric,
@@ -49,23 +53,23 @@
   }
 
   // Modifiers that make captions look more like their equivalent headings
+  .govuk-table__caption--xl,
+  .govuk-table__caption--l,
+  .govuk-table__caption--m {
+    margin-bottom: govuk-spacing(3);
+  }
 
   .govuk-table__caption--xl {
-    @include govuk-font($size: 48, $weight: bold);
-    margin-bottom: govuk-spacing(3);
+    @include govuk-font-size($size: 48);
   }
 
   .govuk-table__caption--l {
-    @include govuk-font($size: 36, $weight: bold);
-    margin-bottom: govuk-spacing(3);
+    @include govuk-font-size($size: 36);
   }
 
   .govuk-table__caption--m {
-    @include govuk-font($size: 24, $weight: bold);
-    margin-bottom: govuk-spacing(3);
-  }
-
-  .govuk-table__caption--s {
-    @include govuk-font($size: 19, $weight: bold);
+    @include govuk-font-size($size: 24);
   }
 }
+
+/*# sourceMappingURL=_index.scss.map */

data/vendor/assets/stylesheets/components/table/_table.scss

@@ -1,2 +1,4 @@
 @import "../../base";
 @import "./index";
+
+/*# sourceMappingURL=_table.scss.map */

data/vendor/assets/stylesheets/components/tabs/_index.scss

@@ -2,10 +2,14 @@
   .govuk-tabs {
     @include govuk-responsive-margin(1, "top");
     @include govuk-responsive-margin(6, "bottom");
+    @include govuk-font($size: 19);
   }
 
   .govuk-tabs__title {
-    @include govuk-font($size: 19);
+    // Set the size and weight again because this element is a heading and the
+    // user agent font size overrides the inherited font size
+    @include govuk-font-size($size: 19);
+    @include govuk-typography-weight-regular;
     @include govuk-text-colour;
     margin-bottom: govuk-spacing(2);
   }
@@ -18,13 +22,12 @@
   }
 
   .govuk-tabs__list-item {
-    @include govuk-font($size: 19);
     margin-left: govuk-spacing(5);
 
-    &:before {
+    &::before {
       @include govuk-text-colour;
       content: "\2014 "; // "— "
-      margin-left: - govuk-spacing(5);
+      margin-left: govuk-spacing(-5);
       padding-right: govuk-spacing(1);
     }
   }
@@ -41,9 +44,8 @@
     @include govuk-responsive-margin(8, "bottom");
   }
 
-  // JavaScript enabled
-  .js-enabled {
-
+  // GOV.UK Frontend JavaScript enabled
+  .govuk-frontend-supported {
     @include govuk-media-query($from: tablet) {
       .govuk-tabs__list {
         @include govuk-clearfix;
@@ -64,10 +66,10 @@
         padding: govuk-spacing(2) govuk-spacing(4);
 
         float: left;
-        background-color: govuk-colour("light-grey", $legacy: "grey-4");
+        background-color: govuk-colour("light-grey");
         text-align: center;
 
-        &:before {
+        &::before {
           content: none;
         }
       }
@@ -77,7 +79,7 @@
 
         position: relative;
 
-        margin-top: - govuk-spacing(1);
+        margin-top: govuk-spacing(-1);
 
         // Compensation for border (otherwise we get a shift)
         margin-bottom: -$border-width;
@@ -101,7 +103,7 @@
 
         margin-bottom: 0;
 
-        &:after {
+        &::after {
           content: "";
           position: absolute;
           top: 0;
@@ -128,3 +130,5 @@
     }
   }
 }
+
+/*# sourceMappingURL=_index.scss.map */

data/vendor/assets/stylesheets/components/tabs/_tabs.scss

@@ -1,2 +1,4 @@
 @import "../../base";
 @import "./index";
+
+/*# sourceMappingURL=_tabs.scss.map */

data/vendor/assets/stylesheets/components/tag/_index.scss

@@ -1,86 +1,94 @@
 @include govuk-exports("govuk/component/tag") {
+  $govuk-tag-max-width: if(map-has-key($govuk-breakpoints, "mobile"), map-get($govuk-breakpoints, "mobile") / 2, 160px);
+
   .govuk-tag {
+    @include govuk-font($size: 19);
 
     display: inline-block;
 
-    // When a user customises their colours often the background is removed,
-    // by adding a outline we ensure that the tag component still keeps it's meaning.
-    // https://accessibility.blog.gov.uk/2017/03/27/how-users-change-colours-on-websites/
-    outline: 2px solid transparent;
-    outline-offset: -2px;
+    // set a max-width along with overflow-wrap: break-word below for instances
+    // where a tag has a single long word and could overflow its boundaries.
+    // The max-width is necessary as break-word requires a bounding box to base
+    // where to break off of.
+    max-width: $govuk-tag-max-width;
 
-    color: govuk-colour("white");
-    background-color: govuk-colour("blue");
-    letter-spacing: 1px;
+    // These negative margins make sure that the tag component doesn’t increase the
+    // size of its container. Otherwise, for example, a table row containing a tag
+    // will be taller than one containing plain text.
+    //
+    // The negative margin added to the top and bottom matches the extra padding added.
+    margin-top: -2px;
+    margin-bottom: -3px;
 
+    padding-top: 2px;
+    padding-right: 8px;
+    padding-bottom: 3px;
+    padding-left: 8px;
+    color: govuk-shade(govuk-colour("blue"), 60%);
+    background-color: govuk-tint(govuk-colour("blue"), 70%);
     text-decoration: none;
-    text-transform: uppercase;
-
-    @if $govuk-use-legacy-font {
-      // Since New Transport sits slightly higher than other common fonts.
-      // We use intentionally uneven padding to make it balanced, this can be
-      // removed using the version of the font that has a more common vertical spacing.
-      @include govuk-font($size: 16, $weight: bold, $line-height: 1.25);
-      padding-top: 4px;
-      padding-right: 8px;
-      padding-bottom: 1px;
-      padding-left: 8px;
-    } @else {
-      @include govuk-font($size: 16, $weight: bold, $line-height: 1);
-      padding-top: 5px;
-      padding-right: 8px;
-      padding-bottom: 4px;
-      padding-left: 8px;
-    }
-  }
+    overflow-wrap: break-word;
 
-  // Deprecated. We'll remove this class in a future release. Use `.govuk-tag--grey` instead.
-  .govuk-tag--inactive {
-    background-color: govuk-colour("dark-grey", $legacy: "grey-1");
+    // When forced colour mode is active, for example to provide high contrast,
+    // the background colour of the tag is the same as the rest of the page. To ensure
+    // that the tag is perceived as separate from any surround text, it is made bold.
+    //
+    // Transparent outlines are no longer added, as they make the Tag look indistinguishable
+    // from a button – but the tag is not interactive in the same way.
+    @media screen and (forced-colors: active) {
+      font-weight: bold;
+    }
   }
 
   .govuk-tag--grey {
-    color: govuk-shade(govuk-colour("dark-grey", $legacy: "grey-1"), 30);
-    background: govuk-tint(govuk-colour("dark-grey", $legacy: "grey-1"), 90);
+    color: govuk-shade(govuk-colour("dark-grey"), 50%);
+    background-color: govuk-tint(govuk-colour("dark-grey"), 85%);
   }
 
   .govuk-tag--purple {
-    color: govuk-shade(govuk-colour("purple"), 20);
-    background: govuk-tint(govuk-colour("purple"), 80);
+    color: govuk-shade(govuk-colour("bright-purple"), 50%);
+    background-color: govuk-tint(govuk-colour("bright-purple"), 85%);
   }
 
   .govuk-tag--turquoise {
-    color: govuk-shade(govuk-colour("turquoise"), 60);
-    background: govuk-tint(govuk-colour("turquoise"), 70);
+    color: govuk-shade(govuk-colour("turquoise"), 60%);
+    background-color: govuk-tint(govuk-colour("turquoise"), 80%);
   }
 
   .govuk-tag--blue {
-    color: govuk-shade(govuk-colour("blue"), 30);
-    background: govuk-tint(govuk-colour("blue"), 80);
+    color: govuk-shade(govuk-colour("blue"), 60%);
+    background-color: govuk-tint(govuk-colour("blue"), 70%);
+  }
+
+  .govuk-tag--light-blue {
+    color: govuk-shade(govuk-colour("blue"), 60%);
+    background-color: govuk-tint(govuk-colour("blue"), 90%);
   }
 
   .govuk-tag--yellow {
-    color: govuk-shade(govuk-colour("yellow"), 65);
-    background: govuk-tint(govuk-colour("yellow"), 75);
+    color: govuk-shade(govuk-colour("yellow"), 65%);
+    background-color: govuk-tint(govuk-colour("yellow"), 75%);
   }
 
   .govuk-tag--orange {
-    color: govuk-shade(govuk-colour("orange"), 55);
-    background: govuk-tint(govuk-colour("orange"), 70);
+    color: govuk-shade(govuk-colour("orange"), 55%);
+    background-color: govuk-tint(govuk-colour("orange"), 70%);
   }
 
   .govuk-tag--red {
-    color: govuk-shade(govuk-colour("red"), 30);
-    background: govuk-tint(govuk-colour("red"), 80);
+    color: govuk-shade(govuk-colour("red"), 80%);
+    background-color: govuk-tint(govuk-colour("red"), 75%);
   }
 
   .govuk-tag--pink {
-    color: govuk-shade(govuk-colour("pink"), 40);
-    background: govuk-tint(govuk-colour("pink"), 80);
+    color: govuk-shade(govuk-colour("pink"), 50%);
+    background-color: govuk-tint(govuk-colour("pink"), 85%);
   }
 
   .govuk-tag--green {
-    color: govuk-shade(govuk-colour("green"), 20);
-    background: govuk-tint(govuk-colour("green"), 80);
+    color: govuk-shade(govuk-colour("green"), 20%);
+    background-color: govuk-tint(govuk-colour("green"), 80%);
   }
 }
+
+/*# sourceMappingURL=_index.scss.map */

data/vendor/assets/stylesheets/components/tag/_tag.scss

@@ -1,2 +1,4 @@
 @import "../../base";
 @import "./index";
+
+/*# sourceMappingURL=_tag.scss.map */

data/vendor/assets/stylesheets/components/task-list/_index.scss

@@ -0,0 +1,77 @@
+@import "../tag/index";
+
+@include govuk-exports("govuk/component/task-list") {
+  $govuk-task-list-hover-colour: govuk-colour("light-grey");
+
+  .govuk-task-list {
+    @include govuk-font($size: 19);
+    margin-top: 0;
+    @include govuk-responsive-margin(6, "bottom");
+    padding: 0;
+    list-style-type: none;
+  }
+
+  // This uses table layout so that the task name and status always appear side-by-side, with the width of
+  // each 'column' being flexible depending upon the length of the task names and statuses.
+  //
+  // The position is set to 'relative' so than an absolutely-positioned transparent element box
+  // can be added within the link so that the whole row can be clickable.
+  .govuk-task-list__item {
+    display: table;
+    position: relative;
+    width: 100%;
+    margin-bottom: 0;
+    padding-top: govuk-spacing(2);
+    padding-bottom: govuk-spacing(2);
+    border-bottom: 1px solid $govuk-border-colour;
+  }
+
+  .govuk-task-list__item:first-child {
+    border-top: 1px solid $govuk-border-colour;
+  }
+
+  // This class is added to the <li> elements where the task name is a link.
+  // The background hover colour is added to help indicate that the whole row is clickable, rather
+  // than just the visible link text.
+  .govuk-task-list__item--with-link:hover {
+    background: $govuk-task-list-hover-colour;
+  }
+
+  .govuk-task-list__name-and-hint {
+    display: table-cell;
+    vertical-align: top;
+    @include govuk-text-colour;
+  }
+
+  .govuk-task-list__status {
+    display: table-cell;
+    padding-left: govuk-spacing(2);
+    text-align: right;
+    vertical-align: top;
+    @include govuk-text-colour;
+  }
+
+  .govuk-task-list__status--cannot-start-yet {
+    color: $govuk-secondary-text-colour;
+  }
+
+  // This adds an empty transparent box covering the whole row, including the task status and
+  // any hint text. Because this is generated within the link element, this allows the whole area
+  // to be clickable.
+  .govuk-task-list__link::after {
+    content: "";
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
+
+  .govuk-task-list__hint {
+    margin-top: govuk-spacing(1);
+    color: $govuk-secondary-text-colour;
+  }
+}
+
+/*# sourceMappingURL=_index.scss.map */

data/vendor/assets/stylesheets/components/task-list/_task-list.scss

@@ -0,0 +1,4 @@
+@import "../../base";
+@import "./index";
+
+/*# sourceMappingURL=_task-list.scss.map */