adds button spacer and adds test content

diff --git a/package.json b/package.json
index 722bdf00930b10b1b8110354998a976d8f64dc18..0d380f32b3d712440002fe3bf4276ff676a9a47c 100644 (file)
--- a/package.json
+++ b/package.json
@@ -43,7 +43,7 @@
     "gulp-sourcemaps": "^1.6.0",
     "gulp-wrap": "^0.11.0",
     "gulp-zip": "^3.2.0",
-    "inky": "zurb/inky#brandonbarringer-hr",
+    "inky": "zurb/inky#button-margin",
     "lazypipe": "^1.0.1",
     "motion-ui": "^1.1.1",
     "multiline": "^1.0.2",

diff --git a/scss/components/_button.scss b/scss/components/_button.scss
index 563a248e8ba4735cdb44e186a7aea8a611240b39..303d4aa123ce350ede3369623072b0e132f6046e 100755 (executable)
--- a/scss/components/_button.scss
+++ b/scss/components/_button.scss
@@ -38,7 +38,7 @@ $button-font-weight: bold !default;
 
 /// Margin around buttons.
 /// @type List
-$button-margin: 0 0 $global-margin 0 !default;
+$button-margin-bottom: $global-margin !default;
 
 /// Background color of buttons.
 /// @type Color
@@ -58,8 +58,6 @@ $button-rounded: $global-rounded !default;
 
 table.button {
   width: auto;
-  margin: $button-margin;
-  Margin: $button-margin;
 
   table {
 
@@ -94,6 +92,13 @@ table.button {
   }
 }
 
+// creates spacing below buttons
+td.button-spacer {
+  height: $button-margin-bottom; 
+  font-size: $button-margin-bottom;
+  line-height: $button-margin-bottom;
+}
+
 table.button:hover table tr td a,
 table.button:active table tr td a,
 table.button table tr td a:visited,

diff --git a/test/visual/pages/button-inky.html b/test/visual/pages/button-inky.html
index 1a317721bf77e36d3aabe3b9ad3a70a06fe7db78..08231858f35445571f6792652964d86ceb67a3bc 100644 (file)
--- a/test/visual/pages/button-inky.html
+++ b/test/visual/pages/button-inky.html
@@ -8,48 +8,57 @@
   <row>
     <columns small="12" large="12">
       <center>
-      <button href="http://zurb.com" class="tiny" href="http://zurb.com">I am a tiny button</button>
+        <button href="http://zurb.com" class="tiny">I am a tiny button</button>
       </center>
+      <p>This text should be spaced away from bottom of button</p>
     </columns>
   </row>
   <row>
     <columns small="12" large="12">
-      <button href="http://zurb.com" class="small" href="http://zurb.com">I am a small button</button>
+      <button class="small" href="http://zurb.com">I am a small button</button>
+      <p>This text should be spaced away from bottom of button</p>
     </columns>
   </row>
   <row>
     <columns small="12" large="12">
-      <button href="http://zurb.com" class="" href="http://zurb.com">I am a default button</button>
+      <button href="http://zurb.com" class="">I am a default button</button>
+      <p>This text should be spaced away from bottom of button</p>
     </columns>
   </row>
   <row>
     <columns small="12" large="12">
       <button href="http://zurb.com" class="large" href="http://zurb.com">I am a large button</button>
+      <p>This text should be spaced away from bottom of button</p>
     </columns>
   </row>
   <row>
     <columns small="12" large="12">
       <button href="http://zurb.com" class="secondary" href="http://zurb.com">I am secondary</button>
+      <p>This text should be spaced away from bottom of button</p>
     </columns>
   </row>
   <row>
     <columns small="12" large="12">
       <button href="http://zurb.com" class="success" href="http://zurb.com">I am successful</button>
+      <p>This text should be spaced away from bottom of button</p>
     </columns>
   </row>
   <row>
     <columns small="12" large="12">
       <button class="alert" href="http://zurb.com">I alert</button>
+      <p>This text should be spaced away from bottom of button</p>
     </columns>
   </row>
   <row>
     <columns small="12" large="12">
       <button class="warning" href="http://zurb.com">I warn</button>
+      <p>This text should be spaced away from bottom of button</p>
     </columns>
   </row>
   <row>
     <columns small="12" large="12">
       <button href="http://zurb.com" class="expand">I expand</button>
+      <p>This text should be spaced away from bottom of button</p>
     </columns>
   </row>
   <row>
@@ -58,6 +67,7 @@
       <center>
         <button href="http://zurb.com" class="small-expand">Expand small only</button>
       </center>
+      <p>This text should be spaced away from bottom of button</p>
     </columns>
   </row>
   <row>
@@ -66,22 +76,26 @@
       <center>
         <button href="http://zurb.com" class="small-expand">Expand small only</button>
       </center>
+      <p>This text should be spaced away from bottom of button</p>
     </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>
+      <button href="http://zurb.com" class="expand">I expand and have lots of text</button>
+      <p>This text should be spaced away from bottom of button</p>
     </columns>
   </row>
   <row>
     <columns small="12" large="12">
       <button href="http://zurb.com" class="radius">I have a radius</button>
+      <p>This text should be spaced away from bottom of button</p>
     </columns>
   </row>
   <row>
     <columns small="12" large="12">
       <button href="http://zurb.com" class="rounded">I am round</button>
+      <p>This text should be spaced away from bottom of button</p>
     </columns>
   </row>
   <row>
@@ -89,6 +103,7 @@
       <center>
         <button href="http://zurb.com" class="radius">I am centered</button>
       </center>
+      <p>This text should be spaced away from bottom of button</p>
     </columns>
   </row>
   <row>
@@ -96,6 +111,7 @@
       <center>
         <button href="http://zurb.com" class="border">I am centered</button>
       </center>
+      <p>This text should be spaced away from bottom of button</p>
     </columns>
   </row>
 </container>