diff --git a/app/views/examples/links/index.njk b/app/views/examples/links/index.njk index 3a40ba969e..1e9b38d87c 100644 --- a/app/views/examples/links/index.njk +++ b/app/views/examples/links/index.njk @@ -14,7 +14,8 @@ 'Link': '', 'Link with no visited state': 'govuk-link--no-visited-state', 'Text link': 'govuk-link--text-colour', - 'Muted link': 'govuk-link--muted' + 'Muted link': 'govuk-link--muted', + 'Inverse': 'govuk-link--inverse' } %} {% set states = { @@ -49,8 +50,8 @@ {% for variant_description, variant_class in variants %} -
-

{{ variant_description }}

+
+

{{ variant_description }}

{% for state_description, state_class in states %}

diff --git a/src/govuk/core/_links.scss b/src/govuk/core/_links.scss index 94b8833bc8..3c10924527 100644 --- a/src/govuk/core/_links.scss +++ b/src/govuk/core/_links.scss @@ -27,6 +27,10 @@ @include govuk-link-style-text; } + .govuk-link--inverse { + @include govuk-link-style-inverse; + } + .govuk-link--no-underline { @include govuk-link-style-no-underline; } diff --git a/src/govuk/helpers/_links.scss b/src/govuk/helpers/_links.scss index b9ce0c97af..9a5a448a8e 100644 --- a/src/govuk/helpers/_links.scss +++ b/src/govuk/helpers/_links.scss @@ -217,7 +217,6 @@ /// @access public @mixin govuk-link-style-text { - // Override link colour to use text colour &:link, &:visited, &:hover, @@ -236,6 +235,43 @@ } } +/// Inverse style link mixin +/// +/// Overrides the colour of links to work on a dark background. +/// +/// If you use this mixin in a component you must also include the +/// govuk-link-common mixin in order to get the focus state. +/// +/// @example scss +/// .govuk-component__link { +/// @include govuk-link-common; +/// @include govuk-link-style-inverse; +/// } +/// +/// @access public + +@mixin govuk-link-style-inverse { + &:link, + &:visited, + &:hover, + &:active { + color: govuk-colour("white"); + } + + &: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 /// /// Used in cases where it is not helpful to distinguish between visited and