defra_ruby_template 3.15.1 → 5.4.0

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

@@ -1,16 +1,19 @@
 @include govuk-exports("govuk/component/back-link") {
+  // Component font-size on the Frontend (used for calculations)
+  $font-size: 16;
 
   // Size of chevron (excluding border)
-  $chevron-size: 7px;
+  $chevron-size: govuk-em(7px, $font-size);
 
   // Size of chevron border
-  $chevron-border-width: 1px;
+  $chevron-border-min-width: 1px;
+  $chevron-border-width: govuk-em($chevron-border-min-width, $font-size);
 
   // Colour of chevron
   $chevron-border-colour: $govuk-secondary-text-colour;
 
   .govuk-back-link {
-    @include govuk-typography-responsive($size: 16);
+    @include govuk-font-size($size: $font-size);
     @include govuk-link-common;
     @include govuk-link-style-text;
 
@@ -21,63 +24,45 @@
     margin-bottom: govuk-spacing(3);
 
     // Allow space for the arrow
-    padding-left: 14px;
+    padding-left: govuk-em(14px, $font-size);
   }
 
   // Prepend left pointing chevron
-  .govuk-back-link:before {
+  .govuk-back-link::before {
     content: "";
     display: block;
 
     // Vertically align with the parent element
     position: absolute;
-
-    @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;
-    }
-
-    left: 3px;
+    top: 0;
+    bottom: 0;
+    left: govuk-em(3px, $font-size);
 
     width: $chevron-size;
     height: $chevron-size;
 
     margin: auto 0;
 
-    -webkit-transform: rotate(225deg);
-
-        -ms-transform: rotate(225deg);
-
-            transform: rotate(225deg);
+    transform: rotate(225deg);
 
     border: solid;
-    border-width: $chevron-border-width $chevron-border-width 0 0;
+    border-width: $chevron-border-min-width $chevron-border-min-width 0 0;
     border-color: $chevron-border-colour;
 
-    // Fall back to a less than sign for IE8
-    @include govuk-if-ie8 {
-      content: "\003c"; // Less than sign (<)
-      width: auto;
-      height: auto;
-      border: 0;
-      color: $chevron-border-colour;
-
-      // IE8 doesn't seem to like rendering pseudo-elements using @font-faces,
-      // so fall back to using another sans-serif font to render the chevron.
-      font-family: Arial, sans-serif;
+    @supports (border-width: unquote("max(0px)")) {
+      $border-width-eval: "max(#{$chevron-border-min-width}, #{$chevron-border-width})";
+
+      // Ensure that the chevron never gets smaller than 16px
+      border-width: unquote($border-width-eval) unquote($border-width-eval) 0 0;
+      font-size: unquote("max(#{$font-size * 1px}, 1em)");
     }
   }
 
-  .govuk-back-link:focus:before {
+  .govuk-back-link:focus::before {
     border-color: $govuk-focus-text-colour;
   }
 
-  .govuk-back-link:after {
+  .govuk-back-link::after {
     content: "";
     position: absolute;
     top: -14px;
@@ -86,14 +71,13 @@
     left: 0;
   }
 
-  @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;
+  .govuk-back-link--inverse {
+    @include govuk-link-style-inverse;
 
-      top: $offset * -1;
-      bottom: $offset;
+    &::before {
+      border-color: currentcolor;
     }
   }
 }
+
+/*# sourceMappingURL=_index.scss.map */

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

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

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

@@ -1,10 +1,13 @@
 @include govuk-exports("govuk/component/breadcrumbs") {
+  // Component font-size on the Frontend (used for calculations)
+  $font-size: 16;
 
   // Size of chevron (excluding border)
-  $chevron-size: 7px;
+  $chevron-size: govuk-em(7px, $font-size);
 
   // Size of chevron border
-  $chevron-border-width: 1px;
+  $chevron-border-min-width: 1px;
+  $chevron-border-width: govuk-em($chevron-border-min-width, $font-size);
 
   // Colour of chevron
   $chevron-border-colour: $govuk-secondary-text-colour;
@@ -13,10 +16,10 @@
   // of length 8 (7px + 1px border):
   //
   // √(8² + 8²) * 0.5 ≅ 5.655
-  $chevron-altitude-calculated: 5.655px;
+  $chevron-altitude-calculated: govuk-em(5.655px, $font-size);
 
   .govuk-breadcrumbs {
-    @include govuk-font($size: 16);
+    @include govuk-font($size: $font-size);
     @include govuk-text-colour;
 
     margin-top: govuk-spacing(3);
@@ -32,7 +35,6 @@
   }
 
   .govuk-breadcrumbs__list-item {
-
     display: inline-block;
     position: relative;
 
@@ -40,27 +42,19 @@
 
     // Add both margin and padding such that the chevron appears centrally
     // between each breadcrumb item
-    margin-left: govuk-spacing(2);
-    padding-left: govuk-spacing(2) + $chevron-altitude-calculated;
+    margin-left: govuk-em(govuk-spacing(2), $font-size);
+    padding-left: govuk-em(govuk-spacing(2), $font-size) + $chevron-altitude-calculated;
 
     float: left;
 
     // Create a chevron using a box with borders on two sides, rotated 45deg.
-    &:before {
+    &::before {
       content: "";
       display: block;
 
       position: absolute;
-
-      @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;
-      }
+      top: 0;
+      bottom: 0;
 
       // Offset by the difference between the width of the non-rotated square
       // and its width when rotated
@@ -71,27 +65,18 @@
 
       margin: auto 0;
 
-      -webkit-transform: rotate(45deg);
-
-          -ms-transform: rotate(45deg);
-
-              transform: rotate(45deg);
+      transform: rotate(45deg);
 
       border: solid;
-      border-width: $chevron-border-width $chevron-border-width 0 0;
+      border-width: $chevron-border-min-width $chevron-border-min-width 0 0;
       border-color: $chevron-border-colour;
 
-      // Fall back to a greater than sign for IE8
-      @include govuk-if-ie8 {
-        content: "\003e"; // Greater than sign (>)
-        width: auto;
-        height: auto;
-        border: 0;
-        color: $chevron-border-colour;
-
-        // IE8 doesn't seem to like rendering pseudo-elements using @font-faces,
-        // so fall back to using another sans-serif font to render the chevron.
-        font-family: Arial, sans-serif;
+      @supports (border-width: unquote("max(0px)")) {
+        $border-width-eval: "max(#{$chevron-border-min-width}, #{$chevron-border-width})";
+
+        // Ensure that the chevron never gets smaller than 16px
+        border-width: unquote($border-width-eval) unquote($border-width-eval) 0 0;
+        font-size: unquote("max(#{$font-size * 1px}, 1em)");
       }
     }
 
@@ -99,7 +84,7 @@
       margin-left: 0;
       padding-left: 0;
 
-      &:before {
+      &::before {
         content: none;
         display: none;
       }
@@ -121,18 +106,29 @@
           display: inline-block;
         }
 
-        &:before {
-          top: 6px;
+        &::before {
+          top: govuk-em(6px, $font-size);
           margin: 0;
         }
       }
 
       .govuk-breadcrumbs__list {
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
         display: flex;
       }
     }
   }
+
+  .govuk-breadcrumbs--inverse {
+    color: govuk-colour("white");
+
+    .govuk-breadcrumbs__link {
+      @include govuk-link-style-inverse;
+    }
+
+    .govuk-breadcrumbs__list-item::before {
+      border-color: currentcolor;
+    }
+  }
 }
+
+/*# sourceMappingURL=_index.scss.map */

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

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

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

@@ -1,20 +1,58 @@
+////
+/// @group components/button
+////
+
+/// Button component background colour
+///
+/// @type Colour
+/// @access public
+
+$govuk-button-background-colour: govuk-colour("green") !default;
+
+/// Button component text colour
+///
+/// @type Colour
+/// @access public
+
+$govuk-button-text-colour: govuk-colour("white") !default;
+
+/// Inverted button component background colour
+///
+/// @type Colour
+/// @access public
+
+$govuk-inverse-button-background-colour: govuk-colour("white") !default;
+
+/// Inverted button component text colour
+///
+/// @type Colour
+/// @access public
+
+$govuk-inverse-button-text-colour: $govuk-brand-colour !default;
+
 @include govuk-exports("govuk/component/button") {
-  $govuk-button-colour: govuk-colour("green", $legacy: #00823b);
+  $govuk-button-colour: $govuk-button-background-colour;
+  $govuk-button-text-colour: $govuk-button-text-colour;
   $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("light-grey", $legacy: "grey-3");
+  $govuk-secondary-button-colour: govuk-colour("light-grey");
+  $govuk-secondary-button-text-colour: govuk-colour("black");
   $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");
 
   // Warning button variables
   $govuk-warning-button-colour: govuk-colour("red");
+  $govuk-warning-button-text-colour: govuk-colour("white");
   $govuk-warning-button-hover-colour: govuk-shade($govuk-warning-button-colour, 20%);
   $govuk-warning-button-shadow-colour: govuk-shade($govuk-warning-button-colour, 60%);
-  $govuk-warning-button-text-colour: govuk-colour("white");
+
+  // Inverse button variables
+  $govuk-inverse-button-colour: $govuk-inverse-button-background-colour;
+  $govuk-inverse-button-text-colour: $govuk-inverse-button-text-colour;
+  $govuk-inverse-button-hover-colour: govuk-tint($govuk-inverse-button-text-colour, 90%);
+  $govuk-inverse-button-shadow-colour: govuk-shade($govuk-inverse-button-text-colour, 30%);
 
   // Because the shadow (s0) is visually 'part of' the button, we need to reduce
   // the height of the button to compensate by adjusting its padding (s1) and
@@ -32,7 +70,8 @@
     margin-right: 0;
     margin-left: 0;
     @include govuk-responsive-margin(6, "bottom", $adjustment: $button-shadow-size); // s2
-    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
+    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;
@@ -43,10 +82,6 @@
     cursor: pointer;
     -webkit-appearance: none;
 
-    @include govuk-if-ie8 {
-      border-bottom: $button-shadow-size solid $govuk-button-shadow-colour;
-    }
-
     @include govuk-media-query($from: tablet) {
       width: auto;
     }
@@ -73,40 +108,14 @@
     &:active {
       // Bump the button down so it looks like its being pressed in
       top: $button-shadow-size;
-
-      @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;
-      }
+      outline: $govuk-focus-width solid transparent;
       box-shadow: inset 0 0 0 1px $govuk-focus-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 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;
-      }
-    }
-
     &:focus:not(:active):not(:hover) {
       border-color: $govuk-focus-colour;
       color: $govuk-focus-text-colour;
@@ -119,7 +128,7 @@
 
     // Use a pseudo element to expand the click target area to include the
     // button's shadow as well, in case users try to click it.
-    &:before {
+    &::before {
       content: "";
       display: block;
 
@@ -143,31 +152,22 @@
     // the click event is still fired.
     //
     // 🎉
-    &:active:before {
+    &:active::before {
       top: -($govuk-border-width-form-element + $button-shadow-size);
     }
   }
 
-  .govuk-button--disabled,
-  .govuk-button[disabled="disabled"],
   .govuk-button[disabled] {
-    opacity: (.5);
+    opacity: (0.5);
 
     &:hover {
       background-color: $govuk-button-colour;
-      cursor: default;
-    }
-
-    &:focus {
-      outline: none;
+      cursor: not-allowed;
     }
 
     &:active {
       top: 0;
       box-shadow: 0 $button-shadow-size 0 $govuk-button-shadow-colour; // s0
-      @include govuk-if-ie8 {
-        border-bottom: $button-shadow-size solid $govuk-button-shadow-colour; // s0
-      }
     }
   }
 
@@ -183,17 +183,6 @@
       color: $govuk-secondary-button-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 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-secondary-button-text-colour;
-      }
-    }
-
     &:hover {
       background-color: $govuk-secondary-button-hover-colour;
 
@@ -215,17 +204,6 @@
       color: $govuk-warning-button-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 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-warning-button-text-colour;
-      }
-    }
-
     &:hover {
       background-color: $govuk-warning-button-hover-colour;
 
@@ -235,26 +213,35 @@
     }
   }
 
-  .govuk-button--start {
-    @include govuk-typography-weight-bold;
-    @include govuk-typography-responsive($size: 24, $override-line-height: 1);
+  .govuk-button--inverse {
+    background-color: $govuk-inverse-button-colour;
+    box-shadow: 0 $button-shadow-size 0 $govuk-inverse-button-shadow-colour;
 
-    display: -webkit-inline-box;
+    &,
+    &:link,
+    &:visited,
+    &:active,
+    &:hover {
+      color: $govuk-inverse-button-text-colour;
+    }
 
-    display: -webkit-inline-flex;
+    &:hover {
+      background-color: $govuk-inverse-button-hover-colour;
 
-    display: -ms-inline-flexbox;
+      &[disabled] {
+        background-color: $govuk-inverse-button-colour;
+      }
+    }
+  }
+
+  .govuk-button--start {
+    @include govuk-typography-weight-bold;
+    @include govuk-font-size($size: 24, $line-height: 1);
 
     display: inline-flex;
     min-height: auto;
 
-    -webkit-box-pack: center;
-
-    -webkit-justify-content: center;
-
-        -ms-flex-pack: center;
-
-            justify-content: center;
+    justify-content: center;
   }
 
   .govuk-button__start-icon {
@@ -264,25 +251,12 @@
       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;
-    }
+    flex-shrink: 0;
+    align-self: center;
+    // Work around SVGs not inheriting color from parent in forced color mode
+    // (https://github.com/w3c/csswg-drafts/issues/6310)
+    forced-color-adjust: auto;
   }
 }
+
+/*# sourceMappingURL=_index.scss.map */

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

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

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

@@ -14,12 +14,23 @@
   }
 
   .govuk-character-count__message {
-    @include govuk-font($size: false, $tabular: true);
+    @include govuk-font-tabular-numbers;
     margin-top: 0;
     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
+      // - using `:empty` is not possible as the hint macro outputs line breaks
+      content: "\200B";
+    }
   }
 
   .govuk-character-count__message--disabled {
     visibility: hidden;
   }
 }
+
+/*# sourceMappingURL=_index.scss.map */

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

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