defra_ruby_template 5.11.0 → 6.4.0

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

@@ -0,0 +1,235 @@
+@use "../../base";
+
+/// @access private
+@mixin styles {
+  // Flexbox enhancement for small screen visual design
+  // Falls back to a float: left layout on non-flex browsers
+  .govuk-pagination {
+    @include base.govuk-responsive-margin(6, "bottom");
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    align-items: center;
+
+    @media #{base.govuk-from-breakpoint(tablet)} {
+      flex-direction: row;
+      align-items: flex-start;
+    }
+  }
+
+  .govuk-pagination__list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .govuk-pagination__item,
+  .govuk-pagination__next,
+  .govuk-pagination__prev {
+    @include base.govuk-font(19);
+    box-sizing: border-box;
+    position: relative;
+    min-width: 45px;
+    min-height: 45px;
+    padding: base.govuk-spacing(2) base.govuk-spacing(3);
+    float: left; // Float is ignored if flex is active for prev/next links
+
+    &:hover {
+      background-color: base.govuk-colour("black", $variant: "tint-95");
+    }
+  }
+
+  .govuk-pagination__item {
+    // Hide items on small screens except the prev/next items,
+    // non-link items and the first and last items
+    display: none;
+
+    // Center align pagination links in their parent list item so that they
+    // visually sit in the middle of their touch area
+    text-align: center;
+
+    @media #{base.govuk-from-breakpoint(tablet)} {
+      display: block;
+    }
+  }
+
+  .govuk-pagination__prev,
+  .govuk-pagination__next {
+    @include base.govuk-typography-weight-bold;
+
+    // Use flex to avoid extra space being introduced when whitespace exists
+    // between the arrow svg and the link text
+    .govuk-pagination__link {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  .govuk-pagination__prev {
+    padding-left: 0;
+  }
+
+  .govuk-pagination__next {
+    padding-right: 0;
+  }
+
+  // Only show first, last and non-link items on mobile
+  .govuk-pagination__item--current,
+  .govuk-pagination__item--ellipsis,
+  .govuk-pagination__item:first-child,
+  .govuk-pagination__item:last-child {
+    display: block;
+  }
+
+  .govuk-pagination__item--current {
+    @include base.govuk-typography-weight-bold;
+    outline: 1px solid transparent;
+    background-color: base.govuk-functional-colour(link);
+
+    &:hover {
+      background-color: base.govuk-functional-colour(link);
+    }
+
+    .govuk-pagination__link {
+      @include base.govuk-link-style-inverse;
+    }
+  }
+
+  .govuk-pagination__item--ellipsis {
+    @include base.govuk-typography-weight-bold;
+    color: base.govuk-functional-colour(secondary-text);
+
+    // Remove hover state for ellipsis items as they don't contain links
+    &:hover {
+      background-color: transparent;
+    }
+  }
+
+  .govuk-pagination__link {
+    display: block;
+    min-width: base.govuk-spacing(3);
+
+    // Increase the touch area for the link to the parent element.
+    @media screen {
+      &::after {
+        content: "";
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+      }
+    }
+
+    // Add link hover decoration to prev/next text if no label present on
+    // prev/next only mode,  so that we have a hover state in all cases
+    &:hover,
+    &:active {
+      .govuk-pagination__link-title--decorated {
+        @include base.govuk-link-decoration;
+      }
+
+      .govuk-pagination__link-label,
+      .govuk-pagination__link-title--decorated {
+        @include base.govuk-link-hover-decoration;
+      }
+    }
+
+    &:focus {
+      .govuk-pagination__icon {
+        color: base.govuk-functional-colour(focus-text);
+      }
+
+      .govuk-pagination__link-label {
+        text-decoration: none;
+      }
+
+      .govuk-pagination__link-title--decorated {
+        text-decoration: none;
+      }
+    }
+  }
+
+  .govuk-pagination__link-title {
+    text-decoration-thickness: inherit;
+  }
+
+  .govuk-pagination__link-label {
+    @include base.govuk-typography-weight-regular;
+    @include base.govuk-link-decoration;
+    display: inline-block;
+  }
+
+  .govuk-pagination__icon {
+    // Set size using rems to make the icon scale with text
+    width: base.govuk-px-to-rem(15px);
+    height: base.govuk-px-to-rem(13px);
+    color: base.govuk-functional-colour(secondary-text);
+    fill: currentcolor;
+    forced-color-adjust: auto;
+  }
+
+  .govuk-pagination__icon--prev {
+    margin-right: base.govuk-spacing(3);
+  }
+
+  .govuk-pagination__icon--next {
+    margin-left: base.govuk-spacing(3);
+  }
+
+  // Block mode - position previous and next links above and below numbers
+  .govuk-pagination--block {
+    display: block;
+
+    .govuk-pagination__next,
+    .govuk-pagination__prev {
+      padding-left: 0;
+      float: none;
+
+      .govuk-pagination__link {
+        display: inline-block;
+      }
+    }
+
+    .govuk-pagination__next {
+      padding-right: base.govuk-spacing(3);
+    }
+
+    // Only apply a border between prev and next if both are present
+    .govuk-pagination__prev + .govuk-pagination__next {
+      border-top: 1px solid;
+      border-top-color: base.govuk-functional-colour(border);
+    }
+
+    // Set the after pseudo element to a block which makes the title visually
+    // display as block level whilst programmatically being inline. We do this
+    // to get around an NVDA quirk where adjacent block level elements are
+    // always read out separately
+    .govuk-pagination__link-title::after {
+      content: "";
+      display: block;
+    }
+
+    .govuk-pagination__link {
+      padding-left: base.govuk-spacing(6);
+      text-align: left;
+
+      &:not(:focus) {
+        text-decoration: none;
+      }
+    }
+
+    .govuk-pagination__icon {
+      // This magic number is brought to you by the following equation:
+      // ((lineHeight − arrowHeight) ÷ 2) ÷ fontSize
+      // ((25 − 13) ÷ 2) ÷ 19 = 0.326em
+      //
+      // This could have been done programmatically but we don't have functions
+      // for grabbing the line-height of specific typography sizes just yet.
+      margin-top: 0.326em;
+      margin-left: base.govuk-spacing(6) * -1;
+      float: left;
+    }
+  }
+}
+

data/vendor/assets/stylesheets/components/pagination/_pagination.import.scss

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

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

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

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

@@ -1,58 +1,5 @@
-@include govuk-exports("govuk/component/panel") {
-  .govuk-panel {
-    @include govuk-font($size: 36);
+@use "../../custom-properties";
+@use "mixin";
 
-    box-sizing: border-box;
+@include mixin.styles;
 
-    margin-bottom: govuk-spacing(3);
-    padding: govuk-spacing(7) - $govuk-border-width;
-
-    border: $govuk-border-width solid transparent;
-
-    text-align: center;
-
-    @include govuk-media-query($until: tablet) {
-      padding: govuk-spacing(if($govuk-new-typography-scale, 4, 3)) - $govuk-border-width;
-
-      // This is an if-all-else-fails attempt to stop long words from
-      // overflowing the container on very narrow viewports by forcing them to
-      // break and wrap instead. This overflowing is more likely to happen when
-      // user increases text size on a mobile eg. using iOS Safari text resize
-      // controls.
-      //
-      // The overflowing is a particular problem with the panel component since
-      // it uses white text: when the text overflows the container, it is
-      // invisible on the white (page) background. When the text in our other
-      // components overflow, the user might have to scroll horizontally to view
-      // it but the the text remains legible.
-      overflow-wrap: break-word;
-
-      // Support IE (autoprefixer doesn't add this as it's not a prefix)
-      word-wrap: break-word;
-    }
-  }
-
-  .govuk-panel--confirmation {
-    color: govuk-colour("white");
-    background: govuk-colour("green");
-
-    @include govuk-media-query($media-type: print) {
-      border-color: currentcolor;
-      color: $govuk-print-text-colour;
-      background: none;
-    }
-  }
-
-  .govuk-panel__title {
-    @include govuk-font-size($size: 48);
-    @include govuk-typography-weight-bold;
-    margin-top: 0;
-    margin-bottom: govuk-spacing(6);
-  }
-
-  .govuk-panel__title:last-child {
-    margin-bottom: 0;
-  }
-}
-
-/*# sourceMappingURL=_index.scss.map */

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

@@ -0,0 +1,94 @@
+@use "../../base";
+
+/// @access private
+@mixin styles {
+  .govuk-panel {
+    @include base.govuk-font($size: 36);
+
+    box-sizing: border-box;
+
+    margin-bottom: base.govuk-spacing(3);
+    padding: base.govuk-spacing(7) - base.$govuk-border-width;
+
+    border: base.$govuk-border-width solid transparent;
+    color: base.govuk-functional-colour(text);
+
+    text-align: center;
+
+    @media #{base.govuk-until-breakpoint(tablet)} {
+      padding: base.govuk-spacing(4) - base.$govuk-border-width;
+
+      // Support IE (autoprefixer doesn't add this as it's not a prefix)
+      word-wrap: break-word;
+
+      // This is an if-all-else-fails attempt to stop long words from
+      // overflowing the container on very narrow viewports by forcing them to
+      // break and wrap instead. This overflowing is more likely to happen when
+      // user increases text size on a mobile eg. using iOS Safari text resize
+      // controls.
+      //
+      // The overflowing is a particular problem with the panel component since
+      // it uses white text: when the text overflows the container, it is
+      // invisible on the white (page) background. When the text in our other
+      // components overflow, the user might have to scroll horizontally to view
+      // it but the the text remains legible.
+      overflow-wrap: break-word;
+    }
+  }
+
+  .govuk-panel__title {
+    @include base.govuk-font-size($size: 48);
+    @include base.govuk-typography-weight-bold;
+    margin-top: 0;
+    margin-bottom: base.govuk-spacing(6);
+  }
+
+  // Remove bottom spacing from anything at the end of the Panel's content
+  // to stop the Panel's padding spacing from becoming too large.
+  .govuk-panel__title:last-child,
+  .govuk-panel__body > :last-child,
+  .govuk-panel__actions > :last-child {
+    margin-bottom: 0;
+  }
+
+  // On larger screens if the Panel actions have a button group,
+  // then we want to adjust the spacing a bit to avoid the button group
+  // making the Panel's padding spacing being too large.
+  @media #{base.govuk-from-breakpoint(tablet)} {
+    .govuk-panel__actions > .govuk-button-group:last-child {
+      margin-bottom: -1 * base.govuk-spacing(2);
+    }
+  }
+
+  // When the panel shows some actions, make sure they have some spacing
+  // from the panel's content
+  .govuk-panel__body:not(:last-child) {
+    margin-bottom: base.govuk-spacing(7);
+  }
+
+  .govuk-panel--confirmation {
+    --govuk-text-colour: #{base.govuk-functional-colour(inverse-text)};
+    background: base.govuk-functional-colour(success);
+  }
+
+  .govuk-panel--interruption {
+    --govuk-text-colour: #{base.govuk-functional-colour(inverse-text)};
+    background: base.govuk-functional-colour(brand);
+    text-align: left;
+
+    // Smaller title to go alongside smaller body text.
+    .govuk-panel__title {
+      @include base.govuk-font-size($size: 36);
+      margin-bottom: base.govuk-spacing(3);
+    }
+  }
+
+  @media print {
+    .govuk-panel {
+      --govuk-text-colour: inherit;
+      border-color: currentcolor;
+      background: none;
+    }
+  }
+}
+

data/vendor/assets/stylesheets/components/panel/_panel.import.scss

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

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

@@ -0,0 +1,10 @@
+@use "mixin";
+
+@import "../../base";
+@import "../button";
+@import "../input";
+
+@include govuk-exports("govuk/component/password-input") {
+  @include mixin.styles;
+}
+

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

@@ -1,57 +1,8 @@
-@import "../button/index";
-@import "../input/index";
+@use "../../custom-properties";
+@use "mixin";
 
-@include govuk-exports("govuk/component/password-input") {
-  .govuk-password-input__wrapper {
-    // This element inherits styles from .govuk-input__wrapper, including:
-    // - being display: block with contents in a stacked column below the mobile
-    //   breakpoint
-    // - being display: flex above the mobile breakpoint
+@use "../button";
+@use "../input";
 
-    @include govuk-media-query($from: mobile) {
-      flex-direction: row;
+@include mixin.styles;
 
-      // The default of `stretch` makes the toggle button appear taller than the
-      // input, due to using box-shadow, which we don't particularly want in
-      // this situation
-      align-items: flex-start;
-    }
-  }
-
-  .govuk-password-input__input {
-    // IE 11 and Microsoft Edge comes with its own password reveal function. We
-    // want to hide it, so that there aren't two controls presented to the user
-    // that do the same thing but aren't in sync with one another. This doesn't
-    // affect the function that allows Edge users to toggle password visibility
-    // by pressing Alt+F8, which cannot be programmatically disabled.
-    &::-ms-reveal {
-      display: none;
-    }
-  }
-
-  .govuk-password-input__toggle {
-    // Add top margin so the button doesn't obscure the input's focus style
-    margin-top: govuk-spacing(1);
-
-    // Remove default margin-bottom from button
-    margin-bottom: 0;
-
-    // Hide the button by default, JS removes this attribute
-    &[hidden] {
-      display: none;
-    }
-
-    @include govuk-media-query($from: mobile) {
-      // Buttons are normally 100% wide on mobile, but we don't want that here
-      width: auto;
-      flex-shrink: 0;
-      flex-basis: 5em;
-
-      // Move the spacing from top to the left
-      margin-top: 0;
-      margin-left: govuk-spacing(1);
-    }
-  }
-}
-
-/*# sourceMappingURL=_index.scss.map */

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

@@ -0,0 +1,56 @@
+@use "../../base";
+
+/// @access private
+@mixin styles {
+  .govuk-password-input__wrapper {
+    // This element inherits styles from .govuk-input__wrapper, including:
+    // - being display: block with contents in a stacked column below the mobile
+    //   breakpoint
+    // - being display: flex above the mobile breakpoint
+
+    @media #{base.govuk-from-breakpoint(mobile)} {
+      flex-direction: row;
+
+      // The default of `stretch` makes the toggle button appear taller than the
+      // input, due to using box-shadow, which we don't particularly want in
+      // this situation
+      align-items: flex-start;
+    }
+  }
+
+  .govuk-password-input__input {
+    // IE 11 and Microsoft Edge comes with its own password reveal function. We
+    // want to hide it, so that there aren't two controls presented to the user
+    // that do the same thing but aren't in sync with one another. This doesn't
+    // affect the function that allows Edge users to toggle password visibility
+    // by pressing Alt+F8, which cannot be programmatically disabled.
+    &::-ms-reveal {
+      display: none;
+    }
+  }
+
+  .govuk-password-input__toggle {
+    // Add top margin so the button doesn't obscure the input's focus style
+    margin-top: base.govuk-spacing(1);
+
+    // Remove default margin-bottom from button
+    margin-bottom: 0;
+
+    // Hide the button by default, JS removes this attribute
+    &[hidden] {
+      display: none;
+    }
+
+    @media #{base.govuk-from-breakpoint(mobile)} {
+      flex-basis: 5em;
+      flex-shrink: 0;
+      // Buttons are normally 100% wide on mobile, but we don't want that here
+      width: auto;
+
+      // Move the spacing from top to the left
+      margin-top: 0;
+      margin-left: base.govuk-spacing(1);
+    }
+  }
+}
+

data/vendor/assets/stylesheets/components/password-input/_password-input.import.scss

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

data/vendor/assets/stylesheets/components/phase-banner/_index.import.scss

@@ -0,0 +1,9 @@
+@use "mixin";
+
+@import "../../base";
+@import "../tag";
+
+@include govuk-exports("govuk/component/phase-banner") {
+  @include mixin.styles;
+}
+

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

@@ -1,36 +1,7 @@
-@import "../tag/index";
+@use "../../custom-properties";
 
-@include govuk-exports("govuk/component/phase-banner") {
-  .govuk-phase-banner {
-    padding-top: govuk-spacing(2);
-    padding-bottom: govuk-spacing(2);
+@use "mixin";
+@use "../tag";
 
-    border-bottom: 1px solid $govuk-border-colour;
-  }
+@include mixin.styles;
 
-  .govuk-phase-banner__content {
-    @include govuk-font($size: 16);
-    @include govuk-text-colour;
-
-    display: table;
-    margin: 0;
-  }
-
-  .govuk-phase-banner__content__tag {
-    @include govuk-font-size($size: 16);
-    margin-right: govuk-spacing(if($govuk-new-typography-scale, 3, 2));
-
-    @if $govuk-new-typography-scale {
-      @include govuk-media-query($from: tablet) {
-        margin-right: govuk-spacing(2);
-      }
-    }
-  }
-
-  .govuk-phase-banner__text {
-    display: table-cell;
-    vertical-align: middle;
-  }
-}
-
-/*# sourceMappingURL=_index.scss.map */

data/vendor/assets/stylesheets/components/phase-banner/_mixin.scss

@@ -0,0 +1,42 @@
+@use "../../base";
+
+/// @access private
+@mixin styles {
+  .govuk-phase-banner {
+    padding-top: base.govuk-spacing(2);
+    padding-bottom: base.govuk-spacing(2);
+
+    border-bottom: 1px solid;
+    border-bottom-color: base.govuk-functional-colour(border);
+  }
+
+  // If the phase banner is already contained within a .govuk-width-container,
+  // don't double up the left and right margins on narrow viewports.
+  .govuk-width-container .govuk-phase-banner.govuk-width-container {
+    margin-right: 0;
+    margin-left: 0;
+  }
+
+  .govuk-phase-banner__content {
+    @include base.govuk-font($size: 16);
+
+    display: table;
+    margin: 0;
+    color: base.govuk-functional-colour(text);
+  }
+
+  .govuk-phase-banner__content__tag {
+    @include base.govuk-font-size($size: 16);
+    margin-right: base.govuk-spacing(3);
+
+    @media #{base.govuk-from-breakpoint(tablet)} {
+      margin-right: base.govuk-spacing(2);
+    }
+  }
+
+  .govuk-phase-banner__text {
+    display: table-cell;
+    vertical-align: middle;
+  }
+}
+

data/vendor/assets/stylesheets/components/phase-banner/_phase-banner.import.scss

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

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

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