defra_ruby_template 5.11.1 → 6.4.0

data/vendor/assets/stylesheets/objects/_button-group.mixin.scss

@@ -0,0 +1,80 @@
+@use "../base";
+
+/// @access private
+@mixin styles {
+  // Button groups can be used to group buttons and links together as a group.
+  //
+  // Within a button group:
+  //
+  // - links are styled to line up visually with the buttons, including being
+  //   centre-aligned on mobile
+  // - spacing between the buttons and links is handled automatically, including
+  //   when they wrap across multiple lines
+  .govuk-button-group {
+    $horizontal-gap: base.govuk-spacing(3);
+    $vertical-gap: base.govuk-spacing(3);
+
+    // These need to be kept in sync with the button component's styles
+    $button-padding: base.govuk-spacing(2);
+    $button-shadow-size: base.$govuk-border-width-form-element;
+
+    $link-spacing: base.govuk-spacing(1);
+
+    @include base.govuk-responsive-margin(6, "bottom", $adjustment: $vertical-gap * -1);
+
+    // Flexbox is used to center-align links on mobile, align everything along
+    // the baseline on tablet and above, and to removes extra whitespace that
+    // we'd get between the buttons and links because they're inline-blocks.
+    //
+    // Ideally we'd use `gap` with flexbox rather than having to do it all with
+    // margins, but unfortunately the support isn't there (yet) and @supports
+    // doesn't play nicely with it
+    // (https://github.com/w3c/csswg-drafts/issues/3559)
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    // Give links within the button group the same font-size and line-height
+    // as buttons.
+    //
+    // Because we want the focus state to be tight around the link text, we use
+    // margins where the buttons would use padding.
+    .govuk-link {
+      @include base.govuk-font($size: 19, $line-height: 19px);
+      display: inline-block;
+      // Prevent links overflowing their container in IE10/11 because of bug
+      // with align-items: center
+      max-width: 100%;
+      margin-top: $link-spacing;
+      margin-bottom: $link-spacing + $vertical-gap;
+      text-align: center;
+    }
+
+    // Reduce the bottom margin to the size of the vertical gap (accommodating
+    // the button shadow) – the 'lost' margin is moved to the button-group.
+    .govuk-button {
+      margin-bottom: $vertical-gap + $button-shadow-size;
+    }
+
+    // On tablet and above, we also introduce a 'column gap' between the
+    // buttons and links in each row and left align links
+    @media #{base.govuk-from-breakpoint(tablet)} {
+      flex-direction: row;
+      flex-wrap: wrap;
+      align-items: baseline;
+
+      // Cancel out the column gap for the last item in each row
+      margin-right: ($horizontal-gap * -1);
+
+      .govuk-button,
+      .govuk-link {
+        margin-right: $horizontal-gap;
+      }
+
+      .govuk-link {
+        text-align: left;
+      }
+    }
+  }
+}
+

data/vendor/assets/stylesheets/objects/_button-group.scss

@@ -1,80 +1,5 @@
-@import "../base";
+@use "button-group.mixin" as button-group;
+@use "../custom-properties";
 
-@include govuk-exports("govuk/objects/button-group") {
-  // Button groups can be used to group buttons and links together as a group.
-  //
-  // Within a button group:
-  //
-  // - links are styled to line up visually with the buttons, including being
-  //   centre-aligned on mobile
-  // - spacing between the buttons and links is handled automatically, including
-  //   when they wrap across multiple lines
-  .govuk-button-group {
-    $horizontal-gap: govuk-spacing(3);
-    $vertical-gap: govuk-spacing(3);
+@include button-group.styles;
 
-    // These need to be kept in sync with the button component's styles
-    $button-padding: govuk-spacing(2);
-    $button-shadow-size: $govuk-border-width-form-element;
-
-    $link-spacing: govuk-spacing(1);
-
-    @include govuk-responsive-margin(6, "bottom", $adjustment: $vertical-gap * -1);
-
-    // Flexbox is used to center-align links on mobile, align everything along
-    // the baseline on tablet and above, and to removes extra whitespace that
-    // we'd get between the buttons and links because they're inline-blocks.
-    //
-    // Ideally we'd use `gap` with flexbox rather than having to do it all with
-    // margins, but unfortunately the support isn't there (yet) and @supports
-    // doesn't play nicely with it
-    // (https://github.com/w3c/csswg-drafts/issues/3559)
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-
-    // Give links within the button group the same font-size and line-height
-    // as buttons.
-    //
-    // Because we want the focus state to be tight around the link text, we use
-    // margins where the buttons would use padding.
-    .govuk-link {
-      @include govuk-font($size: 19, $line-height: 19px);
-      display: inline-block;
-      // Prevent links overflowing their container in IE10/11 because of bug
-      // with align-items: center
-      max-width: 100%;
-      margin-top: $link-spacing;
-      margin-bottom: $link-spacing + $vertical-gap;
-      text-align: center;
-    }
-
-    // Reduce the bottom margin to the size of the vertical gap (accommodating
-    // the button shadow) – the 'lost' margin is moved to the button-group.
-    .govuk-button {
-      margin-bottom: $vertical-gap + $button-shadow-size;
-    }
-
-    // On tablet and above, we also introduce a 'column gap' between the
-    // buttons and links in each row and left align links
-    @include govuk-media-query($from: tablet) {
-      // Cancel out the column gap for the last item in each row
-      margin-right: ($horizontal-gap * -1);
-
-      flex-direction: row;
-      flex-wrap: wrap;
-      align-items: baseline;
-
-      .govuk-button,
-      .govuk-link {
-        margin-right: $horizontal-gap;
-      }
-
-      .govuk-link {
-        text-align: left;
-      }
-    }
-  }
-}
-
-/*# sourceMappingURL=_button-group.scss.map */

data/vendor/assets/stylesheets/objects/_form-group.import.scss

@@ -0,0 +1,8 @@
+@use "form-group.mixin" as form-group;
+
+@import "../base";
+
+@include govuk-exports("govuk/objects/form-group") {
+  @include form-group.styles;
+}
+

data/vendor/assets/stylesheets/objects/_form-group.mixin.scss

@@ -0,0 +1,26 @@
+@use "../base";
+
+/// @access private
+@mixin styles {
+  .govuk-form-group {
+    @include base.govuk-clearfix;
+    @include base.govuk-responsive-margin(6, "bottom");
+
+    .govuk-form-group:last-of-type {
+      margin-bottom: 0; // Remove margin from last item in nested groups
+    }
+  }
+
+  .govuk-form-group--error {
+    padding-left: base.govuk-spacing(3);
+    border-left: base.$govuk-border-width-form-group-error solid;
+    border-left-color: base.govuk-functional-colour(error);
+
+    .govuk-form-group {
+      // Reset error styles in nested form groups that might have error class
+      padding: 0;
+      border: 0;
+    }
+  }
+}
+

data/vendor/assets/stylesheets/objects/_form-group.scss

@@ -1,25 +1,5 @@
-@import "../base";
+@use "form-group.mixin" as form-group;
+@use "../custom-properties";
 
-@include govuk-exports("govuk/objects/form-group") {
-  .govuk-form-group {
-    @include govuk-clearfix;
-    @include govuk-responsive-margin(6, "bottom");
+@include form-group.styles;
 
-    .govuk-form-group:last-of-type {
-      margin-bottom: 0; // Remove margin from last item in nested groups
-    }
-  }
-
-  .govuk-form-group--error {
-    padding-left: govuk-spacing(3);
-    border-left: $govuk-border-width-form-group-error solid $govuk-error-colour;
-
-    .govuk-form-group {
-      // Reset error styles in nested form groups that might have error class
-      padding: 0;
-      border: 0;
-    }
-  }
-}
-
-/*# sourceMappingURL=_form-group.scss.map */

data/vendor/assets/stylesheets/objects/_grid.import.scss

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

data/vendor/assets/stylesheets/objects/_grid.mixin.scss

@@ -0,0 +1,28 @@
+@use "sass:map";
+
+@use "../base";
+
+/// @access private
+@mixin styles {
+  .govuk-grid-row {
+    @include base.govuk-clearfix;
+    margin-right: -(base.$govuk-gutter-half);
+    margin-left: -(base.$govuk-gutter-half);
+  }
+
+  @each $width in map.keys(base.$govuk-grid-widths) {
+    .govuk-grid-column-#{$width} {
+      @include base.govuk-grid-column($width);
+    }
+  }
+
+  // These *must* be defined in a separate loop as they have the same
+  // specificity as the non-breakpoint specific classes, so need to appear after
+  // them in the outputted CSS
+  @each $width in map.keys(base.$govuk-grid-widths) {
+    .govuk-grid-column-#{$width}-from-desktop {
+      @include base.govuk-grid-column($width, $at: desktop);
+    }
+  }
+}
+

data/vendor/assets/stylesheets/objects/_grid.scss

@@ -1,26 +1,5 @@
-@import "../base";
+@use "grid.mixin" as grid;
+@use "../custom-properties";
 
-@include govuk-exports("govuk/objects/grid") {
-  .govuk-grid-row {
-    @include govuk-clearfix;
-    margin-right: -($govuk-gutter-half);
-    margin-left: -($govuk-gutter-half);
-  }
+@include grid.styles;
 
-  @each $width in map-keys($govuk-grid-widths) {
-    .govuk-grid-column-#{$width} {
-      @include govuk-grid-column($width);
-    }
-  }
-
-  // These *must* be defined in a separate loop as they have the same
-  // specificity as the non-breakpoint specific classes, so need to appear after
-  // them in the outputted CSS
-  @each $width in map-keys($govuk-grid-widths) {
-    .govuk-grid-column-#{$width}-from-desktop {
-      @include govuk-grid-column($width, $at: desktop);
-    }
-  }
-}
-
-/*# sourceMappingURL=_grid.scss.map */

data/vendor/assets/stylesheets/objects/_index.import.scss

@@ -0,0 +1,7 @@
+@import "button-group";
+@import "form-group";
+@import "grid";
+@import "main-wrapper";
+@import "template";
+@import "width-container";
+

data/vendor/assets/stylesheets/objects/_index.scss

@@ -1,8 +1,7 @@
-@import "button-group";
-@import "form-group";
-@import "grid";
-@import "main-wrapper";
-@import "template";
-@import "width-container";
+@use "button-group";
+@use "form-group";
+@use "grid";
+@use "main-wrapper";
+@use "template";
+@use "width-container";
 
-/*# sourceMappingURL=_index.scss.map */

data/vendor/assets/stylesheets/objects/_main-wrapper.import.scss

@@ -0,0 +1,8 @@
+@use "main-wrapper.mixin" as main-wrapper;
+
+@import "../base";
+
+@include govuk-exports("govuk/objects/main-wrapper") {
+  @include main-wrapper.styles;
+}
+

data/vendor/assets/stylesheets/objects/_main-wrapper.mixin.scss

@@ -0,0 +1,55 @@
+@use "../base";
+
+////
+/// @group objects/layout
+////
+
+// Example usage with Breadcrumbs, phase banners, back links:
+// <div class="govuk-width-container">
+//   <!-- Breadcrumbs, phase banners, back links are placed in here. -->
+//   <div class="govuk-main-wrapper">
+//       <!-- Wrapper for the main content of your page which applies padding
+//            to the top / bottom -->
+//   </div>
+// </div>
+//
+// Example usage without Breadcrumbs, phase banners, back links:
+// <div class="govuk-width-container">
+//   <div class="govuk-main-wrapper govuk-main-wrapper--l">
+//       <!-- Wrapper for the main content of your page which applies padding
+//            to the top / bottom -->
+//   </div>
+// </div>
+
+/// @access private
+@mixin styles {
+  .govuk-main-wrapper {
+    // In IE11 the `main` element can be used, but is not recognized  –
+    // meaning it's not defined in IE's default style sheet,
+    // so it uses CSS initial value, which is inline.
+    display: block;
+    padding-top: base.govuk-spacing(4);
+    padding-bottom: base.govuk-spacing(4);
+
+    @media #{base.govuk-from-breakpoint(tablet)} {
+      // This spacing is manually adjusted to replicate the margin of
+      // govuk-heading-xl (50px) minus the spacing of back link and
+      // breadcrumbs (10px)
+      padding-top: base.govuk-spacing(7);
+      padding-bottom: base.govuk-spacing(7);
+    }
+  }
+
+  // Using the `.govuk-main-wrapper--auto-spacing` modifier should apply the
+  // correct spacing depending on whether there are any elements
+  // (such the back link, breadcrumbs or phase banner components) before the
+  // `.govuk-main-wrapper` in the `govuk-width-container`.
+  //
+  // If you need to control the spacing manually, use the
+  // `govuk-main-wrapper--l` modifier instead.
+  .govuk-main-wrapper--auto-spacing:first-child,
+  .govuk-main-wrapper--l {
+    @include base.govuk-responsive-padding(8, "top");
+  }
+}
+

data/vendor/assets/stylesheets/objects/_main-wrapper.scss

@@ -1,55 +1,5 @@
-@import "../base";
+@use "main-wrapper.mixin" as main-wrapper;
+@use "../custom-properties";
 
-////
-/// @group objects/layout
-////
+@include main-wrapper.styles;
 
-// Example usage with Breadcrumbs, phase banners, back links:
-// <div class="govuk-width-container">
-//   <!-- Breadcrumbs, phase banners, back links are placed in here. -->
-//   <div class="govuk-main-wrapper">
-//       <!-- Wrapper for the main content of your page which applies padding
-//            to the top / bottom -->
-//   </div>
-// </div>
-//
-// Example usage without Breadcrumbs, phase banners, back links:
-// <div class="govuk-width-container">
-//   <div class="govuk-main-wrapper govuk-main-wrapper--l">
-//       <!-- Wrapper for the main content of your page which applies padding
-//            to the top / bottom -->
-//   </div>
-// </div>
-
-@include govuk-exports("govuk/objects/main-wrapper") {
-  .govuk-main-wrapper {
-    // In IE11 the `main` element can be used, but is not recognized  –
-    // meaning it's not defined in IE's default style sheet,
-    // so it uses CSS initial value, which is inline.
-    display: block;
-    padding-top: govuk-spacing(4);
-    padding-bottom: govuk-spacing(4);
-
-    @include govuk-media-query($from: tablet) {
-      // This spacing is manually adjusted to replicate the margin of
-      // govuk-heading-xl (50px) minus the spacing of back link and
-      // breadcrumbs (10px)
-      padding-top: govuk-spacing(7);
-      padding-bottom: govuk-spacing(7);
-    }
-  }
-
-  // Using the `.govuk-main-wrapper--auto-spacing` modifier should apply the
-  // correct spacing depending on whether there are any elements
-  // (such the back link, breadcrumbs or phase banner components) before the
-  // `.govuk-main-wrapper` in the `govuk-width-container`.
-  //
-  // If you need to control the spacing manually, use the
-  // `govuk-main-wrapper--l` modifier instead.
-  .govuk-main-wrapper--auto-spacing:first-child,
-  .govuk-main-wrapper--l {
-    @include govuk-responsive-padding(8, "top");
-  }
-}
-
-/*# sourceMappingURL=_main-wrapper.scss.map */

data/vendor/assets/stylesheets/objects/_template.import.scss

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

data/vendor/assets/stylesheets/objects/_template.mixin.scss

@@ -0,0 +1,53 @@
+@use "../base";
+
+/// @access private
+@mixin styles {
+  // Applied to the <html> element
+  .govuk-template {
+    // Set the overall page background colour to the same colour as used by the
+    // footer to give the illusion of a long footer.
+    background-color: base.govuk-functional-colour(template-background);
+
+    // Prevent automatic text sizing, as we already cater for small devices and
+    // would like the browser to stay on 100% text zoom by default.
+    -webkit-text-size-adjust: 100%;
+       -moz-text-size-adjust: 100%;
+            text-size-adjust: 100%;
+
+    // Add scroll padding to the top of govuk-template but remove it if the
+    // exit this page component is present.
+    //
+    // This is a solution to exit this page potentially failing WCAG SC 2.4.12:
+    // Focus Not Obscured (https://www.w3.org/WAI/WCAG22/Understanding/focus-not-obscured-minimum.html)
+    // due to it's sticky positioning.
+    //
+    // This will apply scroll-padding-top in any browsers that don't support :has
+    // (https://caniuse.com/css-has). This is part of the reason we do this in
+    // a "wrong way round" way as we hypothesise that the risks of having
+    // scroll-padding unnecessarily is better than risking not having scroll-padding
+    // and needing it to account for exit this page.
+    @supports ((position: -webkit-sticky) or (position: sticky)) {
+      scroll-padding-top: base.govuk-spacing(9);
+
+      &:not(:has(.govuk-exit-this-page)) {
+        scroll-padding-top: 0;
+      }
+    }
+
+    // Force the scrollbar to always display in IE, to prevent horizontal page
+    // jumps as content height changes (e.g. autocomplete results open).
+    @media screen {
+      overflow-y: scroll;
+    }
+  }
+
+  // Applied to the <body> element
+  .govuk-template__body {
+    // The default margins set by user-agents are not required since we have our
+    // own containers.
+    margin: 0;
+    // Set the overall body of the page back to the typical background colour.
+    background-color: base.govuk-functional-colour(body-background);
+  }
+}
+

data/vendor/assets/stylesheets/objects/_template.scss

@@ -1,57 +1,5 @@
-@import "../base";
+@use "template.mixin" as template;
+@use "../custom-properties";
 
-@include govuk-exports("govuk/objects/template") {
-  // Applied to the <html> element
-  .govuk-template {
-    // Set the overall page background colour to the same colour as used by the
-    // footer to give the illusion of a long footer.
-    @include _govuk-rebrand(
-      background-color,
-      $from: $govuk-template-background-colour,
-      $to: $_govuk-rebrand-template-background-colour
-    );
+@include template.styles;
 
-    // Prevent automatic text sizing, as we already cater for small devices and
-    // would like the browser to stay on 100% text zoom by default.
-    -webkit-text-size-adjust: 100%;
-       -moz-text-size-adjust: 100%;
-            text-size-adjust: 100%;
-
-    // Add scroll padding to the top of govuk-template but remove it if the
-    // exit this page component is present.
-    //
-    // This is a solution to exit this page potentially failing WCAG SC 2.4.12:
-    // Focus Not Obscured (https://www.w3.org/WAI/WCAG22/Understanding/focus-not-obscured-minimum.html)
-    // due to it's sticky positioning.
-    //
-    // This will apply scroll-padding-top in any browsers that don't support :has
-    // (https://caniuse.com/css-has). This is part of the reason we do this in
-    // a "wrong way round" way as we hypothesise that the risks of having
-    // scroll-padding unnecessarily is better than risking not having scroll-padding
-    // and needing it to account for exit this page.
-    @supports ((position: -webkit-sticky) or (position: sticky)) {
-      scroll-padding-top: govuk-spacing(9);
-
-      &:not(:has(.govuk-exit-this-page)) {
-        scroll-padding-top: 0;
-      }
-    }
-
-    // Force the scrollbar to always display in IE, to prevent horizontal page
-    // jumps as content height changes (e.g. autocomplete results open).
-    @include govuk-media-query($media-type: screen) {
-      overflow-y: scroll;
-    }
-  }
-
-  // Applied to the <body> element
-  .govuk-template__body {
-    // The default margins set by user-agents are not required since we have our
-    // own containers.
-    margin: 0;
-    // Set the overall body of the page back to the typical background colour.
-    background-color: $govuk-body-background-colour;
-  }
-}
-
-/*# sourceMappingURL=_template.scss.map */

data/vendor/assets/stylesheets/objects/_width-container.import.scss

@@ -0,0 +1,8 @@
+@use "width-container.mixin" as width-container;
+
+@import "../base";
+
+@include govuk-exports("govuk/objects/width-container") {
+  @include width-container.styles;
+}
+

data/vendor/assets/stylesheets/objects/_width-container.mixin.scss

@@ -0,0 +1,9 @@
+@use "../base";
+
+/// @access private
+@mixin styles {
+  .govuk-width-container {
+    @include base.govuk-width-container;
+  }
+}
+

data/vendor/assets/stylesheets/objects/_width-container.scss

@@ -1,77 +1,5 @@
-@import "../base";
+@use "width-container.mixin" as width-container;
+@use "../custom-properties";
 
-////
-/// @group objects/layout
-////
+@include width-container.styles;
 
-/// Width container mixin
-///
-/// Used to create page width and custom width container classes.
-///
-/// @param {String} $width [$govuk-page-width] - Width in pixels
-///
-/// @example scss - Creating a 1200px wide container class
-///  .app-width-container--wide {
-///    @include govuk-width-container(1200px);
-///  }
-///
-/// @access public
-
-@mixin govuk-width-container($width: $govuk-page-width) {
-  // By default, limit the width of the container to the page width
-  max-width: $width;
-
-  // On mobile, add half width gutters
-  margin-right: $govuk-gutter-half;
-  margin-left: $govuk-gutter-half;
-
-  // Respect 'display cutout' safe area (avoids notches and rounded corners)
-  @supports (margin: unquote("max(calc(0px))")) {
-    $gutter-safe-area-right: calc(#{$govuk-gutter-half} + env(safe-area-inset-right));
-    $gutter-safe-area-left: calc(#{$govuk-gutter-half} + env(safe-area-inset-left));
-
-    // Use max() to pick largest margin, default or with safe area
-    // Escaped due to Sass max() vs. CSS native max()
-    margin-right: unquote("max(#{$govuk-gutter-half}, #{$gutter-safe-area-right})");
-    margin-left: unquote("max(#{$govuk-gutter-half}, #{$gutter-safe-area-left})");
-  }
-
-  // On tablet, add full width gutters
-  @include govuk-media-query($from: tablet) {
-    margin-right: $govuk-gutter;
-    margin-left: $govuk-gutter;
-
-    // Respect 'display cutout' safe area (avoids notches and rounded corners)
-    @supports (margin: unquote("max(calc(0px))")) {
-      $gutter-safe-area-right: calc(#{$govuk-gutter-half} + env(safe-area-inset-right));
-      $gutter-safe-area-left: calc(#{$govuk-gutter-half} + env(safe-area-inset-left));
-
-      // Use max() to pick largest margin, default or with safe area
-      // Escaped due to Sass max() vs. CSS native max()
-      margin-right: unquote("max(#{$govuk-gutter}, #{$gutter-safe-area-right})");
-      margin-left: unquote("max(#{$govuk-gutter}, #{$gutter-safe-area-left})");
-    }
-  }
-
-  // As soon as the viewport is greater than the width of the page plus the
-  // gutters, just centre the content instead of adding gutters.
-  @include govuk-media-query($and: "(min-width: #{($width + $govuk-gutter * 2)})") {
-    margin-right: auto;
-    margin-left: auto;
-
-    // Since a safe area may have previously been set above,
-    // we need to duplicate this margin that centers the page.
-    @supports (margin: unquote("max(calc(0px))")) {
-      margin-right: auto;
-      margin-left: auto;
-    }
-  }
-}
-
-@include govuk-exports("govuk/objects/width-container") {
-  .govuk-width-container {
-    @include govuk-width-container;
-  }
-}
-
-/*# sourceMappingURL=_width-container.scss.map */