govuk_tech_docs 6.3.0.beta → 6.4.0.beta

data/node_modules/govuk-frontend/dist/govuk/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/node_modules/govuk-frontend/dist/govuk/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/node_modules/govuk-frontend/dist/govuk/components/inset-text/_index.scss

@@ -1,31 +1,5 @@
-@import "../../base";
+@use "../../custom-properties";
+@use "mixin";
 
-@include govuk-exports("govuk/component/inset-text") {
-  .govuk-inset-text {
-    @include govuk-font($size: 19);
+@include mixin.styles;
 
-    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");
-
-    clear: both;
-
-    border-left: $govuk-border-width-wide solid;
-    border-left-color: govuk-functional-colour(border);
-    color: govuk-functional-colour(text);
-
-    > :first-child {
-      margin-top: 0;
-    }
-
-    > :only-child,
-    > :last-child {
-      margin-bottom: 0;
-    }
-  }
-}
-
-/*# sourceMappingURL=_index.scss.map */

data/node_modules/govuk-frontend/dist/govuk/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/node_modules/govuk-frontend/dist/govuk/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/node_modules/govuk-frontend/dist/govuk/components/label/_index.import.scss

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

data/node_modules/govuk-frontend/dist/govuk/components/label/_index.scss

@@ -1,48 +1,5 @@
-@import "../../base";
+@use "../../custom-properties";
+@use "mixin";
 
-@include govuk-exports("govuk/component/label") {
-  .govuk-label {
-    @include govuk-font($size: 19);
+@include mixin.styles;
 
-    display: block;
-
-    margin-bottom: govuk-spacing(1);
-    color: govuk-functional-colour(text);
-  }
-
-  // Modifiers that make labels look more like their equivalent headings
-  .govuk-label--xl,
-  .govuk-label--l,
-  .govuk-label--m {
-    @include govuk-typography-weight-bold;
-    margin-bottom: govuk-spacing(3);
-  }
-
-  .govuk-label--xl {
-    @include govuk-font-size($size: 48);
-  }
-
-  .govuk-label--l {
-    @include govuk-font-size($size: 36);
-  }
-
-  .govuk-label--m {
-    @include govuk-font-size($size: 24);
-  }
-
-  .govuk-label--s {
-    @include govuk-typography-weight-bold;
-  }
-
-  // When the label is nested inside a heading, override the heading so that it
-  // does not have a margin. Effectively we want to be able to treat the heading
-  // as if it is not there.
-  //
-  // This breaks BEM conventions because it exists as a parent of the 'block',
-  // so we can't really consider an element.
-  .govuk-label-wrapper {
-    margin: 0;
-  }
-}
-
-/*# sourceMappingURL=_index.scss.map */

data/node_modules/govuk-frontend/dist/govuk/components/label/_label.import.scss

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

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

@@ -0,0 +1,48 @@
+@use "../../base";
+
+/// @access private
+@mixin styles {
+  .govuk-label {
+    @include base.govuk-font($size: 19);
+
+    display: block;
+
+    margin-bottom: base.govuk-spacing(1);
+    color: base.govuk-functional-colour(text);
+  }
+
+  // Modifiers that make labels look more like their equivalent headings
+  .govuk-label--xl,
+  .govuk-label--l,
+  .govuk-label--m {
+    @include base.govuk-typography-weight-bold;
+    margin-bottom: base.govuk-spacing(3);
+  }
+
+  .govuk-label--xl {
+    @include base.govuk-font-size($size: 48);
+  }
+
+  .govuk-label--l {
+    @include base.govuk-font-size($size: 36);
+  }
+
+  .govuk-label--m {
+    @include base.govuk-font-size($size: 24);
+  }
+
+  .govuk-label--s {
+    @include base.govuk-typography-weight-bold;
+  }
+
+  // When the label is nested inside a heading, override the heading so that it
+  // does not have a margin. Effectively we want to be able to treat the heading
+  // as if it is not there.
+  //
+  // This breaks BEM conventions because it exists as a parent of the 'block',
+  // so we can't really consider an element.
+  .govuk-label-wrapper {
+    margin: 0;
+  }
+}
+

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

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

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

@@ -1,99 +1,5 @@
-@use "sass:math";
+@use "../../custom-properties";
+@use "mixin";
 
-@import "../../base";
+@include mixin.styles;
 
-@include govuk-exports("govuk/component/notification-banner") {
-  .govuk-notification-banner {
-    @include govuk-font($size: 19);
-    @include govuk-responsive-margin(8, "bottom");
-
-    border: $govuk-border-width solid;
-    border-color: govuk-functional-colour(brand);
-
-    background-color: govuk-functional-colour(brand);
-
-    &:focus {
-      outline: $govuk-focus-width solid;
-      outline-color: govuk-functional-colour(focus);
-    }
-  }
-
-  .govuk-notification-banner__header {
-    padding: 2px govuk-spacing(3) govuk-spacing(1);
-
-    // Ensures the notification header appears separate to the notification body
-    // text in high contrast mode
-    border-bottom: 1px solid transparent;
-
-    @media #{govuk-from-breakpoint(tablet)} {
-      padding: 2px govuk-spacing(4) govuk-spacing(1);
-    }
-  }
-
-  .govuk-notification-banner__title {
-    // Set the size again because this element is a heading and the user agent
-    // font size overrides the inherited font size
-    @include govuk-font-size($size: 19);
-    @include govuk-typography-weight-bold;
-    margin: 0;
-    padding: 0;
-    color: govuk-colour("white");
-  }
-
-  .govuk-notification-banner__content {
-    $padding-tablet: govuk-spacing(4);
-    padding: govuk-spacing(3);
-
-    color: govuk-functional-colour(text);
-    background-color: govuk-functional-colour(body-background);
-
-    @media #{govuk-from-breakpoint(tablet)} {
-      padding: $padding-tablet;
-    }
-
-    // Wrap content at the same place that a 2/3 grid column ends, to maintain
-    // shorter line-lengths when the notification banner is full width
-    > * {
-      // When elements have their own padding (like lists), include the padding
-      // in the max-width calculation
-      box-sizing: border-box;
-
-      // Calculate the internal width of a two-thirds column...
-      $two-col-width: math.div($govuk-page-width * 2, 3) - math.div($govuk-gutter * 1, 3);
-
-      // ...and then factor in the left border and padding
-      $banner-exterior: ($padding-tablet + $govuk-border-width);
-      max-width: $two-col-width - $banner-exterior;
-    }
-
-    > :last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  .govuk-notification-banner__heading {
-    @include govuk-font-size($size: 24);
-    @include govuk-typography-weight-bold;
-
-    margin: 0 0 govuk-spacing(3);
-
-    padding: 0;
-  }
-
-  .govuk-notification-banner__link {
-    @include govuk-link-common;
-    @include govuk-link-style-no-visited-state;
-  }
-
-  .govuk-notification-banner--success {
-    border-color: govuk-functional-colour(success);
-
-    background-color: govuk-functional-colour(success);
-
-    .govuk-notification-banner__link {
-      @include govuk-link-style-success;
-    }
-  }
-}
-
-/*# sourceMappingURL=_index.scss.map */

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

@@ -0,0 +1,100 @@
+@use "sass:math";
+
+@use "../../base";
+
+/// @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: var(--_govuk-notification-banner-colour);
+
+    &:focus {
+      outline: base.$govuk-focus-width solid;
+      outline-color: base.govuk-functional-colour(focus);
+    }
+  }
+
+  .govuk-notification-banner__header {
+    padding: 2px base.govuk-spacing(3) base.govuk-spacing(1);
+
+    // Ensures the notification header appears separate to the notification body
+    // 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);
+    }
+  }
+
+  .govuk-notification-banner__title {
+    // Set the size again because this element is a heading and the user agent
+    // font size overrides the inherited font size
+    @include base.govuk-font-size($size: 19);
+    @include base.govuk-typography-weight-bold;
+    margin: 0;
+    padding: 0;
+  }
+
+  .govuk-notification-banner__content {
+    $padding-tablet: base.govuk-spacing(4);
+    padding: base.govuk-spacing(3);
+
+    color: base.govuk-functional-colour(text);
+    background-color: base.govuk-functional-colour(body-background);
+
+    @media #{base.govuk-from-breakpoint(tablet)} {
+      padding: $padding-tablet;
+    }
+
+    // Wrap content at the same place that a 2/3 grid column ends, to maintain
+    // shorter line-lengths when the notification banner is full width
+    > * {
+      // When elements have their own padding (like lists), include the padding
+      // in the max-width calculation
+      box-sizing: border-box;
+
+      // Calculate the internal width of a two-thirds column...
+      $two-col-width: math.div(base.$govuk-page-width * 2, 3) - math.div(base.$govuk-gutter * 1, 3);
+
+      // ...and then factor in the left border and padding
+      $banner-exterior: ($padding-tablet + base.$govuk-border-width);
+      max-width: $two-col-width - $banner-exterior;
+    }
+
+    > :last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .govuk-notification-banner__heading {
+    @include base.govuk-font-size($size: 24);
+    @include base.govuk-typography-weight-bold;
+
+    margin: 0 0 base.govuk-spacing(3);
+
+    padding: 0;
+  }
+
+  .govuk-notification-banner__link {
+    @include base.govuk-link-common;
+    @include base.govuk-link-style-no-visited-state;
+  }
+
+  .govuk-notification-banner--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/notification-banner/_notification-banner.import.scss

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

data/node_modules/govuk-frontend/dist/govuk/components/pagination/_index.import.scss

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