From 6993fadf7ec217608653ec5c0d4434ad8d8b2eb7 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 2 Feb 2013 17:31:26 -0800 Subject: 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 --- docs/assets/css/bootstrap.css | 41 +++++++-------------------------------- docs/css.html | 38 ++++++++++++++++++++++++++++++++++-- docs/templates/pages/css.mustache | 38 ++++++++++++++++++++++++++++++++++-- 3 files changed, 79 insertions(+), 38 deletions(-) (limited to 'docs') 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> +

Optional sizes

+

Add the relative form sizing classes to the `.input-group-addon`.

+
+
+ @ + +
+
+
+ @ + +
+
+
+ @ + +
+
+
+<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>
+
+ +

Buttons instead of text

Buttons in input groups are a bit different and require one extra level of nesting. Instead of .input-group-addon, you'll need to use .input-group-btn to wrap the buttons. This is required due to default browser styles that cannot be overridden.

@@ -1457,14 +1491,14 @@ For example, <code>&lt;section&gt;</code> should be wrapped
+ - 
 <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">

Column sizing

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> +

Optional sizes

+

Add the relative form sizing classes to the `.input-group-addon`.

+
+
+ @ + +
+
+
+ @ + +
+
+
+ @ + +
+
+
+<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>
+
+ +

Buttons instead of text

Buttons in input groups are a bit different and require one extra level of nesting. Instead of .input-group-addon, you'll need to use .input-group-btn to wrap the buttons. This is required due to default browser styles that cannot be overridden.

@@ -1397,14 +1431,14 @@ For example, <code>&lt;section&gt;</code> should be wrapped
+ - 
 <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">

Column sizing

-- cgit v1.2.3