dxw_govuk_frontend_rails 2.13.0 → 3.0.0

data/vendor/assets/stylesheets/components/back-link/_back-link.scss

@@ -25,6 +25,12 @@
     // Underline is provided by a bottom border
     text-decoration: none;
 
+    // When the back link is focused, hide the bottom link border as the
+    // focus styles has a bottom border.
+    &:focus {
+      border-bottom-color: transparent;
+    }
+
     // Prepend left pointing arrow
     &:before {
       @include govuk-shape-arrow($direction: left, $base: 10px, $height: 6px);
@@ -34,21 +40,23 @@
       // Vertically align with the parent element
       position: absolute;
 
-      top: -1px;
-      bottom: 1px;
+      top: 0;
+      bottom: 0;
       left: 0;
 
       margin: auto;
     }
   }
 
-  // Begin adjustments for font baseline offset
-  // These should be removed when the font is updated with the correct baseline
-
-  .govuk-back-link:before {
-    $offset: 1px;
+  @if $govuk-use-legacy-font {
+    // Begin adjustments for font baseline offset
+    // These should be removed when legacy font support is dropped
+    .govuk-back-link:before {
+      $offset: 1px;
 
-    top: $offset * -1;
-    bottom: $offset;
+      top: $offset * -1;
+      bottom: $offset;
+    }
   }
+
 }

data/vendor/assets/stylesheets/components/breadcrumbs/_breadcrumbs.scss

@@ -56,17 +56,16 @@
 
       position: absolute;
 
-      // Begin adjustments for font baseline offset
-      // These should be reverted when the font is updated with the correct
-      // baseline
-
-      // top: 0;
-      // bottom: 0;
-
-      top: -1px;
-      bottom: 1px;
-
-      // End adjustments for font baseline offset
+      @if $govuk-use-legacy-font {
+        // Begin adjustments for font baseline offset
+        // These should be removed when legacy font support is dropped
+        top: -1px;
+        bottom: 1px;
+
+      } @else {
+        top: 0;
+        bottom: 0;
+      }
 
       // Offset by the difference between the width of the non-rotated square
       // and its width when rotated

data/vendor/assets/stylesheets/components/button/_button.scss

@@ -3,14 +3,13 @@
 @import "../../helpers/all";
 
 @include govuk-exports("govuk/component/button") {
-  // Primary button variables
-  $govuk-button-colour: #00823b; // sass-lint:disable no-color-literals
+  $govuk-button-colour: govuk-colour("green", $legacy: #00823b); // sass-lint:disable no-color-literals
   $govuk-button-hover-colour: govuk-shade($govuk-button-colour, 20%);
   $govuk-button-shadow-colour: govuk-shade($govuk-button-colour, 60%);
   $govuk-button-text-colour: govuk-colour("white");
 
   // Secondary button variables
-  $govuk-secondary-button-colour: govuk-colour("grey-3");
+  $govuk-secondary-button-colour: govuk-colour("light-grey", $legacy: "grey-3");
   $govuk-secondary-button-hover-colour: govuk-shade($govuk-secondary-button-colour, 10%);
   $govuk-secondary-button-shadow-colour: govuk-shade($govuk-secondary-button-colour, 40%);
   $govuk-secondary-button-text-colour: govuk-colour("black");
@@ -28,7 +27,6 @@
 
   .govuk-button {
     @include govuk-font($size: 19, $line-height: 19px);
-    @include govuk-focusable;
 
     box-sizing: border-box;
     display: inline-block;
@@ -36,7 +34,7 @@
     width: 100%;
     margin-top: 0;
     @include govuk-responsive-margin(6, "bottom", $adjustment: $button-shadow-size); // s2
-    padding: (govuk-spacing(2) - $govuk-border-width-form-element - ($button-shadow-size / 2)) govuk-spacing(2); // s1
+    padding: (govuk-spacing(2) - $govuk-border-width-form-element) govuk-spacing(2) (govuk-spacing(2) - $govuk-border-width-form-element - ($button-shadow-size / 2)); // s1
     border: $govuk-border-width-form-element solid transparent;
     border-radius: 0;
     color: $govuk-button-text-colour;
@@ -64,37 +62,49 @@
       text-decoration: none;
     }
 
-    // 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 so
-    // so that unvisited links styled as buttons do not end up with dark blue
-    // text when focussed.
-    @include govuk-compatibility(govuk_template) {
-      &:link:focus {
-        color: $govuk-button-text-colour;
-      }
-    }
-
     // Fix unwanted button padding in Firefox
     &::-moz-focus-inner {
       padding: 0;
       border: 0;
     }
 
-    &:hover,
-    &:focus {
+    &:hover {
       background-color: $govuk-button-hover-colour;
     }
 
     &:active {
+      // Bump the button down so it looks like its being pressed in
       top: $button-shadow-size;
-      box-shadow: none;
 
       @include govuk-if-ie8 {
         border-bottom-width: 0;
       }
     }
 
+    &:focus {
+      border-color: $govuk-focus-colour;
+      // When colours are overridden, for example when users have a dark mode,
+      // backgrounds and box-shadows disappear, so we need to ensure there's a
+      // transparent outline which will be set to a visible colour.
+      // Since Internet Explorer 8 does not support box-shadow, we want to force the user-agent outlines
+      @include govuk-not-ie8 {
+        outline: $govuk-focus-width solid transparent;
+      }
+      // Since Internet Explorer does not support `:not()` we set a clearer focus style to match user-agent outlines.
+      @include govuk-if-ie8 {
+        color: $govuk-focus-text-colour;
+        background-color: $govuk-focus-colour;
+      }
+      box-shadow: inset 0 0 0 1px $govuk-focus-colour;
+    }
+
+    &:focus:not(:active):not(:hover) {
+      border-color: $govuk-focus-colour;
+      color: $govuk-focus-text-colour;
+      background-color: $govuk-focus-colour;
+      box-shadow: 0 2px 0 $govuk-focus-text-colour;
+    }
+
     // The following adjustments do not work for <input type="button"> as
     // non-container elements cannot include pseudo elements (i.e. ::before).
 
@@ -175,8 +185,7 @@
       }
     }
 
-    &:hover,
-    &:focus {
+    &:hover {
       background-color: $govuk-secondary-button-hover-colour;
 
       &[disabled] {
@@ -208,8 +217,7 @@
       }
     }
 
-    &:hover,
-    &:focus {
+    &:hover {
       background-color: $govuk-warning-button-hover-colour;
 
       &[disabled] {
@@ -222,35 +230,50 @@
     @include govuk-typography-weight-bold;
     @include govuk-typography-responsive($size: 24, $override-line-height: 1);
 
+    display: -webkit-inline-box;
+
+    display: -webkit-inline-flex;
+
+    display: -ms-inline-flexbox;
+
+    display: inline-flex;
     min-height: auto;
-    padding-top: govuk-spacing(2) - $govuk-border-width-form-element;
-    padding-right: govuk-spacing(7);
-    padding-bottom: govuk-spacing(2) - $govuk-border-width-form-element;
-    padding-left: govuk-spacing(3);
-
-    background-image: govuk-image-url("icon-pointer.png");
-    background-repeat: no-repeat;
-    background-position: 100% 50%;
-
-    @include govuk-device-pixel-ratio {
-      background-image: govuk-image-url("icon-pointer-2x.png");
-      background-size: 30px 19px;
-    }
-  }
 
-  // Begin adjustments for font baseline offset
-  // These should be removed when the font is updated with the correct baseline
-  // For the 1px addition please see https://github.com/alphagov/govuk-frontend/pull/365#discussion_r154349428
+    -webkit-box-pack: center;
 
-  $offset: 2;
+    -webkit-justify-content: center;
 
-  .govuk-button {
-    padding-top: (govuk-spacing(2) - $govuk-border-width-form-element - ($button-shadow-size / 2) + $offset); // s1
-    padding-bottom: (govuk-spacing(2) - $govuk-border-width-form-element - ($button-shadow-size / 2) - $offset + 1); // s1
+        -ms-flex-pack: center;
+
+            justify-content: center;
   }
 
-  .govuk-button--start {
-    padding-top: (govuk-spacing(2) - $govuk-border-width-form-element - ($button-shadow-size / 2) + $offset); // s1
-    padding-bottom: (govuk-spacing(2) - $govuk-border-width-form-element - ($button-shadow-size / 2) - $offset + 1); // s1
+  .govuk-button__start-icon {
+    margin-left: govuk-spacing(1);
+
+    @include govuk-media-query($from: desktop) {
+      margin-left: govuk-spacing(2);
+    }
+    vertical-align: middle;
+    -webkit-flex-shrink: 0;
+        -ms-flex-negative: 0;
+            flex-shrink: 0;
+    -webkit-align-self: center;
+        -ms-flex-item-align: center;
+            align-self: center;
+  }
+
+  @if $govuk-use-legacy-font {
+    // Begin adjustments for font baseline offset when using v1 of nta
+    $offset: 2;
+
+    .govuk-button {
+      padding-top: (govuk-spacing(2) - $govuk-border-width-form-element - ($button-shadow-size / 2) + $offset); // s1
+      padding-bottom: (govuk-spacing(2) - $govuk-border-width-form-element - ($button-shadow-size / 2) - $offset + 1); // s1
+    }
+
+    .govuk-button__start-icon {
+      margin-top: -3px;
+    }
   }
 }

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

@@ -127,11 +127,7 @@
 
   // Focused state
   .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before {
-    // Since box-shadows are removed when users customise their colours, we set
-    // a transparent outline that is shown instead.
-    // https://accessibility.blog.gov.uk/2017/03/27/how-users-change-colours-on-websites/
-    outline: $govuk-focus-width solid transparent;
-    outline-offset: $govuk-focus-width;
+    border-width: 4px;
     box-shadow: 0 0 0 $govuk-focus-width $govuk-focus-colour;
   }
 
@@ -154,7 +150,9 @@
   // Conditional reveals
   // =========================================================
 
-  $conditional-border-width: $govuk-border-width-mobile;
+  // The narrow border is used in the conditional reveals because the border has
+  // 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);
   // Move the border centered with the checkbox

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

@@ -27,6 +27,14 @@
     // Style the summary to look like a link...
     color: $govuk-link-colour;
     cursor: pointer;
+
+    &:hover {
+      color: $govuk-link-hover-colour;
+    }
+
+    &:focus {
+      @include govuk-focused-text;
+    }
   }
 
   // ...but only underline the text, not the arrow
@@ -34,18 +42,9 @@
     text-decoration: underline;
   }
 
-  .govuk-details__summary:hover {
-    color: $govuk-link-hover-colour;
-  }
-
-  .govuk-details__summary:focus {
-    // -1px offset fixes gap between background and outline in Firefox
-    outline: ($govuk-focus-width + 1px) solid $govuk-focus-colour;
-    outline-offset: -1px;
-    // When focussed, the text colour needs to be darker to ensure that colour
-    // contrast is still acceptable
-    color: $govuk-focus-text-colour;
-    background: $govuk-focus-colour;
+  // Remove the underline when focussed to avoid duplicate borders
+  .govuk-details__summary:focus .govuk-details__summary-text {
+    text-decoration: none;
   }
 
   // Remove the default details marker so we can style our own consistently and
@@ -59,7 +58,7 @@
     content: "";
     position: absolute;
 
-    top: 0;
+    top: -1px;
     bottom: 0;
     left: 0;
 

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

@@ -10,12 +10,11 @@
     @include govuk-text-colour;
     @include govuk-responsive-padding(4);
     @include govuk-responsive-margin(8, "bottom");
-    @include govuk-focusable;
 
-    border: $govuk-border-width-mobile solid $govuk-error-colour;
+    border: $govuk-border-width solid $govuk-error-colour;
 
-    @include govuk-media-query($from: tablet) {
-      border: $govuk-border-width solid $govuk-error-colour;
+    &:focus {
+      outline: $govuk-focus-width solid $govuk-focus-colour;
     }
   }
 
@@ -42,7 +41,6 @@
   }
 
   .govuk-error-summary__list a {
-    @include govuk-focusable-fill;
     @include govuk-typography-weight-bold;
 
     // Override default link styling to use error colour
@@ -53,19 +51,8 @@
       color: $govuk-error-colour;
     }
 
-    // When focussed, the text colour needs to be darker to ensure that colour
-    // contrast is still acceptable
     &:focus {
-      color: $govuk-focus-text-colour;
-    }
-
-    // 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 {
-        color: $govuk-error-colour;
-      }
+      @include govuk-focused-text;
     }
   }
 

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

@@ -7,13 +7,75 @@
 @import "../label/label";
 
 @include govuk-exports("govuk/component/file-upload") {
+  $component-padding: govuk-spacing(1);
+
   .govuk-file-upload {
     @include govuk-font($size: 19);
     @include govuk-text-colour;
-    @include govuk-focusable;
+    padding-top: $component-padding;
+    padding-bottom: $component-padding;
+
+    &: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
+      // yellow focus state.
+      box-shadow: inset 0 0 0 4px $govuk-input-border-colour;
+
+      @include govuk-if-ie8 {
+        // IE8 doesn't support `box-shadow` so add an actual border
+        border: 4px solid $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.
+    // 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.
+    &: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;
+    }
   }
 
   .govuk-file-upload--error {
+    // As `upload--error` has border, it needs to have the same padding as
+    // the standard focused element.
+    margin-right: -$component-padding;
+    margin-left: -$component-padding;
+    padding-right: $component-padding;
+    padding-left: $component-padding;
     border: $govuk-border-width-form-element-error solid $govuk-error-colour;
+
+    &:focus {
+      border-color: $govuk-input-border-colour;
+      // Remove `box-shadow` inherited from `:focus` as `file-upload--error`
+      // already has the thicker border.
+      box-shadow: none;
+    }
+
+    // Repeat `:focus` styles to prevent error styles from being applied when
+    // input button is pressed as this moves the focus to "within".
+    // 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.
+    &:focus-within {
+      border-color: $govuk-input-border-colour;
+      box-shadow: none;
+    }
   }
 }

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

@@ -7,11 +7,24 @@
 @include govuk-exports("govuk/component/footer") {
 
   $govuk-footer-background: $govuk-canvas-background-colour;
-  $govuk-footer-border-top: #a1acb2;
-  $govuk-footer-border: govuk-colour("grey-2");
-  $govuk-footer-text: #454a4c;
+  $govuk-footer-border: $govuk-border-colour;
+  // This variable can be removed entirely once the legacy palette goes away,
+  // 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: #171819;
+  $govuk-footer-link-hover: false;
+
+  @if ($govuk-use-legacy-palette) {
+    // sass-lint:disable no-color-literals
+    $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;
+  }
 
   // Based on the govuk-crest-2x.png image dimensions.
   $govuk-footer-crest-image-width-2x: 250px;
@@ -31,22 +44,27 @@
   }
 
   .govuk-footer__link {
-    @include govuk-focusable-fill;
-
-    &:link,
-    &:visited {
-      color: $govuk-footer-link;
-    }
+    @if ($govuk-use-legacy-palette) {
+      &:link,
+      &:visited {
+        color: $govuk-footer-link;
+      }
 
-    &:hover,
-    &:active {
-      color: $govuk-footer-link-hover;
+      &:hover,
+      &:active {
+        color: $govuk-footer-link-hover;
+      }
+    } @else {
+      &:link,
+      &:visited,
+      &:hover,
+      &:active {
+        color: $govuk-footer-link;
+      }
     }
 
-    // When focussed, the text colour needs to be darker to ensure that colour
-    // contrast is still acceptable
     &:focus {
-      color: $govuk-focus-text-colour;
+      @include govuk-focused-text;
     }
 
     // alphagov/govuk_template includes a specific a:link:focus selector
@@ -59,6 +77,19 @@
     }
   }
 
+  // Internet Explorer 8 does not support `:not()` selectors, so don't conditionally show underlines.
+  @include govuk-not-ie8 {
+    .govuk-footer__inline-list .govuk-footer__link,
+    .govuk-footer__list .govuk-footer__link {
+      text-decoration: none;
+
+      &:hover:not(:focus),
+      &:active:not(:focus) {
+        text-decoration: underline;
+      }
+    }
+  }
+
   .govuk-footer__section-break {
     margin: 0; // Reset `<hr>` default margins
     @include govuk-responsive-margin(8, "bottom");

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

@@ -46,9 +46,11 @@
   }
 
   .govuk-header__logotype-crown {
+    position: relative;
+    top: -1px;
     margin-right: 1px;
     fill: currentColor;
-    vertical-align: middle;
+    vertical-align: top;
   }
 
   .govuk-header__logotype-crown-fallback-image {
@@ -59,14 +61,12 @@
   }
 
   .govuk-header__product-name {
-    @include govuk-font($size: 24);
+    @include govuk-font($size: 24, $line-height: 1);
     display: inline-table;
     padding-right: govuk-spacing(2);
   }
 
   .govuk-header__link {
-    @include govuk-focusable-fill;
-
     text-decoration: none;
 
     &:link,
@@ -78,10 +78,8 @@
       text-decoration: underline;
     }
 
-    // When focussed, the text colour needs to be darker to ensure that colour
-    // contrast is still acceptable
     &:focus {
-      color: $govuk-focus-text-colour;
+      @include govuk-focused-text;
     }
 
     // alphagov/govuk_template includes a specific a:link:focus selector
@@ -101,7 +99,7 @@
 
     display: inline-block;
     font-size: 30px; // We don't have a mixin that produces 30px font size
-    line-height: 30px;
+    line-height: 1;
 
     &:link,
     &:visited {
@@ -116,6 +114,12 @@
       // specified currentColor explicitly IE8 would ignore this rule.
       border-bottom: 1px solid;
     }
+
+    // Remove any borders that show when focused and hovered.
+    &:focus {
+      margin-bottom: 0;
+      border-bottom: 0;
+    }
   }
 
   .govuk-header__link--service-name {
@@ -165,14 +169,16 @@
       text-decoration: underline;
     }
 
+    &:focus {
+      @include govuk-focused-text;
+    }
+
     &::after {
       @include govuk-shape-arrow($direction: down, $base: 10px, $display: inline-block);
       content: "";
       margin-left: govuk-spacing(1);
     }
 
-    @include govuk-focusable;
-
     @include mq ($from: tablet) {
       top: govuk-spacing(3);
     }
@@ -287,17 +293,25 @@
     }
   }
 
-  // Begin adjustments for font baseline offset
-  // These should be removed when the font is updated with the correct baseline
-  .govuk-header__logotype-crown {
-    position: relative;
-    top: -4px;
-  }
+  @if $govuk-use-legacy-font {
+    // Begin adjustments for font baseline offset
+    // These should be removed when the font is updated with the correct baseline
+    .govuk-header__logotype-crown,
+    .govuk-header__logotype-crown-fallback-image {
+      position: relative;
+      top: -4px;
+      vertical-align: middle;
+    }
 
-  .govuk-header {
-    $offset: 3px;
-    padding-top: $offset;
+    .govuk-header {
+      $offset: 3px;
+      padding-top: $offset;
+    }
+
+    .govuk-header__link--homepage {
+      line-height: 30px;
+    }
+    // End adjustments
   }
-  // End adjustments
 
 }