Ensure hover styles dont override focus styles

alphagov · May 3, 2019 · a3db9e5 · a3db9e5
1 parent a5244c2
commit a3db9e5
Showing 1 changed file with 6 additions and 5 deletions.
diff --git a/src/components/details/_details.scss b/src/components/details/_details.scss
@@ -13,7 +13,6 @@
   }
 
   .govuk-details__summary {
-    @include govuk-focusable-text-link;
     // Make the focus outline shrink-wrap the text content of the summary
     display: inline-block;
 
@@ -28,6 +27,12 @@
     // Style the summary to look like a link...
     color: $govuk-link-colour;
     cursor: pointer;
+
+    &:hover {
+      color: $govuk-link-hover-colour;
+    }
+
+    @include govuk-focusable-text-link;
   }
 
   // ...but only underline the text, not the arrow
@@ -40,10 +45,6 @@
     text-decoration: none;
   }
 
-  .govuk-details__summary:hover {
-    color: $govuk-link-hover-colour;
-  }
-
   // Remove the default details marker so we can style our own consistently and
   // ensure it displays in Firefox (see implementation.md for details)
   .govuk-details__summary::-webkit-details-marker {