fix(breadcrumbs): match hover state to link hover state

Royal-Navy · Mar 20, 2020 · d9110ca · d9110ca
1 parent 561ee93
commit d9110ca
Showing 1 changed file with 11 additions and 3 deletions.
diff --git a/packages/css-framework/src/components/_breadcrumbs.scss b/packages/css-framework/src/components/_breadcrumbs.scss
@@ -1,4 +1,5 @@
 @use "../abstracts/functions" as f;
+@use "../config" as config;
 
 .rn-breadcrumbs {
   display: block;
@@ -11,21 +12,26 @@
 .rn-breadcrumbs__breadcrumb {
   display: inline-block;
   vertical-align: top;
+  transition: all config.$animation-timing;
 
   > a {
     color: f.color("neutral", "400");
     font-weight: 400;
     text-decoration: none;
+    &:hover {
+      color: f.color("action", "500");
+    }
+  }
+
+  svg {
+    margin: 0 f.spacing("2");
   }
 
   span, a {
     vertical-align: top;
   }
 }
 
-.rn-breadcrumbs__link:hover {
-  color: f.color("action", "500");
-}
 
 .rn-breadcrumbs__breadcrumb:hover ~ .rn-breadcrumbs__breadcrumb {
   opacity: 0.2;
@@ -38,4 +44,6 @@
 
 .rn-breadcrumbs__separator {
   display: inline-block;
+  transform: translateY(1px);
+  color: f.color("neutral", "200");
 }