Merge pull request #55 from IATI/ml/other-link-styling

Update link styling options

Author: codemacabre

src/scss/components/breadcrumb/_breadcrumb.scss

@@ -31,6 +31,12 @@
 
 .iati-breadcrumb-link {
   text-decoration: none;
+
+  &[aria-current]:active,
+  &[aria-current]:focus,
+  &[aria-current]:hover {
+    text-decoration: none;
+  }
 }
 
 @media (min-width: $screen-sm) {

src/scss/components/button/_button.scss

@@ -19,8 +19,11 @@
   transition: all 0.2s ease-in-out;
   text-decoration: none;
 
+  &:active,
+  &:focus,
   &:hover {
     background-color: $color-teal-80;
+    text-decoration: none;
   }
 
   &__icon,

src/scss/components/figures/_figures.scss

@@ -44,5 +44,11 @@
     text-decoration: none;
     line-height: 1;
     color: $color-grey-90;
+
+    &:active,
+    &:focus,
+    &:hover {
+      text-decoration: none;
+    }
   }
 }

src/scss/components/footer/_footer.scss

@@ -87,7 +87,6 @@
 .iati-footer__legal-nav {
   font-size: 1.0625rem;
   a {
-    text-decoration: none;
     line-height: 1.1;
     &:visited {
       color: $color-blue-30;

src/scss/components/header/tool-nav/_tool-nav.scss

@@ -19,8 +19,12 @@
   line-height: 1.1;
   transition: all 0.2s ease-in-out;
   display: inline-block;
+
+  &:active,
+  &:focus,
   &:hover {
     background-color: $color-blue-30;
     color: $color-teal-90;
+    text-decoration: none;
   }
 }

src/scss/components/jump-menu/_jump-menu.scss

@@ -89,5 +89,11 @@
     font-size: 0.75rem;
     font-weight: 800;
     line-height: 1.5;
+
+    &:active,
+    &:focus,
+    &:hover {
+      text-decoration: none;
+    }
   }
 }

src/scss/components/mobile-nav/_mobile-nav.scss

@@ -83,7 +83,11 @@
   padding-block: 0.75em;
   display: block;
   transition: all 0.2s ease-in-out;
+
+  &:active,
+  &:focus,
   &:hover {
     color: $color-blue-30;
+    text-decoration: none;
   }
 }

src/scss/typography/_body.scss

@@ -8,6 +8,11 @@ body {
   color: $color-grey-90;
 }
 
+.iati-dark-background {
+  color: $color-grey-10;
+  background-color: $color-teal-90;
+}
+
 p,
 a,
 li {
@@ -28,14 +33,14 @@ li p {
 
 a {
   color: $color-teal-80;
-  text-decoration: underline;
+  text-decoration: none;
   text-decoration-color: $color-teal-30;
   text-underline-position: under;
 
   &:active,
   &:hover,
   &:focus {
-    text-decoration: none;
+    text-decoration: underline;
   }
 
   &:has(i),
@@ -45,6 +50,21 @@ a {
   }
 }
 
+p a {
+  text-decoration: underline;
+
+  &:active,
+  &:hover,
+  &:focus {
+    text-decoration: none;
+  }
+}
+
+a.light {
+  color: $color-teal-30;
+  text-decoration-color: $color-teal-70;
+}
+
 table:not([class]) {
   border-collapse: collapse;
   display: inline-block;

src/scss/typography/typography.stories.ts

@@ -44,13 +44,24 @@ export const Body: Story = {
       id facilisis sem dapibus. Quisque at diam aliquet, convallis tellus a,
       bibendum justo. Proin in est feugiat, rhoncus sapien eu, suscipit ante.
     </p>
+    <p class="iati-dark-background">
+      This paragraph shows an example of <strong>strong text</strong> and
+      <em>emphasised text</em> against a dark background.
+    </p>
   `,
 };
 
 export const Links: Story = {
   render: () => html`
     <a href="#">This is a link.</a>
     <p>This is a <a href="#">link</a> within a paragraph.</p>
+    <div class="iati-dark-background">
+      <a class="light" href="#">This is a link on a dark background.</a>
+      <p>
+        This is a <a class="light" href="#">link on a dark background</a> within
+        a paragraph.
+      </p>
+    </div>
   `,
 };