From: RafiBomb <rafi@zurb.com>
Date: Wed, 8 Jun 2016 15:52:10 +0000 (-0700)
Subject: adds small-expanded css
X-Git-Tag: v2.2.0~11^2~9
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=92528bf261c439b78ddf6842d20569c17f814d60;p=thirdparty%2Ffoundation%2Ffoundation-emails.git

adds small-expanded css
---

diff --git a/scss/components/_media-query.scss b/scss/components/_media-query.scss
index 49619299..a564b464 100755
--- a/scss/components/_media-query.scss
+++ b/scss/components/_media-query.scss
@@ -101,7 +101,8 @@
       display: inline-block !important;
     }
 
-    &.vertical, &.small-vertical {
+    &.vertical, 
+    &.small-vertical {
       td,
       th {
         display: block !important;
@@ -113,5 +114,27 @@
   table.menu[align="center"] {
     width: auto !important;
   }
+
+
+  // expands buttons for small only
+  table.button.small-expand,
+  table.button.small-expanded {
+    width: 100% !important;
+
+    table {
+      width: 100%;
+
+      a {
+        text-align: center !important;
+        width: 100% !important;
+        padding-left: 0 !important;
+        padding-right: 0 !important;
+      }
+    }
+
+    center {
+      min-width: 0;
+    }
+  }
 }
 
diff --git a/test/visual/pages/button-inky.html b/test/visual/pages/button-inky.html
index c6fb9dda..f169f015 100644
--- a/test/visual/pages/button-inky.html
+++ b/test/visual/pages/button-inky.html
@@ -4,6 +4,7 @@
   }
 </style>
 <container>
+<a href="https://litmus.com/checklist/emails/public/52b6fb8">Test Results - Passing 6/8/1016</a>
   <row>
     <columns small="12" large="12">
       <center>
@@ -53,6 +54,23 @@
   </row>
   <row>
     <columns small="12" large="12">
+    Expand small only with center tag
+      <center>
+        <button href="http://zurb.com" href="http://zurb.com" class="small-expand">Expand small only</button>
+      </center>
+    </columns>
+  </row>
+  <row>
+    <columns small="12" large="12">
+    Expand small only
+      <center>
+        <button href="http://zurb.com" href="http://zurb.com" class="small-expand">Expand small only</button>
+      </center>
+    </columns>
+  </row>
+  <row>
+    <columns small="12" large="12">
+    <center>
       <button href="http://zurb.com" href="http://zurb.com" class="expand">I expand and have lots of text</button>
     </columns>
   </row>