From 408a2e6506d0d65b35e7774fb6a6c7af5b23a565 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Thu, 16 Feb 2017 08:16:46 -0800
Subject: [PATCH] Fix Safari bug: Safari ignores :enabled pseudo class,
 preventing button active and hover states from taking effect. (#10369)

---
 ui_framework/components/button/_button.scss | 23 +++++++++++++--------
 ui_framework/dist/ui_framework.css          | 20 +++++++++++++-----
 2 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/ui_framework/components/button/_button.scss b/ui_framework/components/button/_button.scss
index 5e377ad28007..7babdfcbdd61 100644
--- a/ui_framework/components/button/_button.scss
+++ b/ui_framework/components/button/_button.scss
@@ -2,6 +2,7 @@
  * 1. Setting to inline-block guarantees the same height when applied to both
  *    button elements and anchor tags.
  * 2. Disable for Angular.
+ * 3. Safari won't respect :enabled:active on links.
  */
 .kuiButton {
   display: inline-block; /* 1 */
@@ -20,7 +21,7 @@
     pointer-events: none; /* 2 */
   }
 
-  &:active:enabled {
+  &:active { /* 3 */
     transform: translateY(1px);
   }
 
@@ -43,6 +44,7 @@
 
 /**
  * 1. Override Bootstrap.
+ * 2. Safari won't respect :enabled:hover/active on links.
  */
 .kuiButton--basic {
   color: #5a5a5a;
@@ -53,8 +55,8 @@
     color: #5a5a5a !important; /* 1 */
   }
 
-  &:hover:enabled,
-  &:active:enabled {
+  &:hover, /* 2 */
+  &:active { /* 2 */
     color: #ffffff !important; /* 1 */
     background-color: #9B9B9B;
   }
@@ -66,13 +68,14 @@
 
 /**
  * 1. Override Bootstrap.
+ * 2. Safari won't respect :enabled:hover/active on links.
  */
 .kuiButton--primary {
   color: #FFFFFF;
   background-color: #6EADC1;
 
-  &:hover:enabled,
-  &:active:enabled {
+  &:hover, /* 2 */
+  &:active { /* 2 */
     color: #FFFFFF !important; /* 1 */
     background-color: #006E8A;
   }
@@ -88,13 +91,14 @@
 
 /**
  * 1. Override Bootstrap.
+ * 2. Safari won't respect :enabled:hover/active on links.
  */
 .kuiButton--danger {
   color: #FFFFFF;
   background-color: #D76051;
 
-  &:hover:enabled,
-  &:active:enabled {
+  &:hover, /* 2 */
+  &:active { /* 2 */
     color: #FFFFFF !important; /* 1 */
     background-color: #A52E1F;
   }
@@ -112,13 +116,14 @@
 /**
  * 1. Override Bootstrap.
  * 2. Override either Bootstrap or Timelion styles.
+ * 3. Safari won't respect :enabled:hover/active on links.
  */
 .kuiButton--hollow {
   color: $linkColor !important; /* 2 */
   background-color: transparent;
 
-  &:hover:enabled,
-  &:active:enabled {
+  &:hover, /* 3 */
+  &:active { /* 3 */
     color: $linkHoverColor !important; /* 1 */
     text-decoration: underline;
   }
diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css
index 0a4c9aa4fa5a..e258e6002612 100644
--- a/ui_framework/dist/ui_framework.css
+++ b/ui_framework/dist/ui_framework.css
@@ -107,6 +107,7 @@ body {
  * 1. Setting to inline-block guarantees the same height when applied to both
  *    button elements and anchor tags.
  * 2. Disable for Angular.
+ * 3. Safari won't respect :enabled:active on links.
  */
 .kuiButton {
   display: inline-block;
@@ -126,7 +127,8 @@ body {
     cursor: default;
     pointer-events: none;
     /* 2 */ }
-  .kuiButton:active:enabled {
+  .kuiButton:active {
+    /* 3 */
     -webkit-transform: translateY(1px);
             transform: translateY(1px); }
   .kuiButton:focus {
@@ -145,6 +147,7 @@ body {
 
 /**
  * 1. Override Bootstrap.
+ * 2. Safari won't respect :enabled:hover/active on links.
  */
 .kuiButton--basic {
   color: #5a5a5a;
@@ -152,7 +155,8 @@ body {
   .kuiButton--basic:focus {
     color: #5a5a5a !important;
     /* 1 */ }
-  .kuiButton--basic:hover:enabled, .kuiButton--basic:active:enabled {
+  .kuiButton--basic:hover, .kuiButton--basic:active {
+    /* 2 */
     color: #ffffff !important;
     /* 1 */
     background-color: #9B9B9B; }
@@ -161,11 +165,13 @@ body {
 
 /**
  * 1. Override Bootstrap.
+ * 2. Safari won't respect :enabled:hover/active on links.
  */
 .kuiButton--primary {
   color: #FFFFFF;
   background-color: #6EADC1; }
-  .kuiButton--primary:hover:enabled, .kuiButton--primary:active:enabled {
+  .kuiButton--primary:hover, .kuiButton--primary:active {
+    /* 2 */
     color: #FFFFFF !important;
     /* 1 */
     background-color: #006E8A; }
@@ -177,11 +183,13 @@ body {
 
 /**
  * 1. Override Bootstrap.
+ * 2. Safari won't respect :enabled:hover/active on links.
  */
 .kuiButton--danger {
   color: #FFFFFF;
   background-color: #D76051; }
-  .kuiButton--danger:hover:enabled, .kuiButton--danger:active:enabled {
+  .kuiButton--danger:hover, .kuiButton--danger:active {
+    /* 2 */
     color: #FFFFFF !important;
     /* 1 */
     background-color: #A52E1F; }
@@ -200,12 +208,14 @@ body {
 /**
  * 1. Override Bootstrap.
  * 2. Override either Bootstrap or Timelion styles.
+ * 3. Safari won't respect :enabled:hover/active on links.
  */
 .kuiButton--hollow {
   color: #3CAED2 !important;
   /* 2 */
   background-color: transparent; }
-  .kuiButton--hollow:hover:enabled, .kuiButton--hollow:active:enabled {
+  .kuiButton--hollow:hover, .kuiButton--hollow:active {
+    /* 3 */
     color: #006E8A !important;
     /* 1 */
     text-decoration: underline; }