diff options
author | Mark Otto <otto@github.com> | 2013-02-03 05:31:26 +0400 |
---|---|---|
committer | Mark Otto <otto@github.com> | 2013-02-03 05:31:26 +0400 |
commit | 6993fadf7ec217608653ec5c0d4434ad8d8b2eb7 (patch) | |
tree | a8b2d2b40537b73295dfdd64d412fcc6dd4d07b8 | |
parent | 04aae2f56cca4438c90232b889fa5a6e1d78d223 (diff) |
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
-rw-r--r-- | docs/assets/css/bootstrap.css | 41 | ||||
-rw-r--r-- | docs/css.html | 38 | ||||
-rw-r--r-- | docs/templates/pages/css.mustache | 38 | ||||
-rw-r--r-- | less/forms.less | 17 | ||||
-rw-r--r-- | less/variables.less | 3 |
5 files changed, 84 insertions, 53 deletions
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index f1e0b43a57..50687ac2a3 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -8,6 +8,11 @@ * 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 */ article, @@ -1253,8 +1258,7 @@ input[type="search"].input-large, input[type="tel"].input-large, input[type="color"].input-large, .uneditable-input.input-large { - min-height: 44px; - padding: 10px 14px; + padding: 11px 14px; font-size: 17.5px; border-radius: 6px; } @@ -1282,29 +1286,6 @@ input[type="color"].input-small, 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"], select[class*="span"], textarea[class*="span"], @@ -1514,7 +1495,7 @@ select:focus:invalid:focus { } .input-group-addon.input-large { - padding: 10px 14px; + padding: 11px 14px; font-size: 17.5px; } @@ -1528,8 +1509,6 @@ select:focus:invalid:focus { .input-group input:first-child.input-small, .input-group .uneditable-input: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-top-left-radius: 3px; } @@ -1537,8 +1516,6 @@ select:focus:invalid:focus { .input-group input:first-child.input-large, .input-group .uneditable-input: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-top-left-radius: 6px; } @@ -1559,8 +1536,6 @@ select:focus:invalid:focus { .input-group-addon:last-child.input-small { border-top-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, @@ -1568,8 +1543,6 @@ select:focus:invalid:focus { .input-group-addon:last-child.input-large { border-top-right-radius: 6px; border-bottom-right-radius: 6px; - border-bottom-left-radius: 0; - border-top-left-radius: 0; } .input-group-addon:last-child { diff --git a/docs/css.html b/docs/css.html index b14c25ec2f..0c1322a4ee 100644 --- a/docs/css.html +++ b/docs/css.html @@ -1308,6 +1308,40 @@ For example, <code>&lt;section&gt;</code> should be wrapped </div> </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"> +<div class="input-group span9"> + <span class="input-group-addon input-large">@</span> + <input type="text" class="input-large" placeholder="Username"> +</div> +<div class="input-group span9"> + <span class="input-group-addon">@</span> + <input type="text" placeholder="Username"> +</div> +<div class="input-group span9"> + <span class="input-group-addon input-small">@</span> + <input type="text" class="input-small" placeholder="Username"> +</div> +</pre> + + <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> <form class="bs-docs-example"> @@ -1457,14 +1491,14 @@ For example, <code>&lt;section&gt;</code> should be wrapped <form class="bs-docs-example" style="padding-bottom: 15px;"> <div class="controls docs-input-sizes"> <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-mini" type="text" placeholder=".input-mini"> </div> </form> <pre class="prettyprint linenums"> <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-mini" type="text" placeholder=".input-mini"> </pre> <h4>Column sizing</h4> diff --git a/docs/templates/pages/css.mustache b/docs/templates/pages/css.mustache index 23a26b06e4..64d5005a57 100644 --- a/docs/templates/pages/css.mustache +++ b/docs/templates/pages/css.mustache @@ -1248,6 +1248,40 @@ For example, <code>&lt;section&gt;</code> should be wrapped </div> </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"> +<div class="input-group span9"> + <span class="input-group-addon input-large">@</span> + <input type="text" class="input-large" placeholder="Username"> +</div> +<div class="input-group span9"> + <span class="input-group-addon">@</span> + <input type="text" placeholder="Username"> +</div> +<div class="input-group span9"> + <span class="input-group-addon input-small">@</span> + <input type="text" class="input-small" placeholder="Username"> +</div> +</pre> + + <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> <form class="bs-docs-example"> @@ -1397,14 +1431,14 @@ For example, <code>&lt;section&gt;</code> should be wrapped <form class="bs-docs-example" style="padding-bottom: 15px;"> <div class="controls docs-input-sizes"> <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-mini" type="text" placeholder=".input-mini"> </div> </form> <pre class="prettyprint linenums"> <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-mini" type="text" placeholder=".input-mini"> </pre> <h4>Column sizing</h4> diff --git a/less/forms.less b/less/forms.less index 5480419a25..883bf1cf21 100644 --- a/less/forms.less +++ b/less/forms.less @@ -270,22 +270,15 @@ input[type="tel"], input[type="color"], .uneditable-input { &.input-large { - padding: @padding-large-input; + padding: @padding-large; font-size: @font-size-large; border-radius: @border-radius-large; - min-height: @input-height-large; } &.input-small { + min-height: @input-height-small; padding: @padding-small; font-size: @font-size-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 { font-size: @font-size-small; } &.input-large { - padding: @padding-large-input; + padding: @padding-large; font-size: @font-size-large; } } @@ -492,11 +485,9 @@ select:focus:invalid { .border-left-radius(@border-radius-base); &.input-small { .border-left-radius(@border-radius-small); - .border-right-radius(0); } &.input-large { .border-left-radius(@border-radius-large); - .border-right-radius(0); } } .input-group-addon:first-child { @@ -508,11 +499,9 @@ select:focus:invalid { .border-right-radius(@border-radius-base); &.input-small { .border-right-radius(@border-radius-small); - .border-left-radius(0); } &.input-large { .border-right-radius(@border-radius-large); - .border-left-radius(0); } } .input-group-addon:last-child { diff --git a/less/variables.less b/less/variables.less index d72eee21f5..4cdd124042 100644 --- a/less/variables.less +++ b/less/variables.less @@ -64,9 +64,10 @@ @padding-small: 2px 10px; // 26px @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. // input-large at 18 + 4 = 22, so I tried to compensate on padding. +*/ @border-radius-base: 4px; @border-radius-large: 6px; |