defra_ruby_template 5.4.0 → 5.11.0

data/vendor/assets/stylesheets/all.scss

@@ -1,3 +1,9 @@
 @import "index";
 
+@include _warning(
+  "import-using-all",
+  "Importing using 'govuk/all' is deprecated. Update your import statement to import 'govuk/index'.",
+  $silence-further-warnings: false
+);
+
 /*# sourceMappingURL=all.scss.map */

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

@@ -27,6 +27,7 @@
 @import "phase-banner/index";
 @import "radios/index";
 @import "select/index";
+@import "service-navigation/index";
 @import "skip-link/index";
 @import "summary-list/index";
 @import "table/index";

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

@@ -102,9 +102,9 @@
       &:hover {
         color: $govuk-accordion-base-colour;
         background: $govuk-accordion-hover-colour;
-        // The GOV.UK Design System focus state adds a box-shadow to the top and bottom of the
-        // button. We add a grey box-shadow on hover too, to make the height of the hover state
-        // match the height of the focus state.
+        // The focus state adds a box-shadow to the top and bottom of the
+        // button. We add a grey box-shadow on hover too, to make the height of
+        // the hover state match the height of the focus state.
         box-shadow:
           0 -2px $govuk-accordion-hover-colour,
           0 4px $govuk-accordion-hover-colour;
@@ -147,7 +147,7 @@
 
       position: relative;
 
-      // Set size using rems to make the icon scale with text if user resizes text in their browser
+      // Set size using rems so icon scales with text
       width: govuk-px-to-rem(20px);
       height: govuk-px-to-rem(20px);
 
@@ -184,14 +184,15 @@
     .govuk-accordion__section-button {
       width: 100%;
 
-      padding: govuk-spacing(2) 0 0 0;
+      padding: govuk-spacing(2) 0 0;
 
       border: 0;
 
       border-top: $govuk-accordion-bottom-border-width solid $govuk-border-colour;
 
-      // Visually separate the section from the one underneath when user changes colours in their
-      // browser. See https://github.com/alphagov/govuk-frontend/issues/2321#issuecomment-924201488
+      // Visually separate the section from the one underneath when user changes
+      // colours in their browser. See
+      // https://github.com/alphagov/govuk-frontend/issues/2321#issuecomment-924201488
       border-bottom: govuk-spacing(2) solid transparent;
 
       color: $govuk-text-colour;
@@ -230,8 +231,8 @@
       }
 
       &:focus {
-        // Remove default focus border around button as
-        // styling is being applied to inner text elements that receive focus
+        // Remove default focus border around button as styling is being applied
+        // to inner text elements that receive focus
         outline: 0;
 
         .govuk-accordion__section-heading-text-focus,
@@ -257,9 +258,10 @@
       }
     }
 
-    // Remove the transparent border when the section is expanded to make it clear that the heading
-    // relates to the content below. Adjust padding to maintain the height of the element.
-    // See https://github.com/alphagov/govuk-frontend/pull/2257#issuecomment-951920798
+    // Remove the transparent border when the section is expanded to make it
+    // clear that the heading relates to the content below. Adjust padding to
+    // maintain the height of the element. See
+    // https://github.com/alphagov/govuk-frontend/pull/2257#issuecomment-951920798
     .govuk-accordion__section--expanded .govuk-accordion__section-button {
       padding-bottom: govuk-spacing(3);
       border-bottom: 0;
@@ -269,8 +271,8 @@
       }
     }
 
-    // As Chevron icon is vertically aligned it overlaps with the focus state bottom border
-    // Styling adds some spacing
+    // As Chevron icon is vertically aligned it overlaps with the focus state
+    // bottom border – this adds some spacing
     .govuk-accordion__section-button:focus .govuk-accordion__section-toggle-focus {
       padding-bottom: 3px;
 
@@ -299,9 +301,9 @@
       color: $govuk-link-colour;
     }
 
-    // Add space between the icon and text.
-    // Avoid applying spacing directly to the icon as the use of `transform` will change the
-    // placement of any margins.
+    // Add space between the icon and text. Avoid applying spacing directly to
+    // the icon as the use of `transform` will change the placement of any
+    // margins.
     .govuk-accordion__show-all-text,
     .govuk-accordion__section-toggle-text {
       margin-left: govuk-spacing(1);
@@ -310,23 +312,25 @@
 
     // Background colour adjustment when user changes colours in Firefox
     //
-    // When user changes colours in Firefox, text colour inside <button> is always black
-    // (regardless of the custom colours the user has set). This is fine when the text in the
-    // button is not nested inside another element because when user changes colours in Firefox,
-    // the immediate background colour of buttons is always white (again, regardless of user's
-    // custom colours).
+    // When user changes colours in Firefox, text colour inside <button> is
+    // always black (regardless of the custom colours the user has set). This is
+    // fine when the text in the button is not nested inside another element
+    // because when user changes colours in Firefox, the immediate background
+    // colour of buttons is always white (again, regardless of user's custom
+    // colours).
     //
-    // However, when the text inside <button> is wrapped inside another element AND that element
-    // sets a background colour, the text colour is still black but the background of that nested
-    // element gets the user's custom background colour. When the custom background is a lighter
-    // hue, the contrast might be sufficient. But if the user's custom background colour is a
-    // darker colour, the contrast with the text might not be sufficient.
+    // However, when the text inside <button> is wrapped inside another element
+    // AND that element sets a background colour, the text colour is still black
+    // but the background of that nested element gets the user's custom
+    // background colour. When the custom background is a lighter hue, the
+    // contrast might be sufficient. But if the user's custom background colour
+    // is a darker colour, the contrast with the text might not be sufficient.
     //
-    // To ensure sufficient contrast, override the background colour set by the focus state on the
-    // nested elements to be transparent.
+    // To ensure sufficient contrast, override the background colour set by the
+    // focus state on the nested elements to be transparent.
     //
-    // Also override the background colour of the Show/Hide chevrons which set a background colour
-    // on hover.
+    // Also override the background colour of the Show/Hide chevrons which set a
+    // background colour on hover.
     @media screen and (forced-colors: active) {
       .govuk-accordion__show-all:hover,
       .govuk-accordion__section-button:hover {

data/vendor/assets/stylesheets/components/character-count/_index.scss

@@ -11,6 +11,14 @@
     .govuk-textarea {
       margin-bottom: govuk-spacing(1);
     }
+
+    // If the textarea enters the error state whilst the user is focused on it,
+    // show the error state. This presents feedback to the user that the value
+    // has become invalid without needing to see the counter.
+    .govuk-textarea--error:focus {
+      border-color: $govuk-error-colour;
+      box-shadow: inset 0 0 0 $govuk-border-width-form-element $govuk-error-colour;
+    }
   }
 
   .govuk-character-count__message {
@@ -19,10 +27,10 @@
     margin-bottom: 0;
 
     &::after {
-      // Zero-width space that will reserve vertical space when no hint is provided
-      // as:
-      // - setting a min-height is not possible without a magic number
-      //   because the line-height is set by the `govuk-font` call above
+      // Zero-width space that will reserve vertical space when no hint is
+      // provided as:
+      // - setting a min-height is not possible without a magic number because
+      //   the line-height is set by the `govuk-font` call above
       // - using `:empty` is not possible as the hint macro outputs line breaks
       content: "\200B";
     }

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

@@ -159,7 +159,7 @@
   // to be an even number in order to be centred under the 40px checkbox or radio.
   $conditional-border-width: $govuk-border-width-narrow;
   // Calculate the amount of padding needed to keep the border centered against the checkbox.
-  $conditional-border-padding: ($govuk-checkboxes-size / 2) - ($conditional-border-width / 2);
+  $conditional-border-padding: ($govuk-touch-target-size / 2) - ($conditional-border-width / 2);
   // Move the border centered with the checkbox
   $conditional-margin-left: $conditional-border-padding;
   // Move the contents of the conditional inline with the label
@@ -255,6 +255,11 @@
       padding-left: ($govuk-touch-target-size - $input-offset) - ($margin-left + $conditional-border-width);
     }
 
+    .govuk-checkboxes__divider {
+      width: $govuk-small-checkboxes-size;
+      margin-bottom: govuk-spacing(1);
+    }
+
     // Hover state for small checkboxes.
     //
     // We use a hover state for small checkboxes because the touch target size

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

@@ -1,17 +1,23 @@
+@import "../button/index";
+
 @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 {
     padding-top: govuk-spacing(4);
-    // The component does not set bottom spacing.
-    // The bottom spacing should be created by the items inside the component.
+    // 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.
+    // 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-canvas-background-colour;
+    @include _govuk-rebrand(
+      "background-color",
+      $govuk-template-background-colour,
+      $_govuk-rebrand-template-background-colour
+    );
   }
 
   // Support older browsers which don't hide elements with the `hidden` attribute
@@ -25,21 +31,24 @@
     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.
+      // 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.
+      // 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.
+      // 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.
+      // 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/date-input/_index.scss

@@ -2,12 +2,12 @@
 @import "../input/index";
 @import "../hint/index";
 @import "../label/index";
+@import "../fieldset/index";
 
 @include govuk-exports("govuk/component/date-input") {
   .govuk-date-input {
     @include govuk-clearfix;
-    // font-size: 0 removes whitespace caused by inline-block
-    font-size: 0;
+    font-size: 0; // removes whitespace caused by inline-block
   }
 
   .govuk-date-input__item {

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

@@ -8,9 +8,10 @@
   }
 
   .govuk-details__summary {
-    // Make the focus outline shrink-wrap the text content of the summary
-    display: inline-block;
+    display: block;
+  }
 
+  .govuk-details[open] .govuk-details__summary {
     margin-bottom: govuk-spacing(1);
   }
 
@@ -72,6 +73,10 @@
       // Absolutely position the marker against this element
       position: relative;
 
+      // Make the focus outline shrink-wrap the text content of the summary
+      width: -webkit-fit-content;
+      width: fit-content;
+
       // Allow for absolutely positioned marker and align with disclosed text
       padding-left: govuk-spacing(4) + $govuk-border-width;
 

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

@@ -30,6 +30,10 @@
     > * + * {
       @include govuk-responsive-margin(4, "top");
     }
+
+    > :last-child {
+      @include govuk-responsive-margin(1, "bottom");
+    }
   }
 
   // Cross-component class - adjusts styling of list component

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

@@ -7,9 +7,8 @@
     @include govuk-clearfix;
   }
 
-  // Fix for Firefox < 53
-  // https://bugzilla.mozilla.org/show_bug.cgi?id=504622
-  // stylelint-disable selector-type-no-unknown -- Ignore unknown 'x:-moz-any-link'
+  // Fix for Firefox < 53 (https://bugzil.la/504622)
+  // stylelint-disable selector-type-no-unknown -- Ignore 'x:-moz-any-link'
   @supports not (caret-color: auto) {
     .govuk-fieldset,
     x:-moz-any-link {
@@ -59,8 +58,7 @@
   }
 
   // When the legend contains an H1, we want the H1 to inherit all styles from
-  // the legend. Effectively we want to be able to treat the heading as if it is
-  // not there.
+  // the legend. Effectively treat the heading as if it is not there.
   .govuk-fieldset__heading {
     margin: 0;
     font-size: inherit;

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

@@ -3,7 +3,11 @@
 @import "../label/index";
 
 @include govuk-exports("govuk/component/file-upload") {
+  $file-upload-border-width: 2px;
   $component-padding: govuk-spacing(1);
+  $empty-button-background-colour: govuk-colour("white");
+  $empty-pseudo-button-background-colour: govuk-colour("light-grey");
+  $empty-status-background-colour: govuk-tint(govuk-colour("blue"), 70%);
 
   .govuk-file-upload {
     @include govuk-font($size: 19);
@@ -12,11 +16,10 @@
     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
+    // 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://webkit.org/b/224746
     &::-webkit-file-upload-button {
       -webkit-appearance: button;
       color: inherit;
@@ -26,13 +29,13 @@
     &:focus {
       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
-      // yellow focus state.
+      // (which changes element size) and since `outline` is already used for
+      // the yellow focus state.
       box-shadow: inset 0 0 0 4px $govuk-input-border-colour;
     }
 
-    // Set "focus-within" to fix https://bugzilla.mozilla.org/show_bug.cgi?id=1430196
-    // so that component receives focus in Firefox.
+    // Set "focus-within" to fix https://bugzil.la/1430196 so that component
+    // receives focus in Firefox.
     // This can't be set together with `:focus` as all versions of IE fail
     // to recognise `focus-within` and don't set any styles from the block
     // when it's a selector.
@@ -47,6 +50,169 @@
       cursor: not-allowed;
     }
   }
+
+  .govuk-drop-zone {
+    display: block;
+    position: relative;
+    z-index: 0;
+    background-color: $govuk-body-background-colour;
+  }
+
+  // required because disabling pointer events
+  // on the button means that the cursor style
+  // be applied on the button itself
+  .govuk-drop-zone--disabled {
+    cursor: not-allowed;
+  }
+
+  .govuk-file-upload-button__pseudo-button {
+    width: auto;
+    margin-right: govuk-spacing(2);
+    margin-bottom: $govuk-border-width-form-element + 1;
+    flex-shrink: 0;
+  }
+
+  .govuk-file-upload-button__instruction {
+    margin-top: govuk-spacing(2) - ($govuk-border-width-form-element + 1);
+    margin-bottom: 0;
+    text-align: left;
+  }
+
+  .govuk-file-upload-button__status {
+    display: block;
+    margin-bottom: govuk-spacing(2);
+    padding: govuk-spacing(3) govuk-spacing(2);
+    background-color: govuk-colour("white");
+    text-align: left;
+  }
+
+  // bugs documented with button using flex
+  // https://github.com/philipwalton/flexbugs#flexbug-9
+  // so we need a container here
+  .govuk-file-upload-button__pseudo-button-container {
+    display: flex;
+    align-items: baseline;
+    flex-wrap: wrap;
+  }
+
+  .govuk-file-upload-button {
+    width: 100%;
+    // align the padding to be same as notification banner and error summary accounting for the thicker borders
+    padding: (govuk-spacing(3) + $govuk-border-width - $file-upload-border-width);
+    border: $file-upload-border-width govuk-colour("mid-grey") solid;
+    background-color: govuk-colour("light-grey");
+    cursor: pointer;
+
+    @include govuk-media-query($from: tablet) {
+      padding: (govuk-spacing(4) + $govuk-border-width - $file-upload-border-width);
+    }
+
+    .govuk-file-upload-button__pseudo-button {
+      background-color: govuk-colour("white");
+    }
+
+    &:hover {
+      background-color: govuk-tint(govuk-colour("mid-grey"), 20%);
+
+      .govuk-file-upload-button__pseudo-button {
+        background-color: govuk-shade(govuk-colour("light-grey"), 10%);
+      }
+
+      .govuk-file-upload-button__status {
+        background-color: govuk-tint(govuk-colour("blue"), 80%);
+      }
+    }
+
+    &:active,
+    &:focus {
+      border: $file-upload-border-width solid govuk-colour("black");
+      outline: $govuk-focus-width solid $govuk-focus-colour;
+      // Ensure outline appears outside of the element
+      outline-offset: 0;
+      background-color: govuk-tint(govuk-colour("mid-grey"), 20%);
+      // 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.
+      box-shadow: inset 0 0 0 $govuk-border-width-form-element;
+
+      .govuk-file-upload-button__pseudo-button {
+        background-color: $govuk-focus-colour;
+        box-shadow: 0 2px 0 govuk-colour("black");
+      }
+
+      &:hover .govuk-file-upload-button__pseudo-button {
+        border-color: $govuk-focus-colour;
+        outline: 3px solid transparent;
+        background-color: govuk-colour("light-grey");
+        box-shadow: inset 0 0 0 1px $govuk-focus-colour;
+      }
+    }
+  }
+
+  .govuk-file-upload-button--empty {
+    border-style: dashed;
+    background-color: $empty-button-background-colour;
+
+    .govuk-file-upload-button__pseudo-button {
+      background-color: $empty-pseudo-button-background-colour;
+    }
+
+    .govuk-file-upload-button__status {
+      color: govuk-shade(govuk-colour("blue"), 60%);
+      background-color: $empty-status-background-colour;
+    }
+
+    &:hover,
+    &:focus,
+    &:active {
+      background-color: govuk-colour("light-grey");
+
+      .govuk-file-upload-button__status {
+        background-color: govuk-tint(govuk-colour("blue"), 80%);
+      }
+    }
+  }
+
+  .govuk-file-upload-button--dragging {
+    border-style: solid;
+    border-color: govuk-colour("black");
+
+    // extra specificity to apply when
+    // empty
+    &.govuk-file-upload-button {
+      background-color: govuk-tint(govuk-colour("mid-grey"), 20%);
+    }
+
+    &.govuk-file-upload-button--empty {
+      background-color: govuk-colour("light-grey");
+    }
+
+    &.govuk-file-upload-button--empty:not(:disabled) .govuk-file-upload-button__status,
+    &.govuk-file-upload-button--empty .govuk-file-upload-button__pseudo-button {
+      background-color: govuk-colour("white");
+    }
+
+    .govuk-file-upload-button__pseudo-button {
+      background-color: govuk-shade(govuk-colour("light-grey"), 10%);
+    }
+  }
+
+  .govuk-file-upload-button:disabled {
+    pointer-events: none;
+    opacity: 0.5;
+
+    background-color: $empty-button-background-colour;
+
+    .govuk-file-upload-button__pseudo-button {
+      background-color: $empty-pseudo-button-background-colour;
+    }
+
+    .govuk-file-upload-button__status {
+      background-color: $empty-status-background-colour;
+    }
+  }
 }
 
 /*# sourceMappingURL=_index.scss.map */