fixes #3605: add support for input-prepend/-append to .form-search

3 files changed, 92 insertions, 19 deletions

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index f8edafa3b..e290d8646 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -851,7 +851,7 @@ legend {
   display: block;
   width: 100%;
   padding: 0;
-  margin-bottom: 30px;
+  margin-bottom: 20px;
   font-size: 21px;
   line-height: 40px;
   color: #333333;
@@ -1408,19 +1408,19 @@ select:focus:required:invalid:focus {
   *zoom: 1;
 }
 
-.input-prepend,
-.input-append {
+.input-append,
+.input-prepend {
   margin-bottom: 5px;
   font-size: 0;
   white-space: nowrap;
 }
 
-.input-prepend input,
 .input-append input,
-.input-prepend select,
+.input-prepend input,
 .input-append select,
-.input-prepend .uneditable-input,
-.input-append .uneditable-input {
+.input-prepend select,
+.input-append .uneditable-input,
+.input-prepend .uneditable-input {
   position: relative;
   margin-bottom: 0;
   *margin-left: 0;
@@ -1431,17 +1431,17 @@ select:focus:required:invalid:focus {
           border-radius: 0 3px 3px 0;
 }
 
-.input-prepend input:focus,
 .input-append input:focus,
-.input-prepend select:focus,
+.input-prepend input:focus,
 .input-append select:focus,
-.input-prepend .uneditable-input:focus,
-.input-append .uneditable-input:focus {
+.input-prepend select:focus,
+.input-append .uneditable-input:focus,
+.input-prepend .uneditable-input:focus {
   z-index: 2;
 }
 
-.input-prepend .add-on,
-.input-append .add-on {
+.input-append .add-on,
+.input-prepend .add-on {
   display: inline-block;
   width: auto;
   height: 20px;
@@ -1457,18 +1457,18 @@ select:focus:required:invalid:focus {
   border: 1px solid #ccc;
 }
 
-.input-prepend .add-on,
 .input-append .add-on,
-.input-prepend .btn,
-.input-append .btn {
+.input-prepend .add-on,
+.input-append .btn,
+.input-prepend .btn {
   margin-left: -1px;
   -webkit-border-radius: 0;
      -moz-border-radius: 0;
           border-radius: 0;
 }
 
-.input-prepend .active,
-.input-append .active {
+.input-append .active,
+.input-prepend .active {
   background-color: #a9dba9;
   border-color: #46a546;
 }
@@ -1524,7 +1524,7 @@ select:focus:required:invalid:focus {
           border-radius: 0 3px 3px 0;
 }
 
-input.search-query {
+.search-query {
   padding-right: 14px;
   padding-right: 4px \9;
   padding-left: 14px;
@@ -1537,6 +1537,39 @@ input.search-query {
           border-radius: 14px;
 }
 
+/* Allow for input prepend/append in search forms */
+
+.form-search .input-append .search-query,
+.form-search .input-prepend .search-query {
+  -webkit-border-radius: 0;
+     -moz-border-radius: 0;
+          border-radius: 0;
+}
+
+.form-search .input-append .search-query {
+  -webkit-border-radius: 14px 0 0 14px;
+     -moz-border-radius: 14px 0 0 14px;
+          border-radius: 14px 0 0 14px;
+}
+
+.form-search .input-append .btn {
+  -webkit-border-radius: 0 14px 14px 0;
+     -moz-border-radius: 0 14px 14px 0;
+          border-radius: 0 14px 14px 0;
+}
+
+.form-search .input-prepend .search-query {
+  -webkit-border-radius: 0 14px 14px 0;
+     -moz-border-radius: 0 14px 14px 0;
+          border-radius: 0 14px 14px 0;
+}
+
+.form-search .input-prepend .btn {
+  -webkit-border-radius: 14px 0 0 14px;
+     -moz-border-radius: 14px 0 0 14px;
+          border-radius: 14px 0 0 14px;
+}
+
 .form-search input,
 .form-inline input,
 .form-horizontal input,
diff --git a/docs/base-css.html b/docs/base-css.html
index 175825c71..75296003b 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -752,6 +752,7 @@ For example, <code>section</code> should be wrapped as inline.
       <h2>Default styles</h2>
       <p>Individual form controls receive styling, but without any required base class on the <code>&lt;form&gt;</code> or large changes in markup. Results in stacked, left-aligned labels on top of form controls.</p>
       <form class="bs-docs-example">
+        <legend>Legend</legend>
         <label>Label name</label>
         <input type="text" placeholder="Type something…">
         <p class="help-block">Example block-level help text here.</p>
@@ -822,6 +823,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
         <li>Wrap any associated controls in <code>.controls</code> for proper alignment</li>
       </ul>
       <form class="bs-docs-example form-horizontal">
+        <legend>Legend</legend>
         <div class="control-group">
           <label class="control-label" for="">Email</label>
           <div class="controls">
@@ -1061,6 +1063,24 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
 &lt;/div&gt;
 </pre>
 
+      <h4>Search form</h4>
+      <form class="bs-docs-example form-search">
+        <div class="input-append">
+          <input type="text" class="span2 search-query">
+          <button type="submit" class="btn">Search</button>
+        </div>
+        <div class="input-prepend">
+          <button type="submit" class="btn">Search</button>
+          <input type="text" class="span2 search-query">
+        </div>
+      </form>
+<pre class="prettyprint linenums">
+&lt;form class="form-search"&gt;
+  &lt;input type="text" class="span2 search-query"&gt;
+  &lt;button type="submit" class="btn"&gt;Search&lt;/button&gt;
+&lt;/form&gt;
+</pre>
+
       <h3>Control sizing</h3>
       <p>Use relative sizing classes like <code>.input-large</code> or match your inputs to the grid column sizes using <code>.span*</code> classes.</p>
 
diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
index cc09f8301..21c24657a 100644
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -690,6 +690,7 @@
       <h2>{{_i}}Default styles{{/i}}</h2>
       <p>{{_i}}Individual form controls receive styling, but without any required base class on the <code>&lt;form&gt;</code> or large changes in markup. Results in stacked, left-aligned labels on top of form controls.{{/i}}</p>
       <form class="bs-docs-example">
+        <legend>Legend</legend>
         <label>{{_i}}Label name{{/i}}</label>
         <input type="text" placeholder="{{_i}}Type something…{{/i}}">
         <p class="help-block">{{_i}}Example block-level help text here.{{/i}}</p>
@@ -760,6 +761,7 @@
         <li>{{_i}}Wrap any associated controls in <code>.controls</code> for proper alignment{{/i}}</li>
       </ul>
       <form class="bs-docs-example form-horizontal">
+        <legend>Legend</legend>
         <div class="control-group">
           <label class="control-label" for="">{{_i}}Email{{/i}}</label>
           <div class="controls">
@@ -999,6 +1001,24 @@
 &lt;/div&gt;
 </pre>
 
+      <h4>{{_i}}Search form{{/i}}</h4>
+      <form class="bs-docs-example form-search">
+        <div class="input-append">
+          <input type="text" class="span2 search-query">
+          <button type="submit" class="btn">{{_i}}Search{{/i}}</button>
+        </div>
+        <div class="input-prepend">
+          <button type="submit" class="btn">{{_i}}Search{{/i}}</button>
+          <input type="text" class="span2 search-query">
+        </div>
+      </form>{{! /example }}
+<pre class="prettyprint linenums">
+&lt;form class="form-search"&gt;
+  &lt;input type="text" class="span2 search-query"&gt;
+  &lt;button type="submit" class="btn"&gt;{{_i}}Search{{/i}}&lt;/button&gt;
+&lt;/form&gt;
+</pre>
+
       <h3>{{_i}}Control sizing{{/i}}</h3>
       <p>{{_i}}Use relative sizing classes like <code>.input-large</code> or match your inputs to the grid column sizes using <code>.span*</code> classes.{{/i}}</p>