govuk_tech_docs 6.3.0.beta → 6.4.0.beta

data/node_modules/govuk-frontend/dist/govuk/components/task-list/_index.scss

@@ -1,85 +1,7 @@
-@import "../../base";
+@use "../../custom-properties";
 
-@import "../tag/index";
+@use "mixin";
+@use "../tag";
 
-@include govuk-exports("govuk/component/task-list") {
-  $govuk-task-list-hover-colour: govuk-colour("black", $variant: "tint-95");
+@include mixin.styles;
 
-  .govuk-task-list {
-    @include govuk-font($size: 19);
-    margin-top: 0;
-    @include govuk-responsive-margin(6, "bottom");
-    padding: 0;
-    list-style-type: none;
-  }
-
-  // This uses table layout so that the task name and status always appear
-  // side-by-side, with the width of each 'column' being flexible depending upon
-  // the length of the task names and statuses.
-  //
-  // The position is set to 'relative' so than an absolutely-positioned
-  // transparent element box can be added within the link so that the whole row
-  // can be clickable.
-  .govuk-task-list__item {
-    display: table;
-    position: relative;
-    width: 100%;
-    margin-bottom: 0;
-    padding-top: govuk-spacing(2);
-    padding-bottom: govuk-spacing(2);
-    border-bottom: 1px solid;
-    border-bottom-color: govuk-functional-colour(border);
-  }
-
-  .govuk-task-list__item:first-child {
-    border-top: 1px solid;
-    border-top-color: govuk-functional-colour(border);
-  }
-
-  // This class is added to the <li> elements where the task name is a link. The
-  // background hover colour is added to help indicate that the whole row is
-  // clickable, rather than just the visible link text.
-  .govuk-task-list__item--with-link:hover {
-    background: $govuk-task-list-hover-colour;
-  }
-
-  .govuk-task-list__name-and-hint {
-    display: table-cell;
-
-    color: govuk-functional-colour(text);
-    vertical-align: top;
-  }
-
-  .govuk-task-list__status {
-    display: table-cell;
-    padding-left: govuk-spacing(2);
-
-    color: govuk-functional-colour(text);
-    text-align: right;
-    vertical-align: top;
-  }
-
-  .govuk-task-list__status--cannot-start-yet {
-    color: govuk-functional-colour(secondary-text);
-  }
-
-  // This adds an empty transparent box covering the whole row, including the
-  // task status and any hint text. Because this is generated within the link
-  // element, this allows the whole area to be clickable.
-  .govuk-task-list__link::after {
-    content: "";
-    display: block;
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-  }
-
-  .govuk-task-list__hint {
-    margin-top: govuk-spacing(1);
-    color: govuk-functional-colour(secondary-text);
-  }
-}
-
-/*# sourceMappingURL=_index.scss.map */

data/node_modules/govuk-frontend/dist/govuk/components/task-list/_mixin.scss

@@ -0,0 +1,83 @@
+@use "../../base";
+
+/// @access private
+@mixin styles {
+  $govuk-task-list-hover-colour: base.govuk-colour("black", $variant: "tint-95");
+
+  .govuk-task-list {
+    @include base.govuk-font($size: 19);
+    margin-top: 0;
+    @include base.govuk-responsive-margin(6, "bottom");
+    padding: 0;
+    list-style-type: none;
+  }
+
+  // This uses table layout so that the task name and status always appear
+  // side-by-side, with the width of each 'column' being flexible depending upon
+  // the length of the task names and statuses.
+  //
+  // The position is set to 'relative' so than an absolutely-positioned
+  // transparent element box can be added within the link so that the whole row
+  // can be clickable.
+  .govuk-task-list__item {
+    display: table;
+    position: relative;
+    width: 100%;
+    margin-bottom: 0;
+    padding-top: base.govuk-spacing(2);
+    padding-bottom: base.govuk-spacing(2);
+    border-bottom: 1px solid;
+    border-bottom-color: base.govuk-functional-colour(border);
+  }
+
+  .govuk-task-list__item:first-child {
+    border-top: 1px solid;
+    border-top-color: base.govuk-functional-colour(border);
+  }
+
+  // This class is added to the <li> elements where the task name is a link. The
+  // background hover colour is added to help indicate that the whole row is
+  // clickable, rather than just the visible link text.
+  .govuk-task-list__item--with-link:hover {
+    background: $govuk-task-list-hover-colour;
+  }
+
+  .govuk-task-list__name-and-hint {
+    display: table-cell;
+
+    color: base.govuk-functional-colour(text);
+    vertical-align: top;
+  }
+
+  .govuk-task-list__status {
+    display: table-cell;
+    padding-left: base.govuk-spacing(2);
+
+    color: base.govuk-functional-colour(text);
+    text-align: right;
+    vertical-align: top;
+  }
+
+  .govuk-task-list__status--cannot-start-yet {
+    color: base.govuk-functional-colour(secondary-text);
+  }
+
+  // This adds an empty transparent box covering the whole row, including the
+  // task status and any hint text. Because this is generated within the link
+  // element, this allows the whole area to be clickable.
+  .govuk-task-list__link::after {
+    content: "";
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
+
+  .govuk-task-list__hint {
+    margin-top: base.govuk-spacing(1);
+    color: base.govuk-functional-colour(secondary-text);
+  }
+}
+

data/node_modules/govuk-frontend/dist/govuk/components/task-list/_task-list.import.scss

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

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

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

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

@@ -1,47 +1,9 @@
-@import "../../base";
+@use "../../custom-properties";
 
-@import "../error-message/index";
-@import "../hint/index";
-@import "../label/index";
+@use "mixin";
+@use "../error-message";
+@use "../hint";
+@use "../label";
 
-@include govuk-exports("govuk/component/textarea") {
-  .govuk-textarea {
-    @include govuk-font($size: 19, $line-height: 1.25);
+@include mixin.styles;
 
-    box-sizing: border-box;
-    display: block;
-    width: 100%;
-    min-height: 40px;
-    @include govuk-responsive-margin(6, "bottom");
-    padding: govuk-spacing(1);
-
-    resize: vertical;
-
-    border: $govuk-border-width-form-element solid;
-    border-radius: 0;
-    border-color: govuk-functional-colour(input-border);
-
-    -webkit-appearance: none;
-
-    &:focus {
-      @include govuk-focused-form-input;
-    }
-
-    &:disabled {
-      opacity: 0.5;
-      color: inherit;
-      background-color: transparent;
-      cursor: not-allowed;
-    }
-  }
-
-  .govuk-textarea--error {
-    border-color: govuk-functional-colour(error);
-
-    &:focus {
-      border-color: govuk-functional-colour(input-border);
-    }
-  }
-}
-
-/*# sourceMappingURL=_index.scss.map */

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

@@ -0,0 +1,43 @@
+@use "../../base";
+
+/// @access private
+@mixin styles {
+  .govuk-textarea {
+    @include base.govuk-font($size: 19, $line-height: 1.25);
+
+    box-sizing: border-box;
+    display: block;
+    width: 100%;
+    min-height: 40px;
+    @include base.govuk-responsive-margin(6, "bottom");
+    padding: base.govuk-spacing(1);
+
+    resize: vertical;
+
+    border: base.$govuk-border-width-form-element solid;
+    border-radius: 0;
+    border-color: base.govuk-functional-colour(input-border);
+
+    -webkit-appearance: none;
+
+    &:focus {
+      @include base.govuk-focused-form-input;
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      color: inherit;
+      background-color: transparent;
+      cursor: not-allowed;
+    }
+  }
+
+  .govuk-textarea--error {
+    border-color: base.govuk-functional-colour(error);
+
+    &:focus {
+      border-color: base.govuk-functional-colour(input-border);
+    }
+  }
+}
+

data/node_modules/govuk-frontend/dist/govuk/components/textarea/_textarea.import.scss

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

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

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

data/node_modules/govuk-frontend/dist/govuk/components/warning-text/_index.scss

@@ -1,69 +1,5 @@
-@import "../../base";
+@use "../../custom-properties";
+@use "mixin";
 
-@include govuk-exports("govuk/component/warning-text") {
-  .govuk-warning-text {
-    @include govuk-font($size: 19);
-    @include govuk-responsive-margin(6, "bottom");
-    @include govuk-typography-weight-bold;
-    position: relative;
-    padding: govuk-spacing(2) 0;
-  }
+@include mixin.styles;
 
-  .govuk-warning-text__icon {
-    box-sizing: border-box;
-
-    display: inline-block;
-
-    position: absolute;
-    left: 0;
-
-    min-width: 35px;
-    min-height: 35px;
-    margin-top: -7px;
-
-    @media #{govuk-from-breakpoint(tablet)} {
-      margin-top: -5px;
-    }
-
-    // When a user customises their colours the background colour will often be
-    // removed. Adding a border to the component keeps it's shape as a circle.
-    border: 3px solid;
-    border-radius: 50%;
-    border-color: govuk-functional-colour(text);
-
-    color: govuk-functional-colour(body-background);
-    background: govuk-functional-colour(text);
-
-    font-size: 30px;
-    line-height: 29px;
-
-    text-align: center;
-
-    // Prevent the exclamation mark from being included when the warning text
-    // is copied, for example.
-    -webkit-user-select: none;
-        -ms-user-select: none;
-            user-select: none;
-
-    // Improve rendering in Windows High Contrast Mode (Edge), where a
-    // readability backplate behind the exclamation mark obscures the circle
-    forced-color-adjust: none;
-
-    @media screen and (forced-colors: active) {
-      border-color: windowText;
-      color: windowText;
-      background: transparent;
-    }
-  }
-
-  .govuk-warning-text__text {
-    display: block;
-    padding-left: 45px;
-    color: govuk-functional-colour(text);
-    // While `<strong>` is styled `bold` or `bolder` by user-agents
-    // this can be reset by the app's stylesheet
-    font-weight: inherit;
-  }
-}
-
-/*# sourceMappingURL=_index.scss.map */

data/node_modules/govuk-frontend/dist/govuk/components/warning-text/_mixin.scss

@@ -0,0 +1,69 @@
+@use "../../base";
+
+/// @access private
+@mixin styles {
+  .govuk-warning-text {
+    @include base.govuk-font($size: 19);
+    @include base.govuk-responsive-margin(6, "bottom");
+    @include base.govuk-typography-weight-bold;
+    position: relative;
+    padding: base.govuk-spacing(2) 0;
+  }
+
+  .govuk-warning-text__icon {
+    box-sizing: border-box;
+
+    display: inline-block;
+
+    position: absolute;
+    left: 0;
+
+    min-width: 35px;
+    min-height: 35px;
+    margin-top: -7px;
+
+    @media #{base.govuk-from-breakpoint(tablet)} {
+      margin-top: -5px;
+    }
+
+    // When a user customises their colours the background colour will often be
+    // removed. Adding a border to the component keeps it's shape as a circle.
+    border: 3px solid;
+    border-radius: 50%;
+    border-color: base.govuk-functional-colour(text);
+
+    color: base.govuk-functional-colour(body-background);
+    background: base.govuk-functional-colour(text);
+
+    font-size: 30px;
+    line-height: 29px;
+
+    text-align: center;
+
+    // Prevent the exclamation mark from being included when the warning text
+    // is copied, for example.
+    -webkit-user-select: none;
+        -ms-user-select: none;
+            user-select: none;
+
+    // Improve rendering in Windows High Contrast Mode (Edge), where a
+    // readability backplate behind the exclamation mark obscures the circle
+    forced-color-adjust: none;
+
+    @media screen and (forced-colors: active) {
+      border-color: windowText;
+      color: windowText;
+      background: transparent;
+    }
+  }
+
+  .govuk-warning-text__text {
+    display: block;
+    padding-left: 45px;
+    color: base.govuk-functional-colour(text);
+    // While `<strong>` is styled `bold` or `bolder` by user-agents
+    // this can be reset by the app's stylesheet
+    font-weight: inherit;
+  }
+}
+

data/node_modules/govuk-frontend/dist/govuk/components/warning-text/_warning-text.import.scss

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

data/node_modules/govuk-frontend/dist/govuk/core/_global-styles.import.scss

@@ -0,0 +1,10 @@
+@use "global-styles.mixin" as mixin;
+
+@import "../base";
+@import "links";
+@import "typography";
+
+@include govuk-exports("govuk/core/global-styles") {
+  @include mixin.styles;
+}
+

data/node_modules/govuk-frontend/dist/govuk/core/_global-styles.mixin.scss

@@ -0,0 +1,19 @@
+@use "../base";
+
+@mixin govuk-global-styles {
+  a {
+    @extend %govuk-link;
+  }
+
+  p {
+    @extend %govuk-body-m;
+  }
+}
+
+/// @access private
+@mixin styles {
+  @if base.$govuk-global-styles == true {
+    @include govuk-global-styles;
+  }
+}
+

data/node_modules/govuk-frontend/dist/govuk/core/_global-styles.scss

@@ -1,24 +1,7 @@
-@import "../settings/global-styles";
-@import "../tools/exports";
-@import "../helpers/colour";
-@import "../helpers/links";
-@import "links";
-@import "typography";
+@use "../custom-properties";
+@use "links";
+@use "typography";
+@use "global-styles.mixin" as mixin;
 
-@mixin govuk-global-styles {
-  a {
-    @extend %govuk-link;
-  }
+@include mixin.styles;
 
-  p {
-    @extend %govuk-body-m;
-  }
-}
-
-@include govuk-exports("govuk/core/global-styles") {
-  @if $govuk-global-styles == true {
-    @include govuk-global-styles;
-  }
-}
-
-/*# sourceMappingURL=_global-styles.scss.map */

data/node_modules/govuk-frontend/dist/govuk/core/_index.import.scss

@@ -0,0 +1,6 @@
+@import "links";
+@import "lists";
+@import "typography";
+@import "section-break";
+@import "global-styles";
+

data/node_modules/govuk-frontend/dist/govuk/core/_index.scss

@@ -1,11 +1,7 @@
-@import "../settings/global-styles";
-@import "../tools/exports";
-@import "../helpers/colour";
-@import "../helpers/links";
-@import "links";
-@import "lists";
-@import "typography";
-@import "section-break";
-@import "global-styles";
+@use "../custom-properties";
+@use "links";
+@use "lists";
+@use "typography";
+@use "section-break";
+@use "global-styles";
 
-/*# sourceMappingURL=_index.scss.map */

data/node_modules/govuk-frontend/dist/govuk/core/_links.import.scss

@@ -0,0 +1,10 @@
+@use "links.mixin" as mixin;
+@use "../tools/exports" as *;
+
+@import "../base";
+@import "../custom-properties";
+
+@include govuk-exports("govuk/core/links") {
+  @include mixin.styles;
+}
+

data/node_modules/govuk-frontend/dist/govuk/core/_links.mixin.scss

@@ -0,0 +1,44 @@
+@use "../base";
+
+/// @access private
+@mixin styles {
+  %govuk-link {
+    @include base.govuk-link-common;
+    @include base.govuk-link-style-default;
+    @include base.govuk-link-print-friendly;
+  }
+
+  .govuk-link {
+    @extend %govuk-link;
+  }
+
+  // Variant classes should always be used in conjunction with the .govuk-link
+  // class, so we do not need the common link styles as they will be inherited.
+
+  .govuk-link--muted {
+    @include base.govuk-link-style-muted;
+  }
+
+  .govuk-link--text-colour {
+    @include base.govuk-link-style-text;
+  }
+
+  .govuk-link--inverse {
+    @include base.govuk-link-style-inverse;
+  }
+
+  .govuk-link--no-underline {
+    @include base.govuk-link-style-no-underline;
+  }
+
+  .govuk-link--no-visited-state {
+    @include base.govuk-link-style-no-visited-state;
+  }
+
+  // Links that only contain images
+
+  .govuk-link-image {
+    @include base.govuk-link-image;
+  }
+}
+

data/node_modules/govuk-frontend/dist/govuk/core/_links.scss

@@ -1,50 +1,5 @@
-@import "../settings/links";
-@import "../settings/measurements";
-@import "../tools/exports";
-@import "../helpers/colour";
-@import "../helpers/focused";
-@import "../helpers/links";
-@import "../helpers/typography";
+@use "../custom-properties";
+@use "links.mixin" as mixin;
 
-@include govuk-exports("govuk/core/links") {
-  %govuk-link {
-    @include govuk-link-common;
-    @include govuk-link-style-default;
-    @include govuk-link-print-friendly;
-  }
+@include mixin.styles;
 
-  .govuk-link {
-    @extend %govuk-link;
-  }
-
-  // Variant classes should always be used in conjunction with the .govuk-link
-  // class, so we do not need the common link styles as they will be inherited.
-
-  .govuk-link--muted {
-    @include govuk-link-style-muted;
-  }
-
-  .govuk-link--text-colour {
-    @include govuk-link-style-text;
-  }
-
-  .govuk-link--inverse {
-    @include govuk-link-style-inverse;
-  }
-
-  .govuk-link--no-underline {
-    @include govuk-link-style-no-underline;
-  }
-
-  .govuk-link--no-visited-state {
-    @include govuk-link-style-no-visited-state;
-  }
-
-  // Links that only contain images
-
-  .govuk-link-image {
-    @include govuk-link-image;
-  }
-}
-
-/*# sourceMappingURL=_links.scss.map */

data/node_modules/govuk-frontend/dist/govuk/core/_lists.import.scss

@@ -0,0 +1,14 @@
+@use "lists.mixin" as mixin;
+
+@import "../base";
+
+// This is only needed for consistency between `importing` and `using` base.
+// In an `@use` world, lists have to `use` typography for the placeholder classes
+// to be extended correctly, and this results in the typography CSS being
+// outputted before lists.
+@import "typography";
+
+@include govuk-exports("govuk/core/lists") {
+  @include mixin.styles;
+}
+