govuk_tech_docs 6.3.0.beta → 6.3.0

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

@@ -0,0 +1,31 @@
+@use "../../base";
+
+/// @access private
+@mixin styles {
+  .govuk-inset-text {
+    @include base.govuk-font($size: 19);
+
+    padding: base.govuk-spacing(3);
+
+    // Margin top intended to collapse
+    // This adds an additional 10px to the paragraph above
+    @include base.govuk-responsive-margin(6, "top");
+    @include base.govuk-responsive-margin(6, "bottom");
+
+    clear: both;
+
+    border-left: base.$govuk-border-width-wide solid;
+    border-left-color: base.govuk-functional-colour(border);
+    color: base.govuk-functional-colour(text);
+
+    > :first-child {
+      margin-top: 0;
+    }
+
+    > :only-child,
+    > :last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+

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

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

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

@@ -1,48 +1,5 @@
-@import "../../base";
+@use "../../custom-properties";
+@use "mixin";
 
-@include govuk-exports("govuk/component/label") {
-  .govuk-label {
-    @include govuk-font($size: 19);
+@include mixin.styles;
 
-    display: block;
-
-    margin-bottom: govuk-spacing(1);
-    color: govuk-functional-colour(text);
-  }
-
-  // Modifiers that make labels look more like their equivalent headings
-  .govuk-label--xl,
-  .govuk-label--l,
-  .govuk-label--m {
-    @include govuk-typography-weight-bold;
-    margin-bottom: govuk-spacing(3);
-  }
-
-  .govuk-label--xl {
-    @include govuk-font-size($size: 48);
-  }
-
-  .govuk-label--l {
-    @include govuk-font-size($size: 36);
-  }
-
-  .govuk-label--m {
-    @include govuk-font-size($size: 24);
-  }
-
-  .govuk-label--s {
-    @include govuk-typography-weight-bold;
-  }
-
-  // When the label is nested inside a heading, override the heading so that it
-  // does not have a margin. Effectively we want to be able to treat the heading
-  // as if it is not there.
-  //
-  // This breaks BEM conventions because it exists as a parent of the 'block',
-  // so we can't really consider an element.
-  .govuk-label-wrapper {
-    margin: 0;
-  }
-}
-
-/*# sourceMappingURL=_index.scss.map */

data/node_modules/govuk-frontend/dist/govuk/components/label/_label.import.scss

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

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

@@ -0,0 +1,48 @@
+@use "../../base";
+
+/// @access private
+@mixin styles {
+  .govuk-label {
+    @include base.govuk-font($size: 19);
+
+    display: block;
+
+    margin-bottom: base.govuk-spacing(1);
+    color: base.govuk-functional-colour(text);
+  }
+
+  // Modifiers that make labels look more like their equivalent headings
+  .govuk-label--xl,
+  .govuk-label--l,
+  .govuk-label--m {
+    @include base.govuk-typography-weight-bold;
+    margin-bottom: base.govuk-spacing(3);
+  }
+
+  .govuk-label--xl {
+    @include base.govuk-font-size($size: 48);
+  }
+
+  .govuk-label--l {
+    @include base.govuk-font-size($size: 36);
+  }
+
+  .govuk-label--m {
+    @include base.govuk-font-size($size: 24);
+  }
+
+  .govuk-label--s {
+    @include base.govuk-typography-weight-bold;
+  }
+
+  // When the label is nested inside a heading, override the heading so that it
+  // does not have a margin. Effectively we want to be able to treat the heading
+  // as if it is not there.
+  //
+  // This breaks BEM conventions because it exists as a parent of the 'block',
+  // so we can't really consider an element.
+  .govuk-label-wrapper {
+    margin: 0;
+  }
+}
+

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

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

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

@@ -1,99 +1,5 @@
-@use "sass:math";
+@use "../../custom-properties";
+@use "mixin";
 
-@import "../../base";
+@include mixin.styles;
 
-@include govuk-exports("govuk/component/notification-banner") {
-  .govuk-notification-banner {
-    @include govuk-font($size: 19);
-    @include govuk-responsive-margin(8, "bottom");
-
-    border: $govuk-border-width solid;
-    border-color: govuk-functional-colour(brand);
-
-    background-color: govuk-functional-colour(brand);
-
-    &:focus {
-      outline: $govuk-focus-width solid;
-      outline-color: govuk-functional-colour(focus);
-    }
-  }
-
-  .govuk-notification-banner__header {
-    padding: 2px govuk-spacing(3) govuk-spacing(1);
-
-    // Ensures the notification header appears separate to the notification body
-    // text in high contrast mode
-    border-bottom: 1px solid transparent;
-
-    @media #{govuk-from-breakpoint(tablet)} {
-      padding: 2px govuk-spacing(4) govuk-spacing(1);
-    }
-  }
-
-  .govuk-notification-banner__title {
-    // Set the size again because this element is a heading and the user agent
-    // font size overrides the inherited font size
-    @include govuk-font-size($size: 19);
-    @include govuk-typography-weight-bold;
-    margin: 0;
-    padding: 0;
-    color: govuk-colour("white");
-  }
-
-  .govuk-notification-banner__content {
-    $padding-tablet: govuk-spacing(4);
-    padding: govuk-spacing(3);
-
-    color: govuk-functional-colour(text);
-    background-color: govuk-functional-colour(body-background);
-
-    @media #{govuk-from-breakpoint(tablet)} {
-      padding: $padding-tablet;
-    }
-
-    // Wrap content at the same place that a 2/3 grid column ends, to maintain
-    // shorter line-lengths when the notification banner is full width
-    > * {
-      // When elements have their own padding (like lists), include the padding
-      // in the max-width calculation
-      box-sizing: border-box;
-
-      // Calculate the internal width of a two-thirds column...
-      $two-col-width: math.div($govuk-page-width * 2, 3) - math.div($govuk-gutter * 1, 3);
-
-      // ...and then factor in the left border and padding
-      $banner-exterior: ($padding-tablet + $govuk-border-width);
-      max-width: $two-col-width - $banner-exterior;
-    }
-
-    > :last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  .govuk-notification-banner__heading {
-    @include govuk-font-size($size: 24);
-    @include govuk-typography-weight-bold;
-
-    margin: 0 0 govuk-spacing(3);
-
-    padding: 0;
-  }
-
-  .govuk-notification-banner__link {
-    @include govuk-link-common;
-    @include govuk-link-style-no-visited-state;
-  }
-
-  .govuk-notification-banner--success {
-    border-color: govuk-functional-colour(success);
-
-    background-color: govuk-functional-colour(success);
-
-    .govuk-notification-banner__link {
-      @include govuk-link-style-success;
-    }
-  }
-}
-
-/*# sourceMappingURL=_index.scss.map */

data/node_modules/govuk-frontend/dist/govuk/components/notification-banner/_mixin.scss

@@ -0,0 +1,99 @@
+@use "sass:math";
+
+@use "../../base";
+
+/// @access private
+@mixin styles {
+  .govuk-notification-banner {
+    @include base.govuk-font($size: 19);
+    @include base.govuk-responsive-margin(8, "bottom");
+
+    border: base.$govuk-border-width solid;
+    border-color: base.govuk-functional-colour(brand);
+
+    background-color: base.govuk-functional-colour(brand);
+
+    &:focus {
+      outline: base.$govuk-focus-width solid;
+      outline-color: base.govuk-functional-colour(focus);
+    }
+  }
+
+  .govuk-notification-banner__header {
+    padding: 2px base.govuk-spacing(3) base.govuk-spacing(1);
+
+    // Ensures the notification header appears separate to the notification body
+    // text in high contrast mode
+    border-bottom: 1px solid transparent;
+
+    @media #{base.govuk-from-breakpoint(tablet)} {
+      padding: 2px base.govuk-spacing(4) base.govuk-spacing(1);
+    }
+  }
+
+  .govuk-notification-banner__title {
+    // Set the size again because this element is a heading and the user agent
+    // font size overrides the inherited font size
+    @include base.govuk-font-size($size: 19);
+    @include base.govuk-typography-weight-bold;
+    margin: 0;
+    padding: 0;
+    color: base.govuk-colour("white");
+  }
+
+  .govuk-notification-banner__content {
+    $padding-tablet: base.govuk-spacing(4);
+    padding: base.govuk-spacing(3);
+
+    color: base.govuk-functional-colour(text);
+    background-color: base.govuk-functional-colour(body-background);
+
+    @media #{base.govuk-from-breakpoint(tablet)} {
+      padding: $padding-tablet;
+    }
+
+    // Wrap content at the same place that a 2/3 grid column ends, to maintain
+    // shorter line-lengths when the notification banner is full width
+    > * {
+      // When elements have their own padding (like lists), include the padding
+      // in the max-width calculation
+      box-sizing: border-box;
+
+      // Calculate the internal width of a two-thirds column...
+      $two-col-width: math.div(base.$govuk-page-width * 2, 3) - math.div(base.$govuk-gutter * 1, 3);
+
+      // ...and then factor in the left border and padding
+      $banner-exterior: ($padding-tablet + base.$govuk-border-width);
+      max-width: $two-col-width - $banner-exterior;
+    }
+
+    > :last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .govuk-notification-banner__heading {
+    @include base.govuk-font-size($size: 24);
+    @include base.govuk-typography-weight-bold;
+
+    margin: 0 0 base.govuk-spacing(3);
+
+    padding: 0;
+  }
+
+  .govuk-notification-banner__link {
+    @include base.govuk-link-common;
+    @include base.govuk-link-style-no-visited-state;
+  }
+
+  .govuk-notification-banner--success {
+    border-color: base.govuk-functional-colour(success);
+
+    background-color: base.govuk-functional-colour(success);
+
+    .govuk-notification-banner__link {
+      @include base.govuk-link-style-success;
+    }
+  }
+}
+

data/node_modules/govuk-frontend/dist/govuk/components/notification-banner/_notification-banner.import.scss

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

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

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

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

@@ -1,235 +1,5 @@
-@import "../../base";
+@use "../../custom-properties";
+@use "mixin";
 
-@include govuk-exports("govuk/component/pagination") {
-  // Flexbox enhancement for small screen visual design
-  // Falls back to a float: left layout on non-flex browsers
-  .govuk-pagination {
-    @include govuk-responsive-margin(6, "bottom");
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    flex-wrap: wrap;
+@include mixin.styles;
 
-    @media #{govuk-from-breakpoint(tablet)} {
-      flex-direction: row;
-      align-items: flex-start;
-    }
-  }
-
-  .govuk-pagination__list {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-  }
-
-  .govuk-pagination__item,
-  .govuk-pagination__next,
-  .govuk-pagination__prev {
-    @include govuk-font(19);
-    box-sizing: border-box;
-    position: relative;
-    min-width: 45px;
-    min-height: 45px;
-    padding: govuk-spacing(2) govuk-spacing(3);
-    float: left; // Float is ignored if flex is active for prev/next links
-
-    &:hover {
-      background-color: govuk-colour("black", $variant: "tint-95");
-    }
-  }
-
-  .govuk-pagination__item {
-    // Hide items on small screens except the prev/next items,
-    // non-link items and the first and last items
-    display: none;
-
-    // Center align pagination links in their parent list item so that they
-    // visually sit in the middle of their touch area
-    text-align: center;
-
-    @media #{govuk-from-breakpoint(tablet)} {
-      display: block;
-    }
-  }
-
-  .govuk-pagination__prev,
-  .govuk-pagination__next {
-    @include govuk-typography-weight-bold;
-
-    // Use flex to avoid extra space being introduced when whitespace exists
-    // between the arrow svg and the link text
-    .govuk-pagination__link {
-      display: flex;
-      align-items: center;
-    }
-  }
-
-  .govuk-pagination__prev {
-    padding-left: 0;
-  }
-
-  .govuk-pagination__next {
-    padding-right: 0;
-  }
-
-  // Only show first, last and non-link items on mobile
-  .govuk-pagination__item--current,
-  .govuk-pagination__item--ellipsis,
-  .govuk-pagination__item:first-child,
-  .govuk-pagination__item:last-child {
-    display: block;
-  }
-
-  .govuk-pagination__item--current {
-    @include govuk-typography-weight-bold;
-    outline: 1px solid transparent;
-    background-color: govuk-functional-colour(link);
-
-    &:hover {
-      background-color: govuk-functional-colour(link);
-    }
-
-    .govuk-pagination__link {
-      @include govuk-link-style-inverse;
-    }
-  }
-
-  .govuk-pagination__item--ellipsis {
-    @include govuk-typography-weight-bold;
-    color: govuk-functional-colour(secondary-text);
-
-    // Remove hover state for ellipsis items as they don't contain links
-    &:hover {
-      background-color: transparent;
-    }
-  }
-
-  .govuk-pagination__link {
-    display: block;
-    min-width: govuk-spacing(3);
-
-    // Increase the touch area for the link to the parent element.
-    @media screen {
-      &::after {
-        content: "";
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-      }
-    }
-
-    // Add link hover decoration to prev/next text if no label present on
-    // prev/next only mode,  so that we have a hover state in all cases
-    &:hover,
-    &:active {
-      .govuk-pagination__link-title--decorated {
-        @include govuk-link-decoration;
-      }
-
-      .govuk-pagination__link-label,
-      .govuk-pagination__link-title--decorated {
-        @include govuk-link-hover-decoration;
-      }
-    }
-
-    &:focus {
-      .govuk-pagination__icon {
-        color: govuk-functional-colour(focus-text);
-      }
-
-      .govuk-pagination__link-label {
-        text-decoration: none;
-      }
-
-      .govuk-pagination__link-title--decorated {
-        text-decoration: none;
-      }
-    }
-  }
-
-  .govuk-pagination__link-title {
-    text-decoration-thickness: inherit;
-  }
-
-  .govuk-pagination__link-label {
-    @include govuk-typography-weight-regular;
-    @include govuk-link-decoration;
-    display: inline-block;
-  }
-
-  .govuk-pagination__icon {
-    // Set size using rems to make the icon scale with text
-    width: govuk-px-to-rem(15px);
-    height: govuk-px-to-rem(13px);
-    color: govuk-functional-colour(secondary-text);
-    fill: currentcolor;
-    forced-color-adjust: auto;
-  }
-
-  .govuk-pagination__icon--prev {
-    margin-right: govuk-spacing(3);
-  }
-
-  .govuk-pagination__icon--next {
-    margin-left: govuk-spacing(3);
-  }
-
-  // Block mode - position previous and next links above and below numbers
-  .govuk-pagination--block {
-    display: block;
-
-    .govuk-pagination__next,
-    .govuk-pagination__prev {
-      padding-left: 0;
-      float: none;
-
-      .govuk-pagination__link {
-        display: inline-block;
-      }
-    }
-
-    .govuk-pagination__next {
-      padding-right: govuk-spacing(3);
-    }
-
-    // Only apply a border between prev and next if both are present
-    .govuk-pagination__prev + .govuk-pagination__next {
-      border-top: 1px solid;
-      border-top-color: govuk-functional-colour(border);
-    }
-
-    // Set the after pseudo element to a block which makes the title visually
-    // display as block level whilst programmatically being inline. We do this
-    // to get around an NVDA quirk where adjacent block level elements are
-    // always read out separately
-    .govuk-pagination__link-title::after {
-      content: "";
-      display: block;
-    }
-
-    .govuk-pagination__link {
-      padding-left: govuk-spacing(6);
-      text-align: left;
-
-      &:not(:focus) {
-        text-decoration: none;
-      }
-    }
-
-    .govuk-pagination__icon {
-      // This magic number is brought to you by the following equation:
-      // ((lineHeight − arrowHeight) ÷ 2) ÷ fontSize
-      // ((25 − 13) ÷ 2) ÷ 19 = 0.326em
-      //
-      // This could have been done programmatically but we don't have functions
-      // for grabbing the line-height of specific typography sizes just yet.
-      margin-top: 0.326em;
-      margin-left: govuk-spacing(6) * -1;
-      float: left;
-    }
-  }
-}
-
-/*# sourceMappingURL=_index.scss.map */