chore(clickable-style): make transition target more specific

chanzuckerberg · Aug 29, 2022 · d47c301 · d47c301
1 parent a337a40
commit d47c301
Showing 1 changed file with 8 additions and 1 deletion.
diff --git a/src/components/ClickableStyle/ClickableStyle.module.css b/src/components/ClickableStyle/ClickableStyle.module.css
@@ -22,10 +22,17 @@
   border-radius: var(--eds-border-radius-md);
   cursor: pointer;
   text-decoration: none; /* 4 */
-  transition: all var(--eds-anim-fade-quick) var(--eds-anim-ease);
+  transition-property: color, background-color, border-color;
+  transition-duration: var(--eds-anim-fade-quick);
+  transition-timing-function: var(--eds-anim-ease);
 
   svg {
     --icon-size-default: 2em; /* 5 */
+    transition: color var(--eds-anim-fade-quick) var(--eds-anim-ease);
+
+    @media screen and (prefers-reduced-motion) {
+      transition: none;
+    }
   }
 
   &:focus {