add button expanded class for each breakpoint

diff --git a/docs/pages/button.md b/docs/pages/button.md
index 9a081d1f1645f137043d8500ca00996c77b24a3f..e261e8041c574cc74e861ae64fa5df8c8b9515be 100644 (file)
--- 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 44bf8d449a80b0dfbf5ffb135aed6229120a90ed..8cad1b2cebf5f5bc23bb2c0081ed6d72b636b8bd 100644 (file)
--- 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 {