From 359120873c439a55ef291578e25ff4015fecd042 Mon Sep 17 00:00:00 2001 From: Pavel Klibani Date: Tue, 23 Jul 2024 11:43:37 +0200 Subject: [PATCH] Fix(web): Remove Accordion Header active background change on non-hover devices - Do not flicker on touch screens when tapping on the item header of the Accordion component - CSS for active state of Accordion__itemToggle is now applied only for devices with hover capability Solves DS-1365 --- .../web/src/scss/components/Accordion/_Accordion.scss | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/web/src/scss/components/Accordion/_Accordion.scss b/packages/web/src/scss/components/Accordion/_Accordion.scss index 9783cdb4dc..cdb682bd5a 100644 --- a/packages/web/src/scss/components/Accordion/_Accordion.scss +++ b/packages/web/src/scss/components/Accordion/_Accordion.scss @@ -89,10 +89,12 @@ } } -// 3.c -// stylelint-disable-next-line selector-max-specificity -- High specificity to override the hover state selector 3.b. -.Accordion__itemHeader .Accordion__itemToggle:active:first-of-type::before { - background-color: theme.$accordion-item-background-color-active; +@media (hover: hover) { + // 3.c + // stylelint-disable-next-line selector-max-specificity -- High specificity to override the hover state selector 3.b. + .Accordion__itemHeader .Accordion__itemToggle:active:first-of-type::before { + background-color: theme.$accordion-item-background-color-active; + } } .Accordion__itemSide,