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

5d8e78e0 · Mark Otto · 75d952ff · 5d8e78e0 · 5d8e78e0 · 5d8e78e0
Commit 5d8e78e0 authored Jul 10, 2012 by Mark Otto
4 changed files
--- 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-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,

--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -752,6 +752,7 @@ For example, &lt;code&gt;section&lt;/code&gt; 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>

--- 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">
@@ -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>

--- a/less/forms.less
+++ b/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