0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00

remove need for floats and IE hacks for input-prepend and input-append--boom

This commit is contained in:
Mark Otto 2012-03-11 22:58:14 -07:00
parent 0630cd62b3
commit 91eef351e4
5 changed files with 8 additions and 52 deletions

Binary file not shown.

View File

@ -983,18 +983,6 @@ select:focus:required:invalid:focus {
.input-prepend,
.input-append {
margin-bottom: 5px;
*zoom: 1;
}
.input-prepend:before,
.input-append:before,
.input-prepend:after,
.input-append:after {
display: table;
content: "";
}
.input-prepend:after,
.input-append:after {
clear: both;
}
.input-prepend input,
.input-append input,
@ -1021,8 +1009,7 @@ select:focus:required:invalid:focus {
}
.input-prepend .add-on,
.input-append .add-on {
float: left;
display: block;
display: inline-block;
width: auto;
min-width: 16px;
height: 18px;
@ -1032,6 +1019,7 @@ select:focus:required:invalid:focus {
line-height: 18px;
text-align: center;
text-shadow: 0 1px 0 #ffffff;
vertical-align: middle;
background-color: #eeeeee;
border: 1px solid #ccc;
-webkit-border-radius: 3px 0 0 3px;
@ -1043,14 +1031,8 @@ select:focus:required:invalid:focus {
background-color: #a9dba9;
border-color: #46a546;
}
.input-prepend .add-on {
*margin-top: 1px;
/* IE6-7 */
}
.input-append input,
.input-append select .uneditable-input {
float: left;
-webkit-border-radius: 3px 0 0 3px;
-moz-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
@ -1066,12 +1048,6 @@ select:focus:required:invalid:focus {
-moz-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
}
.input-append input:first-child {
*margin-left: -160px;
}
.input-append input:first-child + .add-on {
*margin-left: -21px;
}
.search-query {
padding-left: 14px;
padding-right: 14px;

View File

@ -1187,8 +1187,7 @@ For example, <code>section</code> should be wrapped as inline.
<label class="control-label" for="prependedInput">Prepended text</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on">@</span>
<input class="span2" id="prependedInput" size="16" type="text">
<span class="add-on">@</span><input class="span2" id="prependedInput" size="16" type="text">
</div>
<p class="help-block">Here's some help text</p>
</div>
@ -1197,8 +1196,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<label class="control-label" for="appendedInput">Appended text</label>
<div class="controls">
<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>
<p class="help-block">Here's more help text</p>
</div>

View File

@ -1111,8 +1111,7 @@
<label class="control-label" for="prependedInput">{{_i}}Prepended text{{/i}}</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on">@</span>
<input class="span2" id="prependedInput" size="16" type="text">
<span class="add-on">@</span><input class="span2" id="prependedInput" size="16" type="text">
</div>
<p class="help-block">{{_i}}Here's some help text{{/i}}</p>
</div>
@ -1121,8 +1120,7 @@
<label class="control-label" for="appendedInput">{{_i}}Appended text{{/i}}</label>
<div class="controls">
<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>
<p class="help-block">{{_i}}Here's more help text{{/i}}</p>
</div>

View File

@ -362,7 +362,6 @@ select:focus:required:invalid {
.input-prepend,
.input-append {
margin-bottom: 5px;
.clearfix(); // Clear the float to prevent wrapping
input,
select,
.uneditable-input {
@ -376,8 +375,7 @@ select:focus:required:invalid {
border-left-color: #ccc;
}
.add-on {
float: left;
display: block;
display: inline-block;
width: auto;
min-width: 16px;
height: @baseLineHeight;
@ -387,6 +385,7 @@ select:focus:required:invalid {
line-height: @baseLineHeight;
text-align: center;
text-shadow: 0 1px 0 @white;
vertical-align: middle;
background-color: @grayLighter;
border: 1px solid #ccc;
.border-radius(3px 0 0 3px);
@ -396,16 +395,10 @@ select:focus:required:invalid {
border-color: @green;
}
}
.input-prepend {
.add-on {
*margin-top: 1px; /* IE6-7 */
}
}
.input-append {
input,
select
.uneditable-input {
float: left;
.border-radius(3px 0 0 3px);
}
.uneditable-input {
@ -417,15 +410,6 @@ select:focus:required:invalid {
margin-left: -1px;
.border-radius(0 3px 3px 0);
}
input:first-child {
// In IE7, having a hasLayout container (from clearfix's zoom:1) can make the first input
// inherit the sum of its ancestors' margins.
*margin-left: -160px;
&+.add-on {
*margin-left: -21px;
}
}
}