Merge pull request #2214 from alphagov/no-underline-link-mixin

Add no-underline mixin and modifier class
alphagov · Apr 30, 2021 · 57d6bb9 · 57d6bb9
2 parents 964604d + ff0f328
commit 57d6bb9
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 0 deletions.
diff --git a/app/views/examples/links/index.njk b/app/views/examples/links/index.njk
@@ -43,6 +43,10 @@
         (<a class="govuk-link" href="#">Link with surrounding brackets</a>) test that the focus style does not overlap.
       </p>
 
+      <p class="govuk-body">
+        <a class="govuk-link govuk-link--no-underline" href="#">Link with no underline</a>
+      </p>
+
     {% for variant_description, variant_class in variants %}
 
       <section class="govuk-!-margin-top-8">

diff --git a/src/govuk/core/_links.scss b/src/govuk/core/_links.scss
@@ -27,6 +27,10 @@
     @include govuk-link-style-text;
   }
 
+  .govuk-link--no-underline {
+    @include govuk-link-style-no-underline;
+  }
+
   .govuk-link--no-visited-state {
     @include govuk-link-style-no-visited-state;
   }

diff --git a/src/govuk/helpers/_links.scss b/src/govuk/helpers/_links.scss
@@ -280,6 +280,19 @@
   }
 }
 
+/// No underline link mixin
+///
+/// Removes underlines from links (except on hover, or when the link is active).
+/// This does not work in IE8, because IE8 does not support `:not`.
+///
+/// @access public
+
+@mixin govuk-link-style-no-underline {
+  &:not(:hover):not(:active) {
+    text-decoration: none;
+  }
+}
+
 /// Print friendly link mixin
 ///
 /// When printing, append the the destination URL to the link text, as long