From b22fb357f873e5fc2273f9c455337d67753abe5b Mon Sep 17 00:00:00 2001
From: Andy Cochran <acochran@council.nyc.gov>
Date: Wed, 16 Dec 2015 11:58:52 -0500
Subject: [PATCH] add button expanded class for each breakpoint

---
 docs/pages/button.md         | 2 +-
 scss/components/_button.scss | 7 +++++++
 2 files changed, 8 insertions(+), 1 deletion(-)

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 {
-- 
2.47.2