From e3c5c31800b597741942acd05ffb280537da5174 Mon Sep 17 00:00:00 2001 From: Peter Hellstrand Date: Thu, 14 Mar 2024 09:59:26 +0100 Subject: [PATCH 01/16] fix(ffe-tabs): hovering styles only when using pointer/mouse --- packages/ffe-tabs/less/tab.less | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/packages/ffe-tabs/less/tab.less b/packages/ffe-tabs/less/tab.less index c1846e8f15..973b0ad89d 100644 --- a/packages/ffe-tabs/less/tab.less +++ b/packages/ffe-tabs/less/tab.less @@ -58,9 +58,11 @@ overflow: unset; } - &:hover { - color: var(--ffe-v-tabs-secondary-color); - background-color: var(--ffe-v-tabs-tab-hover-color); + @media (hover: hover) and (pointer: fine) { + &:hover { + color: var(--ffe-v-tabs-secondary-color); + background-color: var(--ffe-v-tabs-tab-hover-color); + } } &--selected, @@ -69,8 +71,10 @@ color: var(--ffe-v-tabs-secondary-color); z-index: 2; - &:hover { - background-color: var(--ffe-v-tabs-tab-active-hover-color); + @media (hover: hover) and (pointer: fine) { + &:hover { + background-color: var(--ffe-v-tabs-tab-active-hover-color); + } } } From 1aa5aad602e83dbe15ebc6dacd1f3c78b2001239 Mon Sep 17 00:00:00 2001 From: Peter Hellstrand Date: Thu, 14 Mar 2024 09:59:37 +0100 Subject: [PATCH 02/16] fix(ffe-tables): hovering styles only when using pointer/mouse --- packages/ffe-tables/less/expandable-row.less | 6 +++-- packages/ffe-tables/less/sortable-table.less | 25 +++++++++++--------- 2 files changed, 18 insertions(+), 13 deletions(-) diff --git a/packages/ffe-tables/less/expandable-row.less b/packages/ffe-tables/less/expandable-row.less index 5af33cd8b4..c2bf1723c9 100644 --- a/packages/ffe-tables/less/expandable-row.less +++ b/packages/ffe-tables/less/expandable-row.less @@ -3,8 +3,10 @@ cursor: pointer; position: relative; - &:hover { - background-color: var(--ffe-v-table-expandable-row-hover); + @media (hover: hover) and (pointer: fine) { + &:hover { + background-color: var(--ffe-v-table-expandable-row-hover); + } } &:focus { diff --git a/packages/ffe-tables/less/sortable-table.less b/packages/ffe-tables/less/sortable-table.less index db83b2a87a..04fda6e805 100644 --- a/packages/ffe-tables/less/sortable-table.less +++ b/packages/ffe-tables/less/sortable-table.less @@ -7,19 +7,22 @@ border-radius: 4px 4px 0 0; padding-top: 2px; - &:hover { - cursor: pointer; - color: var(--ffe-v-table-sortable-header-hover); - border-color: inherit; - user-select: none; - .native & { - @media (prefers-color-scheme: dark) { - border-color: var(--ffe-v-table-sortable-header-hover); + @media (hover: hover) and (pointer: fine) { + &:hover { + cursor: pointer; + color: var(--ffe-v-table-sortable-header-hover); + border-color: inherit; + user-select: none; + + .native & { + @media (prefers-color-scheme: dark) { + border-color: var(--ffe-v-table-sortable-header-hover); + } } - } - .ffe-sortable-table__sort-arrow.ffe-icons { - color: var(--ffe-v-table-sortable-header-hover); + .ffe-sortable-table__sort-arrow.ffe-icons { + color: var(--ffe-v-table-sortable-header-hover); + } } } From ee7358353f103d6ef24d80e1998b83e07f1ed83c Mon Sep 17 00:00:00 2001 From: Peter Hellstrand Date: Thu, 14 Mar 2024 09:59:58 +0100 Subject: [PATCH 03/16] fix(ffe-system-message): hovering styles only when using pointer/mouse --- .../less/system-message.less | 24 ++++++++++++------- 1 file changed, 15 insertions(+), 9 deletions(-) diff --git a/packages/ffe-system-message/less/system-message.less b/packages/ffe-system-message/less/system-message.less index 29b4b2b5c1..23b39b8688 100644 --- a/packages/ffe-system-message/less/system-message.less +++ b/packages/ffe-system-message/less/system-message.less @@ -18,11 +18,13 @@ border-bottom: 1px solid var(--ffe-v-system-message-link-color); color: var(--ffe-v-system-message-link-color); - &:hover { - border-bottom-color: var( - --ffe-v-system-message-link-color-hover - ); - color: var(--ffe-v-system-message-link-color-hover); + @media (hover: hover) and (pointer: fine) { + &:hover { + border-bottom-color: var( + --ffe-v-system-message-link-color-hover + ); + color: var(--ffe-v-system-message-link-color-hover); + } } &:visited { @@ -203,8 +205,10 @@ > .ffe-icons { color: var(--ffe-v-system-message-close-button-color); - &:hover { - color: var(--ffe-v-system-message-close-button-color-hover); + @media (hover: hover) and (pointer: fine) { + &:hover { + color: var(--ffe-v-system-message-close-button-color-hover); + } } } @@ -216,8 +220,10 @@ .ffe-system-message-wrapper--news & { color: var(--ffe-farge-hvit); - &:hover { - color: var(--ffe-farge-lysvarmgraa); + @media (hover: hover) and (pointer: fine) { + &:hover { + color: var(--ffe-farge-lysvarmgraa); + } } &:focus { From 54931965d6d4d336eba86de354e91819c58eec07 Mon Sep 17 00:00:00 2001 From: Peter Hellstrand Date: Thu, 14 Mar 2024 10:00:26 +0100 Subject: [PATCH 04/16] fix(ffe-searchable-dropdown-react): hovering styles only when using pointer/mouse --- .../less/ffe-searchable-dropdown.less | 53 ++++++++++++++----- 1 file changed, 40 insertions(+), 13 deletions(-) diff --git a/packages/ffe-searchable-dropdown-react/less/ffe-searchable-dropdown.less b/packages/ffe-searchable-dropdown-react/less/ffe-searchable-dropdown.less index 4005640945..6c86022a88 100644 --- a/packages/ffe-searchable-dropdown-react/less/ffe-searchable-dropdown.less +++ b/packages/ffe-searchable-dropdown-react/less/ffe-searchable-dropdown.less @@ -54,9 +54,21 @@ padding: @ffe-spacing @ffe-spacing-sm; cursor: pointer; - &:hover, - &--highlighted, - &--highlighted:hover { + @media (hover: hover) and (pointer: fine) { + &:hover, + &--highlighted:hover { + background: var(--ffe-g-primary-color); + color: var(--ffe-farge-hvit); + + .ffe-searchable-dropdown__list-item-body-details { + .ffe-micro-text { + color: var(--ffe-farge-lysgraa); + } + } + } + } + + &--highlighted { background: var(--ffe-g-primary-color); color: var(--ffe-farge-hvit); @@ -100,10 +112,12 @@ display: none; } - &:hover { - border-color: var(--ffe-g-primary-color); - > .ffe-icons { - color: var(--ffe-v-searchable-dropdown-icon-hover-color); + @media (hover: hover) and (pointer: fine) { + &:hover { + border-color: var(--ffe-g-primary-color); + > .ffe-icons { + color: var(--ffe-v-searchable-dropdown-icon-hover-color); + } } } @@ -111,9 +125,11 @@ border: 2px solid var(--ffe-g-primary-color); } - .ffe-input-field:focus ~ &:hover { - border-color: transparent; - box-shadow: 0 0 0 2px var(--ffe-g-primary-color); + @media (hover: hover) and (pointer: fine) { + .ffe-input-field:focus ~ &:hover { + border-color: transparent; + box-shadow: 0 0 0 2px var(--ffe-g-primary-color); + } } &-icon { @@ -138,9 +154,7 @@ &__list-item-body { color: var(--ffe-farge-hvit); - &:hover, - &--highlighted, - &--highlighted:hover { + &--highlighted { color: var(--ffe-farge-svart); .ffe-searchable-dropdown__list-item-body-details { @@ -149,6 +163,19 @@ } } } + + @media (hover: hover) and (pointer: fine) { + &:hover, + &--highlighted:hover { + color: var(--ffe-farge-svart); + + .ffe-searchable-dropdown__list-item-body-details { + .ffe-micro-text { + color: var(--ffe-farge-svart); + } + } + } + } } &__list-item-body-details { From 74e73574138e62d8395e5982887f001791b444de Mon Sep 17 00:00:00 2001 From: Peter Hellstrand Date: Thu, 14 Mar 2024 10:00:46 +0100 Subject: [PATCH 05/16] fix(ffe-message-box): hovering styles only when using pointer/mouse --- packages/ffe-message-box/less/message-box.less | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/ffe-message-box/less/message-box.less b/packages/ffe-message-box/less/message-box.less index fd79a9b824..3bbf460633 100644 --- a/packages/ffe-message-box/less/message-box.less +++ b/packages/ffe-message-box/less/message-box.less @@ -20,9 +20,11 @@ border-bottom: 1px solid var(--ffe-v-message-box-link-color); color: var(--ffe-v-message-box-link-color); - &:hover { - border-bottom-color: var(--ffe-v-message-box-link-color-hover); - color: var(--ffe-v-message-box-link-color-hover); + @media (hover: hover) and (pointer: fine) { + &:hover { + border-bottom-color: var(--ffe-v-message-box-link-color-hover); + color: var(--ffe-v-message-box-link-color-hover); + } } &:visited { From e61b8ce65d73aa37bf29ab2c17214930b2919a90 Mon Sep 17 00:00:00 2001 From: Peter Hellstrand Date: Thu, 14 Mar 2024 10:01:00 +0100 Subject: [PATCH 06/16] fix(ffe-header): hovering styles only when using pointer/mouse --- packages/ffe-header/less/ffe-header.less | 39 ++++++++++++------- packages/ffe-header/less/local-normalize.less | 8 +++- 2 files changed, 31 insertions(+), 16 deletions(-) diff --git a/packages/ffe-header/less/ffe-header.less b/packages/ffe-header/less/ffe-header.less index 5181e0a195..ee9c0e869e 100644 --- a/packages/ffe-header/less/ffe-header.less +++ b/packages/ffe-header/less/ffe-header.less @@ -55,11 +55,15 @@ text-decoration: none; } - &:hover { - color: var(--ffe-v-link-hover-color); - - .ffe-header__user-nav & { - background: var(--ffe-v-usernav-link-hover-background-color); + @media (hover: hover) and (pointer: fine) { + &:hover { + color: var(--ffe-v-link-hover-color); + + .ffe-header__user-nav & { + background: var( + --ffe-v-usernav-link-hover-background-color + ); + } } } @@ -158,7 +162,9 @@ /* stylelint-disable declaration-block-no-duplicate-properties */ &:extend(.ffe-inline-button--tertiary); - &:hover:extend(.ffe-inline-button--tertiary:hover) { + @media (hover: hover) and (pointer: fine) { + &:hover:extend(.ffe-inline-button--tertiary:hover) { + } } /* stylelint-enable declaration-block-no-duplicate-properties */ @@ -204,7 +210,9 @@ &:focus:extend(.ffe-button--secondary:focus) { } - &:hover:extend(.ffe-button--secondary:hover) { + @media (hover: hover) and (pointer: fine) { + &:hover:extend(.ffe-button--secondary:hover) { + } } &:active:extend(.ffe-button:active) { @@ -526,10 +534,12 @@ .ffe-header { &__user-nav-list { .ffe-header__link { - &:hover { - color: var( - --ffe-v-usernav-header-link-hover-focus-color - ); + @media (hover: hover) and (pointer: fine) { + &:hover { + color: var( + --ffe-v-usernav-header-link-hover-focus-color + ); + } } &:focus { @@ -549,9 +559,10 @@ &:active { color: var(--ffe-v-link-color); } - - &:hover { - color: var(--ffe-v-link-hover-color); + @media (hover: hover) and (pointer: fine) { + &:hover { + color: var(--ffe-v-link-hover-color); + } } &--active:link, diff --git a/packages/ffe-header/less/local-normalize.less b/packages/ffe-header/less/local-normalize.less index e9af57c98e..af8780f5a9 100644 --- a/packages/ffe-header/less/local-normalize.less +++ b/packages/ffe-header/less/local-normalize.less @@ -23,10 +23,14 @@ background-color: transparent; -webkit-text-decoration-skip: objects; - &:active, - &:hover { + &:active { outline-width: 0; } + @media (hover: hover) and (pointer: fine) { + &:hover { + outline-width: 0; + } + } } // normalize svg From b4f5eb5afdb41847bb7993f726bde312f6acc135 Mon Sep 17 00:00:00 2001 From: Peter Hellstrand Date: Thu, 14 Mar 2024 10:01:16 +0100 Subject: [PATCH 07/16] fix(ffe-form): hovering styles only when using pointer/mouse --- packages/ffe-form/less/checkbox.less | 8 +++++--- packages/ffe-form/less/dropdown.less | 6 ++++-- packages/ffe-form/less/input-field.less | 6 ++++-- packages/ffe-form/less/radio-block.less | 6 ++++-- packages/ffe-form/less/radio-button.less | 23 +++++++++++++++++++---- packages/ffe-form/less/radio-switch.less | 7 ++++--- packages/ffe-form/less/textarea.less | 6 ++++-- packages/ffe-form/less/toggle-switch.less | 21 ++++++++++++--------- packages/ffe-form/less/tooltip.less | 8 +++++--- 9 files changed, 61 insertions(+), 30 deletions(-) diff --git a/packages/ffe-form/less/checkbox.less b/packages/ffe-form/less/checkbox.less index b3ec002053..d269da43b5 100644 --- a/packages/ffe-form/less/checkbox.less +++ b/packages/ffe-form/less/checkbox.less @@ -78,14 +78,16 @@ height: 0; &:checked + .ffe-checkbox::before, - &:hover + .ffe-checkbox::before, &:focus + .ffe-checkbox::before, &:active + .ffe-checkbox::before { outline: none; } - &:hover + .ffe-checkbox::before { - border-color: var(--ffe-v-checkbox-color); + @media (hover: hover) and (pointer: fine) { + &:hover + .ffe-checkbox::before { + outline: none; + border-color: var(--ffe-v-checkbox-color); + } } &:focus + .ffe-checkbox::before { diff --git a/packages/ffe-form/less/dropdown.less b/packages/ffe-form/less/dropdown.less index b422029df8..27c36156db 100644 --- a/packages/ffe-form/less/dropdown.less +++ b/packages/ffe-form/less/dropdown.less @@ -25,8 +25,10 @@ width: 100%; font-size: var(--ffe-fontsize-form-dropdown); - &:hover { - border-color: var(--ffe-g-primary-color); + @media (hover: hover) and (pointer: fine) { + &:hover { + border-color: var(--ffe-g-primary-color); + } } &:focus, diff --git a/packages/ffe-form/less/input-field.less b/packages/ffe-form/less/input-field.less index f1dcfdcffb..00ae39148e 100644 --- a/packages/ffe-form/less/input-field.less +++ b/packages/ffe-form/less/input-field.less @@ -26,8 +26,10 @@ } } - &:hover { - border-color: var(--ffe-g-primary-color); + @media (hover: hover) and (pointer: fine) { + &:hover { + border-color: var(--ffe-g-primary-color); + } } &:focus, diff --git a/packages/ffe-form/less/radio-block.less b/packages/ffe-form/less/radio-block.less index 84cbcdd898..5e4d741f1d 100644 --- a/packages/ffe-form/less/radio-block.less +++ b/packages/ffe-form/less/radio-block.less @@ -74,8 +74,10 @@ } } - &:hover { - --ffe-radio-block-border-color: var(--ffe-g-primary-color); + @media (hover: hover) and (pointer: fine) { + &:hover { + --ffe-radio-block-border-color: var(--ffe-g-primary-color); + } } .ffe-fieldset--error & { diff --git a/packages/ffe-form/less/radio-button.less b/packages/ffe-form/less/radio-button.less index eeaec64597..4db59d8b03 100644 --- a/packages/ffe-form/less/radio-button.less +++ b/packages/ffe-form/less/radio-button.less @@ -90,15 +90,25 @@ } .ffe-radio-input { + @media (hover: hover) and (pointer: fine) { + &:hover + .ffe-radio-button::before { + outline: none; + } + } + &:checked + .ffe-radio-button::before, - &:hover + .ffe-radio-button::before, &:focus + .ffe-radio-button::before, &:active + .ffe-radio-button::before { outline: none; } - &:checked + .ffe-radio-button::after, - &:hover + .ffe-radio-button::after { + @media (hover: hover) and (pointer: fine) { + &:hover + .ffe-radio-button::after { + border-color: var(--ffe-g-primary-color); + } + } + + &:checked + .ffe-radio-button::after { border-color: var(--ffe-g-primary-color); } @@ -129,10 +139,15 @@ box-shadow: none; } - [aria-invalid='true'] &:hover + .ffe-radio-button::after, [aria-invalid='true'] &:checked + .ffe-radio-button::after { border-color: var(--ffe-g-error-color); } + + @media (hover: hover) and (pointer: fine) { + [aria-invalid='true'] &:hover + .ffe-radio-button::after { + border-color: var(--ffe-g-error-color); + } + } } .ffe-radio-input__content { diff --git a/packages/ffe-form/less/radio-switch.less b/packages/ffe-form/less/radio-switch.less index 5451ad7f5b..4c8dfe5a38 100644 --- a/packages/ffe-form/less/radio-switch.less +++ b/packages/ffe-form/less/radio-switch.less @@ -64,9 +64,10 @@ background-color: var(--ffe-g-secondary-color); color: var(--ffe-v-input-bg-color); } - - &:hover + .ffe-radio-switch { - border-color: var(--ffe-g-secondary-color); + @media (hover: hover) and (pointer: fine) { + &:hover + .ffe-radio-switch { + border-color: var(--ffe-g-secondary-color); + } } &:focus-visible + .ffe-radio-switch { diff --git a/packages/ffe-form/less/textarea.less b/packages/ffe-form/less/textarea.less index 20e1213186..4dce2ea62c 100644 --- a/packages/ffe-form/less/textarea.less +++ b/packages/ffe-form/less/textarea.less @@ -17,8 +17,10 @@ } } - &:hover { - border-color: var(--ffe-g-primary-color); + @media (hover: hover) and (pointer: fine) { + &:hover { + border-color: var(--ffe-g-primary-color); + } } &:focus, diff --git a/packages/ffe-form/less/toggle-switch.less b/packages/ffe-form/less/toggle-switch.less index 2ea98b8815..41f9780d0f 100644 --- a/packages/ffe-form/less/toggle-switch.less +++ b/packages/ffe-form/less/toggle-switch.less @@ -74,13 +74,14 @@ } } } - - .ffe-toggle-switch__label:hover &::before { - background: @ffe-farge-moerkgraa; - - .native & { - @media (prefers-color-scheme: dark) { - background: @ffe-farge-lysgraa; + @media (hover: hover) and (pointer: fine) { + .ffe-toggle-switch__label:hover &::before { + background: @ffe-farge-moerkgraa; + + .native & { + @media (prefers-color-scheme: dark) { + background: @ffe-farge-lysgraa; + } } } } @@ -100,8 +101,10 @@ } } - &__input:checked + &__label:hover &__switch::before { - background: var(--ffe-g-secondary-color); + @media (hover: hover) and (pointer: fine) { + &__input:checked + &__label:hover &__switch::before { + background: var(--ffe-g-secondary-color); + } } &__input:focus:not(:focus-visible) + &__label &__switch::before { diff --git a/packages/ffe-form/less/tooltip.less b/packages/ffe-form/less/tooltip.less index 307b53bef0..bac2a32962 100644 --- a/packages/ffe-form/less/tooltip.less +++ b/packages/ffe-form/less/tooltip.less @@ -21,9 +21,11 @@ margin-top: 2px; } - &:hover { - border-color: var(--ffe-v-checkbox-selected-color); - color: var(--ffe-v-tooltip-icon-color); + @media (hover: hover) and (pointer: fine) { + &:hover { + border-color: var(--ffe-v-checkbox-selected-color); + color: var(--ffe-v-tooltip-icon-color); + } } &:focus { From 56bcbdbcb44975540c4afd4e1dd2d788b23294ac Mon Sep 17 00:00:00 2001 From: Peter Hellstrand Date: Thu, 14 Mar 2024 10:01:31 +0100 Subject: [PATCH 08/16] fix(ffe-buttons): hovering styles only when using pointer/mouse --- packages/ffe-buttons/less/base-button.less | 82 ++++++++++++------- .../ffe-buttons/less/inline-base-button.less | 40 +++++---- 2 files changed, 74 insertions(+), 48 deletions(-) diff --git a/packages/ffe-buttons/less/base-button.less b/packages/ffe-buttons/less/base-button.less index ec38f5af4c..6bd7bd0523 100644 --- 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 index a5400d659c..0faf61cf5e 100644 --- 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; + } } } } From cbbb3733abe5769443994e82a673056472476949 Mon Sep 17 00:00:00 2001 From: Peter Hellstrand Date: Thu, 14 Mar 2024 10:01:50 +0100 Subject: [PATCH 09/16] fix(ffe-file-upload): hovering styles only when using pointer/mouse --- .../ffe-file-upload/less/ffe-file-upload.less | 27 +++++++++++++++++-- 1 file changed, 25 insertions(+), 2 deletions(-) diff --git a/packages/ffe-file-upload/less/ffe-file-upload.less b/packages/ffe-file-upload/less/ffe-file-upload.less index 4e58fe72bb..7f920f9369 100644 --- a/packages/ffe-file-upload/less/ffe-file-upload.less +++ b/packages/ffe-file-upload/less/ffe-file-upload.less @@ -150,9 +150,32 @@ margin-right: @ffe-spacing-sm; } + @media (hover: hover) and (pointer: fine) { + &:hover { + color: var(--ffe-v-fileupload-btn-delete-color-hover); + + ~ .ffe-file-upload__file-item-filename { + text-decoration: underline; + } + + ~ .ffe-file-upload__file-item-error-info + > .ffe-file-upload__file-item-error-filename { + text-decoration: underline; + } + + ~ .ffe-file-upload__file-item-stencil-info + > .ffe-file-upload__file-item-stencil-info-filename { + text-decoration: underline; + } + + .ffe-file-upload__file-item-delete-button-text { + text-decoration: underline; + } + } + } + &:active, - &:focus, - &:hover { + &:focus { color: var(--ffe-v-fileupload-btn-delete-color-hover); ~ .ffe-file-upload__file-item-filename { From 21382bcb55fc07255b564408a25d20d942fe9449 Mon Sep 17 00:00:00 2001 From: Peter Hellstrand Date: Thu, 14 Mar 2024 10:02:08 +0100 Subject: [PATCH 10/16] fix(ffe-feedback): hovering styles only when using pointer/mouse --- packages/ffe-feedback/less/feedback-thumb.less | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/packages/ffe-feedback/less/feedback-thumb.less b/packages/ffe-feedback/less/feedback-thumb.less index 82c34726f0..3602597302 100644 --- a/packages/ffe-feedback/less/feedback-thumb.less +++ b/packages/ffe-feedback/less/feedback-thumb.less @@ -17,7 +17,17 @@ display: none; } - &:hover, + @media (hover: hover) and (pointer: fine) { + &:hover { + .ffe-feedback__thumb-icon--fill { + display: block; + } + .ffe-feedback__thumb-icon { + display: none; + } + } + } + &:focus { .ffe-feedback__thumb-icon--fill { display: block; From 010d540e19daa3ea0774414e85dcd5d59beaa82c Mon Sep 17 00:00:00 2001 From: Peter Hellstrand Date: Thu, 14 Mar 2024 10:02:27 +0100 Subject: [PATCH 11/16] fix(ffe-datepicker): hovering styles only when using pointer/mouse --- packages/ffe-datepicker/less/calendar.less | 33 ++++++++++++++++----- packages/ffe-datepicker/less/dateinput.less | 13 ++++++-- 2 files changed, 35 insertions(+), 11 deletions(-) diff --git a/packages/ffe-datepicker/less/calendar.less b/packages/ffe-datepicker/less/calendar.less index 6c16d835cd..feee8ffa81 100644 --- a/packages/ffe-datepicker/less/calendar.less +++ b/packages/ffe-datepicker/less/calendar.less @@ -41,11 +41,17 @@ border-radius: 4px; &:focus, - &:hover, &:active { box-shadow: 0 0 0 2px var(--ffe-v-datepicker-bg-color), 0 0 0 4px var(--ffe-v-datepicker-border-hover-color); } + + @media (hover: hover) and (pointer: fine) { + &:hover { + box-shadow: 0 0 0 2px var(--ffe-v-datepicker-bg-color), + 0 0 0 4px var(--ffe-v-datepicker-border-hover-color); + } + } } &__icon-prev, @@ -128,14 +134,17 @@ border: 1px solid var(--ffe-v-datepicker-date-color-today); } - &:hover, &:focus { border: 2px solid var(--ffe-v-datepicker-border-hover-color); color: var(--ffe-v-datepicker-date-color-hover); + outline: none; } - &:focus { - outline: none; + @media (hover: hover) and (pointer: fine) { + &:hover { + border: 2px solid var(--ffe-v-datepicker-border-hover-color); + color: var(--ffe-v-datepicker-date-color-hover); + } } &--focus { @@ -147,8 +156,10 @@ background: var(--ffe-v-datepicker-border-hover-color); color: var(--ffe-v-datepicker-bg-color); - &:hover { - color: var(--ffe-v-datepicker-bg-color); + @media (hover: hover) and (pointer: fine) { + &:hover { + color: var(--ffe-v-datepicker-bg-color); + } } } @@ -160,11 +171,17 @@ &--disabled { color: var(--ffe-v-datepicker-date-color-disabled); - &:focus, - &:hover { + &:focus { border: 2px solid var(--ffe-v-datepicker-date-color-disabled); color: var(--ffe-v-datepicker-date-color-disabled); } + @media (hover: hover) and (pointer: fine) { + &:hover { + border: 2px solid + var(--ffe-v-datepicker-date-color-disabled); + color: var(--ffe-v-datepicker-date-color-disabled); + } + } } &--disabled-focus { diff --git a/packages/ffe-datepicker/less/dateinput.less b/packages/ffe-datepicker/less/dateinput.less index 553f66dc73..9aad5ad910 100644 --- a/packages/ffe-datepicker/less/dateinput.less +++ b/packages/ffe-datepicker/less/dateinput.less @@ -6,8 +6,10 @@ display: block; } - &:hover { - color: var(--ffe-g-primary-color); + @media (hover: hover) and (pointer: fine) { + &:hover { + color: var(--ffe-g-primary-color); + } } &__field { @@ -47,12 +49,17 @@ border-bottom-right-radius: 4px; transition: all @ffe-transition-duration @ffe-ease; - &:hover, &:focus, &:active { border-color: var(--ffe-v-datepicker-border-hover-color); } + @media (hover: hover) and (pointer: fine) { + &:hover { + border-color: var(--ffe-v-datepicker-border-hover-color); + } + } + .ffe-dateinput__field:focus + &:hover { border-color: transparent; box-shadow: 0 0 0 2px var(--ffe-v-datepicker-border-hover-color); From f2a37536d68197913f07c960ccd26aa67140c9db Mon Sep 17 00:00:00 2001 From: Peter Hellstrand Date: Thu, 14 Mar 2024 10:02:48 +0100 Subject: [PATCH 12/16] fix(ffe-core): hovering styles only when using pointer/mouse --- packages/ffe-core/less/typography.less | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/packages/ffe-core/less/typography.less b/packages/ffe-core/less/typography.less index fa4c6a137a..d80cac4c6c 100644 --- a/packages/ffe-core/less/typography.less +++ b/packages/ffe-core/less/typography.less @@ -299,10 +299,12 @@ line-height: 1em; transition: all @ffe-transition-duration @ffe-ease; - &:hover { - border-bottom-color: var(--ffe-g-link-color-hover); - color: var(--ffe-g-link-color-hover); - text-decoration: none; + @media (hover: hover) and (pointer: fine) { + &:hover { + border-bottom-color: var(--ffe-g-link-color-hover); + color: var(--ffe-g-link-color-hover); + text-decoration: none; + } } &:visited { @@ -339,9 +341,13 @@ border: 2px solid transparent; outline: 0; padding: @ffe-spacing-2xs; - &:hover { - fill: var(--ffe-g-link-icon-color-hover); + + @media (hover: hover) and (pointer: fine) { + &:hover { + fill: var(--ffe-g-link-icon-color-hover); + } } + &:focus { box-shadow: 0 0 0 2px var(--ffe-g-link-icon-color-focus); } From 3d04ccaa37ac7d17a2d9345a36799e062de71bbf Mon Sep 17 00:00:00 2001 From: Peter Hellstrand Date: Thu, 14 Mar 2024 10:02:59 +0100 Subject: [PATCH 13/16] fix(ffe-cards): hovering styles only when using pointer/mouse --- packages/ffe-cards/less/common-card-styling.less | 9 +++++++-- packages/ffe-cards/less/image-card.less | 12 ++++++++++-- packages/ffe-cards/less/stippled-card.less | 8 +++++++- 3 files changed, 24 insertions(+), 5 deletions(-) diff --git a/packages/ffe-cards/less/common-card-styling.less b/packages/ffe-cards/less/common-card-styling.less index 42620eadb4..6f2d3ac63c 100644 --- 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 index 417c950872..0415419427 100644 --- 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 index 1de36cbf21..0e375fa03f 100644 --- 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; From c744d0e93ff911f92246bc4f1e2d69848e4ded3f Mon Sep 17 00:00:00 2001 From: Peter Hellstrand Date: Thu, 14 Mar 2024 10:03:13 +0100 Subject: [PATCH 14/16] fix(ffe-context-message): hovering styles only when using pointer/mouse --- .../less/context-message.less | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/packages/ffe-context-message/less/context-message.less b/packages/ffe-context-message/less/context-message.less index bcd9ac0794..3105104066 100644 --- 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 + ); + } } } } From 1e77004e153c5add97539b6f30b3f4fa9772fde8 Mon Sep 17 00:00:00 2001 From: Peter Hellstrand Date: Thu, 14 Mar 2024 10:03:33 +0100 Subject: [PATCH 15/16] fix(ffe-accordion): hovering styles only when using pointer/mouse --- packages/ffe-accordion/less/accordion.less | 34 +++++++++++++--------- 1 file changed, 20 insertions(+), 14 deletions(-) diff --git a/packages/ffe-accordion/less/accordion.less b/packages/ffe-accordion/less/accordion.less index 49dbd853d2..181d055279 100644 --- 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); + } } } } From b9666b325ee668d56ca2d688ea88d856f7031cd8 Mon Sep 17 00:00:00 2001 From: Peter Hellstrand Date: Thu, 14 Mar 2024 10:03:52 +0100 Subject: [PATCH 16/16] fix(ffe-account-selector-react): hovering styles only when using pointer/mouse --- .../less/account-suggestion-multi.less | 14 ++++++++++++-- .../less/account-suggestion-single.less | 13 ++++++++++++- 2 files changed, 24 insertions(+), 3 deletions(-) diff --git a/packages/ffe-account-selector-react/less/account-suggestion-multi.less b/packages/ffe-account-selector-react/less/account-suggestion-multi.less index 02d5373f12..ef8c8f16ba 100644 --- 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 index 4d395e0891..812aed249d 100644 --- 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);