From: RafiBomb <rafi@zurb.com>
Date: Thu, 14 Apr 2016 23:48:44 +0000 (-0700)
Subject: add width to expanded button fixes #301
X-Git-Tag: v2.1.0~14
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=e50571f8cb6326d4e321de2343b96a9289438841;p=thirdparty%2Ffoundation%2Ffoundation-emails.git

add width to expanded button fixes #301
---

diff --git a/scss/components/_button.scss b/scss/components/_button.scss
index 4ec03d0f..5c8f5820 100755
--- a/scss/components/_button.scss
+++ b/scss/components/_button.scss
@@ -151,6 +151,7 @@ table.expanded {
 
     a {
       text-align: center;
+      width: 100%;
     }
   }
 
diff --git a/test/visual/pages/alignment.html b/test/visual/pages/alignment.html
index f7c4994f..7c0d0942 100644
--- a/test/visual/pages/alignment.html
+++ b/test/visual/pages/alignment.html
@@ -49,20 +49,20 @@
   </row>
 
   <center>
-    <button href="some-place">Center Button</button>
+    <button href="some-place">Center</button>
   </center>
 
   <row>
     <columns small="6" large="6">
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae error nam, sequi culpa deleniti aperiam saepe, similique laborum corrupti vitae iste mollitia reiciendis corporis qui, quae possimus eos quidem nostrum.</p>
       <center>
-        <button href="some-place">Center Always</button>
+        <button href="some-place">Center</button>
       </center>
     </columns>
     <columns small="6" large="6">
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae error nam, sequi culpa deleniti aperiam saepe, similique laborum corrupti vitae iste mollitia reiciendis corporis qui, quae possimus eos quidem nostrum.</p>
       <center>
-        <button href="some-place">Center Always</button>
+        <button href="some-place">Center</button>
       </center>
     </columns>
   </row>
diff --git a/test/visual/pages/button-inky.html b/test/visual/pages/button-inky.html
index 06602a80..6acc4c7e 100644
--- a/test/visual/pages/button-inky.html
+++ b/test/visual/pages/button-inky.html
@@ -1,6 +1,6 @@
 <style>
   .border {
-    border-bottom: 1px solid blue;
+    border-bottom: 3px solid blue;
   }
 </style>
 <container>
@@ -36,7 +36,7 @@
   </row>
   <row>
     <columns small="12" large="12">
-      <button class="alert border" href="http://zurb.com">I alert</button>
+      <button class="alert" href="http://zurb.com">I alert</button>
     </columns>
   </row>
   <row>
@@ -44,6 +44,11 @@
       <button href="http://zurb.com" href="http://zurb.com" class="expand">I expand</button>
     </columns>
   </row>
+  <row>
+    <columns small="12" large="12">
+      <button href="http://zurb.com" href="http://zurb.com" class="expand">I expand and have lots of text</button>
+    </columns>
+  </row>
   <row>
     <columns small="12" large="12">
       <button href="http://zurb.com" class="radius">I have a radius</button>
@@ -61,4 +66,11 @@
       </center>
     </columns>
   </row>
+  <row>
+    <columns small="12" large="12">
+      <center>
+        <button href="http://zurb.com" class="border">I am centered</button>
+      </center>
+    </columns>
+  </row>
 </container>
diff --git a/test/visual/pages/thumbnail.html b/test/visual/pages/thumbnail.html
index d096c23a..9c937e0c 100644
--- a/test/visual/pages/thumbnail.html
+++ b/test/visual/pages/thumbnail.html
@@ -2,31 +2,32 @@
   <row>
     <columns>
       <center>
-        <img src="//placehold.it/800x300" alt="" class="thumbnail">
+        <img src="http://placehold.it/800x300" alt="" class="thumbnail">
       </center>
     </columns>
   </row>
   <row>
     <columns>
       <center>
-        <img src="//placehold.it/300x300" alt="" class="thumbnail">
+        <img src="http://placehold.it/300x300" alt="" class="thumbnail">
       </center>
     </columns>
   </row>
+  watch out for smacing issues on the full width thumbnails. The right side spacing should match left.
   <row>
     <columns small="6">
-      <img src="//placehold.it/300x300" alt="" class="thumbnail">
+      <img src="http://placehold.it/300x300" alt="" class="thumbnail">
     </columns>
     <columns small="6">
-      <img src="//placehold.it/300x300" alt="" class="thumbnail">
+      <img src="http://placehold.it/300x300" alt="" class="thumbnail">
     </columns>
   </row>
   <row>
     <columns large="6">
-      <img src="//placehold.it/300x300" alt="" class="thumbnail">
+      <img src="http://placehold.it/300x300" alt="" class="thumbnail">
     </columns>
     <columns large="6">
-      <img src="//placehold.it/300x300" alt="" class="thumbnail">
+      <img src="http://placehold.it/300x300" alt="" class="thumbnail">
     </columns>
   </row>
 </container>