From: Andy Cochran <acochran@council.nyc.gov>
Date: Wed, 16 Dec 2015 16:58:52 +0000 (-0500)
Subject: add button expanded class for each breakpoint
X-Git-Tag: v6.4.4-rc1~8^2~1^2~3^2
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=b22fb357f873e5fc2273f9c455337d67753abe5b;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

add button expanded class for each breakpoint
---

diff --git a/docs/pages/button.md b/docs/pages/button.md
index 9a081d1f1..e261e8041 100644
--- a/docs/pages/button.md
+++ b/docs/pages/button.md
@@ -39,7 +39,7 @@ Additional classes can be added to your button to change its size and shape.
 <a class="button" href="#">So Basic</a>
 <a class="large button" href="#">So Large</a>
 <a class="expanded button" href="#">Such Expand</a>
-<a class="small expanded button" href="#">Wow, Small Expand</a>
+<a class="small expanded-for-large button" href="#">Wow, Small + Expand for Large</a>
 ```
 
 ---
diff --git a/scss/components/_button.scss b/scss/components/_button.scss
index 44bf8d449..8cad1b2ce 100644
--- a/scss/components/_button.scss
+++ b/scss/components/_button.scss
@@ -205,6 +205,13 @@ $button-opacity-disabled: 0.25 !default;
     &.small    { font-size: map-get($button-sizes, small); }
     &.large    { font-size: map-get($button-sizes, large); }
     &.expanded { @include button-expand; }
+    @each $size in $breakpoint-classes {
+      @include breakpoint($size) {
+        &.expanded-for-#{$size} {
+          @include button-expand;
+        }
+      }
+    }
 
     // Colors
     @each $name, $color in $foundation-colors {