govuk_tech_docs 2.2.0 → 2.4.0

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

@@ -1,5 +1,5 @@
 ////
-/// @group helpers
+/// @group helpers/layout
 ////
 
 /// Clear floated content within a container using a pseudo element

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

@@ -52,7 +52,7 @@
 ///   colour will be returned which meets contrast requirements . If you want to
 ///   use the non-websafe version you can set this to `false` but your should
 ///   ensure that you still meets contrast requirements for accessibility - for
-///   example, don't use the non-websafe version for text.
+///   example, do not use the non-websafe version for text.
 ///
 /// @return {Colour} Representation of colour for organisation
 /// @throw if `$organisation` is not a known organisation

data/node_modules/govuk-frontend/govuk/helpers/_device-pixels.scss

@@ -28,10 +28,10 @@
 /// @access public
 
 @mixin govuk-device-pixel-ratio($ratio: 2) {
+  // stylelint-disable indentation
   @media only screen and (-webkit-min-device-pixel-ratio: $ratio),
-    only screen and (     min-device-pixel-ratio: $ratio),
-    only screen and (             min-resolution: #{($ratio*96)}dpi),
-    only screen and (             min-resolution: #{$ratio}dppx) {
+    only screen and (min-resolution: #{($ratio * 96)}dpi),
+    only screen and (min-resolution: #{$ratio}dppx) {
       @content;
     }
 }

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

@@ -1,5 +1,5 @@
 ////
-/// @group helpers
+/// @group helpers/accessibility
 ////
 
 /// Focused text

data/node_modules/govuk-frontend/govuk/helpers/_font-faces.scss

@@ -2,9 +2,6 @@
 /// @group helpers
 ////
 
-// Disables linting for this file only
-// sass-lint:disable no-css-comments, no-duplicate-properties, property-sort-order, indentation
-
 @import "../tools/exports";
 
 /// Font Face - GDS Transport
@@ -18,23 +15,24 @@
   @include govuk-not-ie8 { // In IE8, which cannot render WOFF format, we fall back to system fonts
     @include govuk-exports("govuk/helpers/font-faces") {
       @at-root {
-        /*! Copyright (c) 2011 by Margaret Calvert & Henrik Kubel. All rights reserved. The font has been customised for exclusive use on gov.uk. This cut is not commercially available. */
-
+        /*! Copyright (c) 2011 by Margaret Calvert & Henrik Kubel. All rights reserved. The font has been customised for exclusive use on gov.uk. This cut is not commercially available. */ /* stylelint-disable-line scss/comment-no-loud  */
         @font-face {
           font-family: "GDS Transport";
-          src: govuk-font-url("light-94a07e06a1-v2.woff2") format("woff2"),
-               govuk-font-url("light-f591b13f7d-v2.woff") format("woff");
-          font-weight: normal;
           font-style: normal;
+          font-weight: normal;
+          src:
+            govuk-font-url("light-94a07e06a1-v2.woff2") format("woff2"),
+            govuk-font-url("light-f591b13f7d-v2.woff") format("woff");
           font-display: fallback;
         }
 
         @font-face {
           font-family: "GDS Transport";
-          src: govuk-font-url("bold-b542beb274-v2.woff2") format("woff2"),
-               govuk-font-url("bold-affa96571d-v2.woff") format("woff");
-          font-weight: bold;
           font-style: normal;
+          font-weight: bold;
+          src:
+            govuk-font-url("bold-b542beb274-v2.woff2") format("woff2"),
+            govuk-font-url("bold-affa96571d-v2.woff") format("woff");
           font-display: fallback;
         }
       }

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

@@ -1,5 +1,5 @@
 ////
-/// @group helpers
+/// @group helpers/layout
 ////
 
 /// Grid width percentage
@@ -44,6 +44,7 @@
 /// @example scss - Customising the float direction
 ///   .govuk-grid-column-one-half-right {
 ///     @include govuk-grid-column(two-thirds, $float: right);
+///   }
 ///
 /// @access public
 

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

@@ -1,8 +1,8 @@
 ////
-/// @group helpers
+/// @group helpers/links
 ////
 
-/// Common link mixin
+/// Common link styles
 ///
 /// Provides the typography and focus state, regardless of link style.
 ///
@@ -10,18 +10,63 @@
 
 @mixin govuk-link-common {
   @include govuk-typography-common;
+  @include govuk-link-decoration;
+
+  &:hover {
+    @include govuk-link-hover-decoration;
+  }
 
   &:focus {
     @include govuk-focused-text;
   }
 }
 
-/// Default link style mixin
+/// Link decoration
+///
+/// Provides the text decoration for links, including thickness and underline
+/// offset. Use this mixin only if you cannot use the `govuk-link-common` mixin.
+///
+/// @access public
+@mixin govuk-link-decoration {
+  text-decoration: underline;
+
+  @if ($govuk-new-link-styles) {
+    @if ($govuk-link-underline-thickness) {
+      text-decoration-thickness: $govuk-link-underline-thickness;
+    }
+
+    @if ($govuk-link-underline-offset) {
+      text-underline-offset: $govuk-link-underline-offset;
+    }
+  }
+}
+
+/// Link hover decoration
+///
+/// Provides the text decoration for links in their hover state, for you to use
+/// within a `:hover` pseudo-selector. Use this mixin only if you cannot use the
+/// `govuk-link-common` mixin.
+///
+/// @access public
+
+@mixin govuk-link-hover-decoration {
+  @if ($govuk-new-link-styles and $govuk-link-hover-underline-thickness) {
+    text-decoration-thickness: $govuk-link-hover-underline-thickness;
+    // Disable ink skipping on underlines on hover. Browsers haven't
+    // standardised on this part of the spec yet, so set both properties
+    -webkit-text-decoration-skip-ink: none;
+            text-decoration-skip-ink: none; // Chromium, Firefox
+    -webkit-text-decoration-skip: none;
+            text-decoration-skip: none; // Safari
+  }
+}
+
+/// Default link styles
 ///
-/// Provides the default unvisited, visited, hover and active states for links.
+/// Makes links use the default unvisited, visited, hover and active colours.
 ///
-/// If you use this mixin in a component you must also include the
-/// govuk-link-common mixin in order to get the focus state.
+/// If you use this mixin in a component, you must also include the
+/// `govuk-link-common` mixin to get the correct focus and hover states.
 ///
 /// @example scss
 ///   .govuk-component__link {
@@ -66,13 +111,109 @@
   }
 }
 
-/// Muted style link mixin
+/// Error link styles
+///
+/// Makes links use the error colour. The link will darken if it's active or a
+/// user hovers their cursor over it.
+///
+/// If you use this mixin in a component, you must also include the
+/// `govuk-link-common` mixin to get the correct focus and hover states.
+///
+/// @example scss
+///   .govuk-component__link {
+///     @include govuk-link-common;
+///     @include govuk-link-style-error;
+///   }
+///
+/// @access public
+
+@mixin govuk-link-style-error {
+  &:link,
+  &:visited {
+    color: $govuk-error-colour;
+  }
+
+  &:hover {
+    color: scale-color($govuk-error-colour, $lightness: -30%);
+  }
+
+  &:active {
+    color: $govuk-error-colour;
+  }
+
+  // When focussed, the text colour needs to be darker to ensure that colour
+  // contrast is still acceptable
+  &:focus {
+    color: $govuk-focus-text-colour;
+  }
+
+  // alphagov/govuk_template includes a specific a:link:focus selector
+  // designed to make unvisited link  s a slightly darker blue when focussed, so
+  // we need to override the text colour for that combination of selectors so
+  // so that unvisited links styled as buttons do not end up with dark blue
+  // text when focussed.
+  @include govuk-compatibility(govuk_template) {
+    &:link:focus {
+      color: $govuk-focus-text-colour;
+    }
+  }
+}
+
+/// Success link styles
+///
+/// Makes links use the success colour. The link will darken if it's active or a
+/// user hovers their cursor over it.
+///
+/// If you use this mixin in a component, you must also include the
+/// `govuk-link-common` mixin to get the correct focus and hover states.
+///
+/// @example scss
+///   .govuk-component__link {
+///     @include govuk-link-common;
+///     @include govuk-link-style-success;
+///   }
+///
+/// @access public
+
+@mixin govuk-link-style-success {
+  &:link,
+  &:visited {
+    color: $govuk-success-colour;
+  }
+
+  &:hover {
+    color: scale-color($govuk-success-colour, $lightness: -30%);
+  }
+
+  &:active {
+    color: $govuk-success-colour;
+  }
+
+  // When focussed, the text colour needs to be darker to ensure that colour
+  // contrast is still acceptable
+  &:focus {
+    color: $govuk-focus-text-colour;
+  }
+
+  // alphagov/govuk_template includes a specific a:link:focus selector
+  // designed to make unvisited link  s a slightly darker blue when focussed, so
+  // we need to override the text colour for that combination of selectors so
+  // so that unvisited links styled as buttons do not end up with dark blue
+  // text when focussed.
+  @include govuk-compatibility(govuk_template) {
+    &:link:focus {
+      color: $govuk-focus-text-colour;
+    }
+  }
+}
+
+/// Muted link styles
 ///
-/// Used for secondary links on a page - the link will appear in muted colours
-/// regardless of visited state.
+/// Makes links use the secondary text colour. The link will darken if it's
+/// active or a user hovers their cursor over it.
 ///
-/// If you use this mixin in a component you must also include the
-/// govuk-link-common mixin in order to get the focus state.
+/// If you use this mixin in a component, you must also include the
+/// `govuk-link-common` mixin to get the correct focus and hover states.
 ///
 /// @example scss
 ///   .govuk-component__link {
@@ -84,10 +225,13 @@
 
 @mixin govuk-link-style-muted {
   &:link,
-  &:visited,
+  &:visited {
+    color: $govuk-secondary-text-colour;
+  }
+
   &:hover,
   &:active {
-    color: $govuk-secondary-text-colour;
+    color: $govuk-text-colour;
   }
 
   // When focussed, the text colour needs to be darker to ensure that colour
@@ -106,13 +250,13 @@
   }
 }
 
-/// Text style link mixin
+/// Text link styles
 ///
-/// Overrides the colour of links to match the text colour. Generally used by
+/// Makes links use the primary text colour, in all states. Use this mixin for
 /// navigation components, such as breadcrumbs or the back link.
 ///
-/// If you use this mixin in a component you must also include the
-/// govuk-link-common mixin in order to get the focus state.
+/// If you use this mixin in a component, you must also include the
+/// `govuk-link-common` mixin to get the correct focus and hover states.
 ///
 /// @example scss
 ///   .govuk-component__link {
@@ -123,10 +267,17 @@
 /// @access public
 
 @mixin govuk-link-style-text {
-  // Override link colour to use text colour
   &:link,
-  &:visited,
-  &:hover,
+  &:visited {
+    @include govuk-text-colour;
+  }
+
+  // Force a colour change on hover to work around a bug in Safari
+  // https://bugs.webkit.org/show_bug.cgi?id=224483
+  &:hover {
+    color: rgba($govuk-text-colour, .99);
+  }
+
   &:active,
   &:focus {
     @include govuk-text-colour;
@@ -142,18 +293,60 @@
   }
 }
 
+/// Inverse link styles
+///
+/// Makes links white, in all states. Use this mixin if you're displaying links
+/// against a dark background.
+///
+/// If you use this mixin in a component, you must also include the
+/// `govuk-link-common` mixin to get the correct focus and hover states.
+///
+/// @example scss
+///   .govuk-component__link {
+///     @include govuk-link-common;
+///     @include govuk-link-style-inverse;
+///   }
+///
+/// @access public
+
+@mixin govuk-link-style-inverse {
+  &:link,
+  &:visited {
+    color: govuk-colour("white");
+  }
+
+  // Force a colour change on hover to work around a bug in Safari
+  // https://bugs.webkit.org/show_bug.cgi?id=224483
+  &:hover,
+  &:active {
+    color: rgba(govuk-colour("white"), .99);
+  }
+
+  &:focus {
+    color: $govuk-focus-text-colour;
+  }
+
+  // alphagov/govuk_template includes a specific a:link:focus selector designed
+  // to make unvisited links a slightly darker blue when focussed, so we need to
+  // override the text colour for that combination of selectors.
+  @include govuk-compatibility(govuk_template) {
+    &:link:focus {
+      color: $govuk-focus-text-colour;
+    }
+  }
+}
 
-/// No visited state link mixin
+/// Default link styles, without a visited state
 ///
-/// Used in cases where it is not helpful to distinguish between visited and
-/// non-visited links.
+/// Makes links use the default unvisited, hover and active colours, with no
+/// distinct visited state.
 ///
-/// For example, navigation links to pages with dynamic content like admin
-/// dashboards. The content on the page is changing all the time, so the fact
-/// that you’ve visited it before is not important.
+/// Use this mixin when it's not helpful to distinguish between visited and
+/// non-visited links. For example, when you link to pages with
+/// frequently-changing content, such as the dashboard for an admin interface.
 ///
-/// If you use this mixin in a component you must also include the
-/// govuk-link-common mixin in order to get the focus state.
+/// If you use this mixin in a component, you must also include the
+/// `govuk-link-common` mixin to get the correct focus and hover states.
 ///
 /// @example scss
 ///   .govuk-component__link {
@@ -187,20 +380,40 @@
   }
 }
 
-/// Print friendly link mixin
+/// Remove underline from links
 ///
-/// When printing, append the the destination URL to the link text, as long
-/// as the URL starts with either `/`, `http://` or `https://`.
+/// Remove underlines from links unless the link is active or a user hovers
+/// their cursor over it. This has no effect in Internet Explorer 8 (IE8),
+/// because IE8 does not support `:not`.
+///
+/// @example scss
+///   .govuk-component__link {
+///     @include govuk-link-common;
+///     @include govuk-link-style-default;
+///     @include govuk-link-style-no-underline;
+///   }
+///
+/// @access public
+
+@mixin govuk-link-style-no-underline {
+  &:not(:hover):not(:active) {
+    text-decoration: none;
+  }
+}
+
+/// Include link destination when printing the page
+///
+/// If the user prints the page, add the destination URL after the link text, if
+/// the URL starts with `/`, `http://` or `https://`.
 ///
 /// @access public
 
 @mixin govuk-link-print-friendly {
   @include govuk-media-query($media-type: print) {
-
     &[href^="/"],
     &[href^="http://"],
     &[href^="https://"] {
-      &::after {
+      &:after {
         content: " (" attr(href) ")";
         font-size: 90%;