mirror of
https://github.com/twbs/bootstrap.git
synced 2022-11-09 12:25:43 -05:00
fixes #3605: add support for input-prepend/-append to .form-search
This commit is contained in:
Mark Otto
parent
75d952ffd8
commit
5d8e78e0fa
4 changed files with 116 additions and 24 deletions
71
docs/assets/css/bootstrap.css
vendored
71
docs/assets/css/bootstrap.css
vendored
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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><form></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, <code>section</code> 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, <code>section</code> should be wrapped as inline.
|
|||
<div class="input-append">
|
||||
<input class="span2" id="appendedInputButtons" size="16" type="text"><button class="btn" type="button">Search</button><button class="btn" type="button">Options</button>
|
||||
</div>
|
||||
</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">
|
||||
<form class="form-search">
|
||||
<input type="text" class="span2 search-query">
|
||||
<button type="submit" class="btn">Search</button>
|
||||
</form>
|
||||
</pre>
|
||||
|
||||
<h3>Control sizing</h3>
|
||||
|
|
|
|||
20
docs/templates/pages/base-css.mustache
vendored
20
docs/templates/pages/base-css.mustache
vendored
|
|
@ -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><form></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 @@
|
|||
<div class="input-append">
|
||||
<input class="span2" id="appendedInputButtons" size="16" type="text"><button class="btn" type="button">Search</button><button class="btn" type="button">Options</button>
|
||||
</div>
|
||||
</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">
|
||||
<form class="form-search">
|
||||
<input type="text" class="span2 search-query">
|
||||
<button type="submit" class="btn">{{_i}}Search{{/i}}</button>
|
||||
</form>
|
||||
</pre>
|
||||
|
||||
<h3>{{_i}}Control sizing{{/i}}</h3>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in a new issue