From 98b9913033c5efee73ae9f2da646ce3badee2a5c Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Thu, 4 Oct 2018 17:15:37 -0400
Subject: [PATCH] UX: Disable button hover effects on touch devices

---
 .../common/components/buttons.scss            | 41 +++++++++++--------
 1 file changed, 25 insertions(+), 16 deletions(-)

diff --git a/app/assets/stylesheets/common/components/buttons.scss b/app/assets/stylesheets/common/components/buttons.scss
index 0c8cec2f26d..0aa97ec7822 100644
--- a/app/assets/stylesheets/common/components/buttons.scss
+++ b/app/assets/stylesheets/common/components/buttons.scss
@@ -54,10 +54,13 @@
     color: $primary;
     min-height: unset; // ovverides button defaults
   }
-  &:hover,
-  &.btn-hover {
-    background: $primary-medium;
-    color: $secondary;
+  .discourse-no-touch & {
+    // only allow hover on no-touch devices
+    &:hover,
+    &.btn-hover {
+      background: $primary-medium;
+      color: $secondary;
+    }
   }
   &[disabled],
   &.disabled {
@@ -89,12 +92,15 @@
   &[href] {
     color: $secondary;
   }
-  &:hover,
-  &.btn-hover {
-    background: dark-light-choose(
-      scale-color($tertiary, $lightness: -20%),
-      scale-color($tertiary, $lightness: 20%)
-    );
+  .discourse-no-touch & {
+    // only allow hover on no-touch devices
+    &:hover,
+    &.btn-hover {
+      background: dark-light-choose(
+        scale-color($tertiary, $lightness: -20%),
+        scale-color($tertiary, $lightness: 20%)
+      );
+    }
   }
   &:active,
   &.btn-active {
@@ -119,12 +125,15 @@
   &[href] {
     color: $secondary;
   }
-  &:hover,
-  &.btn-hover {
-    background: dark-light-choose(
-      scale-color($danger, $lightness: -20%),
-      scale-color($danger, $lightness: 20%)
-    );
+  .discourse-no-touch & {
+    // only allow hover on no-touch devices
+    &:hover,
+    &.btn-hover {
+      background: dark-light-choose(
+        scale-color($danger, $lightness: -20%),
+        scale-color($danger, $lightness: 20%)
+      );
+    }
   }
   &:active,
   &.btn-active {