Avoid hover state for coarse pointers

alphagov · Mar 18, 2019 · 7917525 · 7917525
1 parent b465407
commit 7917525
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 2 deletions.
diff --git a/src/components/checkboxes/_checkboxes.scss b/src/components/checkboxes/_checkboxes.scss
@@ -291,7 +291,7 @@
     // We can't use `@media (hover: hover)` because we wouldn't get the hover
     // state in browsers that don't support `@media (hover)` (like Internet
     // Explorer) – so we have to 'undo' the hover state instead.
-    @media (hover: none) {
+    @media (hover: none), (pointer: coarse) {
       .govuk-checkboxes__item:hover .govuk-checkboxes__input:not(:disabled) + .govuk-checkboxes__label::before {
         box-shadow: initial;
       }

diff --git a/src/components/radios/_radios.scss b/src/components/radios/_radios.scss
@@ -324,7 +324,7 @@
     // We can't use `@media (hover: hover)` because we wouldn't get the hover
     // state in browsers that don't support `@media (hover)` (like Internet
     // Explorer) – so we have to 'undo' the hover state instead.
-    @media (hover: none) {
+    @media (hover: none), (pointer: coarse) {
       .govuk-radios__item:hover .govuk-radios__input:not(:disabled) + .govuk-radios__label::before {
         box-shadow: initial;
       }