From: Daniel Schuba <daniel.schuba@daschmedia.de>
Date: Fri, 15 Sep 2017 10:13:03 +0000 (+0200)
Subject: Merge branch 'responsive-expanded-buttons' of https://github.com/andycochran/foundati... 
X-Git-Tag: v6.4.4-rc1~8^2~1^2~3
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=328c9e7535f37d5daa706971036b7346c4ddc93d;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

Merge branch 'responsive-expanded-buttons' of https://github.com/andycochran/foundation-sites into andycochran-responsive-expanded-buttons

# Conflicts:
#	docs/pages/button.md
---

328c9e7535f37d5daa706971036b7346c4ddc93d
diff --cc docs/pages/button.md
index dc4554749,e261e8041..db058c89f
--- a/docs/pages/button.md
+++ b/docs/pages/button.md
@@@ -44,21 -33,13 +44,22 @@@ A basic button can be created with mini
  
  Additional classes can be added to your button to change its size and shape.
  
 +<p>
 +  <a class="" data-open-video="3:23"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
 +</p>
 +
 +<div class="docs-codepen-container">
 +  <a class="codepen-logo-link" href="http://codepen.io/ZURBFoundation/pen/JNLVRb?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
 +</div>
 +
  ```html_example
 -<a class="tiny button" href="#">So Tiny</a>
 -<a class="small button" href="#">So Small</a>
 +<a class="button tiny" href="#">So Tiny</a>
 +<a class="button small" href="#">So Small</a>
  <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-for-large button" href="#">Wow, Small + Expand for Large</a>
 +<a class="button large" href="#">So Large</a>
 +<a class="button expanded" href="#">Such Expand</a>
 +<a class="button small expanded" href="#">Wow, Small Expand</a>
++<a class="button small expanded-for-large" href="#">Wow, Small + Expand for Large</a>
  ```
  
  ---
diff --cc scss/components/_button.scss
index e71f26493,8cad1b2ce..3d9509e7a
--- a/scss/components/_button.scss
+++ b/scss/components/_button.scss
@@@ -263,19 -201,23 +263,26 @@@ $button-transition: background-color 0.
      @include button;
  
      // Sizes
 -    &.tiny     { font-size: map-get($button-sizes, tiny); }
 -    &.small    { font-size: map-get($button-sizes, small); }
 -    &.large    { font-size: map-get($button-sizes, large); }
 +    @each $size, $value in map-remove($button-sizes, default) {
 +      &.#{$size} {
 +        font-size: $value;
 +      }
 +    }
 +
      &.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 {
 +    @each $name, $color in $button-palette {
        @if $button-fill != hollow {
          &.#{$name} {
 -          @include button-style($color, auto);
 +          @include button-style($color, auto, auto);
          }
        }
        @else {