From: Kevin Ball <kmball11@gmail.com>
Date: Tue, 17 Jan 2017 19:35:37 +0000 (-0800)
Subject: Merge pull request #9648 from IamManchanda/hotfix/disabled-buttons
X-Git-Tag: v6.3.1-rc1~7
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=a29382d271d44c53924dfec0ab8439cd9c72ae32;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

Merge pull request #9648 from IamManchanda/hotfix/disabled-buttons

Bug Fix #9617 - Disables hover focus on button disabled
---

diff --git a/docs/pages/button.md b/docs/pages/button.md
index 6af5afed8..1b7318adf 100644
--- a/docs/pages/button.md
+++ b/docs/pages/button.md
@@ -107,8 +107,12 @@ The `.disabled` class will give buttons a faded appearance. The class is a purel
 
 
 ```html_example
-<button type="button" class="button" disabled>Disabled</button>
 <a class="button disabled" href="#" aria-disabled>Disabled</a>
+<button type="button" class="button primary" disabled>Disabled</button>
+<button type="button" class="button secondary" disabled>Disabled</button>
+<button type="button" class="button success" disabled>Disabled</button>
+<button type="button" class="button alert" disabled>Disabled</button>
+<button type="button" class="button warning" disabled>Disabled</button>
 ```
 
 ---
diff --git a/scss/components/_button.scss b/scss/components/_button.scss
index 0d7945be1..032e71c6d 100644
--- a/scss/components/_button.scss
+++ b/scss/components/_button.scss
@@ -158,13 +158,22 @@ $button-transition: background-color 0.25s ease-out, color 0.25s ease-out !defau
 }
 
 /// Adds disabled styles to a button by fading the element, reseting the cursor, and disabling pointer events.
-@mixin button-disabled($color: $primary-color) {
+/// @param [Color] $background [$primary-color] - Background color of the disabled button.
+/// @param [Color] $color [$button-color] - Text color of the disabled button. Set to `auto` to have the mixin automatically generate a color based on the background color.
+@mixin button-disabled(
+  $background: $primary-color,
+  $color: $button-color
+) {
+  @if $color == auto {
+    $color: color-pick-contrast($background, ($button-color, $button-color-alt));
+  }
+
   opacity: $button-opacity-disabled;
   cursor: not-allowed;
 
-  &:hover, &:focus {
-    background-color: $color;
-    color: $button-color;
+  &, &:hover, &:focus {
+    background-color: $background;
+    color: $color;
   }
 }
 
@@ -268,7 +277,7 @@ $button-transition: background-color 0.25s ease-out, color 0.25s ease-out !defau
 
       @each $name, $color in $button-palette {
         &.#{$name} {
-          @include button-disabled($color);
+          @include button-disabled($color, auto);
         }
       }
     }