add width to expanded button fixes #301

diff --git a/scss/components/_button.scss b/scss/components/_button.scss
index 4ec03d0f9bfc8436ffbfcd75b1f76adde36dadda..5c8f5820cb1e34a31618fcbf3f368604e99c5a76 100755 (executable)
--- 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 f7c4994f24ed2cef39066a3ed595fa3386c887d0..7c0d0942c87d99502a607478183ed53b058e739f 100644 (file)
--- 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 06602a8066b3a46611bc3603c55c3a6ed251cec1..6acc4c7e2bcef735a7b5f27674e2846299bd3e2c 100644 (file)
--- 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 d096c23a6305a2cf8f7705ec2efb9758570cd23e..9c937e0c57b55f9cc08ae2ace0e106525ca4cccc 100644 (file)
--- 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>