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

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index f1e0b43a57aaf13387f154c547591c9d3ff14790..50687ac2a3742cabc2e0491d1110075c9a9e5316 100644 (file)
--- 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 b14c25ec2f8ad99c13db407226e85903d07f424c..0c1322a4ee3dbd1f03db5f26802d8a29aa9371b2 100644 (file)
--- a/docs/css.html
+++ b/docs/css.html
@@ -1308,6 +1308,40 @@ For example, <code><section></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">
+&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>
           <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, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; 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">
 &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-mini" type="text" placeholder=".input-mini"&gt;
 </pre>
 
           <h4>Column sizing</h4>

diff --git a/docs/templates/pages/css.mustache b/docs/templates/pages/css.mustache
index 23a26b06e4dd866d9656312210d9c31a56360879..64d5005a574f9f33b87e5ac6c9a099d2005353b1 100644 (file)
--- a/docs/templates/pages/css.mustache
+++ b/docs/templates/pages/css.mustache
@@ -1248,6 +1248,40 @@ For example, <code><section></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">
+&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>
           <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, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; 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">
 &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-mini" type="text" placeholder=".input-mini"&gt;
 </pre>
 
           <h4>Column sizing</h4>

diff --git a/less/forms.less b/less/forms.less
index 5480419a2529f6698ba1fff768297983149faf17..883bf1cf21ba881534f1f27152ab9ce4c40bd6e2 100644 (file)
--- 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 d72eee21f54c73286eac9317c2a44c79980084f4..4cdd124042864560e50ceed241335d05aa0a77d1 100644 (file)
--- 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;