adjust responsive sizing classes and adds more docs

diff --git a/docs/assets/scss/docs.scss b/docs/assets/scss/docs.scss
index ee6178ae3fbd72da2ba8fbdda4d091c71e9232f8..8b463f5a1d1f574367145863e710073a2d891629 100644 (file)
--- 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 0af510487708d8fe572d30e288072eeb698e8918..b18e413c84ecf3150b2015caa994fd090137a314 100644 (file)
--- 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 cd6f9e92ffffc817c914b476dc12057e69369e9a..4bfa2cd4db507c69f3b947092f0ccc04f4eee21d 100644 (file)
--- 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 a83554a6623da2e9c331dbf7d593825c9920fd3a..eed8bdd3f71242cfd7fa9a0261e89179749e52d7 100644 (file)
--- 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;
             }
           }