defra_ruby_template 5.4.1 → 5.11.0

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

@@ -1,23 +1,28 @@
 @include govuk-exports("govuk/component/footer") {
-  $govuk-footer-background: $govuk-canvas-background-colour;
-  $govuk-footer-border: $govuk-border-colour;
+  $govuk-footer-background: $govuk-template-background-colour;
   $govuk-footer-text: $govuk-text-colour;
+  $govuk-footer-content-border: $govuk-border-colour;
 
-  // Based on the govuk-crest-2x.png image dimensions.
-  $govuk-footer-crest-image-width-2x: 250px;
-  $govuk-footer-crest-image-height-2x: 204px;
-  // Half the 2x image so that it fits the regular 1x size.
-  $govuk-footer-crest-image-width: ($govuk-footer-crest-image-width-2x / 2);
-  $govuk-footer-crest-image-height: ($govuk-footer-crest-image-height-2x / 2);
+  // Royal Arms image dimensions
+  $govuk-footer-crest-image-width: 125px;
+  $govuk-footer-crest-image-height: 102px;
 
   .govuk-footer {
     @include govuk-font($size: if($govuk-new-typography-scale, 19, 16));
     @include govuk-responsive-padding(7, "top");
     @include govuk-responsive-padding(5, "bottom");
 
-    border-top: 1px solid $govuk-footer-border;
+    border-top: 10px solid $govuk-brand-colour;
     color: $govuk-footer-text;
-    background: $govuk-footer-background;
+    @include _govuk-rebrand(
+      "background",
+      $from: $govuk-footer-background,
+      $to: $_govuk-rebrand-template-background-colour
+    );
+  }
+
+  .govuk-footer__crown {
+    margin-bottom: govuk-spacing(5);
   }
 
   .govuk-footer__link {
@@ -29,7 +34,12 @@
     margin: 0; // Reset `<hr>` default margins
     @include govuk-responsive-margin(8, "bottom");
     border: 0; // Reset `<hr>` default borders
-    border-bottom: 1px solid $govuk-footer-border;
+    border-bottom: 1px solid;
+    @include _govuk-rebrand(
+      "border-bottom-color",
+      $from: $govuk-footer-content-border,
+      $to: $_govuk-rebrand-border-colour-on-blue-tint-95
+    );
   }
 
   .govuk-footer__meta {
@@ -67,22 +77,48 @@
   }
 
   .govuk-footer__licence-description {
+    // This makes the license description reflow under the logo when space gets too narrow
     display: inline-block;
+    // This prevents the description from having orphans when space is narrow enough
+    // and makes the text reflow more nicely
+    text-wrap: balance;
   }
 
-  .govuk-footer__copyright-logo {
-    display: inline-block;
-    min-width: $govuk-footer-crest-image-width;
+  .govuk-footer__copyright-logo::before {
+    content: "";
+    display: block;
+    width: 100%;
     padding-top: ($govuk-footer-crest-image-height + govuk-spacing(2));
-    background-image: govuk-image-url("govuk-crest.png");
-    @include govuk-device-pixel-ratio {
-      background-image: govuk-image-url("govuk-crest-2x.png");
-    }
+    background-image: govuk-image-url("govuk-crest.svg");
     background-repeat: no-repeat;
     background-position: 50% 0%;
     background-size: $govuk-footer-crest-image-width $govuk-footer-crest-image-height;
     text-align: center;
     white-space: nowrap;
+
+    // Where possible use the crest as a mask instead. This lets us use
+    // currentColor, increasing the contrast of the image and matching the
+    // user's prefered foreground colour in e.g. forced colors mode.
+    // We test for `mask-position` rather than `mask-image` because of a false
+    // positive in Edge 17.
+    @supports ((-webkit-mask-position: initial) or (mask-position: initial)) {
+      background: currentcolor;
+      -webkit-mask-image: govuk-image-url("govuk-crest.svg");
+              mask-image: govuk-image-url("govuk-crest.svg");
+      -webkit-mask-repeat: no-repeat;
+              mask-repeat: no-repeat;
+      -webkit-mask-position: 50% 0%;
+              mask-position: 50% 0%;
+      -webkit-mask-size: $govuk-footer-crest-image-width $govuk-footer-crest-image-height;
+              mask-size: $govuk-footer-crest-image-width $govuk-footer-crest-image-height;
+
+      // currentcolor doesn't seem to be computed correctly in forced colors
+      // mode so force the background color to match the system link color
+      // (matching the text in the link)
+      @media screen and (forced-colors: active) {
+        background: linktext;
+      }
+    }
   }
 
   .govuk-footer__inline-list {
@@ -108,7 +144,13 @@
     @include govuk-media-query($until: tablet) {
       padding-bottom: govuk-spacing(2);
     }
-    border-bottom: 1px solid $govuk-footer-border;
+
+    border-bottom: 1px solid;
+    @include _govuk-rebrand(
+      "border-bottom-color",
+      $from: $govuk-footer-content-border,
+      $to: $_govuk-rebrand-border-colour-on-blue-tint-95
+    );
   }
 
   .govuk-footer__navigation {

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

@@ -13,12 +13,31 @@
   $govuk-header-menu-button-height: 24px;
   $govuk-header-menu-button-width: 80px;
 
+  $govuk-header-rebrand-background: $govuk-brand-colour;
+  $govuk-header-rebrand-logo-bottom-margin: 2px;
+
   .govuk-header {
     @include govuk-font($size: 16, $line-height: 1);
 
-    border-bottom: govuk-spacing(2) solid govuk-colour("white");
+    // Add a transparent bottom border for forced-colour modes
+    @include _govuk-rebrand(
+      "border-bottom",
+      $from: govuk-spacing(2) solid govuk-colour("white"),
+      $to: 1px solid transparent
+    );
+    @include _govuk-rebrand("background", $from: $govuk-header-background, $to: $govuk-header-rebrand-background);
+
     color: $govuk-header-text;
-    background: $govuk-header-background;
+  }
+
+  .govuk-header--with-js-navigation {
+    @include govuk-media-query($until: desktop) {
+      .govuk-header__logo {
+        // Protect the absolute positioned menu button from overlapping with the
+        // logo with right padding using the button's width
+        padding-right: $govuk-header-menu-button-width;
+      }
+    }
   }
 
   .govuk-header__container--full-width {
@@ -36,6 +55,26 @@
     margin-bottom: -$govuk-header-border-width;
     padding-top: govuk-spacing($govuk-header-vertical-spacing-value);
     border-bottom: $govuk-header-border-width solid $govuk-header-border-color;
+
+    @include _govuk-rebrand {
+      // Remove the space allocated to the blue bar
+      margin-bottom: 0;
+
+      // Remove padding as the child elements are now responsible for spacing
+      padding-top: 0;
+
+      // Remove the blue bar
+      border-bottom: none;
+    }
+  }
+
+  // TODO: Remove this when _govuk-rebrand becomes the default
+  .govuk-header--full-width-border {
+    border-bottom-color: $govuk-header-border-color;
+
+    .govuk-header__container {
+      border-bottom-color: transparent;
+    }
   }
 
   .govuk-header__logotype {
@@ -61,6 +100,36 @@
     &:last-child {
       margin-right: 0;
     }
+
+    @include _govuk-rebrand {
+      margin-right: govuk-px-to-rem(7px); // 1 'dot'
+      margin-bottom: $govuk-header-rebrand-logo-bottom-margin;
+
+      // Remove right-margin if there's no product name
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+  }
+
+  // Colour in the Dot
+  .govuk-logo-dot {
+    fill: #00ffe0;
+
+    // Override Dot colour when printing
+    @include govuk-media-query($media-type: print) {
+      fill: currentcolor;
+    }
+
+    // Override Dot colour on forced colours mode
+    @media (forced-colors: active) {
+      fill: currentcolor;
+    }
+
+    // Override Dot colour on focus
+    :focus & {
+      fill: currentcolor;
+    }
   }
 
   .govuk-header__product-name {
@@ -89,6 +158,40 @@
         margin-top: $product-name-offset-tablet - 0.5px;
       }
     }
+
+    @include _govuk-rebrand {
+      // Remove top margin
+      margin-top: 0;
+
+      // Remove 1px from the bottom to account for the font-size being 1px
+      // larger than the logo height.
+      margin-bottom: govuk-px-to-rem(-1px);
+
+      // Magic number font-size that visually aligns with GOV.UK logo.
+      // Also stops reducing the product name size on narrow screens
+      font-size: govuk-px-to-rem(31px);
+
+      // Reduce letter spacing
+      letter-spacing: -0.015em;
+
+      // Prevent forced colour modes from applying a background colour behind
+      // the product name, which cuts off the underline that appears on hover.
+      forced-color-adjust: none;
+
+      @media screen and (forced-colors: active) {
+        color: LinkText;
+        background: transparent;
+      }
+
+      // Remove top margin on the breakpoints too
+      @include govuk-media-query($from: tablet) {
+        margin-top: 0;
+      }
+
+      @include govuk-media-query($from: desktop) {
+        margin-top: 0;
+      }
+    }
   }
 
   .govuk-header__link {
@@ -126,12 +229,6 @@
 
     @include govuk-media-query($from: desktop) {
       display: inline;
-
-      &:focus {
-        // Replicate the focus box shadow but without the -2px y-offset of the first yellow shadow
-        // This is to stop the logo getting cut off by the box shadow when focused on above a product name
-        box-shadow: 0 0 $govuk-focus-colour;
-      }
     }
 
     &:link,
@@ -151,6 +248,23 @@
       margin-bottom: 0;
       border-bottom: 0;
     }
+
+    @include _govuk-rebrand {
+      display: inline;
+
+      // Remove word-spacing from within the logo so we can ignore
+      // whitespace characters in the HTML
+      word-spacing: govuk-px-to-rem(-6px);
+
+      // Reset word-spacing for child elements
+      > * {
+        word-spacing: 0;
+      }
+
+      &:not(:focus) {
+        background-color: $govuk-header-rebrand-background;
+      }
+    }
   }
 
   .govuk-header__service-name {
@@ -158,6 +272,18 @@
     margin-bottom: govuk-spacing(2);
     @include govuk-font-size($size: 24);
     @include govuk-typography-weight-bold;
+
+    @include _govuk-rebrand {
+      // Apply margins to internal elements to emulate padding
+      margin-bottom: govuk-spacing(3);
+
+      @include govuk-media-query($from: desktop) {
+        // Magic number to align service name baseline with the GOV.UK logo
+        $service-name-offset: 4px;
+
+        margin: (govuk-spacing(3) + $service-name-offset) 0 (govuk-spacing(3) - $service-name-offset);
+      }
+    }
   }
 
   .govuk-header__logo,
@@ -167,9 +293,6 @@
 
   .govuk-header__logo {
     @include govuk-responsive-margin($govuk-header-vertical-spacing-value, "bottom");
-    // Protect the absolute positioned menu button from overlapping with the
-    // logo with right padding using the button's width
-    padding-right: $govuk-header-menu-button-width;
 
     @include govuk-media-query($from: desktop) {
       width: 33.33%;
@@ -184,6 +307,15 @@
         float: none;
       }
     }
+
+    @include _govuk-rebrand {
+      // Apply margins to internal elements to emulate padding
+      margin-bottom: 0;
+
+      // Magic numbers, set padding to vertically centre align the logo
+      padding-top: 16px;
+      padding-bottom: 14px - $govuk-header-rebrand-logo-bottom-margin;
+    }
   }
 
   .govuk-header__content {
@@ -196,18 +328,9 @@
 
   .govuk-header__menu-button {
     @include govuk-font($size: 16);
-    position: absolute;
-    // calculate top offset by:
-    // - getting the vertical spacing for the top and the bottom of the header
-    // - adding that to the crown height
-    // - dividing it by 2 so you have the vertical centre of the header
-    // - subtracting half the height of the menu button
-    top: (((govuk-spacing($govuk-header-vertical-spacing-value) * 2) + $govuk-header-crown-height) / 2) -
-      ($govuk-header-menu-button-height / 2);
-    right: 0;
     max-width: $govuk-header-menu-button-width;
     min-height: $govuk-header-menu-button-height;
-    margin: 0;
+    margin-bottom: govuk-spacing(1);
     padding: 0;
     border: 0;
     color: govuk-colour("white");
@@ -238,6 +361,19 @@
       @include govuk-shape-arrow($direction: up, $base: 10px, $display: inline-block);
     }
 
+    @include govuk-media-query($from: mobile) {
+      position: absolute;
+      // calculate top offset by:
+      // - getting the vertical spacing for the top and the bottom of the header
+      // - adding that to the crown height
+      // - dividing it by 2 so you have the vertical centre of the header
+      // - subtracting half the height of the menu button
+      top: (((govuk-spacing($govuk-header-vertical-spacing-value) * 2) + $govuk-header-crown-height) / 2) -
+        ($govuk-header-menu-button-height / 2);
+      right: 0;
+      margin: 0;
+    }
+
     @include govuk-media-query($from: tablet) {
       top: govuk-spacing(3);
     }
@@ -253,8 +389,37 @@
   }
 
   .govuk-header__navigation {
+    @include govuk-media-query($until: mobile) {
+      @include _govuk-rebrand {
+        padding-bottom: govuk-spacing(3);
+      }
+    }
+
     @include govuk-media-query($from: desktop) {
       margin-bottom: govuk-spacing(2);
+
+      @include _govuk-rebrand {
+        // Magic number so that the bottom of the nav links aligns with the
+        // baseline of the GOV.UK logo
+        $navigation-offset: 7px;
+
+        // Apply margins to internal elements to emulate padding
+        margin-bottom: 0;
+        padding: (govuk-spacing(3) + $navigation-offset) 0 (govuk-spacing(3) - $navigation-offset);
+      }
+    }
+  }
+
+  .govuk-header__service-name + .govuk-header__navigation {
+    @include _govuk-rebrand {
+      @include govuk-media-query($from: desktop) {
+        // If there's both a service name and navigation,
+        // remove the extra padding between them on desktop
+        padding-top: 0;
+
+        // Restore the full bottom padding as the navigation isn't standalone
+        padding-bottom: govuk-spacing(3);
+      }
     }
   }
 
@@ -267,6 +432,12 @@
     &[hidden] {
       display: none;
     }
+
+    @include _govuk-rebrand {
+      @include govuk-media-query($from: mobile, $until: desktop) {
+        padding-bottom: govuk-spacing(3);
+      }
+    }
   }
 
   .govuk-header__navigation--end {
@@ -293,14 +464,41 @@
       @include govuk-typography-weight-bold;
       white-space: nowrap;
     }
+
+    @include _govuk-rebrand {
+      // Increase top padding of nav items...
+      padding-top: govuk-spacing(3);
+
+      // ...except on desktop
+      @include govuk-media-query($from: desktop) {
+        padding-top: govuk-spacing(1);
+      }
+
+      // Change the dividing line colour between mobile nav items
+      border-bottom-color: govuk-colour("white");
+
+      // Reduce default weight of links so that we can use bold for active ones
+      a {
+        @include govuk-typography-weight-regular;
+      }
+    }
   }
 
   .govuk-header__navigation-item--active {
     a {
+      @include _govuk-rebrand {
+        // Change active links to use bold text instead of changing colour
+        @include govuk-typography-weight-bold;
+      }
+
       &:link,
       &:hover,
       &:visited {
         color: $govuk-header-link-active;
+
+        @include _govuk-rebrand {
+          color: inherit;
+        }
       }
 
       // When printing, use the normal blue as this contrasts better with the
@@ -313,6 +511,10 @@
       // contrast is still acceptable
       &:focus {
         color: $govuk-focus-text-colour;
+
+        @include _govuk-rebrand {
+          color: $govuk-focus-text-colour;
+        }
       }
     }
   }

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

@@ -11,8 +11,10 @@
     height: govuk-px-to-rem(40px);
     margin-top: 0;
     padding: govuk-spacing(1);
-    // setting any background-color makes text invisible when changing colours to dark backgrounds in Firefox (https://bugzilla.mozilla.org/show_bug.cgi?id=1335476)
-    // as background-color and color need to always be set together, color should not be set either
+    // Setting any background-color makes text invisible when changing colours
+    // to dark backgrounds in Firefox (https://bugzil.la/1335476). As
+    // background-color and color need to always be set together, color should
+    // not be set either
     border: $govuk-border-width-form-element solid $govuk-input-border-colour;
     border-radius: 0;
 
@@ -24,7 +26,8 @@
       outline: $govuk-focus-width solid $govuk-focus-colour;
       // Ensure outline appears outside of the element
       outline-offset: 0;
-      // Double the border by adding its width again. Use `box-shadow` for this // instead of changing `border-width` - this is for consistency with
+      // Double the border by adding its width again. Use `box-shadow` for this
+      // instead of changing `border-width` - this is for consistency with
       // components such as textarea where we avoid changing `border-width` as
       // it will change the element size. Also, `outline` cannot be utilised
       // here as it is already used for the yellow focus state.
@@ -63,7 +66,7 @@
   }
 
   // em measurements are based on the point size of the typeface
-  // Extra space is added on the right hand side to allow for the Safari prefill icon
+  // Extra space is added on the right to allow for the Safari prefill icon
 
   .govuk-input--width-30 {
     max-width: 29.5em;

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

@@ -15,7 +15,8 @@
   .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
+    // 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) {
@@ -68,7 +69,7 @@
     @include govuk-font-size($size: 24);
     @include govuk-typography-weight-bold;
 
-    margin: 0 0 govuk-spacing(3) 0;
+    margin: 0 0 govuk-spacing(3);
 
     padding: 0;
   }

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

@@ -54,8 +54,8 @@
   .govuk-pagination__next {
     @include govuk-typography-weight-bold;
 
-    // Use flex to get around a whitespace issue between the arrow svg and the link text
-    // without having to rely on whitespace control from backend tooling
+    // Use flex to avoid extra space being introduced when whitespace exists
+    // between the arrow svg and the link text
     .govuk-pagination__link {
       display: flex;
       align-items: center;
@@ -96,7 +96,7 @@
     @include govuk-typography-weight-bold;
     color: $govuk-secondary-text-colour;
 
-    // Remove hover state for ellipsis items as they don't have links within them
+    // Remove hover state for ellipsis items as they don't contain links
     &:hover {
       background-color: transparent;
     }
@@ -118,8 +118,8 @@
       }
     }
 
-    // Add link hover decoration to prev/next text if no label present on prev/next only mode
-    // We do this so that we have a hover state in all possible instances
+    // Add link hover decoration to prev/next text if no label present on
+    // prev/next only mode,  so that we have a hover state in all cases
     &:hover,
     &:active {
       .govuk-pagination__link-title--decorated {
@@ -151,11 +151,10 @@
     @include govuk-typography-weight-regular;
     @include govuk-link-decoration;
     display: inline-block;
-    padding-left: govuk-spacing(6);
   }
 
   .govuk-pagination__icon {
-    // Set size using rems to make the icon scale with text if user resizes text in their browser
+    // Set size using rems to make the icon scale with text
     width: govuk-px-to-rem(15px);
     height: govuk-px-to-rem(13px);
     color: $govuk-secondary-text-colour;
@@ -175,23 +174,18 @@
   .govuk-pagination--block {
     display: block;
 
-    .govuk-pagination__item {
-      padding: govuk-spacing(3);
-      float: none;
-    }
-
     .govuk-pagination__next,
     .govuk-pagination__prev {
       padding-left: 0;
       float: none;
+
+      .govuk-pagination__link {
+        display: inline-block;
+      }
     }
 
     .govuk-pagination__next {
       padding-right: govuk-spacing(3);
-
-      .govuk-pagination__icon {
-        margin-left: 0;
-      }
     }
 
     // Only apply a border between prev and next if both are present
@@ -199,41 +193,34 @@
       border-top: 1px solid $govuk-border-colour;
     }
 
-    // Reset both these elements to their inline default, both to ensure that the focus state
-    // for block mode "shrink wraps" text as expected
-    .govuk-pagination__link,
-    .govuk-pagination__link-title {
-      display: inline;
-    }
-
-    // Set the after pseudo element to a block which makes the title visually display
-    // as block level whilst programmatically being inline
-    // We do this to get around an NVDA quirk where adjacent block level
-    // elements are always read out separately
+    // Set the after pseudo element to a block which makes the title visually
+    // display as block level whilst programmatically being inline. We do this
+    // to get around an NVDA quirk where adjacent block level elements are
+    // always read out separately
     .govuk-pagination__link-title::after {
       content: "";
       display: block;
     }
 
     .govuk-pagination__link {
+      padding-left: govuk-spacing(6);
       text-align: left;
 
-      &:focus {
-        // apply focus styling to the label within the link as if it were being focused
-        // to get around a display issue with a focusable inline element containing a mixture
-        // of inline and inline-block level elements
-        .govuk-pagination__link-label {
-          @include govuk-focused-text;
-        }
-      }
-
       &:not(:focus) {
         text-decoration: none;
       }
     }
 
     .govuk-pagination__icon {
-      margin-right: govuk-spacing(2);
+      // This magic number is brought to you by the following equation:
+      // ((lineHeight − arrowHeight) ÷ 2) ÷ fontSize
+      // ((25 − 13) ÷ 2) ÷ 19 = 0.326em
+      //
+      // This could have been done programmatically but we don't have functions
+      // for grabbing the line-height of specific typography sizes just yet.
+      margin-top: 0.326em;
+      margin-left: govuk-spacing(6) * -1;
+      float: left;
     }
   }
 }

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

@@ -14,17 +14,21 @@
     @include govuk-media-query($until: tablet) {
       padding: govuk-spacing(if($govuk-new-typography-scale, 4, 3)) - $govuk-border-width;
 
-      // This is an if-all-else-fails attempt to stop long words from overflowing the container
-      // on very narrow viewports by forcing them to break and wrap instead. This
-      // overflowing is more likely to happen when user increases text size on a mobile eg. using
-      // iOS Safari text resize controls.
+      // This is an if-all-else-fails attempt to stop long words from
+      // overflowing the container on very narrow viewports by forcing them to
+      // break and wrap instead. This overflowing is more likely to happen when
+      // user increases text size on a mobile eg. using iOS Safari text resize
+      // controls.
       //
-      // The overflowing is a particular problem with the panel component since it uses white
-      // text: when the text overflows the container, it is invisible on the white (page)
-      // background. When the text in our other components overflow, the user might have to scroll
-      // horizontally to view it but the the text remains legible.
+      // The overflowing is a particular problem with the panel component since
+      // it uses white text: when the text overflows the container, it is
+      // invisible on the white (page) background. When the text in our other
+      // components overflow, the user might have to scroll horizontally to view
+      // it but the the text remains legible.
       overflow-wrap: break-word;
-      word-wrap: break-word; // Support IE (autoprefixer doesn't add this as it's not a prefix)
+
+      // Support IE (autoprefixer doesn't add this as it's not a prefix)
+      word-wrap: break-word;
     }
   }