defra_ruby_template 5.11.0 → 6.4.0

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

@@ -1,59 +1,9 @@
-@import "../error-message/index";
-@import "../hint/index";
-@import "../label/index";
+@use "../../custom-properties";
 
-@include govuk-exports("govuk/component/select") {
-  .govuk-select {
-    @include govuk-font($size: 19, $line-height: 1.25);
+@use "mixin";
+@use "../error-message";
+@use "../hint";
+@use "../label";
 
-    box-sizing: border-box;
+@include mixin.styles;
 
-    // This min-width was chosen because:
-    // - it makes the Select wider than it is tall (which is what users expect)
-    // - 11.5em matches the 'length-10' variant of the input component
-    // - it fits comfortably on screens as narrow as 240px wide
-    min-width: 11.5em;
-    max-width: 100%;
-    height: govuk-px-to-rem(40px);
-    padding: govuk-spacing(1);
-    border: $govuk-border-width-form-element solid $govuk-input-border-colour;
-
-    // Default user agent colours for selects can have low contrast,
-    // and may look disabled (#2435)
-    color: $govuk-text-colour;
-    background-color: govuk-colour("white");
-
-    &:focus {
-      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` to do
-      // this 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 $govuk-border-width-form-element;
-    }
-
-    &:disabled {
-      opacity: 0.5;
-      color: inherit;
-      cursor: not-allowed;
-    }
-  }
-
-  .govuk-select option:active,
-  .govuk-select option:checked,
-  .govuk-select:focus::-ms-value {
-    color: govuk-colour("white");
-    background-color: govuk-colour("blue");
-  }
-
-  .govuk-select--error {
-    border-color: $govuk-error-colour;
-
-    &:focus {
-      border-color: $govuk-input-border-colour;
-    }
-  }
-}
-
-/*# sourceMappingURL=_index.scss.map */

data/vendor/assets/stylesheets/components/select/_mixin.scss

@@ -0,0 +1,45 @@
+@use "../../base";
+
+/// @access private
+@mixin styles {
+  .govuk-select {
+    @include base.govuk-font($size: 19, $line-height: 1.25);
+
+    box-sizing: border-box;
+
+    // This min-width was chosen because:
+    // - it makes the Select wider than it is tall (which is what users expect)
+    // - 11.5em matches the 'length-10' variant of the input component
+    // - it fits comfortably on screens as narrow as 240px wide
+    min-width: 11.5em;
+    max-width: 100%;
+    height: base.govuk-px-to-rem(40px);
+    padding: base.govuk-spacing(1);
+    border: base.$govuk-border-width-form-element solid;
+    border-color: base.govuk-functional-colour(input-border);
+
+    // Default user agent colours for selects can have low contrast,
+    // and may look disabled (#2435)
+    color: base.govuk-functional-colour(text);
+    background-color: base.govuk-colour("white");
+
+    &:focus {
+      @include base.govuk-focused-form-input;
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      color: inherit;
+      cursor: not-allowed;
+    }
+  }
+
+  .govuk-select--error {
+    border-color: base.govuk-functional-colour(error);
+
+    &:focus {
+      border-color: base.govuk-functional-colour(input-border);
+    }
+  }
+}
+

data/vendor/assets/stylesheets/components/select/_select.import.scss

@@ -0,0 +1,6 @@
+@use "../../settings/warnings--internal";
+
+@include warnings--internal.component-scss-file-warning("select");
+
+@import "index";
+

data/vendor/assets/stylesheets/components/service-navigation/_index.import.scss

@@ -0,0 +1,8 @@
+@use "mixin";
+
+@import "../../base";
+
+@include govuk-exports("govuk/component/service-navigation") {
+  @include mixin.styles;
+}
+

data/vendor/assets/stylesheets/components/service-navigation/_index.scss

@@ -1,187 +1,5 @@
-@include govuk-exports("govuk/component/service-navigation") {
-  $govuk-service-navigation-active-link-border-width: govuk-spacing(1);
-  $govuk-service-navigation-background: govuk-colour("light-grey");
-  $govuk-service-navigation-border-colour: $govuk-border-colour;
+@use "../../custom-properties";
+@use "mixin";
 
-  // We make the link colour a little darker than normal here so that it has
-  // better perceptual contrast with the navigation background.
-  $govuk-service-navigation-link-colour: govuk-shade($govuk-link-colour, 10%);
+@include mixin.styles;
 
-  .govuk-service-navigation {
-    border-bottom-width: 1px;
-    border-bottom-style: solid;
-    @include _govuk-rebrand(
-      "border-bottom-color",
-      $from: $govuk-service-navigation-border-colour,
-      $to: $_govuk-rebrand-border-colour-on-blue-tint-95
-    );
-    @include _govuk-rebrand(
-      "background-color",
-      $from: $govuk-service-navigation-background,
-      $to: $_govuk-rebrand-template-background-colour
-    );
-  }
-
-  .govuk-service-navigation__container {
-    display: flex;
-    flex-direction: column;
-    align-items: start;
-
-    @include govuk-media-query($from: tablet) {
-      flex-direction: row;
-      flex-wrap: wrap;
-    }
-  }
-
-  // These styles are shared between nav items and the service name, they
-  // ensure that both of them remain vertically aligned with one another
-  .govuk-service-navigation__item,
-  .govuk-service-navigation__service-name {
-    position: relative;
-    margin: govuk-spacing(2) 0;
-    border: 0 solid $govuk-service-navigation-link-colour;
-
-    @include govuk-media-query($from: tablet) {
-      margin-top: 0;
-      margin-bottom: 0;
-      padding: govuk-spacing(4) 0;
-
-      @include _govuk-rebrand {
-        padding: govuk-spacing(3) 0;
-        line-height: 1.5;
-      }
-
-      &:not(:last-child) {
-        @include govuk-responsive-margin(6, $direction: right);
-      }
-    }
-  }
-
-  .govuk-service-navigation__item--active {
-    @include govuk-media-query($until: tablet) {
-      // Negative offset the left margin so we can place a current page indicator
-      // to the left without misaligning the list item text.
-      margin-left: ((govuk-spacing(2) + $govuk-service-navigation-active-link-border-width) * -1);
-      padding-left: govuk-spacing(2);
-      border-left-width: $govuk-service-navigation-active-link-border-width;
-    }
-
-    @include govuk-media-query($from: tablet) {
-      @include _govuk-rebrand(
-        "padding-bottom",
-        $from: govuk-spacing(4) - $govuk-service-navigation-active-link-border-width,
-        $to: govuk-spacing(3) - $govuk-service-navigation-active-link-border-width
-      );
-      border-bottom-width: $govuk-service-navigation-active-link-border-width;
-    }
-  }
-
-  .govuk-service-navigation__link {
-    @include govuk-link-common;
-    @include govuk-link-style-no-underline;
-    @include govuk-link-style-no-visited-state;
-
-    &:not(:hover):not(:focus) {
-      // We set the colour here as we don't want to override the hover or
-      // focus colours
-      color: $govuk-service-navigation-link-colour;
-    }
-  }
-
-  //
-  // Service name specific code
-  //
-
-  .govuk-service-navigation__service-name {
-    @include govuk-font($size: 19, $weight: bold);
-  }
-
-  // Annoyingly this requires a compound selector in order to overcome the
-  // specificity of the other link colour override we're doing
-  .govuk-service-navigation__service-name .govuk-service-navigation__link {
-    @include govuk-link-style-text;
-  }
-
-  //
-  // Navigation list specific code
-  //
-
-  .govuk-service-navigation__toggle {
-    @include govuk-font($size: 19, $weight: bold);
-    display: inline-flex;
-    margin: govuk-spacing(2) 0;
-    padding: 0;
-    border: 0;
-    color: $govuk-service-navigation-link-colour;
-    background: none;
-    word-break: break-all;
-    cursor: pointer;
-    align-items: center;
-
-    &:focus {
-      @include govuk-focused-text;
-    }
-
-    &::after {
-      @include govuk-shape-arrow($direction: down, $base: 10px, $display: inline-block);
-      content: "";
-      margin-left: govuk-spacing(1);
-    }
-
-    &[aria-expanded="true"]::after {
-      @include govuk-shape-arrow($direction: up, $base: 10px, $display: inline-block);
-    }
-
-    // Ensure the button stays hidden if the hidden attribute is present
-    &[hidden] {
-      display: none;
-    }
-
-    // If we have both a service name and navigation toggle, remove the
-    // margin-top so that there isn't a bunch of space between them
-    .govuk-service-navigation__service-name + .govuk-service-navigation__wrapper & {
-      margin-top: 0;
-    }
-  }
-
-  .govuk-service-navigation__list {
-    @include govuk-font($size: 19);
-    margin: 0;
-    margin-bottom: govuk-spacing(3);
-    padding: 0;
-    list-style: none;
-
-    // Make the navigation list a flexbox. Doing so resolves a couple of
-    // accessibility problems caused by the list items being inline-blocks:
-    // - Removes the extra whitespace from between each list item that screen
-    //   readers would pointlessly announce.
-    // - Fixes an NVDA issue in Firefox and Chrome <= 124 where it would read
-    //   all of the links as a run-on sentence.
-    @include govuk-media-query($from: tablet) {
-      display: flex;
-      flex-wrap: wrap;
-      margin-bottom: 0;
-
-      // However... IE11 totally trips over flexbox and doesn't wrap anything,
-      // making all of the items into a single, horizontally scrolling row,
-      // which is no good. This CSS hack removes the flexbox definition for
-      // IE 10 & 11, reverting it to the flawed, but OK, non-flexbox version.
-      //
-      // CSS hack taken from https://stackoverflow.com/questions/11173106/apply-style-only-on-ie#answer-36448860
-      // which also includes an explanation of why this works
-      @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-        display: block;
-      }
-    }
-  }
-
-  // This is a <strong> element that is used as a fallback mechanism for
-  // visually indicating the current page in scenarios where CSS isn't
-  // available. We don't actually want it to be bold normally, so set it to
-  // inherit the parent font-weight.
-  .govuk-service-navigation__active-fallback {
-    font-weight: inherit;
-  }
-}
-
-/*# sourceMappingURL=_index.scss.map */

data/vendor/assets/stylesheets/components/service-navigation/_mixin.scss

@@ -0,0 +1,238 @@
+@use "sass:math";
+
+@use "../../base";
+
+/// @access private
+@mixin styles {
+  $govuk-service-navigation-active-link-border-width: base.govuk-spacing(1);
+  $govuk-service-navigation-text-colour: base.govuk-functional-colour(surface-text);
+  $govuk-service-navigation-background: base.govuk-functional-colour(surface-background);
+  $govuk-service-navigation-border-colour: base.govuk-functional-colour(surface-border);
+
+  .govuk-service-navigation {
+    @include base.govuk-font($size: 19);
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
+    border-bottom-color: $govuk-service-navigation-border-colour;
+    // Ensure that both raw content and content with typography classes
+    // will pick up the correct colour by setting both `--govuk-text-colour`
+    // and `color`.
+    --govuk-text-colour: #{$govuk-service-navigation-text-colour};
+    color: base.govuk-functional-colour(text);
+    background-color: $govuk-service-navigation-background;
+  }
+
+  .govuk-service-navigation__container {
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+
+    @media #{base.govuk-from-breakpoint(tablet)} {
+      flex-direction: row;
+      flex-wrap: wrap;
+    }
+  }
+
+  // These styles are shared between nav items and the service name, they
+  // ensure that both of them remain vertically aligned with one another
+  .govuk-service-navigation__item,
+  .govuk-service-navigation__service-name {
+    position: relative;
+    margin: base.govuk-spacing(2) 0;
+
+    // A border matching the link colour is used to mark the active section –
+    // see the `govuk-service-navigation__item--active` class
+    border-width: 0;
+    border-style: solid;
+    border-color: base.govuk-functional-colour(link);
+
+    @media #{base.govuk-from-breakpoint(tablet)} {
+      // inline-block is used as a fallback for browsers that don't support flexbox
+      display: inline-block;
+
+      margin-top: 0;
+      margin-bottom: 0;
+      padding: base.govuk-spacing(3) 0;
+
+      // More magic numbers ahoy:
+      // 29 is the desired height of the element (60), minus top and bottom
+      // padding (2×15), minus bottom border (1); 19 is the font-size at this
+      // point. This gives us the perfect fractional line height to make the
+      // overall component 60px high
+      line-height: math.div(29, 19);
+
+      &:not(:last-child) {
+        @include base.govuk-responsive-margin(6, $direction: right);
+      }
+    }
+  }
+
+  // Remove the top margin of the first nav item if there is a service name but
+  // there's no menu button (either because it doesn't exist or it's hidden)
+  .govuk-service-navigation__service-name + .govuk-service-navigation__wrapper {
+    .govuk-service-navigation__list:first-child,
+    .govuk-service-navigation__toggle[hidden] + .govuk-service-navigation__list {
+      .govuk-service-navigation__item:first-child {
+        margin-top: 0;
+      }
+    }
+  }
+
+  .govuk-service-navigation__item--active {
+    @media #{base.govuk-until-breakpoint(tablet)} {
+      // Negative offset the left margin so we can place a current page indicator
+      // to the left without misaligning the list item text.
+      margin-left: ((base.govuk-spacing(2) + $govuk-service-navigation-active-link-border-width) * -1);
+      padding-left: base.govuk-spacing(2);
+      border-left-width: $govuk-service-navigation-active-link-border-width;
+    }
+
+    @media #{base.govuk-from-breakpoint(tablet)} {
+      padding-bottom: base.govuk-spacing(3) - $govuk-service-navigation-active-link-border-width;
+      border-bottom-width: $govuk-service-navigation-active-link-border-width;
+    }
+  }
+
+  .govuk-service-navigation__link {
+    @include base.govuk-link-common;
+    @include base.govuk-link-style-no-underline;
+    @include base.govuk-link-style-no-visited-state;
+  }
+
+  //
+  // Service name specific code
+  //
+
+  .govuk-service-navigation__service-name {
+    @include base.govuk-typography-weight-bold;
+  }
+
+  // Annoyingly this requires a compound selector in order to overcome the
+  // specificity of the other link colour override we're doing
+  .govuk-service-navigation__service-name .govuk-service-navigation__link {
+    @include base.govuk-link-style-text;
+  }
+
+  // Allow navigation section to always take up maximum available space,
+  // rather than sizing to fit the content. This makes it easier to right align
+  // nav items and use slots.
+  .govuk-service-navigation__wrapper {
+    flex-grow: 1;
+  }
+
+  //
+  // Navigation list specific code
+  //
+
+  .govuk-service-navigation__toggle {
+    @include base.govuk-font($size: 19, $weight: bold);
+    display: inline-flex;
+    align-items: center;
+    margin: base.govuk-spacing(2) 0;
+    padding: 0;
+    border: 0;
+    color: base.govuk-functional-colour(link);
+    background: none;
+    word-break: break-all;
+    cursor: pointer;
+
+    &:focus {
+      @include base.govuk-focused-text;
+    }
+
+    &::after {
+      @include base.govuk-shape-arrow($direction: down, $base: 10px, $display: inline-block);
+      content: "";
+      margin-left: base.govuk-spacing(1);
+    }
+
+    &[aria-expanded="true"]::after {
+      @include base.govuk-shape-arrow($direction: up, $base: 10px, $display: inline-block);
+    }
+
+    // Ensure the button stays hidden if the hidden attribute is present
+    &[hidden] {
+      display: none;
+    }
+
+    // If we have both a service name and navigation toggle, remove the
+    // margin-top so that there isn't a bunch of space between them
+    .govuk-service-navigation__service-name + .govuk-service-navigation__wrapper & {
+      margin-top: 0;
+    }
+  }
+
+  .govuk-service-navigation__list {
+    margin: 0;
+    margin-bottom: base.govuk-spacing(3);
+    padding: 0;
+    list-style: none;
+
+    // Make the navigation list a flexbox. Doing so resolves a couple of
+    // accessibility problems caused by the list items being inline-blocks:
+    // - Removes the extra whitespace from between each list item that screen
+    //   readers would pointlessly announce.
+    // - Fixes an NVDA issue in Firefox and Chrome <= 124 where it would read
+    //   all of the links as a run-on sentence.
+    @media #{base.govuk-from-breakpoint(tablet)} {
+      display: flex;
+      flex-wrap: wrap;
+      margin-bottom: 0;
+
+      // However... IE11 totally trips over flexbox and doesn't wrap anything,
+      // making all of the items into a single, horizontally scrolling row,
+      // which is no good. This CSS hack removes the flexbox definition for
+      // IE 9–11, reverting it to the flawed, but OK, non-flexbox version.
+      //
+      // CSS hack from http://browserhacks.com/#hack-a60b03e301a67f76a5a22221c739dc64
+      @media screen and (min-width: 0\0) {
+        display: block;
+      }
+    }
+  }
+
+  // This is a <strong> element that is used as a fallback mechanism for
+  // visually indicating the current page in scenarios where CSS isn't
+  // available. We don't actually want it to be bold normally, so set it to
+  // inherit the parent font-weight.
+  .govuk-service-navigation__active-fallback {
+    font-weight: inherit;
+  }
+
+  // Inverted colour scheme style intended for product pages
+  .govuk-service-navigation--inverse {
+    // Remove bottom border to add width-container ones
+    border-bottom: none;
+
+    --govuk-text-colour: #{base.govuk-functional-colour(inverse-text)};
+    background-color: base.govuk-functional-colour(brand);
+
+    .govuk-width-container {
+      border-width: 1px 0;
+      border-style: solid;
+      border-color: $govuk-service-navigation-border-colour;
+    }
+
+    // Subtract 1px of space to account for the extra border-top
+    .govuk-service-navigation__container {
+      margin-top: -1px;
+    }
+
+    // Override the 'active' border colour
+    .govuk-service-navigation__item,
+    .govuk-service-navigation__service-name {
+      border-color: currentcolor;
+    }
+
+    // Override link styles
+    .govuk-service-navigation__link {
+      @include base.govuk-link-style-text;
+    }
+
+    // Override mobile menu toggle colour when not focused
+    .govuk-service-navigation__toggle:not(:focus) {
+      color: currentcolor;
+    }
+  }
+}
+

data/vendor/assets/stylesheets/components/service-navigation/_service-navigation.import.scss

@@ -0,0 +1,6 @@
+@use "../../settings/warnings--internal";
+
+@include warnings--internal.component-scss-file-warning("service-navigation");
+
+@import "index";
+

data/vendor/assets/stylesheets/components/skip-link/_index.import.scss

@@ -0,0 +1,8 @@
+@use "mixin";
+
+@import "../../base";
+
+@include govuk-exports("govuk/component/skip-link") {
+  @include mixin.styles;
+}
+

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

@@ -1,52 +1,5 @@
-@include govuk-exports("govuk/component/skip-link") {
-  .govuk-skip-link {
-    @include govuk-visually-hidden-focusable;
-    @include govuk-typography-common;
-    @include govuk-link-decoration;
-    @include govuk-link-style-text;
-    @include govuk-font-size($size: 16);
+@use "../../custom-properties";
+@use "mixin";
 
-    display: block;
-    padding: govuk-spacing(2) govuk-spacing(3);
+@include mixin.styles;
 
-    // Respect 'display cutout' safe area (avoids notches and rounded corners)
-    @supports (padding: unquote("max(calc(0px))")) {
-      $padding-safe-area-right: calc(#{govuk-spacing(3)} + env(safe-area-inset-right));
-      $padding-safe-area-left: calc(#{govuk-spacing(3)} + env(safe-area-inset-left));
-
-      // Use max() to pick largest padding, default or with safe area
-      // Escaped due to Sass max() vs. CSS native max()
-      padding-right: unquote("max(#{govuk-spacing(3)}, #{$padding-safe-area-right})");
-      padding-left: unquote("max(#{govuk-spacing(3)}, #{$padding-safe-area-left})");
-    }
-
-    &:focus {
-      outline: $govuk-focus-width solid $govuk-focus-colour;
-      outline-offset: 0;
-      background-color: $govuk-focus-colour;
-
-      // Undo unwanted changes when global styles are enabled
-      @if $govuk-global-styles {
-        @include govuk-link-decoration;
-        box-shadow: none;
-      }
-    }
-  }
-
-  .govuk-skip-link-focused-element {
-    &:focus {
-      // Remove the native visible focus indicator when the element is
-      // programmatically focused.
-      //
-      // We set the focus on the linked element (this is usually the <main>
-      // element) when the skip link is activated to improve screen reader
-      // announcements. However, we remove the visible focus indicator from the
-      // linked element because the user cannot interact with it.
-      //
-      // A related discussion: https://github.com/w3c/wcag/issues/1001
-      outline: none;
-    }
-  }
-}
-
-/*# sourceMappingURL=_index.scss.map */

data/vendor/assets/stylesheets/components/skip-link/_mixin.scss

@@ -0,0 +1,60 @@
+@use "sass:string";
+
+@use "../../base";
+
+/// @access private
+@mixin styles {
+  .govuk-skip-link {
+    @include base.govuk-visually-hidden-focusable;
+    @include base.govuk-link-decoration;
+    @include base.govuk-link-style-text;
+    @include base.govuk-font($size: 16);
+
+    display: block;
+    padding: base.govuk-spacing(2) base.govuk-spacing(3);
+
+    // Respect 'display cutout' safe area (avoids notches and rounded corners)
+    @supports (padding: string.unquote("max(calc(0px))")) {
+      $padding-safe-area-right: calc(#{base.govuk-spacing(3)} + env(safe-area-inset-right));
+      $padding-safe-area-left: calc(#{base.govuk-spacing(3)} + env(safe-area-inset-left));
+
+      // Use max() to pick largest padding, default or with safe area
+      // Escaped due to Sass max() vs. CSS native max()
+      padding-right: string.unquote("max(#{base.govuk-spacing(3)}, #{$padding-safe-area-right})");
+      padding-left: string.unquote("max(#{base.govuk-spacing(3)}, #{$padding-safe-area-left})");
+    }
+
+    &:focus {
+      outline: base.$govuk-focus-width solid;
+      outline-color: base.govuk-functional-colour(focus);
+      outline-offset: 0;
+      background-color: base.govuk-functional-colour(focus);
+
+      @media (forced-colors: active) {
+        outline-offset: (0 - base.$govuk-focus-width);
+      }
+
+      // Undo unwanted changes when global styles are enabled
+      @if base.$govuk-global-styles {
+        @include base.govuk-link-decoration;
+        box-shadow: none;
+      }
+    }
+  }
+
+  .govuk-skip-link-focused-element {
+    &:focus {
+      // Remove the native visible focus indicator when the element is
+      // programmatically focused.
+      //
+      // We set the focus on the linked element (this is usually the <main>
+      // element) when the skip link is activated to improve screen reader
+      // announcements. However, we remove the visible focus indicator from the
+      // linked element because the user cannot interact with it.
+      //
+      // A related discussion: https://github.com/w3c/wcag/issues/1001
+      outline: none;
+    }
+  }
+}
+