Fix disabled button hover and focus state background color

diff --git a/scss/components/_button.scss b/scss/components/_button.scss
index 9860dd304f5d51d1b9523ba3fc7f22659f427aff..06f41528456b48877f3b878403dfff05f81bc99c 100644 (file)
--- a/scss/components/_button.scss
+++ b/scss/components/_button.scss
@@ -136,12 +136,12 @@ $button-opacity-disabled: 0.25 !default;
 }
 
 /// Adds disabled styles to a button by fading the element, reseting the cursor, and disabling pointer events.
-@mixin button-disabled {
+@mixin button-disabled($color: $primary-color) {
   opacity: $button-opacity-disabled;
   cursor: not-allowed;
 
   &:hover, &:focus {
-    background-color: $button-background;
+    background-color: $color;
     color: $button-color;
   }
 }
@@ -242,6 +242,12 @@ $button-opacity-disabled: 0.25 !default;
     &.disabled,
     &[disabled] {
       @include button-disabled;
+
+      @each $name, $color in $foundation-palette {
+        &.#{$name} {
+          @include button-disabled($color);
+        }
+      }
     }
 
     // Dropdown arrow