From: harry <harmanmanchanda182@gmail.com>
Date: Mon, 10 Apr 2017 16:55:16 +0000 (+0530)
Subject: Reopen #9835, Closes #9832 - Hollow button disabled consistency fix
X-Git-Tag: v6.4.0-rc1~85^2~3
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=3ebfb27575c43de9030fc74846fbe4ecabca7b1d;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

Reopen #9835, Closes #9832 - Hollow button disabled consistency fix
---

diff --git a/scss/components/_button.scss b/scss/components/_button.scss
index c5054c74a..b3bb7c275 100644
--- a/scss/components/_button.scss
+++ b/scss/components/_button.scss
@@ -177,6 +177,11 @@ $button-transition: background-color 0.25s ease-out, color 0.25s ease-out !defau
   &:hover, &:focus {
     border-color: $color-hover;
     color: $color-hover;
+    &.disabled,
+    &[disabled] {
+      border: $border-width solid $color;
+      color: $color;
+    }
   }
 }
 
@@ -303,12 +308,31 @@ $button-transition: background-color 0.25s ease-out, color 0.25s ease-out !defau
       }
     }
 
+    // Disabled style
+    &.disabled,
+    &[disabled] {
+      @include button-disabled;
+
+      @each $name, $color in $button-palette {
+        &.#{$name} {
+          @include button-disabled($color, auto);
+        }
+      }
+    }
+
     // Hollow style
     @if $button-fill != hollow {
       &.hollow {
         @include button-hollow;
         @include button-hollow-style;
 
+        &.disabled,
+        &[disabled] {
+          &, &:hover, &:focus {
+            background-color: transparent;
+          }
+        }
+
         @each $name, $color in $button-palette {
           &.#{$name} {
             @include button-hollow-style($color);
@@ -331,18 +355,6 @@ $button-transition: background-color 0.25s ease-out, color 0.25s ease-out !defau
       }
     }
 
-    // Disabled style
-    &.disabled,
-    &[disabled] {
-      @include button-disabled;
-
-      @each $name, $color in $button-palette {
-        &.#{$name} {
-          @include button-disabled($color, auto);
-        }
-      }
-    }
-
     // Dropdown arrow
     &.dropdown {
       @include button-dropdown;