mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-03-15 05:00:15 +01:00
Code Issues Releases Wiki Activity

improve inline-block of append/prepend inputs with font-size: 0;

Browse Source
This commit is contained in:
Mark Otto 2012-06-14 11:56:46 -07:00
parent cda48d41ba
commit b1cb556503
4 changed files with 30 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
docs/assets/css/bootstrap.css vendored
View File

@ -1269,6 +1269,7 @@ textarea::-webkit-input-placeholder {
.input-prepend, .input-prepend,
.input-append { .input-append {
margin-bottom: 5px; margin-bottom: 5px;
font-size: 0;
} }
.input-prepend input, .input-prepend input,
@ -1280,6 +1281,7 @@ textarea::-webkit-input-placeholder {
position: relative; position: relative;
margin-bottom: 0; margin-bottom: 0;
*margin-left: 0; *margin-left: 0;
font-size: 13px;
vertical-align: middle; vertical-align: middle;
-webkit-border-radius: 0 3px 3px 0; -webkit-border-radius: 0 3px 3px 0;
-moz-border-radius: 0 3px 3px 0; -moz-border-radius: 0 3px 3px 0;
@ -1307,6 +1309,7 @@ textarea::-webkit-input-placeholder {
height: 18px; height: 18px;
min-width: 16px; min-width: 16px;
padding: 4px 5px; padding: 4px 5px;
font-size: 13px;
font-weight: normal; font-weight: normal;
line-height: 18px; line-height: 18px;
text-align: center; text-align: center;

17
docs/base-css.html
View File

@ -965,11 +965,13 @@ For example, <code>section</code> should be wrapped as inline.
<p>Wrap a <code>.add-on</code> and an <code>input</code> with one of two classes to prepend or append text to an input.</p> <p>Wrap a <code>.add-on</code> and an <code>input</code> with one of two classes to prepend or append text to an input.</p>
<form class="bs-docs-example"> <form class="bs-docs-example">
<div class="input-prepend"> <div class="input-prepend">
<span class="add-on">@</span><input class="span2" id="prependedInput" size="16" type="text" placeholder="Username"> <span class="add-on">@</span>
<input class="span2" id="prependedInput" size="16" type="text" placeholder="Username">
</div> </div>
<br> <br>
<div class="input-append"> <div class="input-append">
<input class="span2" id="appendedInput" size="16" type="text"><span class="add-on">.00</span> <input class="span2" id="appendedInput" size="16" type="text">
<span class="add-on">.00</span>
</div> </div>
</form> </form>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
@ -985,7 +987,9 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<p>Use both classes and two instances of <code>.add-on</code> to prepend and append an input.</p> <p>Use both classes and two instances of <code>.add-on</code> to prepend and append an input.</p>
<form class="bs-docs-example form-inline"> <form class="bs-docs-example form-inline">
<div class="input-prepend input-append"> <div class="input-prepend input-append">
<span class="add-on">$</span><input class="span2" id="appendedPrependedInput" size="16" type="text"><span class="add-on">.00</span> <span class="add-on">$</span>
<input class="span2" id="appendedPrependedInput" size="16" type="text">
<span class="add-on">.00</span>
</div> </div>
</form> </form>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
@ -998,11 +1002,14 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<p>Instead of a <code>&lt;span&gt;</code> with text, use a <code>.btn</code> to attach a button (or two) to an input.</p> <p>Instead of a <code>&lt;span&gt;</code> with text, use a <code>.btn</code> to attach a button (or two) to an input.</p>
<form class="bs-docs-example"> <form class="bs-docs-example">
<div class="input-append"> <div class="input-append">
<input class="span2" id="appendedInputButton" size="16" type="text"><button class="btn" type="button">Go!</button> <input class="span2" id="appendedInputButton" size="16" type="text">
<button class="btn" type="button">Go!</button>
</div> </div>
<br> <br>
<div class="input-append"> <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> <input class="span2" id="appendedInputButtons" size="16" type="text">
<button class="btn" type="button">Search</button>
<button class="btn" type="button">Options</button>
</div> </div>
</form> </form>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">

17
docs/templates/pages/base-css.mustache vendored
View File

@ -896,11 +896,13 @@
<p>{{_i}}Wrap a <code>.add-on</code> and an <code>input</code> with one of two classes to prepend or append text to an input.{{/i}}</p> <p>{{_i}}Wrap a <code>.add-on</code> and an <code>input</code> with one of two classes to prepend or append text to an input.{{/i}}</p>
<form class="bs-docs-example"> <form class="bs-docs-example">
<div class="input-prepend"> <div class="input-prepend">
<span class="add-on">@</span><input class="span2" id="prependedInput" size="16" type="text" placeholder="{{_i}}Username{{/i}}"> <span class="add-on">@</span>
<input class="span2" id="prependedInput" size="16" type="text" placeholder="{{_i}}Username{{/i}}">
</div> </div>
<br> <br>
<div class="input-append"> <div class="input-append">
<input class="span2" id="appendedInput" size="16" type="text"><span class="add-on">.00</span> <input class="span2" id="appendedInput" size="16" type="text">
<span class="add-on">.00</span>
</div> </div>
</form> </form>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
@ -916,7 +918,9 @@
<p>{{_i}}Use both classes and two instances of <code>.add-on</code> to prepend and append an input.{{/i}}</p> <p>{{_i}}Use both classes and two instances of <code>.add-on</code> to prepend and append an input.{{/i}}</p>
<form class="bs-docs-example form-inline"> <form class="bs-docs-example form-inline">
<div class="input-prepend input-append"> <div class="input-prepend input-append">
<span class="add-on">$</span><input class="span2" id="appendedPrependedInput" size="16" type="text"><span class="add-on">.00</span> <span class="add-on">$</span>
<input class="span2" id="appendedPrependedInput" size="16" type="text">
<span class="add-on">.00</span>
</div> </div>
</form> </form>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
@ -929,11 +933,14 @@
<p>{{_i}}Instead of a <code>&lt;span&gt;</code> with text, use a <code>.btn</code> to attach a button (or two) to an input.{{/i}}</p> <p>{{_i}}Instead of a <code>&lt;span&gt;</code> with text, use a <code>.btn</code> to attach a button (or two) to an input.{{/i}}</p>
<form class="bs-docs-example"> <form class="bs-docs-example">
<div class="input-append"> <div class="input-append">
<input class="span2" id="appendedInputButton" size="16" type="text"><button class="btn" type="button">Go!</button> <input class="span2" id="appendedInputButton" size="16" type="text">
<button class="btn" type="button">Go!</button>
</div> </div>
<br> <br>
<div class="input-append"> <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> <input class="span2" id="appendedInputButtons" size="16" type="text">
<button class="btn" type="button">Search</button>
<button class="btn" type="button">Options</button>
</div> </div>
</form> </form>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">

3
less/forms.less
View File

@ -380,12 +380,14 @@ textarea {
.input-prepend, .input-prepend,
.input-append { .input-append {
margin-bottom: 5px; margin-bottom: 5px;
font-size: 0;
input, input,
select, select,
.uneditable-input { .uneditable-input {
position: relative; // placed here by default so that on :focus we can place the input above the .add-on for full border and box-shadow goodness position: relative; // placed here by default so that on :focus we can place the input above the .add-on for full border and box-shadow goodness
margin-bottom: 0; // prevent bottom margin from screwing up alignment in stacked forms margin-bottom: 0; // prevent bottom margin from screwing up alignment in stacked forms
*margin-left: 0; *margin-left: 0;
font-size: @baseFontSize;
vertical-align: middle; vertical-align: middle;
.border-radius(0 @inputBorderRadius @inputBorderRadius 0); .border-radius(0 @inputBorderRadius @inputBorderRadius 0);
// Make input on top when focused so blue border and shadow always show // Make input on top when focused so blue border and shadow always show
@ -402,6 +404,7 @@ textarea {
height: @baseLineHeight; height: @baseLineHeight;
min-width: 16px; min-width: 16px;
padding: 4px 5px; padding: 4px 5px;
font-size: @baseFontSize;
font-weight: normal; font-weight: normal;
line-height: @baseLineHeight; line-height: @baseLineHeight;
text-align: center; text-align: center;