govuk_publishing_components 9.3.6 → 9.4.0

data/node_modules/govuk-frontend/helpers/_typography.scss

@@ -0,0 +1,153 @@
+////
+/// @group helpers
+////
+
+/// 'Common typography' helper
+///
+/// Sets the font family and associated properties, such as font smoothing. Also
+/// overrides the font for print.
+///
+/// @param {List} $font-family [$govuk-font-family] Font family to use
+/// @access public
+
+@mixin govuk-typography-common($font-family: $govuk-font-family) {
+  font-family: $font-family;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  // If using NTA, include the font-face definition
+  @if ($govuk-font-family == $govuk-font-family-nta) {
+    @include _govuk-font-face-nta;
+  }
+
+  @include govuk-media-query($media-type: print) {
+    font-family: $govuk-font-family-print;
+  }
+}
+
+/// Text colour helper
+///
+/// Sets the text colour, including a suitable override for print.
+///
+/// @access public
+
+@mixin govuk-text-colour {
+  color: $govuk-text-colour;
+
+  @include govuk-media-query($media-type: print) {
+    color: $govuk-print-text-colour;
+  }
+}
+
+/// Regular font weight helper
+///
+/// @param {Boolean} $important [false] - Whether to mark declarations as
+///   `!important`. Generally Used to create override classes.
+/// @access public
+
+@mixin govuk-typography-weight-regular($important: false) {
+  font-weight: $govuk-font-weight-regular iff($important, !important);
+}
+
+/// Bold font weight helper
+///
+/// @param {Boolean} $important [false] - Whether to mark declarations as
+///   `!important`. Generally Used to create override classes.
+/// @access public
+
+@mixin govuk-typography-weight-bold($important: false) {
+  font-weight: $govuk-font-weight-bold iff($important, !important);
+}
+
+/// Responsive typography helper
+///
+/// Takes a 'font map' as an argument and uses it to create font-size and
+/// line-height declarations for different breakpoints, and for print.
+///
+/// Example font map:
+///
+/// $my-font-map: (
+///   null: (
+///     font-size: 16px,
+///     line-height: 20px
+///   ),
+///   tablet: (
+///     font-size: 19px,
+///     line-height: 25px
+///   ),
+///   print: (
+///     font-size: 14pt,
+///     line-height: 1.15
+///   )
+/// );
+///
+/// @param {Map} $font-map - Font map
+/// @param {Number} $override-line-height [false] - Non responsive custom line
+///   height. Omit to use the line height from the font map.
+/// @param {Boolean} $important [false] - Whether to mark declarations as
+///   `!important`.
+///
+/// @access public
+
+@mixin govuk-typography-responsive($size, $override-line-height: false, $important: false) {
+
+  @if not map-has-key($govuk-typography-scale, $size) {
+    @error "Unknown font size `#{$size}` - expected a point from the typography scale.";
+  }
+
+  $font-map: map-get($govuk-typography-scale, $size);
+
+  @each $breakpoint, $breakpoint-map in $font-map {
+    $font-size: map-get($breakpoint-map, "font-size") iff($important, !important);
+    $line-height: map-get($breakpoint-map, "line-height") iff($important, !important);
+
+    // Sometimes we need to use a custom non-responsive line height for
+    // a component.
+    @if $override-line-height {
+      $line-height: $override-line-height iff($important, !important);
+    }
+
+    @if $breakpoint == null {
+      font-size: $font-size;
+      line-height: $line-height;
+    } @elseif $breakpoint == "print" {
+      @include govuk-media-query($media-type: print) {
+        font-size: $font-size;
+        line-height: $line-height;
+      }
+    } @else {
+      @include govuk-media-query($from: $breakpoint) {
+        font-size: $font-size;
+        line-height: $line-height;
+      }
+    }
+  }
+}
+
+/// Font helper
+///
+/// @param {Number} $size - Size of the font as it would appear on desktop -
+///   uses the responsive font size map
+/// @param {String} $weight [regular] - Weight: `bold` or `regular`
+/// @param {Boolean} $tabular [false] - Whether to use tabular numbers or not
+/// @param {Number} $line-height [false] - Line-height, if overriding the default
+///
+/// @access public
+
+@mixin govuk-font($size, $weight: regular, $tabular: false, $line-height: false) {
+  @if $tabular {
+    @include govuk-typography-common($font-family: $govuk-font-family-tabular);
+  } @else {
+    @include govuk-typography-common;
+  }
+
+  @if $weight == regular {
+    @include govuk-typography-weight-regular;
+  } @else if $weight == bold {
+    @include govuk-typography-weight-bold;
+  }
+
+  @if $size {
+    @include govuk-typography-responsive($size, $override-line-height: $line-height);
+  }
+}

data/node_modules/govuk-frontend/helpers/_visually-hidden.scss

@@ -0,0 +1,76 @@
+////
+/// @group helpers
+////
+
+/// Hide an element visually, but have it available for screen readers
+///
+/// @link https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
+///   - Hiding Content for Accessibility, Jonathan Snook, February 2011
+/// @link https://github.com/h5bp/html5-boilerplate/blob/9f13695d21ff92c55c78dfa9f16bb02a1b6e911f/src/css/main.css#L121-L158
+///   - h5bp/html5-boilerplate - Thanks!
+///
+/// @access public
+
+@mixin govuk-visually-hidden {
+  position: absolute;
+
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  -webkit-clip-path: inset(50%);
+          clip-path: inset(50%);
+
+  border: 0;
+
+  // For long content, line feeds are not interpreted as spaces and small width
+  // causes content to wrap 1 word per line:
+  // https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
+  white-space: nowrap;
+}
+
+/// Hide an element visually, but have it available for screen readers whilst
+/// allowing the element to be focused when navigated to via the keyboard (e.g.
+/// for the skip link)
+///
+/// This is slightly less opinionated about borders and padding to make it
+/// easier to style the focussed element.
+///
+/// @access public
+
+@mixin govuk-visually-hidden-focusable {
+  position: absolute;
+
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  -webkit-clip-path: inset(50%);
+          clip-path: inset(50%);
+
+  // For long content, line feeds are not interpreted as spaces and small width
+  // causes content to wrap 1 word per line:
+  // https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
+  white-space: nowrap;
+
+  &:active,
+  &:focus {
+    position: static;
+
+    width: auto;
+    height: auto;
+    margin: inherit;
+
+    overflow: visible;
+    clip: auto;
+    -webkit-clip-path: none;
+            clip-path: none;
+
+    white-space: inherit;
+  }
+}

data/node_modules/govuk-frontend/objects/_all.scss

@@ -0,0 +1,4 @@
+@import "form-group";
+@import "grid";
+@import "main-wrapper";
+@import "width-container";

data/node_modules/govuk-frontend/objects/_form-group.scss

@@ -0,0 +1,21 @@
+@include govuk-exports("govuk/objects/form-group") {
+
+  .govuk-form-group {
+    @include govuk-responsive-margin(6, "bottom");
+
+    .govuk-form-group:last-of-type {
+      margin-bottom: 0; // Remove margin from last item in nested groups
+    }
+  }
+
+  .govuk-form-group--error {
+    padding-left: govuk-spacing(3);
+    border-left: $govuk-border-width-form-group-error solid $govuk-error-colour;
+
+    .govuk-form-group {
+      // Reset error styles in nested form groups that might have error class
+      padding: 0;
+      border: 0;
+    }
+  }
+}

data/node_modules/govuk-frontend/objects/_grid.scss

@@ -0,0 +1,10 @@
+@include govuk-exports("govuk/objects/grid") {
+  //most common usage
+  @include govuk-grid-row;
+  @include govuk-grid-column(one-quarter);
+  @include govuk-grid-column(one-third);
+  @include govuk-grid-column(one-half);
+  @include govuk-grid-column(two-thirds);
+  @include govuk-grid-column(three-quarters);
+  @include govuk-grid-column(full);
+}

data/node_modules/govuk-frontend/objects/_main-wrapper.scss

@@ -0,0 +1,37 @@
+// Example usage with Breadcrumbs, phase banners, back links:
+// <div class="govuk-width-container">
+//   <!-- Breadcrumbs, phase banners, back links are placed in here. -->
+//   <div class="govuk-main-wrapper">
+//       <!-- Wrapper for the main content of your page which applies padding
+//            to the top / bottom -->
+//   </div>
+// </div>
+//
+// Example usage without Breadcrumbs, phase banners, back links:
+// <div class="govuk-width-container">
+//   <div class="govuk-main-wrapper govuk-main-wrapper--l">
+//       <!-- Wrapper for the main content of your page which applies padding
+//            to the top / bottom -->
+//   </div>
+// </div>
+
+
+@mixin govuk-main-wrapper {
+  @include govuk-responsive-padding(6, "top");
+  @include govuk-responsive-padding(6, "bottom");
+}
+
+// Use govuk-main-wrapper--l when you page does not have Breadcrumbs, phase banners or back links
+@mixin govuk-main-wrapper--l {
+  @include govuk-responsive-padding(8, "top");
+}
+
+@include govuk-exports("govuk/objects/main-wrapper") {
+  .govuk-main-wrapper {
+    @include govuk-main-wrapper;
+  }
+
+  .govuk-main-wrapper--l {
+    @include govuk-main-wrapper--l;
+  }
+}

data/node_modules/govuk-frontend/objects/_width-container.scss

@@ -0,0 +1,28 @@
+@mixin govuk-width-container {
+  // Limit the width of the container to the page width
+  max-width: $govuk-page-width;
+
+  @include govuk-if-ie8 {
+    width: $govuk-page-width;
+  }
+
+  // On mobile, add half width gutters
+  margin: 0 $govuk-gutter-half;
+
+  // On tablet, add full width gutters
+  @include govuk-media-query($from: tablet) {
+    margin: 0 $govuk-gutter;
+  }
+
+  // As soon as the viewport is greater than the width of the page plus the
+  // gutters, just centre the content instead of adding gutters.
+  @include govuk-media-query($and: "(min-width: #{($govuk-page-width + $govuk-gutter * 2)})") {
+    margin: 0 auto;
+  }
+}
+
+@include govuk-exports("govuk/objects/width-container") {
+  .govuk-width-container {
+    @include govuk-width-container;
+  }
+}

data/node_modules/govuk-frontend/overrides/_all.scss

@@ -0,0 +1,4 @@
+@import "display";
+@import "spacing";
+@import "typography";
+@import "width";

data/node_modules/govuk-frontend/overrides/_display.scss

@@ -0,0 +1,14 @@
+@include govuk-exports("govuk/overrides/display") {
+
+  .govuk-\!-display-inline {
+    display: inline !important;
+  }
+
+  .govuk-\!-display-inline-block {
+    display: inline-block !important;
+  }
+
+  .govuk-\!-display-block {
+    display: block !important;
+  }
+}

data/node_modules/govuk-frontend/overrides/_spacing.scss

@@ -0,0 +1,58 @@
+////
+/// @group overrides
+////
+
+/// Directions for spacing
+///
+/// @type Map
+/// @access private
+
+$_spacing-directions: (
+  "top",
+  "right",
+  "bottom",
+  "left"
+) !default;
+
+/// Spacing override classes
+///
+/// Generate spacing override classes for the given property (e.g. margin)
+/// for each point in the spacing scale.
+///
+/// @param {String} $property - Property to add spacing to (e.g. 'margin')
+///
+/// @example scss
+///   .govuk-\!-margin-0 {
+///      margin: 0;
+///   }
+///
+///  .govuk-\!-margin-top-1 {
+///     margin-top: [whatever spacing point 1 is...]
+///   }
+///
+/// @access private
+
+@mixin _govuk-generate-spacing-overrides($property) {
+  // For each point in the spacing scale (defined in settings), create an
+  // override that affects all directions...
+  @each $scale-point, $scale-map in $govuk-spacing-responsive-scale {
+
+    .govuk-\!-#{$property}-#{$scale-point} {
+
+      @include _govuk-responsive-spacing($scale-point, $property, "all", true);
+    }
+
+    // ... and then an override for each individual direction
+    @each $direction in $_spacing-directions {
+
+      .govuk-\!-#{$property}-#{$direction}-#{$scale-point} {
+        @include _govuk-responsive-spacing($scale-point, $property, $direction, true);
+      }
+    }
+  }
+}
+
+@include govuk-exports("govuk/overrides/spacing") {
+  @include _govuk-generate-spacing-overrides("margin");
+  @include _govuk-generate-spacing-overrides("padding");
+}

data/node_modules/govuk-frontend/overrides/_typography.scss

@@ -0,0 +1,21 @@
+@include govuk-exports("govuk/overrides/typography") {
+  // Font size and line height
+
+  // Generate typography override classes for each responsive font map in the
+  // typography scale eg .govuk-\!-font-size-80
+  @each $size in map-keys($govuk-typography-scale) {
+    .govuk-\!-font-size-#{$size} {
+      @include govuk-typography-responsive($size, $important: true);
+    }
+  }
+
+  // Weights
+
+  .govuk-\!-font-weight-regular {
+    @include govuk-typography-weight-regular($important: true);
+  }
+
+  .govuk-\!-font-weight-bold {
+    @include govuk-typography-weight-bold($important: true);
+  }
+}

data/node_modules/govuk-frontend/overrides/_width.scss

@@ -0,0 +1,41 @@
+@include govuk-exports("govuk/overrides/width") {
+  .govuk-\!-width-three-quarters {
+    width: 100% !important;
+
+    @include govuk-media-query($from: tablet) {
+      width: 75% !important;
+    }
+  }
+
+  .govuk-\!-width-two-thirds {
+    width: 100% !important;
+
+    @include govuk-media-query($from: tablet) {
+      width: 66.66% !important;
+    }
+  }
+
+  .govuk-\!-width-one-half {
+    width: 100% !important;
+
+    @include govuk-media-query($from: tablet) {
+      width: 50% !important;
+    }
+  }
+
+  .govuk-\!-width-one-third {
+    width: 100% !important;
+
+    @include govuk-media-query($from: tablet) {
+      width: 33.33% !important;
+    }
+  }
+
+  .govuk-\!-width-one-quarter {
+    width: 100% !important;
+
+    @include govuk-media-query($from: tablet) {
+      width: 25% !important;
+    }
+  }
+}