defra_ruby_template 5.11.1 → 6.4.0

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

@@ -0,0 +1,119 @@
+@use "../../base";
+@use "../generic-header/mixin" as genericHeader;
+
+/// @access private
+@mixin styles {
+  $logo-bottom-margin: 2px;
+
+  .govuk-header {
+    @include genericHeader.block-styles(
+      $background-colour: base.govuk-functional-colour("brand"),
+      $text-colour: base.govuk-functional-colour("inverse-text")
+    );
+  }
+
+  .govuk-header__container--full-width {
+    @include genericHeader.full-width-container-styles;
+  }
+
+  .govuk-header__logo {
+    // Magic numbers, set padding to vertically centre align the logo
+    @include genericHeader.logo-styles($padding-top: 16px, $padding-bottom: 14px - $logo-bottom-margin);
+  }
+
+  .govuk-header__homepage-link {
+    @include genericHeader.link-styles;
+
+    // Remove word-spacing from within the logo so we can ignore
+    // whitespace characters in the HTML
+    word-spacing: base.govuk-px-to-rem(-6px);
+    // Reset word-spacing for child elements
+    > * {
+      word-spacing: 0;
+    }
+  }
+
+  .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: base.govuk-px-to-rem(7px); // 1 'dot'
+    // Add bottom margin to space Product name on small viewports
+    margin-bottom: $logo-bottom-margin;
+    fill: currentcolor;
+    vertical-align: top;
+
+    // Prevent readability backplate from obscuring underline in Windows High
+    // Contrast Mode
+    @media (forced-colors: active) {
+      color: linktext;
+      forced-color-adjust: none;
+    }
+
+    // Remove the gap after the logo if there's no product name to keep hover
+    // and focus states neat
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+
+  // Colour in the Dot
+  .govuk-logo-dot {
+    fill: base.govuk-colour("teal", "accent");
+
+    // Override Dot colour when printing
+    @media print {
+      fill: currentcolor;
+    }
+
+    // Override Dot colour on forced colours mode
+    @media (forced-colors: active) {
+      fill: currentcolor;
+    }
+
+    // Override Dot colour on focus
+    :focus & {
+      fill: currentcolor;
+    }
+  }
+
+  .govuk-header__product-name {
+    display: inline-table;
+
+    // Remove 1px from the bottom to account for the font-size being 1px
+    // larger than the logo height.
+    margin-bottom: base.govuk-px-to-rem(-1px);
+
+    // Magic number font-size that visually aligns with GOV.UK logo.
+    // Also stops reducing the product name size on narrow screens
+    font-size: base.govuk-px-to-rem(31px);
+
+    // Reduce letter spacing
+    letter-spacing: -0.015em;
+
+    // Align vertically with logo when not wrapped
+    vertical-align: top;
+
+    // Prevent forced colour modes from applying a background colour behind
+    // the product name, which cuts off the underline that appears on hover.
+    forced-color-adjust: none;
+
+    @media screen and (forced-colors: active) {
+      color: LinkText;
+      background: transparent;
+    }
+  }
+
+  @media print {
+    .govuk-header__product-name {
+      // Fix product name alignment in Firefox when printing
+      @-moz-document url-prefix() {
+        margin-top: 2px;
+      }
+    }
+  }
+}
+

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

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

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

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

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

@@ -1,45 +1,5 @@
-@include govuk-exports("govuk/component/hint") {
-  .govuk-hint {
-    @include govuk-font($size: 19);
+@use "../../custom-properties";
+@use "mixin";
 
-    margin-bottom: govuk-spacing(3);
+@include mixin.styles;
 
-    color: $govuk-secondary-text-colour;
-  }
-
-  // Reduces margin-bottom of hint when used after the default label (no class)
-  // or govuk-label--s for better vertical alignment.
-
-  // This adjustment will not work when the label is inside the <h1>, however it
-  // is unlikely that the default or govuk-label--s class would be used in this
-  // case.
-
-  // This adjustment will not work in browsers that do not support :not().
-  // Users with these browsers will see the default size margin (5px larger).
-
-  .govuk-label:not(.govuk-label--m):not(.govuk-label--l):not(.govuk-label--xl) + .govuk-hint {
-    margin-bottom: govuk-spacing(2);
-  }
-
-  // Reduces margin-bottom of hint when used after the default legend (no class)
-  // or govuk-fieldset__legend--s for better vertical alignment.
-
-  // This adjustment will not work when the legend is outside the <h1>, however
-  // it is unlikely that the default or govuk-fieldset__legend--s class would be
-  // used in this case.
-
-  // 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);
-  }
-}
-
-/*# sourceMappingURL=_index.scss.map */

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

@@ -0,0 +1,47 @@
+@use "../../base";
+
+/// @access private
+@mixin styles {
+  .govuk-hint {
+    @include base.govuk-font($size: 19);
+
+    margin-bottom: base.govuk-spacing(3);
+
+    color: base.govuk-functional-colour(secondary-text);
+  }
+
+  // Reduces margin-bottom of hint when used after the default label (no class)
+  // or govuk-label--s for better vertical alignment.
+
+  // This adjustment will not work when the label is inside the <h1>, however it
+  // is unlikely that the default or govuk-label--s class would be used in this
+  // case.
+
+  // This adjustment will not work in browsers that do not support :not().
+  // Users with these browsers will see the default size margin (5px larger).
+
+  .govuk-label:not(.govuk-label--m):not(.govuk-label--l):not(.govuk-label--xl) + .govuk-hint {
+    margin-bottom: base.govuk-spacing(2);
+  }
+
+  // Reduces margin-bottom of hint when used after the default legend (no class)
+  // or govuk-fieldset__legend--s for better vertical alignment.
+
+  // This adjustment will not work when the legend is outside the <h1>, however
+  // it is unlikely that the default or govuk-fieldset__legend--s class would be
+  // used in this case.
+
+  // 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: base.govuk-spacing(2);
+  }
+
+  // Reduces visual spacing of legend when there is a hint
+  .govuk-fieldset__legend + .govuk-hint {
+    margin-top: base.govuk-spacing(-1);
+  }
+}
+

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

@@ -0,0 +1,11 @@
+@use "mixin";
+
+@import "../../base";
+@import "../error-message";
+@import "../hint";
+@import "../label";
+
+@include govuk-exports("govuk/component/input") {
+  @include mixin.styles;
+}
+

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

@@ -1,168 +1,8 @@
-@import "../error-message/index";
-@import "../hint/index";
-@import "../label/index";
+@use "../../custom-properties";
+@use "../error-message";
+@use "../hint";
+@use "../label";
+@use "mixin";
 
-@include govuk-exports("govuk/component/input") {
-  .govuk-input {
-    @include govuk-font($size: 19);
+@include mixin.styles;
 
-    box-sizing: border-box;
-    width: 100%;
-    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://bugzil.la/1335476). As
-    // background-color and color need to always be set together, color should
-    // not be set either
-    border: $govuk-border-width-form-element solid $govuk-input-border-colour;
-    border-radius: 0;
-
-    // Disable inner shadow and remove rounded corners
-    -webkit-appearance: none;
-            appearance: none;
-
-    &: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` 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;
-    }
-
-    &:disabled {
-      opacity: 0.5;
-      color: inherit;
-      background-color: transparent;
-      cursor: not-allowed;
-    }
-  }
-
-  .govuk-input::-webkit-outer-spin-button,
-  .govuk-input::-webkit-inner-spin-button {
-    margin: 0;
-    -webkit-appearance: none;
-  }
-
-  .govuk-input[type="number"] {
-    -moz-appearance: textfield;
-  }
-
-  .govuk-input--error {
-    border-color: $govuk-error-colour;
-
-    &:focus {
-      border-color: $govuk-input-border-colour;
-    }
-  }
-
-  .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 to allow for the Safari prefill icon
-
-  .govuk-input--width-30 {
-    max-width: 29.5em;
-  }
-
-  .govuk-input--width-20 {
-    max-width: 20.5em;
-  }
-
-  .govuk-input--width-10 {
-    max-width: 11.5em;
-  }
-
-  .govuk-input--width-5 {
-    max-width: 5.5em;
-  }
-
-  .govuk-input--width-4 {
-    max-width: 4.5em;
-  }
-
-  .govuk-input--width-3 {
-    max-width: 3.75em;
-  }
-
-  .govuk-input--width-2 {
-    max-width: 2.75em;
-  }
-
-  .govuk-input__wrapper {
-    display: flex;
-
-    .govuk-input {
-      flex: 0 1 auto;
-    }
-
-    .govuk-input:focus {
-      // Hack to stop focus style being overlapped by the suffix
-      z-index: 1;
-    }
-
-    // Split prefix/suffix onto separate lines on narrow screens
-    @include govuk-media-query($until: mobile) {
-      display: block;
-
-      .govuk-input {
-        // Set max-width to override potential width override class on the input
-        max-width: 100%;
-      }
-    }
-  }
-
-  .govuk-input__prefix,
-  .govuk-input__suffix {
-    @include govuk-font($size: 19);
-    box-sizing: border-box;
-    // 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");
-    text-align: center;
-    white-space: nowrap;
-    // Emphasise non-editable status of prefixes and suffixes
-    cursor: default;
-    flex: 0 0 auto;
-    // Split prefix/suffix onto separate lines on narrow screens
-    @include govuk-media-query($until: mobile) {
-      display: block;
-      height: 100%;
-      white-space: normal;
-    }
-  }
-
-  .govuk-input__prefix {
-    @include govuk-media-query($until: mobile) {
-      border-bottom: 0;
-    }
-    @include govuk-media-query($from: mobile) {
-      border-right: 0;
-    }
-  }
-
-  // Split prefix/suffix onto separate lines on narrow screens
-  .govuk-input__suffix {
-    @include govuk-media-query($until: mobile) {
-      border-top: 0;
-    }
-    @include govuk-media-query($from: mobile) {
-      border-left: 0;
-    }
-  }
-}
-
-/*# sourceMappingURL=_index.scss.map */

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

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

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

@@ -0,0 +1,161 @@
+@use "../../base";
+
+/// @access private
+@mixin styles {
+  .govuk-input {
+    @include base.govuk-font($size: 19);
+
+    box-sizing: border-box;
+    width: 100%;
+    height: base.govuk-px-to-rem(40px);
+    margin-top: 0;
+    padding: base.govuk-spacing(1);
+    // Setting any background-color makes text invisible when changing colours
+    // to dark backgrounds in Firefox (https://bugzil.la/1335476). As
+    // background-color and color need to always be set together, color should
+    // not be set either
+    border: base.$govuk-border-width-form-element solid;
+    border-radius: 0;
+    border-color: base.govuk-functional-colour(input-border);
+
+    // Disable inner shadow and remove rounded corners
+    -webkit-appearance: none;
+            appearance: none;
+
+    &:focus {
+      @include base.govuk-focused-form-input;
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      color: inherit;
+      background-color: transparent;
+      cursor: not-allowed;
+    }
+  }
+
+  .govuk-input::-webkit-outer-spin-button,
+  .govuk-input::-webkit-inner-spin-button {
+    margin: 0;
+    -webkit-appearance: none;
+  }
+
+  .govuk-input[type="number"] {
+    -moz-appearance: textfield;
+  }
+
+  .govuk-input--error {
+    border-color: base.govuk-functional-colour(error);
+
+    &:focus {
+      border-color: base.govuk-functional-colour(input-border);
+    }
+  }
+
+  .govuk-input--extra-letter-spacing {
+    @include base.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 to allow for the Safari prefill icon
+
+  .govuk-input--width-30 {
+    max-width: 29.5em;
+  }
+
+  .govuk-input--width-20 {
+    max-width: 20.5em;
+  }
+
+  .govuk-input--width-10 {
+    max-width: 11.5em;
+  }
+
+  .govuk-input--width-5 {
+    max-width: 5.5em;
+  }
+
+  .govuk-input--width-4 {
+    max-width: 4.5em;
+  }
+
+  .govuk-input--width-3 {
+    max-width: 3.75em;
+  }
+
+  .govuk-input--width-2 {
+    max-width: 2.75em;
+  }
+
+  .govuk-input__wrapper {
+    display: flex;
+
+    .govuk-input {
+      flex: 0 1 auto;
+    }
+
+    .govuk-input:focus {
+      // Hack to stop focus style being overlapped by the suffix
+      z-index: 1;
+    }
+
+    // Split prefix/suffix onto separate lines on narrow screens
+    @media #{base.govuk-until-breakpoint(mobile)} {
+      display: block;
+
+      .govuk-input {
+        // Set max-width to override potential width override class on the input
+        max-width: 100%;
+      }
+    }
+  }
+
+  .govuk-input__prefix,
+  .govuk-input__suffix {
+    @include base.govuk-font($size: 19);
+    box-sizing: border-box;
+    // Use flexbox to align text within the prefix and suffix
+    display: flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+    min-width: base.govuk-px-to-rem(40px);
+    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);
+    color: base.govuk-functional-colour(text);
+    background-color: base.govuk-colour("black", $variant: "tint-95");
+    text-align: center;
+    white-space: nowrap;
+    // Emphasise non-editable status of prefixes and suffixes
+    cursor: default;
+    // Split prefix/suffix onto separate lines on narrow screens
+    @media #{base.govuk-until-breakpoint(mobile)} {
+      display: block;
+      height: 100%;
+      white-space: normal;
+    }
+  }
+
+  .govuk-input__prefix {
+    @media #{base.govuk-until-breakpoint(mobile)} {
+      border-bottom: 0;
+    }
+    @media #{base.govuk-from-breakpoint(mobile)} {
+      border-right: 0;
+    }
+  }
+
+  // Split prefix/suffix onto separate lines on narrow screens
+  .govuk-input__suffix {
+    @media #{base.govuk-until-breakpoint(mobile)} {
+      border-top: 0;
+    }
+    @media #{base.govuk-from-breakpoint(mobile)} {
+      border-left: 0;
+    }
+  }
+}
+

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

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

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

@@ -1,26 +1,5 @@
-@include govuk-exports("govuk/component/inset-text") {
-  .govuk-inset-text {
-    @include govuk-font($size: 19);
-    @include govuk-text-colour;
-    padding: govuk-spacing(3);
-    // Margin top intended to collapse
-    // This adds an additional 10px to the paragraph above
-    @include govuk-responsive-margin(6, "top");
-    @include govuk-responsive-margin(6, "bottom");
+@use "../../custom-properties";
+@use "mixin";
 
-    clear: both;
+@include mixin.styles;
 
-    border-left: $govuk-border-width-wide solid $govuk-border-colour;
-
-    > :first-child {
-      margin-top: 0;
-    }
-
-    > :only-child,
-    > :last-child {
-      margin-bottom: 0;
-    }
-  }
-}
-
-/*# sourceMappingURL=_index.scss.map */

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

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

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

@@ -0,0 +1,31 @@
+@use "../../base";
+
+/// @access private
+@mixin styles {
+  .govuk-inset-text {
+    @include base.govuk-font($size: 19);
+
+    padding: base.govuk-spacing(3);
+
+    // Margin top intended to collapse
+    // This adds an additional 10px to the paragraph above
+    @include base.govuk-responsive-margin(6, "top");
+    @include base.govuk-responsive-margin(6, "bottom");
+
+    clear: both;
+
+    border-left: base.$govuk-border-width-wide solid;
+    border-left-color: base.govuk-functional-colour(border);
+    color: base.govuk-functional-colour(text);
+
+    > :first-child {
+      margin-top: 0;
+    }
+
+    > :only-child,
+    > :last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+

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

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