govuk_tech_docs 6.3.0 → 6.4.0.beta

data/node_modules/govuk-frontend/dist/govuk/components/generic-header/_mixin.scss

@@ -0,0 +1,140 @@
+////
+/// @group components/generic-header
+////
+
+@use "../../base";
+
+/// Width of transparent bottom border of header.
+/// Set to provide a visual border in forced colour modes
+///
+/// @type Number
+/// @access private
+$header-forced-colour-border-width: 1px;
+
+/// Shared block header styles, with automatic background setting
+///
+/// @param {String} $background-colour - background colour of the header
+/// @param {String} $text-colour - text colour of the header
+/// @access private
+@mixin block-styles($background-colour: base.govuk-colour("black"), $text-colour: base.govuk-colour("white")) {
+  @include base.govuk-font($size: 16, $line-height: 1);
+
+  // Add a transparent bottom border for forced-colour modes
+  border-bottom: $header-forced-colour-border-width solid transparent;
+
+  --govuk-text-colour: #{$text-colour};
+  color: base.govuk-functional-colour(text);
+  background: $background-colour;
+
+  @media print {
+    border-bottom-width: 0;
+
+    --govuk-text-colour: inherit;
+    background: transparent;
+  }
+}
+
+/// Shared header full width container styles
+///
+/// @access private
+@mixin full-width-container-styles() {
+  padding: 0 base.$govuk-gutter-half;
+}
+
+/// Shared header logo container element styles, with automating padding setting
+///
+/// @param {String} $padding-top - top padding of logo container
+/// @param {String} $padding-bottom - bottom padding of logo container
+/// @access private
+@mixin logo-styles(
+  $padding-top: (
+    base.govuk-spacing(3)
+  ),
+  $padding-bottom: (
+    base.govuk-spacing(3)
+  )
+) {
+  padding-top: $padding-top;
+  padding-bottom: $padding-bottom;
+}
+
+/// Shared header logo link element styles
+///
+/// @access private
+@mixin link-styles {
+  // Avoid using the `base.govuk-link-common` mixin because the links in the
+  // header get a special treatment, because:
+  //
+  // - underlines are only visible on hover
+  // - all links get a 3px underline regardless of text size, as there are
+  //   multiple grouped elements close to one another and having slightly
+  //   different underline widths looks unbalanced
+  //
+  // Font size needs to be set on the link so that the box sizing is correct
+  // in Firefox
+  display: inline;
+  margin-right: base.govuk-spacing(2);
+  font-size: 30px; // We don't have a mixin that produces 30px font size
+  text-decoration: none;
+
+  @include base.govuk-link-style-text;
+
+  &:link,
+  &:visited {
+    text-decoration: none;
+  }
+
+  &:hover,
+  &:active {
+    // Negate the added border
+    $link-underline-thickness: 3px;
+    margin-bottom: $link-underline-thickness * -1;
+    border-bottom: $link-underline-thickness solid;
+  }
+
+  &:focus {
+    // Remove any borders that show when focused and hovered.
+    margin-bottom: 0;
+    border-bottom: 0;
+
+    @include base.govuk-focused-text;
+  }
+
+  @media print {
+    &:link,
+    &:visited {
+      color: base.govuk-functional-colour(text);
+    }
+
+    // Do not append link href to GOV.UK link when printing (e.g. '(/)')
+    &::after {
+      content: "";
+    }
+  }
+}
+
+/// @access private
+@mixin styles {
+  .govuk-generic-header {
+    @include block-styles;
+  }
+
+  .govuk-generic-header__container--full-width {
+    @include full-width-container-styles;
+  }
+
+  .govuk-generic-header__logo {
+    @include logo-styles;
+  }
+
+  .govuk-generic-header__homepage-link {
+    @include link-styles;
+
+    // Automatically centre align direct child elements to help users with
+    // positioning their logo assets eg: as `svg`s or `img`s
+    > * {
+      vertical-align: top;
+    }
+  }
+}
+

data/node_modules/govuk-frontend/dist/govuk/components/header/_mixin.scss

@@ -1,45 +1,29 @@
 @use "../../base";
+@use "../generic-header/mixin" as genericHeader;
 
 /// @access private
 @mixin styles {
   $logo-bottom-margin: 2px;
 
   .govuk-header {
-    @include base.govuk-font($size: 16, $line-height: 1);
-
-    // Add a transparent bottom border for forced-colour modes
-    border-bottom: 1px solid transparent;
-    color: base.govuk-colour("white");
-    background: base.govuk-functional-colour(brand);
+    @include genericHeader.block-styles(
+      $background-colour: base.govuk-functional-colour("brand"),
+      $text-colour: base.govuk-functional-colour("inverse-text")
+    );
   }
 
   .govuk-header__container--full-width {
-    padding: 0 base.govuk-spacing(3);
+    @include genericHeader.full-width-container-styles;
   }
 
   .govuk-header__logo {
-    box-sizing: border-box;
-
     // Magic numbers, set padding to vertically centre align the logo
-    padding-top: 16px;
-    padding-bottom: 14px - $logo-bottom-margin;
+    @include genericHeader.logo-styles($padding-top: 16px, $padding-bottom: 14px - $logo-bottom-margin);
   }
 
   .govuk-header__homepage-link {
-    // Avoid using the `base.govuk-link-common` mixin because the links in the
-    // header get a special treatment, because:
-    //
-    // - underlines are only visible on hover
-    // - all links get a 3px underline regardless of text size, as there are
-    //   multiple grouped elements close to one another and having slightly
-    //   different underline widths looks unbalanced
-    //
-    // Font size needs to be set on the link so that the box sizing is correct
-    // in Firefox
-    display: inline;
-    margin-right: base.govuk-spacing(2);
-    font-size: 30px; // We don't have a mixin that produces 30px font size
-    text-decoration: none;
+    @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);
@@ -47,28 +31,6 @@
     > * {
       word-spacing: 0;
     }
-    @include base.govuk-link-style-inverse;
-
-    &:link,
-    &:visited {
-      text-decoration: none;
-    }
-
-    &:hover,
-    &:active {
-      // Negate the added border
-      $link-underline-thickness: 3px;
-      margin-bottom: $link-underline-thickness * -1;
-      border-bottom: $link-underline-thickness solid;
-    }
-
-    &:focus {
-      // Remove any borders that show when focused and hovered.
-      margin-bottom: 0;
-      border-bottom: 0;
-
-      @include base.govuk-focused-text;
-    }
   }
 
   .govuk-header__logotype {
@@ -146,24 +108,6 @@
   }
 
   @media print {
-    .govuk-header {
-      border-bottom-width: 0;
-      color: base.govuk-colour("black");
-      background: transparent;
-    }
-
-    .govuk-header__homepage-link {
-      &:link,
-      &:visited {
-        color: base.govuk-colour("black");
-      }
-
-      // Do not append link href to GOV.UK link when printing (e.g. '(/)')
-      &::after {
-        display: none;
-      }
-    }
-
     .govuk-header__product-name {
       // Fix product name alignment in Firefox when printing
       @-moz-document url-prefix() {

data/node_modules/govuk-frontend/dist/govuk/components/input/_mixin.scss

@@ -125,6 +125,7 @@
     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;

data/node_modules/govuk-frontend/dist/govuk/components/notification-banner/_mixin.scss

@@ -5,13 +5,14 @@
 /// @access private
 @mixin styles {
   .govuk-notification-banner {
+    --_govuk-notification-banner-colour: #{base.govuk-functional-colour(brand)};
+    --_govuk-notification-banner-title-text-colour: #{base.govuk-functional-colour(inverse-text)};
+
     @include base.govuk-font($size: 19);
     @include base.govuk-responsive-margin(8, "bottom");
 
     border: base.$govuk-border-width solid;
-    border-color: base.govuk-functional-colour(brand);
-
-    background-color: base.govuk-functional-colour(brand);
+    border-color: var(--_govuk-notification-banner-colour);
 
     &:focus {
       outline: base.$govuk-focus-width solid;
@@ -26,6 +27,9 @@
     // text in high contrast mode
     border-bottom: 1px solid transparent;
 
+    color: var(--_govuk-notification-banner-title-text-colour);
+    background-color: var(--_govuk-notification-banner-colour);
+
     @media #{base.govuk-from-breakpoint(tablet)} {
       padding: 2px base.govuk-spacing(4) base.govuk-spacing(1);
     }
@@ -38,7 +42,6 @@
     @include base.govuk-typography-weight-bold;
     margin: 0;
     padding: 0;
-    color: base.govuk-colour("white");
   }
 
   .govuk-notification-banner__content {
@@ -87,9 +90,7 @@
   }
 
   .govuk-notification-banner--success {
-    border-color: base.govuk-functional-colour(success);
-
-    background-color: base.govuk-functional-colour(success);
+    --_govuk-notification-banner-colour: #{base.govuk-functional-colour(success)};
 
     .govuk-notification-banner__link {
       @include base.govuk-link-style-success;

data/node_modules/govuk-frontend/dist/govuk/components/panel/_mixin.scss

@@ -11,6 +11,7 @@
     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;
 
@@ -35,17 +36,6 @@
     }
   }
 
-  .govuk-panel--confirmation {
-    color: base.govuk-colour("white");
-    background: base.govuk-colour("green");
-
-    @media print {
-      border-color: currentcolor;
-      color: base.govuk-functional-colour(text);
-      background: none;
-    }
-  }
-
   .govuk-panel__title {
     @include base.govuk-font-size($size: 48);
     @include base.govuk-typography-weight-bold;
@@ -53,8 +43,52 @@
     margin-bottom: base.govuk-spacing(6);
   }
 
-  .govuk-panel__title:last-child {
+  // 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/node_modules/govuk-frontend/dist/govuk/components/radios/_mixin.scss

@@ -46,7 +46,7 @@
       100% - #{($govuk-radios-label-padding-left-right + $govuk-touch-target-size + base.govuk-spacing(3))}
     );
     margin-bottom: 0;
-    padding: (base.govuk-spacing(1) + base.$govuk-border-width-form-element) base.govuk-spacing(3);
+    padding: (base.govuk-spacing(1) + base.$govuk-border-width-form-element) $govuk-radios-label-padding-left-right;
     cursor: pointer;
     // remove 300ms pause on mobile
     touch-action: manipulation;
@@ -227,6 +227,12 @@
     }
 
     .govuk-radios__label {
+      // Recalculate max-width to account for the smaller radio size
+      // 1px comes from padding-left (defined below)
+      max-width: calc(
+        100% - #{($govuk-touch-target-size - $input-offset) + $govuk-radios-label-padding-left-right + 1px}
+      );
+
       // Create a tiny space between the small radio hover state so that it
       // doesn't clash with the label
       padding-left: 1px;

data/node_modules/govuk-frontend/dist/govuk/components/select/_mixin.scss

@@ -34,13 +34,6 @@
     }
   }
 
-  .govuk-select option:active,
-  .govuk-select option:checked,
-  .govuk-select:focus::-ms-value {
-    color: base.govuk-colour("white");
-    background-color: base.govuk-colour("blue");
-  }
-
   .govuk-select--error {
     border-color: base.govuk-functional-colour(error);
 

data/node_modules/govuk-frontend/dist/govuk/components/service-navigation/_mixin.scss

@@ -14,7 +14,11 @@
     border-bottom-width: 1px;
     border-bottom-style: solid;
     border-bottom-color: $govuk-service-navigation-border-colour;
-    color: $govuk-service-navigation-text-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;
   }
 
@@ -200,10 +204,7 @@
     // Remove bottom border to add width-container ones
     border-bottom: none;
 
-    // Set colour here so non-link text (service name, slot content) can
-    // use it too.
-    color: base.govuk-colour("white");
-
+    --govuk-text-colour: #{base.govuk-functional-colour(inverse-text)};
     background-color: base.govuk-functional-colour(brand);
 
     .govuk-width-container {
@@ -220,12 +221,12 @@
     // Override the 'active' border colour
     .govuk-service-navigation__item,
     .govuk-service-navigation__service-name {
-      border-color: base.govuk-colour("white");
+      border-color: currentcolor;
     }
 
     // Override link styles
     .govuk-service-navigation__link {
-      @include base.govuk-link-style-inverse;
+      @include base.govuk-link-style-text;
     }
 
     // Override mobile menu toggle colour when not focused

data/node_modules/govuk-frontend/dist/govuk/custom-properties/_frontend-version.mixin.scss

@@ -7,7 +7,7 @@
   // `$govuk-output-custom-properties` is true or not to help with checking if
   // multiple stylesheets are outputting the same version
   :root {
-    --govuk-frontend-version: "6.2.0";
+    --govuk-frontend-version: "6.4.0";
   }
 }