Skip to content

B
bootstrap
Commit 6993fadf authored by Mark Otto's avatar Mark Otto
Browse files
Options

Simplify input and input group sizing 

* Remove .input-mini because who really needs inputs that small
* Remove unnecessary border-radius resets from large and small input groups
parent 04aae2f5
Hide whitespace changes
Inline Side-by-side
Showing with 84 additions and 53 deletions
docs/assets/css/bootstrap.css
View file @ 6993fadf
...@@ -8,6 +8,11 @@ ...@@ -8,6 +8,11 @@
* Designed and built with all the love in the world by @mdo and @fat. * Designed and built with all the love in the world by @mdo and @fat.
*/ */
/*@padding-large-input: 10px 14px; // 44px
// firefox hack since it doesn't accept custom line-height for inputs and automatically sets line-height as font-size + 4 px.
// input-large at 18 + 4 = 22, so I tried to compensate on padding.
*/
/*! normalize.css v2.1.0 | MIT License | git.io/normalize */ /*! normalize.css v2.1.0 | MIT License | git.io/normalize */
article, article,
...@@ -1253,8 +1258,7 @@ input[type="search"].input-large, ...@@ -1253,8 +1258,7 @@ input[type="search"].input-large,
input[type="tel"].input-large, input[type="tel"].input-large,
input[type="color"].input-large, input[type="color"].input-large,
.uneditable-input.input-large { .uneditable-input.input-large {
min-height: 44px; padding: 11px 14px;
padding: 10px 14px;
font-size: 17.5px; font-size: 17.5px;
border-radius: 6px; border-radius: 6px;
} }
...@@ -1282,29 +1286,6 @@ input[type="color"].input-small, ...@@ -1282,29 +1286,6 @@ input[type="color"].input-small,
border-radius: 3px; border-radius: 3px;
} }
select.input-mini,
textarea.input-mini,
input[type="text"].input-mini,
input[type="password"].input-mini,
input[type="datetime"].input-mini,
input[type="datetime-local"].input-mini,
input[type="date"].input-mini,
input[type="month"].input-mini,
input[type="time"].input-mini,
input[type="week"].input-mini,
input[type="number"].input-mini,
input[type="email"].input-mini,
input[type="url"].input-mini,
input[type="search"].input-mini,
input[type="tel"].input-mini,
input[type="color"].input-mini,
.uneditable-input.input-mini {
min-height: 26px;
padding: 0 6px;
font-size: 10.5px;
border-radius: 3px;
}
input[class*="span"], input[class*="span"],
select[class*="span"], select[class*="span"],
textarea[class*="span"], textarea[class*="span"],
...@@ -1514,7 +1495,7 @@ select:focus:invalid:focus { ...@@ -1514,7 +1495,7 @@ select:focus:invalid:focus {
} }
.input-group-addon.input-large { .input-group-addon.input-large {
padding: 10px 14px; padding: 11px 14px;
font-size: 17.5px; font-size: 17.5px;
} }
...@@ -1528,8 +1509,6 @@ select:focus:invalid:focus { ...@@ -1528,8 +1509,6 @@ select:focus:invalid:focus {
.input-group input:first-child.input-small, .input-group input:first-child.input-small,
.input-group .uneditable-input:first-child.input-small, .input-group .uneditable-input:first-child.input-small,
.input-group-addon:first-child.input-small { .input-group-addon:first-child.input-small {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 3px; border-bottom-left-radius: 3px;
border-top-left-radius: 3px; border-top-left-radius: 3px;
} }
...@@ -1537,8 +1516,6 @@ select:focus:invalid:focus { ...@@ -1537,8 +1516,6 @@ select:focus:invalid:focus {
.input-group input:first-child.input-large, .input-group input:first-child.input-large,
.input-group .uneditable-input:first-child.input-large, .input-group .uneditable-input:first-child.input-large,
.input-group-addon:first-child.input-large { .input-group-addon:first-child.input-large {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 6px; border-bottom-left-radius: 6px;
border-top-left-radius: 6px; border-top-left-radius: 6px;
} }
...@@ -1559,8 +1536,6 @@ select:focus:invalid:focus { ...@@ -1559,8 +1536,6 @@ select:focus:invalid:focus {
.input-group-addon:last-child.input-small { .input-group-addon:last-child.input-small {
border-top-right-radius: 3px; border-top-right-radius: 3px;
border-bottom-right-radius: 3px; border-bottom-right-radius: 3px;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
} }
.input-group input:last-child.input-large, .input-group input:last-child.input-large,
...@@ -1568,8 +1543,6 @@ select:focus:invalid:focus { ...@@ -1568,8 +1543,6 @@ select:focus:invalid:focus {
.input-group-addon:last-child.input-large { .input-group-addon:last-child.input-large {
border-top-right-radius: 6px; border-top-right-radius: 6px;
border-bottom-right-radius: 6px; border-bottom-right-radius: 6px;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
} }
.input-group-addon:last-child { .input-group-addon:last-child {
......
docs/css.html
View file @ 6993fadf
...@@ -1308,6 +1308,40 @@ For example, <code><section></code> should be wrapped ...@@ -1308,6 +1308,40 @@ For example, <code><section></code> should be wrapped
</div> </div>
</pre> </pre>
<h4>Optional sizes</h4>
<p>Add the relative form sizing classes to the `.input-group-addon`.</p>
<form class="bs-docs-example">
<div class="input-group span9">
<span class="input-group-addon input-large">@</span>
<input type="text" class="input-large" placeholder="Username">
</div>
<br>
<div class="input-group span9">
<span class="input-group-addon">@</span>
<input type="text" placeholder="Username">
</div>
<br>
<div class="input-group span9">
<span class="input-group-addon input-small">@</span>
<input type="text" class="input-small" placeholder="Username">
</div>
</form>
<pre class="prettyprint linenums">
&lt;div class="input-group span9"&gt;
&lt;span class="input-group-addon input-large"&gt;@&lt;/span&gt;
&lt;input type="text" class="input-large" placeholder="Username"&gt;
&lt;/div&gt;
&lt;div class="input-group span9"&gt;
&lt;span class="input-group-addon"&gt;@&lt;/span&gt;
&lt;input type="text" placeholder="Username"&gt;
&lt;/div&gt;
&lt;div class="input-group span9"&gt;
&lt;span class="input-group-addon input-small"&gt;@&lt;/span&gt;
&lt;input type="text" class="input-small" placeholder="Username"&gt;
&lt;/div&gt;
</pre>
<h4>Buttons instead of text</h4> <h4>Buttons instead of text</h4>
<p>Buttons in input groups are a bit different and require one extra level of nesting. Instead of <code>.input-group-addon</code>, you'll need to use <code>.input-group-btn</code> to wrap the buttons. This is required due to default browser styles that cannot be overridden.</p> <p>Buttons in input groups are a bit different and require one extra level of nesting. Instead of <code>.input-group-addon</code>, you'll need to use <code>.input-group-btn</code> to wrap the buttons. This is required due to default browser styles that cannot be overridden.</p>
<form class="bs-docs-example"> <form class="bs-docs-example">
...@@ -1457,14 +1491,14 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped ...@@ -1457,14 +1491,14 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
<form class="bs-docs-example" style="padding-bottom: 15px;"> <form class="bs-docs-example" style="padding-bottom: 15px;">
<div class="controls docs-input-sizes"> <div class="controls docs-input-sizes">
<input class="input-large" type="text" placeholder=".input-large"> <input class="input-large" type="text" placeholder=".input-large">
<input type="text" placeholder="Default input">
<input class="input-small" type="text" placeholder=".input-small"> <input class="input-small" type="text" placeholder=".input-small">
<input class="input-mini" type="text" placeholder=".input-mini">
</div> </div>
</form> </form>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;input class="input-large" type="text" placeholder=".input-large"&gt; &lt;input class="input-large" type="text" placeholder=".input-large"&gt;
&lt;input type="text" placeholder="Default input"&gt;
&lt;input class="input-small" type="text" placeholder=".input-small"&gt; &lt;input class="input-small" type="text" placeholder=".input-small"&gt;
&lt;input class="input-mini" type="text" placeholder=".input-mini"&gt;
</pre> </pre>
<h4>Column sizing</h4> <h4>Column sizing</h4>
......
docs/templates/pages/css.mustache
View file @ 6993fadf
...@@ -1248,6 +1248,40 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped ...@@ -1248,6 +1248,40 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
<h4>Optional sizes</h4>
<p>Add the relative form sizing classes to the `.input-group-addon`.</p>
<form class="bs-docs-example">
<div class="input-group span9">
<span class="input-group-addon input-large">@</span>
<input type="text" class="input-large" placeholder="Username">
</div>
<br>
<div class="input-group span9">
<span class="input-group-addon">@</span>
<input type="text" placeholder="Username">
</div>
<br>
<div class="input-group span9">
<span class="input-group-addon input-small">@</span>
<input type="text" class="input-small" placeholder="Username">
</div>
</form>
<pre class="prettyprint linenums">
&lt;div class="input-group span9"&gt;
&lt;span class="input-group-addon input-large"&gt;@&lt;/span&gt;
&lt;input type="text" class="input-large" placeholder="Username"&gt;
&lt;/div&gt;
&lt;div class="input-group span9"&gt;
&lt;span class="input-group-addon"&gt;@&lt;/span&gt;
&lt;input type="text" placeholder="Username"&gt;
&lt;/div&gt;
&lt;div class="input-group span9"&gt;
&lt;span class="input-group-addon input-small"&gt;@&lt;/span&gt;
&lt;input type="text" class="input-small" placeholder="Username"&gt;
&lt;/div&gt;
</pre>
<h4>Buttons instead of text</h4> <h4>Buttons instead of text</h4>
<p>Buttons in input groups are a bit different and require one extra level of nesting. Instead of <code>.input-group-addon</code>, you'll need to use <code>.input-group-btn</code> to wrap the buttons. This is required due to default browser styles that cannot be overridden.</p> <p>Buttons in input groups are a bit different and require one extra level of nesting. Instead of <code>.input-group-addon</code>, you'll need to use <code>.input-group-btn</code> to wrap the buttons. This is required due to default browser styles that cannot be overridden.</p>
<form class="bs-docs-example"> <form class="bs-docs-example">
...@@ -1397,14 +1431,14 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped ...@@ -1397,14 +1431,14 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
<form class="bs-docs-example" style="padding-bottom: 15px;"> <form class="bs-docs-example" style="padding-bottom: 15px;">
<div class="controls docs-input-sizes"> <div class="controls docs-input-sizes">
<input class="input-large" type="text" placeholder=".input-large"> <input class="input-large" type="text" placeholder=".input-large">
<input type="text" placeholder="Default input">
<input class="input-small" type="text" placeholder=".input-small"> <input class="input-small" type="text" placeholder=".input-small">
<input class="input-mini" type="text" placeholder=".input-mini">
</div> </div>
</form> </form>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;input class="input-large" type="text" placeholder=".input-large"&gt; &lt;input class="input-large" type="text" placeholder=".input-large"&gt;
&lt;input type="text" placeholder="Default input"&gt;
&lt;input class="input-small" type="text" placeholder=".input-small"&gt; &lt;input class="input-small" type="text" placeholder=".input-small"&gt;
&lt;input class="input-mini" type="text" placeholder=".input-mini"&gt;
</pre> </pre>
<h4>Column sizing</h4> <h4>Column sizing</h4>
......
less/forms.less
View file @ 6993fadf
...@@ -270,22 +270,15 @@ input[type="tel"], ...@@ -270,22 +270,15 @@ input[type="tel"],
input[type="color"], input[type="color"],
.uneditable-input { .uneditable-input {
&.input-large { &.input-large {
padding: @padding-large-input; padding: @padding-large;
font-size: @font-size-large; font-size: @font-size-large;
border-radius: @border-radius-large; border-radius: @border-radius-large;
min-height: @input-height-large;
} }
&.input-small { &.input-small {
min-height: @input-height-small;
padding: @padding-small; padding: @padding-small;
font-size: @font-size-small; font-size: @font-size-small;
border-radius: @border-radius-small; border-radius: @border-radius-small;
min-height: @input-height-small;
}
&.input-mini {
padding: @padding-mini;
font-size: @font-size-mini;
border-radius: @border-radius-small;
min-height: @input-height-small;
} }
} }
...@@ -480,7 +473,7 @@ select:focus:invalid { ...@@ -480,7 +473,7 @@ select:focus:invalid {
font-size: @font-size-small; font-size: @font-size-small;
} }
&.input-large { &.input-large {
padding: @padding-large-input; padding: @padding-large;
font-size: @font-size-large; font-size: @font-size-large;
} }
} }
...@@ -492,11 +485,9 @@ select:focus:invalid { ...@@ -492,11 +485,9 @@ select:focus:invalid {
.border-left-radius(@border-radius-base); .border-left-radius(@border-radius-base);
&.input-small { &.input-small {
.border-left-radius(@border-radius-small); .border-left-radius(@border-radius-small);
.border-right-radius(0);
} }
&.input-large { &.input-large {
.border-left-radius(@border-radius-large); .border-left-radius(@border-radius-large);
.border-right-radius(0);
} }
} }
.input-group-addon:first-child { .input-group-addon:first-child {
...@@ -508,11 +499,9 @@ select:focus:invalid { ...@@ -508,11 +499,9 @@ select:focus:invalid {
.border-right-radius(@border-radius-base); .border-right-radius(@border-radius-base);
&.input-small { &.input-small {
.border-right-radius(@border-radius-small); .border-right-radius(@border-radius-small);
.border-left-radius(0);
} }
&.input-large { &.input-large {
.border-right-radius(@border-radius-large); .border-right-radius(@border-radius-large);
.border-left-radius(0);
} }
} }
.input-group-addon:last-child { .input-group-addon:last-child {
......
less/variables.less
View file @ 6993fadf
...@@ -64,9 +64,10 @@ ...@@ -64,9 +64,10 @@
@padding-small: 2px 10px; // 26px @padding-small: 2px 10px; // 26px
@padding-mini: 0 6px; // 22px @padding-mini: 0 6px; // 22px
@padding-large-input: 10px 14px; // 44px /*@padding-large-input: 10px 14px; // 44px
// firefox hack since it doesn't accept custom line-height for inputs and automatically sets line-height as font-size + 4 px. // firefox hack since it doesn't accept custom line-height for inputs and automatically sets line-height as font-size + 4 px.
// input-large at 18 + 4 = 22, so I tried to compensate on padding. // input-large at 18 + 4 = 22, so I tried to compensate on padding.
*/
@border-radius-base: 4px; @border-radius-base: 4px;
@border-radius-large: 6px; @border-radius-large: 6px;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment