diff --git a/src/govuk/core/_links.scss b/src/govuk/core/_links.scss index 0cc378ad36..bd62d2ec14 100644 --- a/src/govuk/core/_links.scss +++ b/src/govuk/core/_links.scss @@ -32,4 +32,10 @@ .govuk-link--no-visited-state { @include govuk-link-style-no-visited-state; } + + // Links that only contain images + + .govuk-link-image { + @include govuk-link-image; + } } diff --git a/src/govuk/helpers/_focused.scss b/src/govuk/helpers/_focused.scss index 49a0434604..a94f8c469f 100644 --- a/src/govuk/helpers/_focused.scss +++ b/src/govuk/helpers/_focused.scss @@ -26,3 +26,19 @@ // box-shadow is applied to each fragment independently. box-decoration-break: clone; } + +/// Focused box +/// +/// Provides an outline to clearly indicate when the target element is focused. +/// Unlike govuk-focused-text, which only draws an underline below the element, +/// govuk-focused-box draws an outline around all sides of the element. +/// Best used for non-text content contained within links. +/// +/// @access public + +@mixin govuk-focused-box { + outline: $govuk-focus-width solid transparent; + box-shadow: + 0 0 0 4px $govuk-focus-colour, + 0 0 0 8px $govuk-focus-text-colour; +} diff --git a/src/govuk/helpers/_links.scss b/src/govuk/helpers/_links.scss index cc7a999b7e..3ad9de0a57 100644 --- a/src/govuk/helpers/_links.scss +++ b/src/govuk/helpers/_links.scss @@ -362,3 +362,25 @@ } } } + +/// Image link styles +/// +/// Prepares and provides the focus state for links that only contain images +/// with no accompanying text. +/// +/// @access public + +@mixin govuk-link-image { + // Needed to draw the focus around the entire image + display: inline-block; + + // Remove extra space at the bottom of the image that's added by line-height + line-height: 0; + + // Don't render an underline + text-decoration: none; + + &:focus { + @include govuk-focused-box; + } +}