govuk_tech_docs 6.3.0.beta → 6.3.0

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

@@ -1,138 +1,5 @@
-@use "sass:string";
+@use "../../custom-properties";
+@use "mixin";
 
-@import "../../base";
+@include mixin.styles;
 
-@include govuk-exports("govuk/component/breadcrumbs") {
-  // Component font-size on the Frontend (used for calculations)
-  $font-size: 16;
-
-  // Size of chevron (excluding border)
-  $chevron-size: govuk-em(7px, $font-size);
-
-  // Size of chevron border
-  $chevron-border-min-width: 1px;
-  $chevron-border-width: govuk-em($chevron-border-min-width, $font-size);
-
-  // Colour of chevron
-  $chevron-border-colour: govuk-functional-colour(secondary-text);
-
-  // Calculated altitude (△↕) of the right-angled isosceles chevron with sides
-  // of length 8 (7px + 1px border):
-  //
-  // √(8² + 8²) * 0.5 ≅ 5.655
-  $chevron-altitude-calculated: govuk-em(5.655px, $font-size);
-
-  .govuk-breadcrumbs {
-    @include govuk-font($size: $font-size);
-
-    margin-top: govuk-spacing(3);
-    margin-bottom: govuk-spacing(2);
-    color: govuk-functional-colour(text);
-  }
-
-  .govuk-breadcrumbs__list {
-    @include govuk-clearfix;
-
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-  }
-
-  .govuk-breadcrumbs__list-item {
-    display: inline-block;
-    position: relative;
-
-    margin-bottom: govuk-spacing(1);
-
-    // Add both margin and padding such that the chevron appears centrally
-    // between each breadcrumb item
-    margin-left: govuk-em(govuk-spacing(2), $font-size);
-    padding-left: govuk-em(govuk-spacing(2), $font-size) + $chevron-altitude-calculated;
-
-    float: left;
-
-    // Create a chevron using a box with borders on two sides, rotated 45deg.
-    &::before {
-      content: "";
-      display: block;
-
-      position: absolute;
-      top: 0;
-      bottom: 0;
-
-      // Offset by the difference between the width of the non-rotated square
-      // and its width when rotated
-      left: (($chevron-altitude-calculated * -2) + $chevron-size + $chevron-border-width);
-
-      width: $chevron-size;
-      height: $chevron-size;
-
-      margin: auto 0;
-
-      transform: rotate(45deg);
-
-      border: solid;
-      border-width: $chevron-border-min-width $chevron-border-min-width 0 0;
-      border-color: $chevron-border-colour;
-
-      @supports (border-width: string.unquote("max(0px)")) {
-        $border-width-eval: "max(#{$chevron-border-min-width}, #{$chevron-border-width})";
-
-        // Ensure that the chevron never gets smaller than 16px
-        border-width: string.unquote($border-width-eval) string.unquote($border-width-eval) 0 0;
-        font-size: string.unquote("max(#{$font-size * 1px}, 1em)");
-      }
-    }
-
-    &:first-child {
-      margin-left: 0;
-      padding-left: 0;
-
-      &::before {
-        content: none;
-        display: none;
-      }
-    }
-  }
-
-  .govuk-breadcrumbs__link {
-    @include govuk-link-common;
-    @include govuk-link-style-text;
-  }
-
-  .govuk-breadcrumbs--collapse-on-mobile {
-    @media #{govuk-until-breakpoint(tablet)} {
-      .govuk-breadcrumbs__list-item {
-        display: none;
-
-        &:first-child,
-        &:last-child {
-          display: inline-block;
-        }
-
-        &::before {
-          top: govuk-em(6px, $font-size);
-          margin: 0;
-        }
-      }
-
-      .govuk-breadcrumbs__list {
-        display: flex;
-      }
-    }
-  }
-
-  .govuk-breadcrumbs--inverse {
-    color: govuk-colour("white");
-
-    .govuk-breadcrumbs__link {
-      @include govuk-link-style-inverse;
-    }
-
-    .govuk-breadcrumbs__list-item::before {
-      border-color: currentcolor;
-    }
-  }
-}
-
-/*# sourceMappingURL=_index.scss.map */

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

@@ -0,0 +1,138 @@
+@use "sass:string";
+
+@use "../../base";
+
+/// @access private
+@mixin styles {
+  // Component font-size on the Frontend (used for calculations)
+  $font-size: 16;
+
+  // Size of chevron (excluding border)
+  $chevron-size: base.govuk-em(7px, $font-size);
+
+  // Size of chevron border
+  $chevron-border-min-width: 1px;
+  $chevron-border-width: base.govuk-em($chevron-border-min-width, $font-size);
+
+  // Colour of chevron
+  $chevron-border-colour: base.govuk-functional-colour(secondary-text);
+
+  // Calculated altitude (△↕) of the right-angled isosceles chevron with sides
+  // of length 8 (7px + 1px border):
+  //
+  // √(8² + 8²) * 0.5 ≅ 5.655
+  $chevron-altitude-calculated: base.govuk-em(5.655px, $font-size);
+
+  .govuk-breadcrumbs {
+    @include base.govuk-font($size: $font-size);
+
+    margin-top: base.govuk-spacing(3);
+    margin-bottom: base.govuk-spacing(2);
+    color: base.govuk-functional-colour(text);
+  }
+
+  .govuk-breadcrumbs__list {
+    @include base.govuk-clearfix;
+
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+
+  .govuk-breadcrumbs__list-item {
+    display: inline-block;
+    position: relative;
+
+    margin-bottom: base.govuk-spacing(1);
+
+    // Add both margin and padding such that the chevron appears centrally
+    // between each breadcrumb item
+    margin-left: base.govuk-em(base.govuk-spacing(2), $font-size);
+    padding-left: base.govuk-em(base.govuk-spacing(2), $font-size) + $chevron-altitude-calculated;
+
+    float: left;
+
+    // Create a chevron using a box with borders on two sides, rotated 45deg.
+    &::before {
+      content: "";
+      display: block;
+
+      position: absolute;
+      top: 0;
+      bottom: 0;
+
+      // Offset by the difference between the width of the non-rotated square
+      // and its width when rotated
+      left: (($chevron-altitude-calculated * -2) + $chevron-size + $chevron-border-width);
+
+      width: $chevron-size;
+      height: $chevron-size;
+
+      margin: auto 0;
+
+      transform: rotate(45deg);
+
+      border: solid;
+      border-width: $chevron-border-min-width $chevron-border-min-width 0 0;
+      border-color: $chevron-border-colour;
+
+      @supports (border-width: string.unquote("max(0px)")) {
+        $border-width-eval: "max(#{$chevron-border-min-width}, #{$chevron-border-width})";
+
+        // Ensure that the chevron never gets smaller than 16px
+        border-width: string.unquote($border-width-eval) string.unquote($border-width-eval) 0 0;
+        font-size: string.unquote("max(#{$font-size * 1px}, 1em)");
+      }
+    }
+
+    &:first-child {
+      margin-left: 0;
+      padding-left: 0;
+
+      &::before {
+        content: none;
+        display: none;
+      }
+    }
+  }
+
+  .govuk-breadcrumbs__link {
+    @include base.govuk-link-common;
+    @include base.govuk-link-style-text;
+  }
+
+  .govuk-breadcrumbs--collapse-on-mobile {
+    @media #{base.govuk-until-breakpoint(tablet)} {
+      .govuk-breadcrumbs__list-item {
+        display: none;
+
+        &:first-child,
+        &:last-child {
+          display: inline-block;
+        }
+
+        &::before {
+          top: base.govuk-em(6px, $font-size);
+          margin: 0;
+        }
+      }
+
+      .govuk-breadcrumbs__list {
+        display: flex;
+      }
+    }
+  }
+
+  .govuk-breadcrumbs--inverse {
+    color: base.govuk-colour("white");
+
+    .govuk-breadcrumbs__link {
+      @include base.govuk-link-style-inverse;
+    }
+
+    .govuk-breadcrumbs__list-item::before {
+      border-color: currentcolor;
+    }
+  }
+}
+

data/node_modules/govuk-frontend/dist/govuk/components/button/_button.import.scss

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

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

@@ -0,0 +1,13 @@
+@use "mixin";
+
+@import "../../base";
+
+@include govuk-exports("govuk/component/button") {
+  @include mixin.styles(
+    $background-colour: $govuk-button-background-colour,
+    $text-colour: $govuk-button-text-colour,
+    $inverse-background-colour: $govuk-inverse-button-background-colour,
+    $inverse-text-colour: $govuk-inverse-button-text-colour
+  );
+}
+

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

@@ -1,261 +1,11 @@
-////
-/// @group components/button
-////
+@use "../../base";
+@use "../../custom-properties";
+@use "mixin";
 
-@import "../../base";
+@include mixin.styles(
+  $background-colour: base.$govuk-button-background-colour,
+  $text-colour: base.$govuk-button-text-colour,
+  $inverse-background-colour: base.$govuk-inverse-button-background-colour,
+  $inverse-text-colour: base.$govuk-inverse-button-text-colour
+);
 
-/// Button component background colour
-///
-/// @type Colour
-/// @access public
-
-$govuk-button-background-colour: govuk-colour("green") !default;
-
-/// Button component text colour
-///
-/// @type Colour
-/// @access public
-
-$govuk-button-text-colour: govuk-colour("white") !default;
-
-/// Inverted button component background colour
-///
-/// @type Colour
-/// @access public
-
-$govuk-inverse-button-background-colour: govuk-colour("white") !default;
-
-/// Inverted button component text colour
-///
-/// @type Colour
-/// @access public
-
-$govuk-inverse-button-text-colour: govuk-functional-colour(brand) !default;
-
-@include govuk-exports("govuk/component/button") {
-  $govuk-button-colour: $govuk-button-background-colour;
-  $govuk-button-text-colour: $govuk-button-text-colour;
-  $govuk-button-hover-colour: govuk-colour("green", $variant: "shade-25");
-  $govuk-button-shadow-colour: govuk-colour("green", $variant: "shade-50");
-
-  // Secondary button variables
-  $govuk-secondary-button-colour: govuk-colour("black", $variant: "tint-95");
-  $govuk-secondary-button-text-colour: govuk-colour("black");
-  $govuk-secondary-button-hover-colour: govuk-colour("black", $variant: "tint-80");
-  $govuk-secondary-button-shadow-colour: govuk-colour("black", $variant: "tint-50");
-
-  // Warning button variables
-  $govuk-warning-button-colour: govuk-colour("red");
-  $govuk-warning-button-text-colour: govuk-colour("white");
-  $govuk-warning-button-hover-colour: govuk-colour("red", $variant: "shade-25");
-  $govuk-warning-button-shadow-colour: govuk-colour("red", $variant: "shade-50");
-
-  // Inverse button variables
-  $govuk-inverse-button-colour: $govuk-inverse-button-background-colour;
-  $govuk-inverse-button-text-colour: $govuk-inverse-button-text-colour;
-  $govuk-inverse-button-hover-colour: govuk-colour("blue", $variant: "tint-95");
-  $govuk-inverse-button-shadow-colour: govuk-colour("blue", $variant: "shade-50");
-
-  // Because the shadow (s0) is visually 'part of' the button, we need to reduce
-  // the height of the button to compensate by adjusting its padding (s1) and
-  // increase the bottom margin to include it (s2).
-  $button-shadow-size: $govuk-border-width-form-element;
-
-  .govuk-button {
-    @include govuk-font($size: 19, $line-height: 19px);
-
-    box-sizing: border-box;
-    display: inline-block;
-    position: relative;
-    width: 100%;
-    margin-top: 0;
-    margin-right: 0;
-    margin-left: 0;
-    @include govuk-responsive-margin(6, "bottom", $adjustment: $button-shadow-size); // s2
-    padding: (govuk-spacing(2) - $govuk-border-width-form-element) govuk-spacing(2)
-      (govuk-spacing(2) - $govuk-border-width-form-element - ($button-shadow-size * 0.5)); // s1
-    border: $govuk-border-width-form-element solid transparent;
-    border-radius: 0;
-    color: $govuk-button-text-colour;
-    background-color: $govuk-button-colour;
-    box-shadow: 0 $button-shadow-size 0 $govuk-button-shadow-colour; // s0
-    text-align: center;
-    vertical-align: top;
-    cursor: pointer;
-    -webkit-appearance: none;
-
-    @media #{govuk-from-breakpoint(tablet)} {
-      width: auto;
-    }
-
-    // Ensure that any global link styles are overridden
-    &:link,
-    &:visited,
-    &:active,
-    &:hover {
-      color: $govuk-button-text-colour;
-      text-decoration: none;
-    }
-
-    // Fix unwanted button padding in Firefox
-    &::-moz-focus-inner {
-      padding: 0;
-      border: 0;
-    }
-
-    &:hover {
-      background-color: $govuk-button-hover-colour;
-    }
-
-    &:active {
-      // Bump the button down so it looks like its being pressed in
-      top: $button-shadow-size;
-    }
-
-    &:focus {
-      border-color: govuk-functional-colour(focus);
-      outline: $govuk-focus-width solid transparent;
-      box-shadow: inset 0 0 0 1px govuk-functional-colour(focus);
-    }
-
-    &:focus:not(:active):not(:hover) {
-      border-color: govuk-functional-colour(focus);
-      color: govuk-functional-colour(focus-text);
-      background-color: govuk-functional-colour(focus);
-      box-shadow: 0 2px 0 govuk-functional-colour(focus-text);
-    }
-
-    // Use a pseudo element to expand the click target area to include the
-    // button's shadow as well, in case users try to click it.
-    &::before {
-      content: "";
-      display: block;
-
-      position: absolute;
-
-      top: -$govuk-border-width-form-element;
-      right: -$govuk-border-width-form-element;
-      bottom: -($govuk-border-width-form-element + $button-shadow-size);
-      left: -$govuk-border-width-form-element;
-
-      background: transparent;
-    }
-
-    // When the button is active it is shifted down by $button-shadow-size to
-    // denote a 'pressed' state. If the user happened to click at the very top
-    // of the button, their mouse is no longer over the button (because it has
-    // 'moved beneath them') and so the click event is not fired.
-    //
-    // This corrects that by shifting the top of the pseudo element so that it
-    // continues to cover the area that the user originally clicked, which means
-    // the click event is still fired.
-    //
-    // 🎉
-    &:active::before {
-      top: -($govuk-border-width-form-element + $button-shadow-size);
-    }
-  }
-
-  .govuk-button[disabled] {
-    opacity: (0.5);
-
-    &:hover {
-      background-color: $govuk-button-colour;
-      cursor: not-allowed;
-    }
-
-    &:active {
-      top: 0;
-      box-shadow: 0 $button-shadow-size 0 $govuk-button-shadow-colour; // s0
-    }
-  }
-
-  .govuk-button--secondary {
-    background-color: $govuk-secondary-button-colour;
-    box-shadow: 0 $button-shadow-size 0 $govuk-secondary-button-shadow-colour;
-
-    &,
-    &:link,
-    &:visited,
-    &:active,
-    &:hover {
-      color: $govuk-secondary-button-text-colour;
-    }
-
-    &:hover {
-      background-color: $govuk-secondary-button-hover-colour;
-
-      &[disabled] {
-        background-color: $govuk-secondary-button-colour;
-      }
-    }
-  }
-
-  .govuk-button--warning {
-    background-color: $govuk-warning-button-colour;
-    box-shadow: 0 $button-shadow-size 0 $govuk-warning-button-shadow-colour;
-
-    &,
-    &:link,
-    &:visited,
-    &:active,
-    &:hover {
-      color: $govuk-warning-button-text-colour;
-    }
-
-    &:hover {
-      background-color: $govuk-warning-button-hover-colour;
-
-      &[disabled] {
-        background-color: $govuk-warning-button-colour;
-      }
-    }
-  }
-
-  .govuk-button--inverse {
-    background-color: $govuk-inverse-button-colour;
-    box-shadow: 0 $button-shadow-size 0 $govuk-inverse-button-shadow-colour;
-
-    &,
-    &:link,
-    &:visited,
-    &:active,
-    &:hover {
-      color: $govuk-inverse-button-text-colour;
-    }
-
-    &:hover {
-      background-color: $govuk-inverse-button-hover-colour;
-
-      &[disabled] {
-        background-color: $govuk-inverse-button-colour;
-      }
-    }
-  }
-
-  .govuk-button--start {
-    @include govuk-typography-weight-bold;
-    @include govuk-font-size($size: 24, $line-height: 1);
-
-    display: inline-flex;
-    min-height: auto;
-
-    justify-content: center;
-  }
-
-  .govuk-button__start-icon {
-    margin-left: govuk-spacing(1);
-
-    @media #{govuk-from-breakpoint(desktop)} {
-      margin-left: govuk-spacing(2);
-    }
-    vertical-align: middle;
-    flex-shrink: 0;
-    align-self: center;
-    // Work around SVGs not inheriting color from parent in forced color mode
-    // (https://github.com/w3c/csswg-drafts/issues/6310)
-    forced-color-adjust: auto;
-  }
-}
-
-/*# sourceMappingURL=_index.scss.map */