fix(ffe-accordion): hovering styles only when using pointer/mouse

SpareBank1 · Mar 14, 2024 · 1034fc2 · 1034fc2
1 parent 862d82b
commit 1034fc2
Showing 1 changed file with 20 additions and 14 deletions.
diff --git a/packages/ffe-accordion/less/accordion.less b/packages/ffe-accordion/less/accordion.less
@@ -31,15 +31,18 @@
         outline: none;
         color: var(--ffe-v-accordion-primary-color);
 
-        &:hover {
-            .ffe-accordion-item__heading-icon {
-                transition: fill @ffe-transition-duration @ffe-ease;
-                color: var(--ffe-v-accordion-secondary-color);
-            }
+        @media (hover: hover) and (pointer: fine) {
+            &:hover {
+                .ffe-accordion-item__heading-icon {
+                    transition: fill @ffe-transition-duration @ffe-ease;
+                    color: var(--ffe-v-accordion-secondary-color);
+                }
 
-            .ffe-accordion-item__heading-icon-wrapper {
-                transition: background-color @ffe-transition-duration @ffe-ease;
-                background-color: var(--ffe-v-accordion-primary-color);
+                .ffe-accordion-item__heading-icon-wrapper {
+                    transition: background-color @ffe-transition-duration
+                        @ffe-ease;
+                    background-color: var(--ffe-v-accordion-primary-color);
+                }
             }
         }
 
@@ -96,13 +99,16 @@
             &__heading-icon {
                 color: var(--ffe-v-accordion-primary-color);
             }
-            &:hover {
-                .ffe-accordion-item__heading-icon {
-                    color: var(--ffe-v-accordion-secondary-color);
-                }
 
-                .ffe-accordion-item__heading-icon-wrapper {
-                    background-color: var(--ffe-v-accordion-primary-color);
+            @media (hover: hover) and (pointer: fine) {
+                &:hover {
+                    .ffe-accordion-item__heading-icon {
+                        color: var(--ffe-v-accordion-secondary-color);
+                    }
+
+                    .ffe-accordion-item__heading-icon-wrapper {
+                        background-color: var(--ffe-v-accordion-primary-color);
+                    }
                 }
             }
         }