Fix Safari bug: Safari ignores :enabled pseudo class, preventing butt…

…on active and hover states from taking effect.

Backports PR #10369

**Commit 1:**
Fix Safari bug: Safari ignores :enabled pseudo class, preventing button active and hover states from taking effect.

* Original sha: 920ef6c
* Authored by CJ Cenizal <cj@cenizal.com> on 2017-02-15T16:49:34Z

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;
   }

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,14 +147,16 @@ body {
 
 /**
  * 1. Override Bootstrap.
+ * 2. Safari won't respect :enabled:hover/active on links.
  */
 .kuiButton--basic {
   color: #5a5a5a;
   background-color: #F2F2F2; }
   .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; }