Merge pull request #1837 from SpareBank1/develop_fiks-hover

Develop fiks hover
SpareBank1 · Mar 14, 2024 · c175565 · c175565
2 parents baeba51 + b9666b3
commit c175565
Show file tree

Hide file tree

Showing 31 changed files with 417 additions and 184 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);
+                    }
                 }
             }
         }

diff --git a/packages/ffe-account-selector-react/less/account-suggestion-multi.less b/packages/ffe-account-selector-react/less/account-suggestion-multi.less
@@ -22,7 +22,12 @@
     overflow: hidden;
     display: flex;
 
-    &:hover,
+    @media (hover: hover) and (pointer: fine) {
+        &:hover {
+            .highlighted();
+        }
+    }
+
     &--highlighted {
         .highlighted();
     }
@@ -77,7 +82,12 @@
 .native & {
     @media (prefers-color-scheme: dark) {
         .ffe-account-suggestion-multi {
-            &:hover,
+            @media (hover: hover) and (pointer: fine) {
+                &:hover {
+                    background: var(--ffe-g-primary-color);
+                }
+            }
+
             &--highlighted {
                 background: var(--ffe-g-primary-color);
             }

diff --git a/packages/ffe-account-selector-react/less/account-suggestion-single.less b/packages/ffe-account-selector-react/less/account-suggestion-single.less
@@ -4,7 +4,18 @@
     cursor: pointer;
     padding: @ffe-spacing-xs @ffe-spacing-sm @ffe-spacing-xs @ffe-spacing-md;
 
-    &:hover,
+    @media (hover: hover) and (pointer: fine) {
+        &:hover {
+            background: var(--ffe-g-primary-color);
+            color: var(--ffe-v-accountselector-option-primary-color);
+
+            & .ffe-account-suggestion-single__details,
+            & .ffe-account-suggestion-single__name {
+                color: var(--ffe-v-accountselector-option-primary-color);
+            }
+        }
+    }
+
     &--highlighted {
         background: var(--ffe-g-primary-color);
         color: var(--ffe-v-accountselector-option-primary-color);

diff --git a/packages/ffe-buttons/less/base-button.less b/packages/ffe-buttons/less/base-button.less
@@ -85,8 +85,10 @@
         background-color: var(--ffe-v-button-action-color);
     }
 
-    &:hover {
-        background-color: var(--ffe-v-button-action-color-hover);
+    @media (hover: hover) and (pointer: fine) {
+        &:hover {
+            background-color: var(--ffe-v-button-action-color-hover);
+        }
     }
 }
 
@@ -102,8 +104,10 @@
         background-color: var(--ffe-v-button-primary-color);
     }
 
-    &:hover {
-        background-color: var(--ffe-v-button-primary-color-hover);
+    @media (hover: hover) and (pointer: fine) {
+        &:hover {
+            background-color: var(--ffe-v-button-primary-color-hover);
+        }
     }
 }
 
@@ -129,20 +133,24 @@
         }
     }
 
-    &:hover {
-        background-color: var(--ffe-v-button-secondary-color);
-        border-color: var(--ffe-v-button-secondary-color);
-        color: var(--ffe-v-button-secondary-color-bg);
-
-        .ffe-button__icon {
+    @media (hover: hover) and (pointer: fine) {
+        &:hover {
+            background-color: var(--ffe-v-button-secondary-color);
+            border-color: var(--ffe-v-button-secondary-color);
             color: var(--ffe-v-button-secondary-color-bg);
-        }
-        .native & {
-            @media (prefers-color-scheme: dark) {
-                background-color: var(--ffe-v-button-secondary-border-color);
-                border-color: var(--ffe-v-button-secondary-border-color);
+
+            .ffe-button__icon {
                 color: var(--ffe-v-button-secondary-color-bg);
             }
+            .native & {
+                @media (prefers-color-scheme: dark) {
+                    background-color: var(
+                        --ffe-v-button-secondary-border-color
+                    );
+                    border-color: var(--ffe-v-button-secondary-border-color);
+                    color: var(--ffe-v-button-secondary-color-bg);
+                }
+            }
         }
     }
 }
@@ -172,12 +180,14 @@
         color: var(--ffe-v-button-task-primary-color);
     }
 
-    &:hover {
-        color: var(--ffe-v-button-task-text-color-hover);
-        box-shadow: none;
+    @media (hover: hover) and (pointer: fine) {
+        &:hover {
+            color: var(--ffe-v-button-task-text-color-hover);
+            box-shadow: none;
 
-        .ffe-button__icon > .ffe-icons {
-            color: var(--ffe-v-button-primary-color-text);
+            .ffe-button__icon > .ffe-icons {
+                color: var(--ffe-v-button-primary-color-text);
+            }
         }
     }
 
@@ -215,11 +225,16 @@
         will-change: transform;
     }
 
-    .ffe-button--shortcut:focus &,
-    .ffe-button--shortcut:hover & {
+    .ffe-button--shortcut:focus & {
         transform: translateX(12px);
     }
 
+    @media (hover: hover) and (pointer: fine) {
+        .ffe-button--shortcut:hover & {
+            transform: translateX(12px);
+        }
+    }
+
     .ffe-button--task & {
         border: 2px solid var(--ffe-v-button-primary-color);
         border-radius: 50%;
@@ -242,19 +257,24 @@
     .ffe-button--expand & {
         color: var(--ffe-v-button-task-primary-color);
     }
-    .ffe-button--expand:hover & {
-        color: @ffe-farge-hvit;
-        .native & {
-            @media (prefers-color-scheme: dark) {
-                color: @ffe-farge-svart;
+    @media (hover: hover) and (pointer: fine) {
+        .ffe-button--expand:hover & {
+            color: @ffe-farge-hvit;
+
+            .native & {
+                @media (prefers-color-scheme: dark) {
+                    color: @ffe-farge-svart;
+                }
             }
         }
     }
 
-    .ffe-button--task:hover & {
-        border-color: var(--ffe-v-button-primary-color);
-        background-color: var(--ffe-v-button-primary-color);
-        color: var(--ffe-v-button-primary-color-text);
+    @media (hover: hover) and (pointer: fine) {
+        .ffe-button--task:hover & {
+            border-color: var(--ffe-v-button-primary-color);
+            background-color: var(--ffe-v-button-primary-color);
+            color: var(--ffe-v-button-primary-color-text);
+        }
     }
 }
 

diff --git a/packages/ffe-buttons/less/inline-base-button.less b/packages/ffe-buttons/less/inline-base-button.less
@@ -63,13 +63,15 @@
         color: var(--ffe-v-button-primary-color);
     }
 
-    &:hover .ffe-inline-button__icon {
-        color: var(--ffe-v-button-primary-color-hover);
-    }
+    @media (hover: hover) and (pointer: fine) {
+        &:hover .ffe-inline-button__icon {
+            color: var(--ffe-v-button-primary-color-hover);
+        }
 
-    &:hover .ffe-inline-button__label {
-        color: var(--ffe-v-button-secondary-color-hover);
-        border-bottom-color: var(--ffe-v-button-secondary-color-hover);
+        &:hover .ffe-inline-button__label {
+            color: var(--ffe-v-button-secondary-color-hover);
+            border-bottom-color: var(--ffe-v-button-secondary-color-hover);
+        }
     }
 }
 
@@ -83,9 +85,11 @@
         color: var(--ffe-v-button-primary-color);
         transition: transform @ffe-transition-duration @ffe-ease-in-out-back;
     }
-    &:hover .ffe-inline-button__icon,
-    &:hover .ffe-inline-button__label {
-        color: var(--ffe-v-button-primary-color-hover);
+    @media (hover: hover) and (pointer: fine) {
+        &:hover .ffe-inline-button__icon,
+        &:hover .ffe-inline-button__label {
+            color: var(--ffe-v-button-primary-color-hover);
+        }
     }
 }
 
@@ -126,15 +130,17 @@
         border-color: transparent;
     }
 
-    &:hover {
-        color: var(--ffe-v-button-tertiary-color-hover);
-
-        .ffe-inline-button__icon {
+    @media (hover: hover) and (pointer: fine) {
+        &:hover {
             color: var(--ffe-v-button-tertiary-color-hover);
-        }
-        .native & {
-            @media (prefers-color-scheme: dark) {
-                color: @ffe-farge-hvit;
+
+            .ffe-inline-button__icon {
+                color: var(--ffe-v-button-tertiary-color-hover);
+            }
+            .native & {
+                @media (prefers-color-scheme: dark) {
+                    color: @ffe-farge-hvit;
+                }
             }
         }
     }

diff --git a/packages/ffe-cards/less/common-card-styling.less b/packages/ffe-cards/less/common-card-styling.less
@@ -32,11 +32,16 @@
     }
 
     &:focus,
-    &:active,
-    &:hover {
+    &:active {
         border-color: var(--ffe-g-primary-color);
     }
 
+    @media (hover: hover) and (pointer: fine) {
+        &:hover {
+            border-color: var(--ffe-g-primary-color);
+        }
+    }
+
     @media (min-width: @breakpoint-md) {
         margin-bottom: @ffe-spacing-md;
     }

diff --git a/packages/ffe-cards/less/image-card.less b/packages/ffe-cards/less/image-card.less
@@ -10,9 +10,17 @@
     border: 0;
     flex-flow: column nowrap;
 
+    @media (hover: hover) and (pointer: fine) {
+        &:hover {
+            .ffe-image-card__image-overlay,
+            .ffe-image-card__body {
+                border-color: var(--ffe-v-cards-image-card-border-hover-color);
+            }
+        }
+    }
+
     &:focus,
-    &:active,
-    &:hover {
+    &:active {
         .ffe-image-card__image-overlay,
         .ffe-image-card__body {
             border-color: var(--ffe-v-cards-image-card-border-hover-color);

diff --git a/packages/ffe-cards/less/stippled-card.less b/packages/ffe-cards/less/stippled-card.less
@@ -13,7 +13,13 @@
     padding: @ffe-spacing-md;
     gap: @ffe-spacing-sm;
 
-    &:hover,
+    @media (hover: hover) and (pointer: fine) {
+        &:hover {
+            border-style: solid;
+            box-shadow: none;
+        }
+    }
+
     &:focus,
     &:active {
         border-style: solid;

diff --git a/packages/ffe-context-message/less/context-message.less b/packages/ffe-context-message/less/context-message.less
@@ -75,9 +75,13 @@
         border-bottom: 1px solid var(--ffe-v-context-message-link-color);
         color: var(--ffe-v-context-message-link-color);
 
-        &:hover {
-            border-bottom-color: var(--ffe-v-context-message-link-color-hover);
-            color: var(--ffe-v-context-message-link-color-hover);
+        @media (hover: hover) and (pointer: fine) {
+            &:hover {
+                border-bottom-color: var(
+                    --ffe-v-context-message-link-color-hover
+                );
+                color: var(--ffe-v-context-message-link-color-hover);
+            }
         }
 
         &:visited {
@@ -165,8 +169,12 @@
         }
         .ffe-icons {
             color: var(--ffe-v-context-message-close-button-color);
-            &:hover {
-                color: var(--ffe-v-context-message-close-button-color-hover);
+            @media (hover: hover) and (pointer: fine) {
+                &:hover {
+                    color: var(
+                        --ffe-v-context-message-close-button-color-hover
+                    );
+                }
             }
         }
     }