From 5253c9f85d3bed77734c519e42f9ad13b34e00fe Mon Sep 17 00:00:00 2001
From: RafiBomb <rafi@zurb.com>
Date: Wed, 27 Sep 2017 14:58:36 -0700
Subject: [PATCH] adjust responsive sizing classes and adds more docs

---
 docs/assets/scss/docs.scss           | 44 ++++++++++++++++++++++++++++
 docs/assets/scss/examples/_grid.scss |  2 ++
 docs/pages/button.md                 | 21 +++++++++++--
 scss/components/_button.scss         | 10 +++----
 4 files changed, 69 insertions(+), 8 deletions(-)

diff --git a/docs/assets/scss/docs.scss b/docs/assets/scss/docs.scss
index ee6178ae3..8b463f5a1 100644
--- a/docs/assets/scss/docs.scss
+++ b/docs/assets/scss/docs.scss
@@ -483,3 +483,47 @@ a.docs-banner {
 .docs-nav-container {
   overflow: auto;
 }
+
+// docs example for example buttons
+@media screen and (max-width: 39.9375em) {
+  .button.small-only-expanded {
+    display: block;
+    width: 100%;
+    margin-right: 0;
+    margin-left: 0; } }
+@media screen and (min-width: 40em) and (max-width: 63.9375em) {
+  .button.medium-only-expanded {
+    display: block;
+    width: 100%;
+    margin-right: 0;
+    margin-left: 0; } }
+@media screen and (max-width: 63.9375em) {
+  .button.medium-down-expanded {
+    display: block;
+    width: 100%;
+    margin-right: 0;
+    margin-left: 0; } }
+@media print, screen and (min-width: 40em) {
+  .button.medium-expanded {
+    display: block;
+    width: 100%;
+    margin-right: 0;
+    margin-left: 0; } }
+@media screen and (min-width: 64em) and (max-width: 74.9375em) {
+  .button.large-only-expanded {
+    display: block;
+    width: 100%;
+    margin-right: 0;
+    margin-left: 0; } }
+@media screen and (max-width: 74.9375em) {
+  .button.large-down-expanded {
+    display: block;
+    width: 100%;
+    margin-right: 0;
+    margin-left: 0; } }
+@media print, screen and (min-width: 64em) {
+  .button.large-expanded {
+    display: block;
+    width: 100%;
+    margin-right: 0;
+    margin-left: 0; } }
diff --git a/docs/assets/scss/examples/_grid.scss b/docs/assets/scss/examples/_grid.scss
index 0af510487..b18e413c8 100644
--- a/docs/assets/scss/examples/_grid.scss
+++ b/docs/assets/scss/examples/_grid.scss
@@ -104,3 +104,5 @@
     }
   }
 }
+
+$button-responsive-expanded: true;
diff --git a/docs/pages/button.md b/docs/pages/button.md
index cd6f9e92f..4bfa2cd4d 100644
--- a/docs/pages/button.md
+++ b/docs/pages/button.md
@@ -59,9 +59,24 @@ Additional classes can be added to your button to change its size and shape.
 <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-small" href="#">Wow, Expand only on small viewport</a>
-<a class="button small expanded-medium-down" href="#">Expand on medium and smaller</a>
-<a class="button small expanded-medium-up" href="#">Expand on medium and larger</a>
+```
+
+### Responsive Expanded buttons
+
+If you are using the Sass version, you can activate these additional responsive button expand classes by changing the `$button-responsive-expanded` variable to true. (It is false by default to reduce CSS file size.)
+
+For CSS download users, you can [get the CSS here](https://gist.github.com/rafibomb/2497ca75ceedfa3f5ccf3ba146eae295) and add it to your stylesheet.
+
+```html_example
+<a class="button small small-only-expanded" href="#">Wow, Expand only on small viewport</a>
+<a class="button small medium-only-expanded" href="#">Expand only on medium viewport</a>
+<a class="button small large-only-expanded" href="#">Expand only on large viewport</a>
+
+<a class="button small medium-expanded" href="#">Wow, Expand on medium and larger</a>
+<a class="button small large-expanded" href="#">Expand on large and larger</a>
+
+<a class="button small medium-down-expanded" href="#">Expand on medium and smaller</a>
+<a class="button small large-down-expanded" href="#">Expand on large and smaller</a>
 ```
 
 ---
diff --git a/scss/components/_button.scss b/scss/components/_button.scss
index a83554a66..eed8bdd3f 100644
--- a/scss/components/_button.scss
+++ b/scss/components/_button.scss
@@ -107,7 +107,6 @@ $button-responsive-expanded: false !default;
   border: 1px solid transparent;
   border-radius: $button-radius;
   transition: $button-transition;
-
   font-size: map-get($button-sizes, default);
   line-height: 1;
   text-align: center;
@@ -160,7 +159,8 @@ $button-responsive-expanded: false !default;
 /// Removes background fill on hover and focus for hollow buttons.
 @mixin button-hollow {
   &,
-  &:hover, &:focus {
+  &:hover,
+  &:focus {
     background-color: transparent;
   }
 
@@ -278,19 +278,19 @@ $button-responsive-expanded: false !default;
     @if $button-responsive-expanded {
       @each $size in $breakpoint-classes {
         @include breakpoint(#{$size} only) {
-          &.expanded-#{$size} {
+          &.#{$size}-only-expanded {
             @include button-expand;
           }
         }
         @if $size != $-zf-zero-breakpoint {
           @include breakpoint(#{$size} down) {
-            &.expanded-#{$size}-down {
+            &.#{$size}-down-expanded {
               @include button-expand;
             }
           }
 
           @include breakpoint(#{$size}) {
-            &.expanded-#{$size}-up {
+            &.#{$size}-expanded {
               @include button-expand;
             }
           }
-- 
2.47.2