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

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-prepend select,
-.input-append .uneditable-input {
+.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-prepend select:focus,
-.input-append .uneditable-input: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-prepend .add-on,
-.input-append .btn {
+.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,

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">
@@ -1059,6 +1061,24 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
 &lt;div class="input-append"&gt;
   &lt;input class="span2" id="appendedInputButtons" size="16" type="text"&gt;&lt;button class="btn" type="button"&gt;Search&lt;/button&gt;&lt;button class="btn" type="button"&gt;Options&lt;/button&gt;
 &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>

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">
@@ -997,6 +999,24 @@
 &lt;div class="input-append"&gt;
   &lt;input class="span2" id="appendedInputButtons" size="16" type="text"&gt;&lt;button class="btn" type="button"&gt;Search&lt;/button&gt;&lt;button class="btn" type="button"&gt;Options&lt;/button&gt;
 &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>

less/forms.less

@@ -22,7 +22,7 @@ legend {
   display: block;
   width: 100%;
   padding: 0;
-  margin-bottom: @baseLineHeight * 1.5;
+  margin-bottom: @baseLineHeight;
   font-size: @baseFontSize * 1.5;
   line-height: @baseLineHeight * 2;
   color: @grayDark;
@@ -399,8 +399,8 @@ select:focus:required:invalid {
 // ------------
 
 // Allow us to put symbols and text within the input field for a cleaner look
-.input-prepend,
+.input-append,
-.input-append {
+.input-prepend {
   margin-bottom: 5px;
   font-size: 0;
   white-space: nowrap; // Prevent span and input from separating
@@ -489,15 +489,34 @@ select:focus:required:invalid {
 // SEARCH FORM
 // -----------
 
-input.search-query {
+.search-query {
   padding-right: 14px;
   padding-right: 4px \9;
   padding-left: 14px;
   padding-left: 4px \9; /* IE7-8 doesn't have border-radius, so don't indent the padding */
-  margin-bottom: 0; // remove the default margin on all inputs
+  margin-bottom: 0; // Remove the default margin on all inputs
   .border-radius(14px);
 }
 
+/* Allow for input prepend/append in search forms */
+.form-search .input-append .search-query,
+.form-search .input-prepend .search-query {
+  .border-radius(0); // Override due to specificity
+}
+.form-search .input-append .search-query {
+  .border-radius(14px 0 0 14px)
+}
+.form-search .input-append .btn {
+  .border-radius(0 14px 14px 0)
+}
+.form-search .input-prepend .search-query {
+  .border-radius(0 14px 14px 0)
+}
+.form-search .input-prepend .btn {
+  .border-radius(14px 0 0 14px)
+}
+
+
 
 
 // HORIZONTAL & VERTICAL FORMS