diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 8fa5186077..232cb9bf0e 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -952,28 +952,78 @@ textarea::-webkit-input-placeholder { margin-left: 10px; } -.input-mini { - width: 60px; +select.input-large, +textarea.input-large, +input[type="text"].input-large, +input[type="password"].input-large, +input[type="datetime"].input-large, +input[type="datetime-local"].input-large, +input[type="date"].input-large, +input[type="month"].input-large, +input[type="time"].input-large, +input[type="week"].input-large, +input[type="number"].input-large, +input[type="email"].input-large, +input[type="url"].input-large, +input[type="search"].input-large, +input[type="tel"].input-large, +input[type="color"].input-large, +.uneditable-input.input-large { + padding: 11px 19px; + padding-right: 14px; + padding-left: 14px; + font-size: 17.5px; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; } -.input-small { - width: 90px; +select.input-small, +textarea.input-small, +input[type="text"].input-small, +input[type="password"].input-small, +input[type="datetime"].input-small, +input[type="datetime-local"].input-small, +input[type="date"].input-small, +input[type="month"].input-small, +input[type="time"].input-small, +input[type="week"].input-small, +input[type="number"].input-small, +input[type="email"].input-small, +input[type="url"].input-small, +input[type="search"].input-small, +input[type="tel"].input-small, +input[type="color"].input-small, +.uneditable-input.input-small { + padding: 2px 10px; + font-size: 11.9px; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; } -.input-medium { - width: 150px; -} - -.input-large { - width: 210px; -} - -.input-xlarge { - width: 270px; -} - -.input-xxlarge { - width: 530px; +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 { + padding: 1px 6px; + font-size: 10.5px; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; } input[class*="span"], diff --git a/docs/base-css.html b/docs/base-css.html index a2ecf613a4..3c218e68f3 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -1336,30 +1336,22 @@ For example, <code><section></code> should be wrapped as inlin

Use relative sizing classes like .input-large or match your inputs to the grid column sizes using .span* classes.

Relative sizing

+

Create larger or smaller form controls that match button sizes.

- - - - - + +
-<input class="input-mini" type="text" placeholder=".input-mini">
-<input class="input-small" type="text" placeholder=".input-small">
-<input class="input-medium" type="text" placeholder=".input-medium">
 <input class="input-large" type="text" placeholder=".input-large">
-<input class="input-xlarge" type="text" placeholder=".input-xlarge">
-<input class="input-xxlarge" type="text" placeholder=".input-xxlarge">
+<input class="input-small" type="text" placeholder=".input-small">
+<input class="input-mini" type="text" placeholder=".input-mini">
 
-

- Heads up! In future versions, we'll be altering the use of these relative input classes to match our button sizes. For example, .input-large will increase the padding and font-size of an input. -

-

Grid sizing

-

Use .span1 to .span12 for inputs that match the same sizes of the grid columns.

+

Column sizing

+

Use .span1 to .span12 for setting widths on inputs that match Bootstrap's grid system.

diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index 82d65999d6..e48cdb8bb2 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -1273,30 +1273,22 @@

{{_i}}Use relative sizing classes like .input-large or match your inputs to the grid column sizes using .span* classes.{{/i}}

{{_i}}Relative sizing{{/i}}

+

{{_i}}Create larger or smaller form controls that match button sizes.{{/i}}

- - - - - + +
-<input class="input-mini" type="text" placeholder=".input-mini">
-<input class="input-small" type="text" placeholder=".input-small">
-<input class="input-medium" type="text" placeholder=".input-medium">
 <input class="input-large" type="text" placeholder=".input-large">
-<input class="input-xlarge" type="text" placeholder=".input-xlarge">
-<input class="input-xxlarge" type="text" placeholder=".input-xxlarge">
+<input class="input-small" type="text" placeholder=".input-small">
+<input class="input-mini" type="text" placeholder=".input-mini">
 
-

- {{_i}}Heads up!{{/i}} In future versions, we'll be altering the use of these relative input classes to match our button sizes. For example, .input-large will increase the padding and font-size of an input. -

-

{{_i}}Grid sizing{{/i}}

-

{{_i}}Use .span1 to .span12 for inputs that match the same sizes of the grid columns.{{/i}}

+

{{_i}}Column sizing{{/i}}

+

{{_i}}Use .span1 to .span12 for setting widths on inputs that match Bootstrap's grid system.{{/i}}

diff --git a/less/forms.less b/less/forms.less index d5c032b840..0d1598995f 100644 --- a/less/forms.less +++ b/less/forms.less @@ -256,13 +256,41 @@ textarea { // INPUT SIZES // ----------- -// General classes for quick sizes -.input-mini { width: 60px; } -.input-small { width: 90px; } -.input-medium { width: 150px; } -.input-large { width: 210px; } -.input-xlarge { width: 270px; } -.input-xxlarge { width: 530px; } +select, +textarea, +input[type="text"], +input[type="password"], +input[type="datetime"], +input[type="datetime-local"], +input[type="date"], +input[type="month"], +input[type="time"], +input[type="week"], +input[type="number"], +input[type="email"], +input[type="url"], +input[type="search"], +input[type="tel"], +input[type="color"], +.uneditable-input { + &.input-large { + padding: @paddingLarge; + padding-left: 14px; + padding-right: 14px; // TODO: Resolve this override + font-size: @fontSizeLarge; + .border-radius(@borderRadiusLarge); + } + &.input-small { + padding: @paddingSmall; + font-size: @fontSizeSmall; + .border-radius(@borderRadiusSmall); + } + &.input-mini { + padding: @paddingMini; + font-size: @fontSizeMini; + .border-radius(@borderRadiusSmall); + } +}