govuk_tech_docs 2.2.2 → 2.4.2

data/node_modules/govuk-frontend/govuk/components/cookie-banner/_cookie-banner.scss

@@ -0,0 +1,2 @@
+@import "../../base";
+@import "./index";

data/node_modules/govuk-frontend/govuk/components/cookie-banner/_index.scss

@@ -0,0 +1,51 @@
+@include govuk-exports("govuk/component/cookie-banner") {
+
+  // This needs to be kept in sync with the header component's styles
+  $border-bottom-width: govuk-spacing(2);
+
+  .govuk-cookie-banner {
+    @include govuk-font($size: 19);
+
+    padding-top: govuk-spacing(4);
+    // The component does not set bottom spacing.
+    // The bottom spacing should be created by the items inside the component.
+
+    // Visually separate the cookie banner from content underneath
+    // when user changes colours in their browser.
+    border-bottom: $border-bottom-width solid transparent;
+
+    background-color: govuk-colour("light-grey", $legacy: "grey-3");
+  }
+
+  // Support older browsers which don't hide elements with the `hidden` attribute
+  // when user hides the whole cookie banner with a 'Hide' button.
+  .govuk-cookie-banner[hidden] {
+    display: none;
+  }
+
+  .govuk-cookie-banner__message {
+    // Remove the extra height added by the separator border.
+    margin-bottom: -$border-bottom-width;
+
+    &[hidden] {
+      // Support older browsers which don't hide elements with the `hidden` attribute
+      // when the visibility of cookie and replacement messages is toggled.
+      display: none;
+    }
+
+    &:focus {
+      // Remove the native visible focus indicator when the element is programmatically focused.
+      //
+      // The focused cookie banner is the first element on the page and the last thing the user
+      // interacted with prior to it gaining focus.
+      // We therefore assume that moving focus to it is not going to surprise users, and that giving
+      // it a visible focus indicator could be more confusing than helpful, especially as the
+      // element is not normally keyboard operable.
+      //
+      // We have flagged this in the research section of the guidance as something to monitor.
+      //
+      // A related discussion: https://github.com/w3c/wcag/issues/1001
+      outline: none;
+    }
+  }
+}

data/node_modules/govuk-frontend/govuk/components/date-input/_date-input.scss

@@ -1,30 +1,2 @@
-@import "../../settings/all";
-@import "../../tools/all";
-@import "../../helpers/all";
-
-@import "../error-message/error-message";
-@import "../input/input";
-@import "../hint/hint";
-@import "../label/label";
-
-@include govuk-exports("govuk/component/date-input") {
-  .govuk-date-input {
-    @include govuk-clearfix;
-    // font-size: 0 removes whitespace caused by inline-block
-    font-size: 0;
-  }
-
-  .govuk-date-input__item {
-    display: inline-block;
-    margin-right: govuk-spacing(4);
-    margin-bottom: 0;
-  }
-
-  .govuk-date-input__label {
-    display: block;
-  }
-
-  .govuk-date-input__input {
-    margin-bottom: 0;
-  }
-}
+@import "../../base";
+@import "./index";

data/node_modules/govuk-frontend/govuk/components/date-input/_index.scss

@@ -0,0 +1,26 @@
+@import "../error-message/index";
+@import "../input/index";
+@import "../hint/index";
+@import "../label/index";
+
+@include govuk-exports("govuk/component/date-input") {
+  .govuk-date-input {
+    @include govuk-clearfix;
+    // font-size: 0 removes whitespace caused by inline-block
+    font-size: 0;
+  }
+
+  .govuk-date-input__item {
+    display: inline-block;
+    margin-right: govuk-spacing(4);
+    margin-bottom: 0;
+  }
+
+  .govuk-date-input__label {
+    display: block;
+  }
+
+  .govuk-date-input__input {
+    margin-bottom: 0;
+  }
+}

data/node_modules/govuk-frontend/govuk/components/details/_details.scss

@@ -1,88 +1,2 @@
-@import "../../settings/all";
-@import "../../tools/all";
-@import "../../helpers/all";
-
-@include govuk-exports("govuk/component/details") {
-
-  .govuk-details {
-    @include govuk-font($size: 19);
-    @include govuk-text-colour;
-    @include govuk-responsive-margin(6, "bottom");
-
-    display: block;
-  }
-
-  .govuk-details__summary {
-    // Make the focus outline shrink-wrap the text content of the summary
-    display: inline-block;
-
-    // Absolutely position the marker against this element
-    position: relative;
-
-    margin-bottom: govuk-spacing(1);
-
-    // Allow for absolutely positioned marker and align with disclosed text
-    padding-left: govuk-spacing(4) + $govuk-border-width;
-
-    // Style the summary to look like a link...
-    color: $govuk-link-colour;
-    cursor: pointer;
-
-    &:hover {
-      color: $govuk-link-hover-colour;
-    }
-
-    &:focus {
-      @include govuk-focused-text;
-    }
-  }
-
-  // ...but only underline the text, not the arrow
-  .govuk-details__summary-text {
-    text-decoration: underline;
-  }
-
-  // Remove the underline when focussed to avoid duplicate borders
-  .govuk-details__summary:focus .govuk-details__summary-text {
-    text-decoration: none;
-  }
-
-  // Remove the default details marker so we can style our own consistently and
-  // ensure it displays in Firefox (see implementation.md for details)
-  .govuk-details__summary::-webkit-details-marker {
-    display: none;
-  }
-
-  // Append our own open / closed marker using a pseudo-element
-  .govuk-details__summary:before {
-    content: "";
-    position: absolute;
-
-    top: -1px;
-    bottom: 0;
-    left: 0;
-
-    margin: auto;
-
-    @include govuk-shape-arrow($direction: right, $base: 14px);
-
-    .govuk-details[open] > & {
-      @include govuk-shape-arrow($direction: down, $base: 14px);
-    }
-  }
-
-  .govuk-details__text {
-    padding: govuk-spacing(3);
-    padding-left: govuk-spacing(4);
-    border-left: $govuk-border-width solid $govuk-border-colour;
-  }
-
-  .govuk-details__text p {
-    margin-top: 0;
-    margin-bottom: govuk-spacing(4);
-  }
-
-  .govuk-details__text > :last-child {
-    margin-bottom: 0;
-  }
-}
+@import "../../base";
+@import "./index";

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

@@ -0,0 +1,87 @@
+@include govuk-exports("govuk/component/details") {
+  .govuk-details {
+    @include govuk-font($size: 19);
+    @include govuk-text-colour;
+    @include govuk-responsive-margin(6, "bottom");
+
+    display: block;
+  }
+
+  .govuk-details__summary {
+    // Make the focus outline shrink-wrap the text content of the summary
+    display: inline-block;
+
+    // Absolutely position the marker against this element
+    position: relative;
+
+    margin-bottom: govuk-spacing(1);
+
+    // Allow for absolutely positioned marker and align with disclosed text
+    padding-left: govuk-spacing(4) + $govuk-border-width;
+
+    // Style the summary to look like a link...
+    color: $govuk-link-colour;
+    cursor: pointer;
+
+    &:hover {
+      color: $govuk-link-hover-colour;
+    }
+
+    &:focus {
+      @include govuk-focused-text;
+    }
+  }
+
+  // ...but only underline the text, not the arrow
+  .govuk-details__summary-text {
+    @include govuk-link-decoration;
+  }
+
+  .govuk-details__summary:hover .govuk-details__summary-text {
+    @include govuk-link-hover-decoration;
+  }
+
+  // Remove the underline when focussed to avoid duplicate borders
+  .govuk-details__summary:focus .govuk-details__summary-text {
+    text-decoration: none;
+  }
+
+  // Remove the default details marker so we can style our own consistently and
+  // ensure it displays in Firefox (see implementation.md for details)
+  .govuk-details__summary::-webkit-details-marker {
+    display: none;
+  }
+
+  // Append our own open / closed marker using a pseudo-element
+  .govuk-details__summary:before {
+    content: "";
+    position: absolute;
+
+    top: -1px;
+    bottom: 0;
+    left: 0;
+
+    margin: auto;
+
+    @include govuk-shape-arrow($direction: right, $base: 14px);
+
+    .govuk-details[open] > & {
+      @include govuk-shape-arrow($direction: down, $base: 14px);
+    }
+  }
+
+  .govuk-details__text {
+    padding: govuk-spacing(3);
+    padding-left: govuk-spacing(4);
+    border-left: $govuk-border-width solid $govuk-border-colour;
+  }
+
+  .govuk-details__text p {
+    margin-top: 0;
+    margin-bottom: govuk-spacing(4);
+  }
+
+  .govuk-details__text > :last-child {
+    margin-bottom: 0;
+  }
+}

data/node_modules/govuk-frontend/govuk/components/error-message/_error-message.scss

@@ -1,15 +1,2 @@
-@import "../../settings/all";
-@import "../../tools/all";
-@import "../../helpers/all";
-
-@include govuk-exports("govuk/component/error-message") {
-  .govuk-error-message {
-    @include govuk-font($size: 19, $weight: bold);
-
-    display: block;
-    margin-bottom: govuk-spacing(3);
-    clear: both;
-
-    color: $govuk-error-colour;
-  }
-}
+@import "../../base";
+@import "./index";

data/node_modules/govuk-frontend/govuk/components/error-message/_index.scss

@@ -0,0 +1,11 @@
+@include govuk-exports("govuk/component/error-message") {
+  .govuk-error-message {
+    @include govuk-font($size: 19, $weight: bold);
+
+    display: block;
+    margin-bottom: govuk-spacing(3);
+    clear: both;
+
+    color: $govuk-error-colour;
+  }
+}

data/node_modules/govuk-frontend/govuk/components/error-summary/_error-summary.scss

@@ -1,59 +1,2 @@
-@import "../../settings/all";
-@import "../../tools/all";
-@import "../../helpers/all";
-
-@import "../../core/lists";
-
-@include govuk-exports("govuk/component/error-summary") {
-
-  .govuk-error-summary {
-    @include govuk-text-colour;
-    @include govuk-responsive-padding(4);
-    @include govuk-responsive-margin(8, "bottom");
-
-    border: $govuk-border-width solid $govuk-error-colour;
-
-    &:focus {
-      outline: $govuk-focus-width solid $govuk-focus-colour;
-    }
-  }
-
-  .govuk-error-summary__title {
-    @include govuk-font($size: 24, $weight: bold);
-
-    margin-top: 0;
-    @include govuk-responsive-margin(4, "bottom");
-  }
-
-  .govuk-error-summary__body {
-    @include govuk-font($size: 19);
-
-    p {
-      margin-top: 0;
-      @include govuk-responsive-margin(4, "bottom");
-    }
-  }
-
-  // Cross-component class - adjusts styling of list component
-  .govuk-error-summary__list {
-    margin-top: 0;
-    margin-bottom: 0;
-  }
-
-  .govuk-error-summary__list a {
-    @include govuk-typography-weight-bold;
-
-    // Override default link styling to use error colour
-    &:link,
-    &:visited,
-    &:hover,
-    &:active {
-      color: $govuk-error-colour;
-    }
-
-    &:focus {
-      @include govuk-focused-text;
-    }
-  }
-
-}
+@import "../../base";
+@import "./index";

data/node_modules/govuk-frontend/govuk/components/error-summary/_index.scss

@@ -0,0 +1,43 @@
+@import "../../core/lists";
+
+@include govuk-exports("govuk/component/error-summary") {
+  .govuk-error-summary {
+    @include govuk-text-colour;
+    @include govuk-responsive-padding(4);
+    @include govuk-responsive-margin(8, "bottom");
+
+    border: $govuk-border-width solid $govuk-error-colour;
+
+    &:focus {
+      outline: $govuk-focus-width solid $govuk-focus-colour;
+    }
+  }
+
+  .govuk-error-summary__title {
+    @include govuk-font($size: 24, $weight: bold);
+
+    margin-top: 0;
+    @include govuk-responsive-margin(4, "bottom");
+  }
+
+  .govuk-error-summary__body {
+    @include govuk-font($size: 19);
+
+    p {
+      margin-top: 0;
+      @include govuk-responsive-margin(4, "bottom");
+    }
+  }
+
+  // Cross-component class - adjusts styling of list component
+  .govuk-error-summary__list {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  .govuk-error-summary__list a {
+    @include govuk-typography-weight-bold;
+    @include govuk-link-common;
+    @include govuk-link-style-error;
+  }
+}

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

@@ -1,68 +1,2 @@
-@import "../../settings/all";
-@import "../../tools/all";
-@import "../../helpers/all";
-
-@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 {
-      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;
-  }
-}
+@import "../../base";
+@import "./index";