govuk_tech_docs 2.2.1 → 2.4.1

data/node_modules/govuk-frontend/govuk/components/fieldset/_index.scss

@@ -0,0 +1,64 @@
+@include govuk-exports("govuk/component/fieldset") {
+  .govuk-fieldset {
+    min-width: 0;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    @include govuk-clearfix;
+  }
+
+  // Fix for Firefox < 53
+  // https://bugzilla.mozilla.org/show_bug.cgi?id=504622
+  @supports not (caret-color: auto) {
+    .govuk-fieldset,
+    x:-moz-any-link { // stylelint-disable-line selector-type-no-unknown
+      display: table-cell;
+    }
+  }
+
+  .govuk-fieldset__legend {
+    @include govuk-font($size: 19);
+    @include govuk-text-colour;
+
+    // Fix legend text wrapping in Edge and IE
+    // 1. IE9-11 & Edge 12-13
+    // 2. IE8-11
+    box-sizing: border-box; // 1
+    display: table;         // 2
+    max-width: 100%;        // 1
+    margin-bottom: govuk-spacing(2);
+    padding: 0;
+
+    white-space: normal;    // 1
+  }
+
+  // Modifiers that make legends look more like their equivalent headings
+
+  .govuk-fieldset__legend--xl {
+    @include govuk-font($size: 48, $weight: bold);
+    margin-bottom: govuk-spacing(3);
+  }
+
+  .govuk-fieldset__legend--l {
+    @include govuk-font($size: 36, $weight: bold);
+    margin-bottom: govuk-spacing(3);
+  }
+
+  .govuk-fieldset__legend--m {
+    @include govuk-font($size: 24, $weight: bold);
+    margin-bottom: govuk-spacing(3);
+  }
+
+  .govuk-fieldset__legend--s {
+    @include govuk-font($size: 19, $weight: bold);
+  }
+
+  // When the legend contains an H1, we want the H1 to inherit all styles from
+  // the legend. Effectively we want to be able to treat the heading as if it is
+  // not there.
+  .govuk-fieldset__heading {
+    margin: 0;
+    font-size: inherit;
+    font-weight: inherit;
+  }
+}

data/node_modules/govuk-frontend/govuk/components/file-upload/_file-upload.scss

@@ -1,81 +1,2 @@
-@import "../../settings/all";
-@import "../../tools/all";
-@import "../../helpers/all";
-
-@import "../error-message/error-message";
-@import "../hint/hint";
-@import "../label/label";
-
-@include govuk-exports("govuk/component/file-upload") {
-  $component-padding: govuk-spacing(1);
-
-  .govuk-file-upload {
-    @include govuk-font($size: 19);
-    @include govuk-text-colour;
-    padding-top: $component-padding;
-    padding-bottom: $component-padding;
-
-    &:focus {
-      // "Yank" the padding with negative margin to avoid a jump
-      // when element is focused
-      margin-right: -$component-padding;
-      margin-left: -$component-padding;
-      padding-right: $component-padding;
-      padding-left: $component-padding;
-
-      outline: $govuk-focus-width solid $govuk-focus-colour;
-      // Use `box-shadow` to add border instead of changing `border-width`
-      // (which changes element size) and since `outline` is already used for the
-      // yellow focus state.
-      box-shadow: inset 0 0 0 4px $govuk-input-border-colour;
-
-      @include govuk-if-ie8 {
-        // IE8 doesn't support `box-shadow` so add an actual border
-        border: 4px solid $govuk-input-border-colour;
-      }
-    }
-
-    // Set "focus-within" to fix https://bugzilla.mozilla.org/show_bug.cgi?id=1430196
-    // so that component receives focus in Firefox.
-    // This can't be set together with `:focus` as all versions of IE fail
-    // to recognise `focus-within` and don't set any styles from the block
-    // when it's a selector.
-    &:focus-within {
-      margin-right: -$component-padding;
-      margin-left: -$component-padding;
-      padding-right: $component-padding;
-      padding-left: $component-padding;
-
-      outline: $govuk-focus-width solid $govuk-focus-colour;
-
-      box-shadow: inset 0 0 0 4px $govuk-input-border-colour;
-    }
-  }
-
-  .govuk-file-upload--error {
-    // As `upload--error` has border, it needs to have the same padding as
-    // the standard focused element.
-    margin-right: -$component-padding;
-    margin-left: -$component-padding;
-    padding-right: $component-padding;
-    padding-left: $component-padding;
-    border: $govuk-border-width-form-element-error solid $govuk-error-colour;
-
-    &:focus {
-      border-color: $govuk-input-border-colour;
-      // Remove `box-shadow` inherited from `:focus` as `file-upload--error`
-      // already has the thicker border.
-      box-shadow: none;
-    }
-
-    // Repeat `:focus` styles to prevent error styles from being applied when
-    // input button is pressed as this moves the focus to "within".
-    // This can't be set together with `:focus` as all versions of IE fail
-    // to recognise `focus-within` and don't set any styles from the block
-    // when it's a selector.
-    &:focus-within {
-      border-color: $govuk-input-border-colour;
-      box-shadow: none;
-    }
-  }
-}
+@import "../../base";
+@import "./index";

data/node_modules/govuk-frontend/govuk/components/file-upload/_index.scss

@@ -0,0 +1,49 @@
+@import "../error-message/index";
+@import "../hint/index";
+@import "../label/index";
+
+@include govuk-exports("govuk/component/file-upload") {
+  $component-padding: govuk-spacing(1);
+
+  .govuk-file-upload {
+    @include govuk-font($size: 19);
+    @include govuk-text-colour;
+    margin-left: -$component-padding;
+    padding: $component-padding;
+
+    // The default file upload button in Safari does not
+    // support setting a custom font-size. Set `-webkit-appearance`
+    // to `button` to drop out of the native appearance so the
+    // font-size is set to 19px
+    // https://bugs.webkit.org/show_bug.cgi?id=224746
+    &::-webkit-file-upload-button {
+      -webkit-appearance: button;
+      color: inherit;
+      font: inherit;
+    }
+
+    &:focus {
+      outline: $govuk-focus-width solid $govuk-focus-colour;
+      // Use `box-shadow` to add border instead of changing `border-width`
+      // (which changes element size) and since `outline` is already used for the
+      // yellow focus state.
+      box-shadow: inset 0 0 0 4px $govuk-input-border-colour;
+
+      @include govuk-if-ie8 {
+        // IE8 doesn't support `box-shadow` so add an actual border
+        border: 4px solid $govuk-input-border-colour;
+      }
+    }
+
+    // Set "focus-within" to fix https://bugzilla.mozilla.org/show_bug.cgi?id=1430196
+    // so that component receives focus in Firefox.
+    // This can't be set together with `:focus` as all versions of IE fail
+    // to recognise `focus-within` and don't set any styles from the block
+    // when it's a selector.
+    &:focus-within {
+      outline: $govuk-focus-width solid $govuk-focus-colour;
+
+      box-shadow: inset 0 0 0 4px $govuk-input-border-colour;
+    }
+  }
+}

data/node_modules/govuk-frontend/govuk/components/footer/_footer.scss

@@ -1,244 +1,2 @@
-@import "../../settings/all";
-@import "../../tools/all";
-@import "../../helpers/all";
-
-@import "../../helpers/typography";
-
-@include govuk-exports("govuk/component/footer") {
-
-  $govuk-footer-background: $govuk-canvas-background-colour;
-  $govuk-footer-border: $govuk-border-colour;
-  // This variable can be removed entirely once the legacy palette goes away,
-  // as it'll just be the same as $govuk-footer-border.
-  $govuk-footer-border-top: $govuk-border-colour;
-  $govuk-footer-text: $govuk-text-colour;
-  $govuk-footer-link: $govuk-footer-text;
-  $govuk-footer-link-hover: false;
-
-  @if ($govuk-use-legacy-palette) {
-    // sass-lint:disable no-color-literals
-    $govuk-footer-border-top: #a1acb2;
-    $govuk-footer-border: govuk-colour("grey-2");
-    $govuk-footer-text: #454a4c;
-    $govuk-footer-link: $govuk-footer-text;
-
-    // Only used with the legacy palette
-    $govuk-footer-link-hover: #171819;
-  }
-
-  // Based on the govuk-crest-2x.png image dimensions.
-  $govuk-footer-crest-image-width-2x: 250px;
-  $govuk-footer-crest-image-height-2x: 204px;
-  // Half the 2x image so that it fits the regular 1x size.
-  $govuk-footer-crest-image-width: ($govuk-footer-crest-image-width-2x / 2);
-  $govuk-footer-crest-image-height: ($govuk-footer-crest-image-height-2x / 2);
-
-  .govuk-footer {
-    @include govuk-font($size: 16);
-    @include govuk-responsive-padding(7, "top");
-    @include govuk-responsive-padding(5, "bottom");
-
-    border-top: 1px solid $govuk-footer-border-top;
-    color: $govuk-footer-text;
-    background: $govuk-footer-background;
-  }
-
-  .govuk-footer__link {
-    @if ($govuk-use-legacy-palette) {
-      &:link,
-      &:visited {
-        color: $govuk-footer-link;
-      }
-
-      &:hover,
-      &:active {
-        color: $govuk-footer-link-hover;
-      }
-    } @else {
-      &:link,
-      &:visited,
-      &:hover,
-      &:active {
-        color: $govuk-footer-link;
-      }
-    }
-
-    &:focus {
-      @include govuk-focused-text;
-    }
-
-    // alphagov/govuk_template includes a specific a:link:focus selector
-    // designed to make unvisited links a slightly darker blue when focussed, so
-    // we need to override the text colour for that combination of selectors.
-    @include govuk-compatibility(govuk_template) {
-      &:link:focus {
-        @include govuk-text-colour;
-      }
-    }
-  }
-
-  .govuk-footer__section-break {
-    margin: 0; // Reset `<hr>` default margins
-    @include govuk-responsive-margin(8, "bottom");
-    border: 0; // Reset `<hr>` default borders
-    border-bottom: 1px solid $govuk-footer-border;
-  }
-
-  .govuk-footer__meta {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex; // Support: Flexbox
-    margin-right: -$govuk-gutter-half;
-    margin-left: -$govuk-gutter-half;
-    -ms-flex-wrap: wrap;
-        flex-wrap: wrap; // Support: Flexbox
-    -webkit-box-align: end;
-        -ms-flex-align: end;
-            align-items: flex-end; // Support: Flexbox
-    -webkit-box-pack: center;
-        -ms-flex-pack: center;
-            justify-content: center; // Support: Flexbox
-  }
-
-  .govuk-footer__meta-item {
-    margin-right: $govuk-gutter-half;
-    margin-bottom: govuk-spacing(5);
-    margin-left: $govuk-gutter-half;
-  }
-
-  .govuk-footer__meta-item--grow {
-    -webkit-box-flex: 1;
-        -ms-flex: 1;
-            flex: 1; // Support: Flexbox
-    @include govuk-media-query ($until: tablet) {
-      -ms-flex-preferred-size: 320px;
-          flex-basis: 320px; // Support: Flexbox
-    }
-  }
-
-  .govuk-footer__licence-logo {
-    display: inline-block;
-    margin-right: govuk-spacing(2);
-    @include govuk-media-query ($until: desktop) {
-      margin-bottom: govuk-spacing(3);
-    }
-    vertical-align: top;
-  }
-
-  .govuk-footer__licence-description {
-    display: inline-block;
-  }
-
-  .govuk-footer__copyright-logo {
-    display: inline-block;
-    min-width: $govuk-footer-crest-image-width;
-    padding-top: ($govuk-footer-crest-image-height + govuk-spacing(2));
-    background-image: govuk-image-url("govuk-crest.png");
-    @include govuk-device-pixel-ratio {
-      background-image: govuk-image-url("govuk-crest-2x.png");
-    }
-    background-repeat: no-repeat;
-    background-position: 50% 0%;
-    background-size: $govuk-footer-crest-image-width $govuk-footer-crest-image-height;
-    text-align: center;
-    text-decoration: none;
-    white-space: nowrap;
-  }
-
-  .govuk-footer__inline-list {
-    margin-top: 0;
-    margin-bottom: govuk-spacing(3);
-    padding: 0;
-  }
-
-  .govuk-footer__meta-custom {
-    margin-bottom: govuk-spacing(4);
-  }
-
-  .govuk-footer__inline-list-item {
-    display: inline-block;
-    margin-right: govuk-spacing(3);
-    margin-bottom: govuk-spacing(1);
-  }
-
-  .govuk-footer__heading {
-    @include govuk-responsive-margin(7, "bottom");
-    padding-bottom: govuk-spacing(4);
-    @include govuk-media-query ($until: tablet) {
-      padding-bottom: govuk-spacing(2);
-    }
-    border-bottom: 1px solid $govuk-footer-border;
-  }
-
-  .govuk-footer__navigation {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex; // Support: Flexbox
-    margin-right: -$govuk-gutter-half;
-    margin-left: -$govuk-gutter-half;
-    -ms-flex-wrap: wrap;
-        flex-wrap: wrap; // Support: Flexbox
-  }
-
-  .govuk-footer__section {
-    display: inline-block;
-    margin-right: $govuk-gutter-half;
-    margin-bottom: $govuk-gutter;
-    margin-left: $govuk-gutter-half;
-    vertical-align: top;
-    // Ensure columns take up equal width (typically one-half:one-half)
-    -webkit-box-flex: 1;
-        -ms-flex-positive: 1;
-            flex-grow: 1; // Support: Flexbox
-    -ms-flex-negative: 1;
-        flex-shrink: 1; // Support: Flexbox
-    @include govuk-media-query ($until: desktop) {
-      // Make sure columns do not drop below 200px in width
-      // Will typically result in wrapping, and end up in a single column on smaller screens.
-      -ms-flex-preferred-size: 200px;
-          flex-basis: 200px; // Support: Flexbox
-    }
-  }
-
-  // If there are only two sections, set the layout to be two-third:one-third on desktop
-  @include govuk-media-query ($from: desktop) {
-    // We match the first section with `:first-child`.
-    // To ensure the section is one of two, we can count backwards using `:nth-last-child(2)`.
-    .govuk-footer__section:first-child:nth-last-child(2) {
-      -webkit-box-flex: 2;
-          -ms-flex-positive: 2;
-              flex-grow: 2; // Support: Flexbox
-    }
-  }
-
-  .govuk-footer__list {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-    -webkit-column-gap: $govuk-gutter;
-       -moz-column-gap: $govuk-gutter;
-            column-gap: $govuk-gutter; // Support: Columns
-  }
-
-  @include govuk-media-query ($from: desktop) {
-    .govuk-footer__list--columns-2 {
-      -webkit-column-count: 2;
-         -moz-column-count: 2;
-              column-count: 2; // Support: Columns
-    }
-
-    .govuk-footer__list--columns-3 {
-      -webkit-column-count: 3;
-         -moz-column-count: 3;
-              column-count: 3; // Support: Columns
-    }
-  }
-
-  .govuk-footer__list-item {
-    @include govuk-responsive-margin(4, "bottom");
-  }
-
-  .govuk-footer__list-item:last-child {
-    margin-bottom: 0;
-  }
-}
+@import "../../base";
+@import "./index";

data/node_modules/govuk-frontend/govuk/components/footer/_index.scss

@@ -0,0 +1,241 @@
+@include govuk-exports("govuk/component/footer") {
+
+  $govuk-footer-background: $govuk-canvas-background-colour;
+  $govuk-footer-border: $govuk-border-colour;
+  // This variable can be removed entirely once the legacy palette goes away,
+  // as it'll just be the same as $govuk-footer-border.
+  $govuk-footer-border-top: $govuk-border-colour;
+  $govuk-footer-text: $govuk-text-colour;
+  $govuk-footer-link-hover-colour: null; // Only used with the legacy palette
+
+  @if ($govuk-use-legacy-palette) {
+    $govuk-footer-border-top: #a1acb2;
+    $govuk-footer-border: govuk-colour("grey-2");
+    $govuk-footer-text: #454a4c;
+    $govuk-footer-link-hover-colour: #171819;
+  }
+
+  // Based on the govuk-crest-2x.png image dimensions.
+  $govuk-footer-crest-image-width-2x: 250px;
+  $govuk-footer-crest-image-height-2x: 204px;
+  // Half the 2x image so that it fits the regular 1x size.
+  $govuk-footer-crest-image-width: ($govuk-footer-crest-image-width-2x / 2);
+  $govuk-footer-crest-image-height: ($govuk-footer-crest-image-height-2x / 2);
+
+  .govuk-footer {
+    @include govuk-font($size: 16);
+    @include govuk-responsive-padding(7, "top");
+    @include govuk-responsive-padding(5, "bottom");
+
+    border-top: 1px solid $govuk-footer-border-top;
+    color: $govuk-footer-text;
+    background: $govuk-footer-background;
+  }
+
+  .govuk-footer__link {
+    @include govuk-link-common;
+
+    @if ($govuk-use-legacy-palette) {
+      &:link,
+      &:visited {
+        color: $govuk-footer-text;
+      }
+
+      &:hover,
+      &:active {
+        color: $govuk-footer-link-hover-colour;
+      }
+    } @else {
+      @include govuk-link-style-text;
+    }
+
+    // alphagov/govuk_template includes a specific a:link:focus selector
+    // designed to make unvisited links a slightly darker blue when focussed, so
+    // we need to override the text colour for that combination of selectors.
+    @include govuk-compatibility(govuk_template) {
+      &:link:focus {
+        @include govuk-text-colour;
+      }
+    }
+  }
+
+  .govuk-footer__section-break {
+    margin: 0; // Reset `<hr>` default margins
+    @include govuk-responsive-margin(8, "bottom");
+    border: 0; // Reset `<hr>` default borders
+    border-bottom: 1px solid $govuk-footer-border;
+  }
+
+  .govuk-footer__meta {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex; // Support: Flexbox
+    margin-right: -$govuk-gutter-half;
+    margin-left: -$govuk-gutter-half;
+    -webkit-flex-wrap: wrap;
+        -ms-flex-wrap: wrap;
+            flex-wrap: wrap; // Support: Flexbox
+    -webkit-box-align: end;
+    -webkit-align-items: flex-end;
+        -ms-flex-align: end;
+            align-items: flex-end; // Support: Flexbox
+    -webkit-box-pack: center;
+    -webkit-justify-content: center;
+        -ms-flex-pack: center;
+            justify-content: center; // Support: Flexbox
+  }
+
+  .govuk-footer__meta-item {
+    margin-right: $govuk-gutter-half;
+    margin-bottom: govuk-spacing(5);
+    margin-left: $govuk-gutter-half;
+  }
+
+  .govuk-footer__meta-item--grow {
+    -webkit-box-flex: 1;
+    -webkit-flex: 1;
+        -ms-flex: 1;
+            flex: 1; // Support: Flexbox
+    @include govuk-media-query ($until: tablet) {
+      -webkit-flex-basis: 320px;
+          -ms-flex-preferred-size: 320px;
+              flex-basis: 320px; // Support: Flexbox
+    }
+  }
+
+  .govuk-footer__licence-logo {
+    display: inline-block;
+    margin-right: govuk-spacing(2);
+    @include govuk-media-query ($until: desktop) {
+      margin-bottom: govuk-spacing(3);
+    }
+    vertical-align: top;
+  }
+
+  .govuk-footer__licence-description {
+    display: inline-block;
+  }
+
+  .govuk-footer__copyright-logo {
+    display: inline-block;
+    min-width: $govuk-footer-crest-image-width;
+    padding-top: ($govuk-footer-crest-image-height + govuk-spacing(2));
+    background-image: govuk-image-url("govuk-crest.png");
+    @include govuk-device-pixel-ratio {
+      background-image: govuk-image-url("govuk-crest-2x.png");
+    }
+    background-repeat: no-repeat;
+    background-position: 50% 0%;
+    background-size: $govuk-footer-crest-image-width $govuk-footer-crest-image-height;
+    text-align: center;
+    white-space: nowrap;
+  }
+
+  .govuk-footer__inline-list {
+    margin-top: 0;
+    margin-bottom: govuk-spacing(3);
+    padding: 0;
+  }
+
+  .govuk-footer__meta-custom {
+    margin-bottom: govuk-spacing(4);
+  }
+
+  .govuk-footer__inline-list-item {
+    display: inline-block;
+    margin-right: govuk-spacing(3);
+    margin-bottom: govuk-spacing(1);
+  }
+
+  .govuk-footer__heading {
+    @include govuk-responsive-margin(7, "bottom");
+    padding-bottom: govuk-spacing(4);
+    @include govuk-media-query ($until: tablet) {
+      padding-bottom: govuk-spacing(2);
+    }
+    border-bottom: 1px solid $govuk-footer-border;
+  }
+
+  .govuk-footer__navigation {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex; // Support: Flexbox
+    margin-right: -$govuk-gutter-half;
+    margin-left: -$govuk-gutter-half;
+    -webkit-flex-wrap: wrap;
+        -ms-flex-wrap: wrap;
+            flex-wrap: wrap; // Support: Flexbox
+  }
+
+  .govuk-footer__section {
+    display: inline-block;
+    margin-right: $govuk-gutter-half;
+    margin-bottom: $govuk-gutter;
+    margin-left: $govuk-gutter-half;
+    vertical-align: top;
+    // Ensure columns take up equal width (typically one-half:one-half)
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+        -ms-flex-positive: 1;
+            flex-grow: 1; // Support: Flexbox
+    -webkit-flex-shrink: 1;
+        -ms-flex-negative: 1;
+            flex-shrink: 1; // Support: Flexbox
+    @include govuk-media-query ($until: desktop) {
+      // Make sure columns do not drop below 200px in width
+      // Will typically result in wrapping, and end up in a single column on smaller screens.
+      -webkit-flex-basis: 200px;
+          -ms-flex-preferred-size: 200px;
+              flex-basis: 200px; // Support: Flexbox
+    }
+  }
+
+  // If there are only two sections, set the layout to be two-third:one-third on desktop
+  @include govuk-media-query ($from: desktop) {
+    // We match the first section with `:first-child`.
+    // To ensure the section is one of two, we can count backwards using `:nth-last-child(2)`.
+    .govuk-footer__section:first-child:nth-last-child(2) {
+      -webkit-box-flex: 2;
+      -webkit-flex-grow: 2;
+          -ms-flex-positive: 2;
+              flex-grow: 2; // Support: Flexbox
+    }
+  }
+
+  .govuk-footer__list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    -webkit-column-gap: $govuk-gutter;
+            column-gap: $govuk-gutter; // Support: Columns
+
+    // Disable thicker underlines on hover because of a bug in Chromium
+    // affecting links within columns
+    // https://bugs.chromium.org/p/chromium/issues/detail?id=1190987
+    .govuk-footer__link:hover {
+      text-decoration-thickness: auto;
+    }
+  }
+
+  @include govuk-media-query ($from: desktop) {
+    .govuk-footer__list--columns-2 {
+      -webkit-column-count: 2;
+              column-count: 2; // Support: Columns
+    }
+
+    .govuk-footer__list--columns-3 {
+      -webkit-column-count: 3;
+              column-count: 3; // Support: Columns
+    }
+  }
+
+  .govuk-footer__list-item {
+    @include govuk-responsive-margin(4, "bottom");
+  }
+
+  .govuk-footer__list-item:last-child {
+    margin-bottom: 0;
+  }
+}