Requested changes. Improved naming, renamed variable and defaulted to false

diff --git a/docs/pages/button.md b/docs/pages/button.md
index db058c89fc6b078ab9cb7aaa5352a35d733a8d61..cd6f9e92ffffc817c914b476dc12057e69369e9a 100644 (file)
--- a/docs/pages/button.md
+++ b/docs/pages/button.md
@@ -59,7 +59,9 @@ 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-for-large" href="#">Wow, Small + Expand for Large</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>
 ```
 
 ---

diff --git a/scss/components/_button.scss b/scss/components/_button.scss
index 970a6053fb59a2794667c92e2673999167185bf4..a83554a6623da2e9c331dbf7d593825c9920fd3a 100644 (file)
--- a/scss/components/_button.scss
+++ b/scss/components/_button.scss
@@ -82,7 +82,7 @@ $button-transition: background-color 0.25s ease-out, color 0.25s ease-out !defau
 
 /// Additional responsive classes for .expanded
 /// @type Boolean
-$responsive-expanded-button: true !default;
+$button-responsive-expanded: false !default;
 
 // TODO: Document button-base() mixin
 @mixin button-base {
@@ -275,22 +275,22 @@ $responsive-expanded-button: true !default;
 
     &.expanded { @include button-expand; }
 
-    @if $responsive-expanded-button {
+    @if $button-responsive-expanded {
       @each $size in $breakpoint-classes {
         @include breakpoint(#{$size} only) {
-          &.expanded-for-#{$size} {
+          &.expanded-#{$size} {
             @include button-expand;
           }
         }
         @if $size != $-zf-zero-breakpoint {
           @include breakpoint(#{$size} down) {
-            &.expanded-for-#{$size}-down {
+            &.expanded-#{$size}-down {
               @include button-expand;
             }
           }
 
           @include breakpoint(#{$size}) {
-            &.expanded-for-#{$size}-up {
+            &.expanded-#{$size}-up {
               @include button-expand;
             }
           }