commit 1aa611551dc39ed8d290a640885a1d1387f7442f
author Tao Zhou <taoalpha@google.com> Thu Feb 06 07:46:14 2020 +0000
committer Gerrit Code Review <noreply-gerritcodereview@google.com> Thu Feb 06 07:46:14 2020 +0000
tree 0b4135adab4bb037f0e30b5455e5d1f8bde95531
parent 00ecb327f6322b65afb01dccb7da5c662442fe8e
parent c296da6b46131a5870a7363d31adef81a8d36276

Merge "Disable hover style for buttons on mobile devices"

polygerrit-ui/app/elements/shared/gr-button/gr-button.html

diff --git a/polygerrit-ui/app/elements/shared/gr-button/gr-button.html b/polygerrit-ui/app/elements/shared/gr-button/gr-button.html
index 7cac2d8..4e1ec4b 100644
--- a/polygerrit-ui/app/elements/shared/gr-button/gr-button.html
+++ b/polygerrit-ui/app/elements/shared/gr-button/gr-button.html
@@ -105,11 +105,28 @@
       /* END: Copy from paper-button */
       paper-button:hover {
         background: linear-gradient(
-          rgba(0, 0, 0, .12),
-          rgba(0, 0, 0, .12)
+            rgba(0, 0, 0, .12),
+            rgba(0, 0, 0, .12)
         ), var(--background-color);
       }
 
+      /* Some mobile browsers treat focused element as hovered element.
+      As a result, element remains hovered after click (has grey background in default theme).
+      Use @media (hover:none) to remove background if
+      user's primary input mechanism can't hover over elements.
+      See: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover
+
+      Note 1: not all browsers support this media query
+      (see https://caniuse.com/#feat=css-media-interaction).
+      If browser doesn't support it, then the whole content of @media .. is ignored.
+      This is why the default behavior is placed outside of @media.
+      */
+      @media (hover:none) {
+        paper-button:hover {
+          background: transparent;
+        }
+      }
+
       :host([primary]) {
         --background-color: var(--primary-button-background-color);
         --text-color: var(--primary-button-text-color);