defra_ruby_template 3.15.1 → 5.4.0

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

@@ -1,5 +1,4 @@
 @include govuk-exports("govuk/component/header") {
-
   $govuk-header-background: govuk-colour("black");
   $govuk-header-border-color: $govuk-brand-colour;
   $govuk-header-border-width: govuk-spacing(2);
@@ -7,9 +6,15 @@
   $govuk-header-link-active: #1d8feb;
   $govuk-header-nav-item-border-color: #2e3133;
   $govuk-header-link-underline-thickness: 3px;
+  $govuk-header-vertical-spacing-value: 2;
+  // This crown height is only used to calculate top offset of mobile menu button
+  // as the crown svg height is the only thing that controls the height of the header
+  $govuk-header-crown-height: 30px;
+  $govuk-header-menu-button-height: 24px;
+  $govuk-header-menu-button-width: 80px;
 
   .govuk-header {
-    @include govuk-font($size: 16);
+    @include govuk-font($size: 16, $line-height: 1);
 
     border-bottom: govuk-spacing(2) solid govuk-colour("white");
     color: $govuk-header-text;
@@ -29,16 +34,20 @@
     @include govuk-clearfix;
     position: relative;
     margin-bottom: -$govuk-header-border-width;
-    padding-top: govuk-spacing(2);
+    padding-top: govuk-spacing($govuk-header-vertical-spacing-value);
     border-bottom: $govuk-header-border-width solid $govuk-header-border-color;
   }
 
   .govuk-header__logotype {
     display: inline-block;
+    position: relative;
+    top: -3px;
 
     // 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);
+    fill: currentcolor;
+    vertical-align: top;
 
     // Prevent readability backplate from obscuring underline in Windows High
     // Contrast Mode
@@ -54,24 +63,32 @@
     }
   }
 
-  .govuk-header__logotype-crown {
-    position: relative;
-    top: -1px;
-    margin-right: 1px;
-    fill: currentColor;
-    vertical-align: top;
-  }
-
-  .govuk-header__logotype-crown-fallback-image {
-    width: 36px;
-    height: 32px;
-    border: 0;
-    vertical-align: bottom;
-  }
-
   .govuk-header__product-name {
-    @include govuk-font($size: 24, $line-height: 1);
+    $product-name-offset: if($govuk-new-typography-scale, 7px, 10px);
+    $product-name-offset-tablet: 5px;
+
+    @include govuk-font-size($size: 24, $line-height: 1);
+    @include govuk-typography-weight-regular;
     display: inline-table;
+
+    // Maintain space below logo when wrapped
+    margin-top: $product-name-offset;
+
+    // Firefox places the GOV.UK logo one pixel higher, due to how it rounds
+    // subpixels, so nudge the product name in FF to still be aligned.
+    @-moz-document url-prefix() {
+      margin-top: $product-name-offset - 0.5px;
+    }
+
+    // Align vertically with logo when not wrapped
+    vertical-align: top;
+
+    @include govuk-media-query($from: tablet) {
+      margin-top: $product-name-offset-tablet;
+      @-moz-document url-prefix() {
+        margin-top: $product-name-offset-tablet - 0.5px;
+      }
+    }
   }
 
   .govuk-header__link {
@@ -82,7 +99,6 @@
     // - 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;
 
     text-decoration: none;
@@ -91,7 +107,7 @@
       text-decoration: underline;
       text-decoration-thickness: $govuk-header-link-underline-thickness;
 
-      @if ($govuk-link-underline-offset) {
+      @if $govuk-link-underline-offset {
         text-underline-offset: $govuk-link-underline-offset;
       }
     }
@@ -104,12 +120,19 @@
   .govuk-header__link--homepage {
     // Font size needs to be set on the link so that the box sizing is correct
     // in Firefox
-    @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;
+
+    @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,
     &:visited {
@@ -120,8 +143,6 @@
     &:active {
       // Negate the added border
       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: $govuk-header-link-underline-thickness solid;
     }
 
@@ -132,10 +153,11 @@
     }
   }
 
-  .govuk-header__link--service-name {
+  .govuk-header__service-name {
     display: inline-block;
     margin-bottom: govuk-spacing(2);
-    @include govuk-font($size: 24, $weight: bold);
+    @include govuk-font-size($size: 24);
+    @include govuk-typography-weight-bold;
   }
 
   .govuk-header__logo,
@@ -144,19 +166,28 @@
   }
 
   .govuk-header__logo {
-    @include govuk-responsive-margin(2, "bottom");
-    padding-right: govuk-spacing(8);
+    @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) {
+    @include govuk-media-query($from: desktop) {
       width: 33.33%;
       padding-right: $govuk-gutter-half;
       float: left;
       vertical-align: top;
+
+      // Reset float when logo is the last child, without a navigation
+      &:last-child {
+        width: auto;
+        padding-right: 0;
+        float: none;
+      }
     }
   }
 
   .govuk-header__content {
-    @include govuk-media-query ($from: desktop) {
+    @include govuk-media-query($from: desktop) {
       width: 66.66%;
       padding-left: $govuk-gutter-half;
       float: left;
@@ -165,22 +196,30 @@
 
   .govuk-header__menu-button {
     @include govuk-font($size: 16);
-    display: none;
     position: absolute;
-    top: govuk-spacing(4);
+    // 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;
     padding: 0;
     border: 0;
     color: govuk-colour("white");
     background: none;
+    word-break: break-all;
     cursor: pointer;
 
     &:hover {
       -webkit-text-decoration: solid underline $govuk-header-link-underline-thickness;
               text-decoration: solid underline $govuk-header-link-underline-thickness;
 
-      @if ($govuk-link-underline-offset) {
+      @if $govuk-link-underline-offset {
         text-underline-offset: $govuk-link-underline-offset;
       }
     }
@@ -189,68 +228,60 @@
       @include govuk-focused-text;
     }
 
-    &:after {
+    &::after {
       @include govuk-shape-arrow($direction: down, $base: 10px, $display: inline-block);
       content: "";
       margin-left: govuk-spacing(1);
     }
 
-    @include govuk-media-query ($from: tablet) {
+    &[aria-expanded="true"]::after {
+      @include govuk-shape-arrow($direction: up, $base: 10px, $display: inline-block);
+    }
+
+    @include govuk-media-query($from: tablet) {
       top: govuk-spacing(3);
     }
-  }
 
-  .govuk-header__menu-button--open {
-    &:after {
-      @include govuk-shape-arrow($direction: up, $base: 10px, $display: inline-block);
+    .govuk-frontend-supported & {
+      display: block;
+    }
+
+    &[hidden],
+    .govuk-frontend-supported &[hidden] {
+      display: none;
     }
   }
 
   .govuk-header__navigation {
-    @include govuk-responsive-margin(2, "bottom");
-    display: block;
+    @include govuk-media-query($from: desktop) {
+      margin-bottom: govuk-spacing(2);
+    }
+  }
+
+  .govuk-header__navigation-list {
+    // Reset user-agent default list styles
     margin: 0;
     padding: 0;
     list-style: none;
-  }
 
-  .js-enabled {
-    .govuk-header__menu-button {
-      display: block;
-      @include govuk-media-query ($from: desktop) {
-        display: none;
-      }
-    }
-
-    .govuk-header__navigation {
+    &[hidden] {
       display: none;
-      @include govuk-media-query ($from: desktop) {
-        display: block;
-      }
-    }
-
-    .govuk-header__navigation--open {
-      display: block;
     }
   }
 
   .govuk-header__navigation--end {
-    @include govuk-media-query ($from: desktop) {
+    @include govuk-media-query($from: desktop) {
       margin: 0;
       padding: govuk-spacing(1) 0;
       text-align: right;
     }
   }
 
-  .govuk-header__navigation--no-service-name {
-    padding-top: govuk-spacing(7);
-  }
-
   .govuk-header__navigation-item {
     padding: govuk-spacing(2) 0;
     border-bottom: 1px solid $govuk-header-nav-item-border-color;
 
-    @include govuk-media-query ($from: desktop) {
+    @include govuk-media-query($from: desktop) {
       display: inline-block;
       margin-right: govuk-spacing(3);
       padding: govuk-spacing(1) 0;
@@ -258,7 +289,8 @@
     }
 
     a {
-      @include govuk-font($size: 16, $weight: bold);
+      @include govuk-font-size($size: 16);
+      @include govuk-typography-weight-bold;
       white-space: nowrap;
     }
   }
@@ -271,6 +303,12 @@
         color: $govuk-header-link-active;
       }
 
+      // When printing, use the normal blue as this contrasts better with the
+      // white printing header
+      @include govuk-media-query($media-type: print) {
+        color: $govuk-brand-colour;
+      }
+
       // When focussed, the text colour needs to be darker to ensure that colour
       // contrast is still acceptable
       &:focus {
@@ -281,6 +319,7 @@
 
   .govuk-header__navigation-item:last-child {
     margin-right: 0;
+    border-bottom: 0;
   }
 
   @include govuk-media-query($media-type: print) {
@@ -290,11 +329,6 @@
       background: transparent;
     }
 
-    // Hide the inverted crown when printing in browsers that don't support SVG.
-    .govuk-header__logotype-crown-fallback-image {
-      display: none;
-    }
-
     .govuk-header__link {
       &:link,
       &:visited {
@@ -302,30 +336,11 @@
       }
 
       // Do not append link href to GOV.UK link when printing (e.g. '(/)')
-      &:after {
+      &::after {
         display: none;
       }
     }
   }
-
-  @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__link--homepage {
-      line-height: 30px;
-    }
-    // End adjustments
-  }
 }
+
+/*# sourceMappingURL=_index.scss.map */

data/vendor/assets/stylesheets/components/hint/_hint.scss

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

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

@@ -2,8 +2,6 @@
   .govuk-hint {
     @include govuk-font($size: 19);
 
-    display: block;
-
     margin-bottom: govuk-spacing(3);
 
     color: $govuk-secondary-text-colour;
@@ -33,12 +31,15 @@
   // This adjustment will not work in browsers that do not support :not().
   // Users with these browsers will see the default size margin (5px larger).
 
+  // prettier-ignore
   .govuk-fieldset__legend:not(.govuk-fieldset__legend--m):not(.govuk-fieldset__legend--l):not(.govuk-fieldset__legend--xl) + .govuk-hint {
     margin-bottom: govuk-spacing(2);
   }
 
   // Reduces visual spacing of legend when there is a hint
   .govuk-fieldset__legend + .govuk-hint {
-    margin-top: -(govuk-spacing(1));
+    margin-top: govuk-spacing(-1);
   }
 }
+
+/*# sourceMappingURL=_index.scss.map */

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

@@ -8,12 +8,8 @@
 
     box-sizing: border-box;
     width: 100%;
-    height: 40px;
-    @if $govuk-typography-use-rem {
-      height: govuk-px-to-rem(40px);
-    }
+    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
@@ -22,7 +18,6 @@
 
     // Disable inner shadow and remove rounded corners
     -webkit-appearance: none;
-       -moz-appearance: none;
             appearance: none;
 
     &:focus {
@@ -34,12 +29,13 @@
       // 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;
+    }
 
-      @include govuk-if-ie8 {
-        // IE8 doesn't support `box-shadow` so double the border with
-        // `border-width`.
-        border-width: $govuk-border-width-form-element * 2;
-      }
+    &:disabled {
+      opacity: 0.5;
+      color: inherit;
+      background-color: transparent;
+      cursor: not-allowed;
     }
   }
 
@@ -54,56 +50,54 @@
   }
 
   .govuk-input--error {
-    border: $govuk-border-width-form-element-error solid $govuk-error-colour;
+    border-color: $govuk-error-colour;
 
     &:focus {
       border-color: $govuk-input-border-colour;
     }
   }
 
-  // The ex measurements are based on the number of W's that can fit inside the input
-  // Extra space is left on the right hand side to allow for the Safari prefill icon
-  // Linear regression estimation based on visual tests: y = 1.76 + 1.81x
+  .govuk-input--extra-letter-spacing {
+    @include govuk-font-tabular-numbers;
+    letter-spacing: 0.05em;
+  }
+
+  // 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
 
   .govuk-input--width-30 {
-    max-width: 56ex + 3ex;
+    max-width: 29.5em;
   }
 
   .govuk-input--width-20 {
-    max-width: 38ex + 3ex;
+    max-width: 20.5em;
   }
 
   .govuk-input--width-10 {
-    max-width: 20ex + 3ex;
+    max-width: 11.5em;
   }
 
   .govuk-input--width-5 {
-    max-width: 10.8ex;
+    max-width: 5.5em;
   }
 
   .govuk-input--width-4 {
-    max-width: 9ex;
+    max-width: 4.5em;
   }
 
   .govuk-input--width-3 {
-    max-width: 7.2ex;
+    max-width: 3.75em;
   }
 
   .govuk-input--width-2 {
-    max-width: 5.4ex;
+    max-width: 2.75em;
   }
 
   .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;
+      flex: 0 1 auto;
     }
 
     .govuk-input:focus {
@@ -125,39 +119,21 @@
   .govuk-input__prefix,
   .govuk-input__suffix {
     @include govuk-font($size: 19);
-
     box-sizing: border-box;
-    display: inline-block;
-    min-width: 40px;
-    @if $govuk-typography-use-rem {
-      min-width: govuk-px-to-rem(40px);
-    }
-    height: 40px;
-    @if $govuk-typography-use-rem {
-      height: govuk-px-to-rem(40px);
-    }
-
+    // Use flexbox to align text within the prefix and suffix
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: govuk-px-to-rem(40px);
+    height: govuk-px-to-rem(40px);
     padding: govuk-spacing(1);
     border: $govuk-border-width-form-element solid $govuk-input-border-colour;
-    background-color: govuk-colour("light-grey", $legacy: "grey-3");
-
+    background-color: govuk-colour("light-grey");
     text-align: center;
-    @include govuk-media-query($until: tablet) {
-      line-height: 1.6;
-    }
     white-space: nowrap;
-
     // Emphasise non-editable status of prefixes and suffixes
     cursor: default;
-
-    -webkit-box-flex: 0;
-
-    -webkit-flex: 0 0 auto;
-
-        -ms-flex: 0 0 auto;
-
-            flex: 0 0 auto;
-
+    flex: 0 0 auto;
     // Split prefix/suffix onto separate lines on narrow screens
     @include govuk-media-query($until: mobile) {
       display: block;
@@ -171,9 +147,7 @@
       border-bottom: 0;
     }
     @include govuk-media-query($from: mobile) {
-      @include govuk-not-ie8 {
-        border-right: 0;
-      }
+      border-right: 0;
     }
   }
 
@@ -183,9 +157,9 @@
       border-top: 0;
     }
     @include govuk-media-query($from: mobile) {
-      @include govuk-not-ie8 {
-        border-left: 0;
-      }
+      border-left: 0;
     }
   }
 }
+
+/*# sourceMappingURL=_index.scss.map */

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

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

data/vendor/assets/stylesheets/components/inset-text/_index.scss

@@ -22,3 +22,5 @@
     }
   }
 }
+
+/*# sourceMappingURL=_index.scss.map */

data/vendor/assets/stylesheets/components/inset-text/_inset-text.scss

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

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

@@ -9,24 +9,27 @@
   }
 
   // Modifiers that make labels look more like their equivalent headings
+  .govuk-label--xl,
+  .govuk-label--l,
+  .govuk-label--m {
+    @include govuk-typography-weight-bold;
+    margin-bottom: govuk-spacing(3);
+  }
 
   .govuk-label--xl {
-    @include govuk-font($size: 48, $weight: bold);
-    margin-bottom: govuk-spacing(3);
+    @include govuk-font-size($size: 48);
   }
 
   .govuk-label--l {
-    @include govuk-font($size: 36, $weight: bold);
-    margin-bottom: govuk-spacing(3);
+    @include govuk-font-size($size: 36);
   }
 
   .govuk-label--m {
-    @include govuk-font($size: 24, $weight: bold);
-    margin-bottom: govuk-spacing(2);
+    @include govuk-font-size($size: 24);
   }
 
   .govuk-label--s {
-    @include govuk-font($size: 19, $weight: bold);
+    @include govuk-typography-weight-bold;
   }
 
   // When the label is nested inside a heading, override the heading so that it
@@ -39,3 +42,5 @@
     margin: 0;
   }
 }
+
+/*# sourceMappingURL=_index.scss.map */

data/vendor/assets/stylesheets/components/label/_label.scss

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

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

@@ -24,12 +24,12 @@
   }
 
   .govuk-notification-banner__title {
-    @include govuk-font($size: 19, $weight: bold);
-
+    // Set the size 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-bold;
     margin: 0;
-
     padding: 0;
-
     color: govuk-colour("white");
   }
 
@@ -65,7 +65,8 @@
   }
 
   .govuk-notification-banner__heading {
-    @include govuk-font($size: 24, $weight: bold);
+    @include govuk-font-size($size: 24);
+    @include govuk-typography-weight-bold;
 
     margin: 0 0 govuk-spacing(3) 0;
 
@@ -87,3 +88,5 @@
     }
   }
 }
+
+/*# sourceMappingURL=_index.scss.map */