From: Daniel Schuba <daniel.schuba@daschmedia.de>
Date: Tue, 26 Sep 2017 07:38:37 +0000 (+0200)
Subject: Requested changes. Improved naming, renamed variable and defaulted to false
X-Git-Tag: v6.4.4-rc1~8^2~1^2
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=refs%2Fpull%2F10653%2Fhead;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

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

diff --git a/docs/pages/button.md b/docs/pages/button.md
index db058c89f..cd6f9e92f 100644
--- 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 970a6053f..a83554a66 100644
--- 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;
             }
           }