govuk_tech_docs 6.3.0.beta → 6.3.0

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

@@ -1,40 +1,37 @@
-@import "../base";
+@use "accordion";
+@use "back-link";
+@use "breadcrumbs";
+@use "button";
+@use "character-count";
+@use "checkboxes";
+@use "cookie-banner";
+@use "date-input";
+@use "details";
+@use "error-message";
+@use "error-summary";
+@use "exit-this-page";
+@use "fieldset";
+@use "file-upload";
+@use "footer";
+@use "header";
+@use "hint";
+@use "input";
+@use "inset-text";
+@use "label";
+@use "notification-banner";
+@use "pagination";
+@use "panel";
+@use "password-input";
+@use "phase-banner";
+@use "radios";
+@use "select";
+@use "service-navigation";
+@use "skip-link";
+@use "summary-list";
+@use "table";
+@use "tabs";
+@use "tag";
+@use "task-list";
+@use "textarea";
+@use "warning-text";
 
-@import "accordion/index";
-@import "back-link/index";
-@import "breadcrumbs/index";
-@import "button/index";
-@import "character-count/index";
-@import "checkboxes/index";
-@import "cookie-banner/index";
-@import "date-input/index";
-@import "details/index";
-@import "error-message/index";
-@import "error-summary/index";
-@import "exit-this-page/index";
-@import "fieldset/index";
-@import "file-upload/index";
-@import "footer/index";
-@import "header/index";
-@import "hint/index";
-@import "input/index";
-@import "inset-text/index";
-@import "label/index";
-@import "notification-banner/index";
-@import "pagination/index";
-@import "panel/index";
-@import "password-input/index";
-@import "phase-banner/index";
-@import "radios/index";
-@import "select/index";
-@import "service-navigation/index";
-@import "skip-link/index";
-@import "summary-list/index";
-@import "table/index";
-@import "tabs/index";
-@import "tag/index";
-@import "task-list/index";
-@import "textarea/index";
-@import "warning-text/index";
-
-/*# sourceMappingURL=_index.scss.map */

data/node_modules/govuk-frontend/dist/govuk/components/accordion/_accordion.import.scss

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

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

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

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

@@ -1,375 +1,5 @@
-@import "../../base";
+@use "../../custom-properties";
+@use "mixin";
 
-@include govuk-exports("govuk/component/accordion") {
-  $govuk-accordion-base-colour: govuk-colour("black");
-  $govuk-accordion-hover-colour: govuk-colour("black", $variant: "tint-95");
-  $govuk-accordion-icon-focus-colour: govuk-functional-colour(focus);
-  $govuk-accordion-bottom-border-width: 1px;
+@include mixin.styles;
 
-  .govuk-accordion {
-    @include govuk-responsive-margin(6, "bottom");
-  }
-
-  .govuk-accordion__section {
-    padding-top: govuk-spacing(3);
-  }
-
-  .govuk-accordion__section-heading {
-    // Override browser defaults to ensure consistent element height
-    margin-top: 0;
-    margin-bottom: 0;
-
-    padding-top: govuk-spacing(3);
-    padding-bottom: govuk-spacing(3);
-  }
-
-  .govuk-accordion__section-button {
-    @include govuk-font($size: 24, $weight: bold);
-
-    display: block;
-    margin-bottom: 0;
-    padding-top: govuk-spacing(3);
-    color: govuk-functional-colour(text);
-  }
-
-  // Remove the bottom margin from the last item inside the content
-  .govuk-accordion__section-content > :last-child {
-    margin-bottom: 0;
-  }
-
-  // GOV.UK Frontend JavaScript enabled
-  .govuk-frontend-supported {
-    .govuk-accordion {
-      // Border at the bottom of the whole accordion
-      border-bottom: $govuk-accordion-bottom-border-width solid;
-      border-bottom-color: govuk-functional-colour(border);
-    }
-
-    .govuk-accordion__section {
-      padding-top: 0;
-    }
-
-    // Hide the body of collapsed sections by default for browsers that lack
-    // support for `content-visibility` paired with [hidden=until-found]
-    .govuk-accordion__section-content {
-      display: none;
-
-      @include govuk-responsive-padding(3, "top");
-      @include govuk-responsive-padding(8, "bottom");
-    }
-
-    // Hide the body of collapsed sections using `content-visibility` to enable
-    // page search within [hidden=until-found] regions where browser supported
-    .govuk-accordion__section-content[hidden] {
-      @supports (content-visibility: hidden) {
-        content-visibility: hidden;
-        display: inherit;
-      }
-
-      // Hide the padding of collapsed sections
-      padding-top: 0;
-      padding-bottom: 0;
-    }
-
-    // Show the body of expanded sections
-    .govuk-accordion__section--expanded .govuk-accordion__section-content {
-      display: block;
-    }
-
-    .govuk-accordion__show-all {
-      @include govuk-font($size: 19);
-      position: relative;
-      z-index: 1;
-
-      margin-bottom: 9px;
-      padding: govuk-spacing(1) 2px govuk-spacing(1) 0;
-
-      border-width: 0;
-
-      color: govuk-functional-colour(link);
-      background: none;
-
-      cursor: pointer;
-      -webkit-appearance: none;
-
-      @media #{govuk-from-breakpoint(tablet)} {
-        margin-bottom: 14px;
-      }
-
-      // Remove default button focus outline in Firefox
-      &::-moz-focus-inner {
-        padding: 0;
-        border: 0;
-      }
-
-      &:hover {
-        color: $govuk-accordion-base-colour;
-        background: $govuk-accordion-hover-colour;
-        // The focus state adds a box-shadow to the top and bottom of the
-        // button. We add a grey box-shadow on hover too, to make the height of
-        // the hover state match the height of the focus state.
-        box-shadow:
-          0 -2px $govuk-accordion-hover-colour,
-          0 4px $govuk-accordion-hover-colour;
-
-        .govuk-accordion__section-toggle-text {
-          color: $govuk-accordion-base-colour;
-        }
-
-        .govuk-accordion-nav__chevron {
-          color: $govuk-accordion-base-colour;
-          background: $govuk-accordion-base-colour;
-        }
-
-        .govuk-accordion-nav__chevron::after {
-          color: $govuk-accordion-hover-colour;
-        }
-      }
-
-      &:focus {
-        @include govuk-focused-text;
-
-        .govuk-accordion-nav__chevron {
-          background: $govuk-accordion-base-colour;
-        }
-
-        .govuk-accordion-nav__chevron::after {
-          color: $govuk-accordion-icon-focus-colour;
-        }
-      }
-    }
-
-    .govuk-accordion__section-heading {
-      padding: 0;
-    }
-
-    // Create Chevron icon aligned with text
-    .govuk-accordion-nav__chevron {
-      box-sizing: border-box;
-      display: inline-block;
-
-      position: relative;
-
-      // Set size using rems so icon scales with text
-      width: govuk-px-to-rem(20px);
-      height: govuk-px-to-rem(20px);
-
-      border: govuk-px-to-rem(1px) solid;
-      border-radius: 50%;
-
-      vertical-align: middle;
-
-      // Create inner chevron arrow
-      &::after {
-        content: "";
-        box-sizing: border-box;
-        display: block;
-
-        position: absolute;
-        bottom: govuk-px-to-rem(5px);
-        left: govuk-px-to-rem(6px);
-
-        width: govuk-px-to-rem(6px);
-        height: govuk-px-to-rem(6px);
-
-        transform: rotate(-45deg);
-
-        border-top: govuk-px-to-rem(2px) solid;
-        border-right: govuk-px-to-rem(2px) solid;
-      }
-    }
-
-    // Rotate icon to create "Down" version
-    .govuk-accordion-nav__chevron--down {
-      transform: rotate(180deg);
-    }
-
-    .govuk-accordion__section-button {
-      width: 100%;
-
-      padding: govuk-spacing(2) 0 0;
-
-      border: 0;
-
-      border-top: $govuk-accordion-bottom-border-width solid;
-
-      // Visually separate the section from the one underneath when user changes
-      // colours in their browser. See
-      // https://github.com/alphagov/govuk-frontend/issues/2321#issuecomment-924201488
-      border-bottom: govuk-spacing(2) solid transparent;
-
-      border-top-color: govuk-functional-colour(border);
-
-      color: govuk-functional-colour(text);
-      background: none;
-
-      text-align: left;
-      // Section headers have a pointer cursor as an additional affordance
-      cursor: pointer;
-      -webkit-appearance: none;
-
-      @media #{govuk-from-breakpoint(tablet)} {
-        padding-bottom: govuk-spacing(2);
-      }
-
-      &:active {
-        color: govuk-functional-colour(link-active);
-        background: none;
-      }
-
-      &:hover {
-        color: $govuk-accordion-base-colour;
-        background: $govuk-accordion-hover-colour;
-
-        .govuk-accordion__section-toggle-text {
-          color: $govuk-accordion-base-colour;
-        }
-
-        .govuk-accordion-nav__chevron {
-          color: $govuk-accordion-base-colour;
-          background: $govuk-accordion-base-colour;
-        }
-
-        .govuk-accordion-nav__chevron::after {
-          color: $govuk-accordion-hover-colour;
-        }
-      }
-
-      &:focus {
-        // Remove default focus border around button as styling is being applied
-        // to inner text elements that receive focus
-        outline: 0;
-
-        .govuk-accordion__section-heading-text-focus,
-        .govuk-accordion__section-summary-focus,
-        .govuk-accordion__section-toggle-focus {
-          @include govuk-focused-text;
-        }
-
-        .govuk-accordion-nav__chevron {
-          color: $govuk-accordion-base-colour;
-          background: $govuk-accordion-base-colour;
-        }
-
-        .govuk-accordion-nav__chevron::after {
-          color: $govuk-accordion-icon-focus-colour;
-        }
-      }
-
-      // Remove default button focus outline in Firefox
-      &::-moz-focus-inner {
-        padding: 0;
-        border: 0;
-      }
-    }
-
-    // Remove the transparent border when the section is expanded to make it
-    // clear that the heading relates to the content below. Adjust padding to
-    // maintain the height of the element. See
-    // https://github.com/alphagov/govuk-frontend/pull/2257#issuecomment-951920798
-    .govuk-accordion__section--expanded .govuk-accordion__section-button {
-      padding-bottom: govuk-spacing(3);
-      border-bottom: 0;
-
-      @media #{govuk-from-breakpoint(tablet)} {
-        padding-bottom: govuk-spacing(4);
-      }
-    }
-
-    // As Chevron icon is vertically aligned it overlaps with the focus state
-    // bottom border – this adds some spacing
-    .govuk-accordion__section-button:focus .govuk-accordion__section-toggle-focus {
-      padding-bottom: 3px;
-
-      @media #{govuk-from-breakpoint(desktop)} {
-        padding-bottom: 2px;
-      }
-    }
-
-    .govuk-accordion__section-toggle,
-    .govuk-accordion__section-heading-text,
-    .govuk-accordion__section-summary {
-      display: block;
-      margin-bottom: 13px;
-
-      .govuk-accordion__section-heading-text-focus,
-      .govuk-accordion__section-summary-focus,
-      .govuk-accordion__section-toggle-focus {
-        display: inline;
-      }
-    }
-
-    // Add toggle link with Chevron icon on left.
-    .govuk-accordion__section-toggle {
-      @include govuk-font-size($size: 19);
-      @include govuk-typography-weight-regular;
-      color: govuk-functional-colour(link);
-    }
-
-    // Add space between the icon and text. Avoid applying spacing directly to
-    // the icon as the use of `transform` will change the placement of any
-    // margins.
-    .govuk-accordion__show-all-text,
-    .govuk-accordion__section-toggle-text {
-      margin-left: govuk-spacing(1);
-      vertical-align: middle;
-    }
-
-    // Background colour adjustment when user changes colours in Firefox
-    //
-    // When user changes colours in Firefox, text colour inside <button> is
-    // always black (regardless of the custom colours the user has set). This is
-    // fine when the text in the button is not nested inside another element
-    // because when user changes colours in Firefox, the immediate background
-    // colour of buttons is always white (again, regardless of user's custom
-    // colours).
-    //
-    // However, when the text inside <button> is wrapped inside another element
-    // AND that element sets a background colour, the text colour is still black
-    // but the background of that nested element gets the user's custom
-    // background colour. When the custom background is a lighter hue, the
-    // contrast might be sufficient. But if the user's custom background colour
-    // is a darker colour, the contrast with the text might not be sufficient.
-    //
-    // To ensure sufficient contrast, override the background colour set by the
-    // focus state on the nested elements to be transparent.
-    //
-    // Also override the background colour of the Show/Hide chevrons which set a
-    // background colour on hover.
-    @media screen and (forced-colors: active) {
-      .govuk-accordion__show-all:hover,
-      .govuk-accordion__section-button:hover {
-        .govuk-accordion-nav__chevron {
-          background-color: transparent;
-        }
-      }
-
-      .govuk-accordion__show-all:focus,
-      .govuk-accordion__section-button:focus {
-        .govuk-accordion__section-heading-text-focus,
-        .govuk-accordion__section-summary-focus,
-        .govuk-accordion__section-toggle-focus,
-        .govuk-accordion-nav__chevron {
-          background: transparent;
-          background-color: transparent;
-        }
-      }
-    }
-
-    // For devices that can't hover such as touch devices,
-    // remove hover state as it can be stuck in that state (iOS).
-    @media (hover: none) {
-      .govuk-accordion__section-header:hover {
-        border-top-color: govuk-functional-colour(border);
-
-        box-shadow: inset 0 3px 0 0 govuk-functional-colour(link);
-
-        .govuk-accordion__section-button {
-          border-top-color: govuk-functional-colour(border);
-        }
-      }
-    }
-  }
-}
-
-/*# sourceMappingURL=_index.scss.map */