dxw_govuk_frontend_rails 3.9.1 → 3.13.1

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

@@ -73,47 +73,49 @@
         touch-action: manipulation;
   }
 
-  // [ ] Check box
-  .govuk-checkboxes__label:before {
-    content: "";
-    box-sizing: border-box;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: $govuk-checkboxes-size;
-    height: $govuk-checkboxes-size;
-    border: $govuk-border-width-form-element solid currentColor;
-    background: transparent;
-  }
+  @include govuk-not-ie8 {
+    // [ ] Check box
+    .govuk-checkboxes__label:before {
+      content: "";
+      box-sizing: border-box;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: $govuk-checkboxes-size;
+      height: $govuk-checkboxes-size;
+      border: $govuk-border-width-form-element solid currentColor;
+      background: transparent;
+    }
 
-  // ✔ Check mark
-  //
-  // The check mark is a box with a border on the left and bottom side (└──),
-  // rotated 45 degrees
-  .govuk-checkboxes__label:after {
-    content: "";
-    box-sizing: border-box;
+    // ✔ Check mark
+    //
+    // The check mark is a box with a border on the left and bottom side (└──),
+    // rotated 45 degrees
+    .govuk-checkboxes__label:after {
+      content: "";
+      box-sizing: border-box;
 
-    position: absolute;
-    top: 11px;
-    left: 9px;
-    width: 23px;
-    height: 12px;
+      position: absolute;
+      top: 11px;
+      left: 9px;
+      width: 23px;
+      height: 12px;
 
-    -webkit-transform: rotate(-45deg);
+      -webkit-transform: rotate(-45deg);
 
-        -ms-transform: rotate(-45deg);
+          -ms-transform: rotate(-45deg);
 
-            transform: rotate(-45deg);
-    border: solid;
-    border-width: 0 0 5px 5px;
-    // Fix bug in IE11 caused by transform rotate (-45deg).
-    // See: alphagov/govuk_elements/issues/518
-    border-top-color: transparent;
+              transform: rotate(-45deg);
+      border: solid;
+      border-width: 0 0 5px 5px;
+      // Fix bug in IE11 caused by transform rotate (-45deg).
+      // See: alphagov/govuk_elements/issues/518
+      border-top-color: transparent;
 
-    opacity: 0;
+      opacity: 0;
 
-    background: transparent;
+      background: transparent;
+    }
   }
 
   .govuk-checkboxes__hint {
@@ -125,6 +127,20 @@
   // Focused state
   .govuk-checkboxes__input:focus + .govuk-checkboxes__label:before {
     border-width: 4px;
+
+    // When colours are overridden, the yellow box-shadow becomes invisible
+    // which means the focus state is less obvious. By adding a transparent
+    // outline, which becomes solid (text-coloured) in that context, we ensure
+    // the focus remains clearly visible.
+    outline: $govuk-focus-width solid transparent;
+    outline-offset: 1px;
+
+    // When in an explicit forced-color mode, we can use the Highlight system
+    // color for the outline to better match focus states of native controls
+    @media screen and (forced-colors: active), (-ms-high-contrast: active) {
+      outline-color: Highlight;
+    }
+
     box-shadow: 0 0 0 $govuk-focus-width $govuk-focus-colour;
   }
 
@@ -143,6 +159,19 @@
     opacity: .5;
   }
 
+  // =========================================================
+  // Dividers ('or')
+  // =========================================================
+
+  .govuk-checkboxes__divider {
+    $govuk-divider-size: $govuk-checkboxes-size !default;
+    @include govuk-font($size: 19);
+    @include govuk-text-colour;
+    width: $govuk-divider-size;
+    margin-bottom: govuk-spacing(2);
+    text-align: center;
+  }
+
   // =========================================================
   // Conditional reveals
   // =========================================================

data/vendor/assets/stylesheets/components/cookie-banner/_cookie-banner.scss

@@ -0,0 +1,2 @@
+@import "../../base";
+@import "./index";

data/vendor/assets/stylesheets/components/cookie-banner/_index.scss

@@ -0,0 +1,51 @@
+@include govuk-exports("govuk/component/cookie-banner") {
+
+  // This needs to be kept in sync with the header component's styles
+  $border-bottom-width: govuk-spacing(2);
+
+  .govuk-cookie-banner {
+    @include govuk-font($size: 19);
+
+    padding-top: govuk-spacing(4);
+    // The component does not set bottom spacing.
+    // The bottom spacing should be created by the items inside the component.
+
+    // Visually separate the cookie banner from content underneath
+    // when user changes colours in their browser.
+    border-bottom: $border-bottom-width solid transparent;
+
+    background-color: govuk-colour("light-grey", $legacy: "grey-3");
+  }
+
+  // Support older browsers which don't hide elements with the `hidden` attribute
+  // when user hides the whole cookie banner with a 'Hide' button.
+  .govuk-cookie-banner[hidden] {
+    display: none;
+  }
+
+  .govuk-cookie-banner__message {
+    // Remove the extra height added by the separator border.
+    margin-bottom: -$border-bottom-width;
+
+    &[hidden] {
+      // Support older browsers which don't hide elements with the `hidden` attribute
+      // when the visibility of cookie and replacement messages is toggled.
+      display: none;
+    }
+
+    &:focus {
+      // Remove the native visible focus indicator when the element is programmatically focused.
+      //
+      // The focused cookie banner is the first element on the page and the last thing the user
+      // interacted with prior to it gaining focus.
+      // We therefore assume that moving focus to it is not going to surprise users, and that giving
+      // it a visible focus indicator could be more confusing than helpful, especially as the
+      // element is not normally keyboard operable.
+      //
+      // We have flagged this in the research section of the guidance as something to monitor.
+      //
+      // A related discussion: https://github.com/w3c/wcag/issues/1001
+      outline: none;
+    }
+  }
+}

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

@@ -34,7 +34,11 @@
 
   // ...but only underline the text, not the arrow
   .govuk-details__summary-text {
-    text-decoration: underline;
+    @include govuk-link-decoration;
+  }
+
+  .govuk-details__summary:hover .govuk-details__summary-text {
+    @include govuk-link-hover-decoration;
   }
 
   // Remove the underline when focussed to avoid duplicate borders
@@ -67,7 +71,8 @@
   }
 
   .govuk-details__text {
-    padding: govuk-spacing(3);
+    padding-top: govuk-spacing(3);
+    padding-bottom: govuk-spacing(3);
     padding-left: govuk-spacing(4);
     border-left: $govuk-border-width solid $govuk-border-colour;
   }

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

@@ -37,17 +37,7 @@
 
   .govuk-error-summary__list a {
     @include govuk-typography-weight-bold;
-
-    // Override default link styling to use error colour
-    &:link,
-    &:visited,
-    &:hover,
-    &:active {
-      color: $govuk-error-colour;
-    }
-
-    &:focus {
-      @include govuk-focused-text;
-    }
+    @include govuk-link-common;
+    @include govuk-link-style-error;
   }
 }

data/vendor/assets/stylesheets/components/file-upload/_index.scss

@@ -8,17 +8,22 @@
   .govuk-file-upload {
     @include govuk-font($size: 19);
     @include govuk-text-colour;
-    padding-top: $component-padding;
-    padding-bottom: $component-padding;
+    max-width: 100%;
+    margin-left: -$component-padding;
+    padding: $component-padding;
+
+    // The default file upload button in Safari does not
+    // support setting a custom font-size. Set `-webkit-appearance`
+    // to `button` to drop out of the native appearance so the
+    // font-size is set to 19px
+    // https://bugs.webkit.org/show_bug.cgi?id=224746
+    &::-webkit-file-upload-button {
+      -webkit-appearance: button;
+      color: inherit;
+      font: inherit;
+    }
 
     &:focus {
-      // "Yank" the padding with negative margin to avoid a jump
-      // when element is focused
-      margin-right: -$component-padding;
-      margin-left: -$component-padding;
-      padding-right: $component-padding;
-      padding-left: $component-padding;
-
       outline: $govuk-focus-width solid $govuk-focus-colour;
       // Use `box-shadow` to add border instead of changing `border-width`
       // (which changes element size) and since `outline` is already used for the
@@ -37,11 +42,6 @@
     // to recognise `focus-within` and don't set any styles from the block
     // when it's a selector.
     &:focus-within {
-      margin-right: -$component-padding;
-      margin-left: -$component-padding;
-      padding-right: $component-padding;
-      padding-left: $component-padding;
-
       outline: $govuk-focus-width solid $govuk-focus-colour;
 
       box-shadow: inset 0 0 0 4px $govuk-input-border-colour;

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

@@ -6,17 +6,13 @@
   // as it'll just be the same as $govuk-footer-border.
   $govuk-footer-border-top: $govuk-border-colour;
   $govuk-footer-text: $govuk-text-colour;
-  $govuk-footer-link: $govuk-footer-text;
-  $govuk-footer-link-hover: false;
+  $govuk-footer-link-hover-colour: null; // Only used with the legacy palette
 
   @if ($govuk-use-legacy-palette) {
     $govuk-footer-border-top: #a1acb2;
     $govuk-footer-border: govuk-colour("grey-2");
     $govuk-footer-text: #454a4c;
-    $govuk-footer-link: $govuk-footer-text;
-
-    // Only used with the legacy palette
-    $govuk-footer-link-hover: #171819;
+    $govuk-footer-link-hover-colour: #171819;
   }
 
   // Based on the govuk-crest-2x.png image dimensions.
@@ -37,27 +33,20 @@
   }
 
   .govuk-footer__link {
+    @include govuk-link-common;
+
     @if ($govuk-use-legacy-palette) {
       &:link,
       &:visited {
-        color: $govuk-footer-link;
+        color: $govuk-footer-text;
       }
 
       &:hover,
       &:active {
-        color: $govuk-footer-link-hover;
+        color: $govuk-footer-link-hover-colour;
       }
     } @else {
-      &:link,
-      &:visited,
-      &:hover,
-      &:active {
-        color: $govuk-footer-link;
-      }
-    }
-
-    &:focus {
-      @include govuk-focused-text;
+      @include govuk-link-style-text;
     }
 
     // alphagov/govuk_template includes a specific a:link:focus selector
@@ -79,16 +68,20 @@
 
   .govuk-footer__meta {
     display: -webkit-box;
+    display: -webkit-flex;
     display: -ms-flexbox;
     display: flex; // Support: Flexbox
     margin-right: -$govuk-gutter-half;
     margin-left: -$govuk-gutter-half;
-    -ms-flex-wrap: wrap;
-        flex-wrap: wrap; // Support: Flexbox
+    -webkit-flex-wrap: wrap;
+        -ms-flex-wrap: wrap;
+            flex-wrap: wrap; // Support: Flexbox
     -webkit-box-align: end;
+    -webkit-align-items: flex-end;
         -ms-flex-align: end;
             align-items: flex-end; // Support: Flexbox
     -webkit-box-pack: center;
+    -webkit-justify-content: center;
         -ms-flex-pack: center;
             justify-content: center; // Support: Flexbox
   }
@@ -101,11 +94,13 @@
 
   .govuk-footer__meta-item--grow {
     -webkit-box-flex: 1;
+    -webkit-flex: 1;
         -ms-flex: 1;
             flex: 1; // Support: Flexbox
     @include govuk-media-query ($until: tablet) {
-      -ms-flex-preferred-size: 320px;
-          flex-basis: 320px; // Support: Flexbox
+      -webkit-flex-basis: 320px;
+          -ms-flex-preferred-size: 320px;
+              flex-basis: 320px; // Support: Flexbox
     }
   }
 
@@ -116,6 +111,9 @@
       margin-bottom: govuk-spacing(3);
     }
     vertical-align: top;
+    // Work around SVGs not inheriting color from parent in forced color mode
+    // (https://github.com/w3c/csswg-drafts/issues/6310)
+    forced-color-adjust: auto;
   }
 
   .govuk-footer__licence-description {
@@ -134,7 +132,6 @@
     background-position: 50% 0%;
     background-size: $govuk-footer-crest-image-width $govuk-footer-crest-image-height;
     text-align: center;
-    text-decoration: none;
     white-space: nowrap;
   }
 
@@ -165,12 +162,14 @@
 
   .govuk-footer__navigation {
     display: -webkit-box;
+    display: -webkit-flex;
     display: -ms-flexbox;
     display: flex; // Support: Flexbox
     margin-right: -$govuk-gutter-half;
     margin-left: -$govuk-gutter-half;
-    -ms-flex-wrap: wrap;
-        flex-wrap: wrap; // Support: Flexbox
+    -webkit-flex-wrap: wrap;
+        -ms-flex-wrap: wrap;
+            flex-wrap: wrap; // Support: Flexbox
   }
 
   .govuk-footer__section {
@@ -181,15 +180,18 @@
     vertical-align: top;
     // Ensure columns take up equal width (typically one-half:one-half)
     -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
         -ms-flex-positive: 1;
             flex-grow: 1; // Support: Flexbox
-    -ms-flex-negative: 1;
-        flex-shrink: 1; // Support: Flexbox
+    -webkit-flex-shrink: 1;
+        -ms-flex-negative: 1;
+            flex-shrink: 1; // Support: Flexbox
     @include govuk-media-query ($until: desktop) {
       // Make sure columns do not drop below 200px in width
       // Will typically result in wrapping, and end up in a single column on smaller screens.
-      -ms-flex-preferred-size: 200px;
-          flex-basis: 200px; // Support: Flexbox
+      -webkit-flex-basis: 200px;
+          -ms-flex-preferred-size: 200px;
+              flex-basis: 200px; // Support: Flexbox
     }
   }
 
@@ -199,6 +201,7 @@
     // To ensure the section is one of two, we can count backwards using `:nth-last-child(2)`.
     .govuk-footer__section:first-child:nth-last-child(2) {
       -webkit-box-flex: 2;
+      -webkit-flex-grow: 2;
           -ms-flex-positive: 2;
               flex-grow: 2; // Support: Flexbox
     }
@@ -210,6 +213,13 @@
     list-style: none;
     -webkit-column-gap: $govuk-gutter;
             column-gap: $govuk-gutter; // Support: Columns
+
+    // Disable thicker underlines on hover because of a bug in Chromium
+    // affecting links within columns
+    // https://bugs.chromium.org/p/chromium/issues/detail?id=1190987
+    .govuk-footer__link:hover {
+      text-decoration-thickness: auto;
+    }
   }
 
   @include govuk-media-query ($from: desktop) {

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

@@ -4,10 +4,9 @@
   $govuk-header-border-color: $govuk-brand-colour;
   $govuk-header-border-width: govuk-spacing(2);
   $govuk-header-text: govuk-colour("white");
-  $govuk-header-link: govuk-colour("white");
-  $govuk-header-link-hover: govuk-colour("white");
   $govuk-header-link-active: #1d8feb;
   $govuk-header-nav-item-border-color: #2e3133;
+  $govuk-header-link-underline-thickness: 3px;
 
   .govuk-header {
     @include govuk-font($size: 16);
@@ -36,7 +35,23 @@
 
   .govuk-header__logotype {
     display: inline-block;
+
+    // Add a gap after the logo in case it's followed by a product name. This
+    // gets removed later if the logotype is a :last-child.
     margin-right: govuk-spacing(1);
+
+    // Prevent readability backplate from obscuring underline in Windows High
+    // Contrast Mode
+    @media (forced-colors: active) {
+      forced-color-adjust: none;
+      color: linktext;
+    }
+
+    // Remove the gap after the logo if there's no product name to keep hover
+    // and focus states neat
+    &:last-child {
+      margin-right: 0;
+    }
   }
 
   .govuk-header__logotype-crown {
@@ -51,39 +66,39 @@
     width: 36px;
     height: 32px;
     border: 0;
-    vertical-align: middle;
+    vertical-align: bottom;
   }
 
   .govuk-header__product-name {
     @include govuk-font($size: 24, $line-height: 1);
     display: inline-table;
-    padding-right: govuk-spacing(2);
   }
 
   .govuk-header__link {
-    text-decoration: none;
+    // Avoid using the `govuk-link-common` mixin because the links in the header
+    // get a special treatment, because:
+    //
+    // - underlines are only visible on hover
+    // - all links get a 3px underline regardless of text size, as there are
+    //   multiple grouped elements close to one another and having slightly
+    //   different underline widths looks unbalanced
+    @include govuk-typography-common;
+    @include govuk-link-style-inverse;
 
-    &:link,
-    &:visited {
-      color: $govuk-header-link;
-    }
+    text-decoration: none;
 
     &:hover {
       text-decoration: underline;
+      text-decoration-thickness: $govuk-header-link-underline-thickness;
+
+      @if ($govuk-link-underline-offset) {
+        text-underline-offset: $govuk-link-underline-offset;
+      }
     }
 
     &:focus {
       @include govuk-focused-text;
     }
-
-    // alphagov/govuk_template includes a specific a:link:focus selector
-    // designed to make unvisited links a slightly darker blue when focussed, so
-    // we need to override the text colour for that combination of selectors.
-    @include govuk-compatibility(govuk_template) {
-      &:link:focus {
-        @include govuk-text-colour;
-      }
-    }
   }
 
   .govuk-header__link--homepage {
@@ -92,6 +107,7 @@
     @include govuk-font($size: false, $weight: bold);
 
     display: inline-block;
+    margin-right: govuk-spacing(2);
     font-size: 30px; // We don't have a mixin that produces 30px font size
     line-height: 1;
 
@@ -103,10 +119,10 @@
     &:hover,
     &:active {
       // Negate the added border
-      margin-bottom: -1px;
+      margin-bottom: $govuk-header-link-underline-thickness * -1;
       // Omitting colour will use default value of currentColor – if we
       // specified currentColor explicitly IE8 would ignore this rule.
-      border-bottom: 1px solid;
+      border-bottom: $govuk-header-link-underline-thickness solid;
     }
 
     // Remove any borders that show when focused and hovered.
@@ -156,11 +172,17 @@
     margin: 0;
     padding: 0;
     border: 0;
-    color: $govuk-header-link;
+    color: govuk-colour("white");
     background: none;
+    cursor: pointer;
 
     &:hover {
-      text-decoration: underline;
+      -webkit-text-decoration: solid underline $govuk-header-link-underline-thickness;
+              text-decoration: solid underline $govuk-header-link-underline-thickness;
+
+      @if ($govuk-link-underline-offset) {
+        text-underline-offset: $govuk-link-underline-offset;
+      }
     }
 
     &:focus {

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

@@ -95,11 +95,13 @@
 
   .govuk-input__wrapper {
     display: -webkit-box;
+    display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
 
     .govuk-input {
       -webkit-box-flex: 0;
+      -webkit-flex: 0 1 auto;
           -ms-flex: 0 1 auto;
               flex: 0 1 auto;
     }
@@ -150,6 +152,8 @@
 
     -webkit-box-flex: 0;
 
+    -webkit-flex: 0 0 auto;
+
         -ms-flex: 0 0 auto;
 
             flex: 0 0 auto;

data/vendor/assets/stylesheets/components/notification-banner/_index.scss

@@ -0,0 +1,89 @@
+@include govuk-exports("govuk/component/notification-banner") {
+  .govuk-notification-banner {
+    @include govuk-font($size: 19);
+    @include govuk-responsive-margin(8, "bottom");
+
+    border: $govuk-border-width solid $govuk-brand-colour;
+
+    background-color: $govuk-brand-colour;
+
+    &:focus {
+      outline: $govuk-focus-width solid $govuk-focus-colour;
+    }
+  }
+
+  .govuk-notification-banner__header {
+    padding: 2px govuk-spacing(3) govuk-spacing(1);
+
+    // Ensures the notification header appears separate to the notification body text in high contrast mode
+    border-bottom: 1px solid transparent;
+
+    @include govuk-media-query($from: tablet) {
+      padding: 2px govuk-spacing(4) govuk-spacing(1);
+    }
+  }
+
+  .govuk-notification-banner__title {
+    @include govuk-font($size: 19, $weight: bold);
+
+    margin: 0;
+
+    padding: 0;
+
+    color: govuk-colour("white");
+  }
+
+  .govuk-notification-banner__content {
+    $padding-tablet: govuk-spacing(4);
+    @include govuk-text-colour;
+    padding: govuk-spacing(3);
+
+    background-color: $govuk-body-background-colour;
+
+    @include govuk-media-query($from: tablet) {
+      padding: $padding-tablet;
+    }
+
+    // Wrap content at the same place that a 2/3 grid column ends, to maintain
+    // shorter line-lengths when the notification banner is full width
+    > * {
+      // When elements have their own padding (like lists), include the padding
+      // in the max-width calculation
+      box-sizing: border-box;
+
+      // Calculate the internal width of a two-thirds column...
+      $two-col-width: ($govuk-page-width * 2 / 3) - ($govuk-gutter * 1 / 3);
+
+      // ...and then factor in the left border and padding
+      $banner-exterior: ($padding-tablet + $govuk-border-width);
+      max-width: $two-col-width - $banner-exterior;
+    }
+
+    > :last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .govuk-notification-banner__heading {
+    @include govuk-font($size: 24, $weight: bold);
+
+    margin: 0 0 govuk-spacing(3) 0;
+
+    padding: 0;
+  }
+
+  .govuk-notification-banner__link {
+    @include govuk-link-common;
+    @include govuk-link-style-no-visited-state;
+  }
+
+  .govuk-notification-banner--success {
+    border-color: $govuk-success-colour;
+
+    background-color: $govuk-success-colour;
+
+    .govuk-notification-banner__link {
+      @include govuk-link-style-success;
+    }
+  }
+}

data/vendor/assets/stylesheets/components/notification-banner/_notification-banner.scss

@@ -0,0 +1,2 @@
+@import "../../base";
+@import "./index";