From: Geoff Kimball <geoff@zurb.com>
Date: Mon, 30 Nov 2015 23:03:53 +0000 (-0800)
Subject: Update markup for buttons in an input group to separate the button from the wrapper... 
X-Git-Tag: v6.0.5~26
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=018c5db66efbfee56942dbc06114fac0ec43678b;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

Update markup for buttons in an input group to separate the button from the wrapper, closes #7278
---

diff --git a/docs/pages/forms.md b/docs/pages/forms.md
index e7e153967..a04d1b0bc 100644
--- a/docs/pages/forms.md
+++ b/docs/pages/forms.md
@@ -189,13 +189,15 @@ To attach extra text or controls to the left or right of an input field, wrap th
 
 - `.input-group-field` on the text field.
 - `.input-group-label` on a text label.
-- `.input-group-button` on a button.
+- `.input-group-button` on a button. **Place the button inside this wrapper.**
 
 ```html_example
 <div class="input-group">
   <span class="input-group-label">$</span>
-  <input class="input-group-field" type="url">
-  <a class="input-group-button button">Submit</a>
+  <input class="input-group-field" type="number">
+  <div class="input-group-button">
+    <input type="submit" class="button" value="Submit">
+  </div>
 </div>
 ```
 
diff --git a/scss/forms/_input-group.scss b/scss/forms/_input-group.scss
index 4ba26c763..ed2179cfb 100644
--- a/scss/forms/_input-group.scss
+++ b/scss/forms/_input-group.scss
@@ -66,5 +66,11 @@ $input-prefix-padding: 1rem !default;
     padding-bottom: 0;
     text-align: center;
     width: 1%;
+
+    a,
+    input,
+    button {
+      margin: 0;
+    }
   }
 }