Skip to content

B
bootstrap
Commit 9e970988 authored by Mark Otto's avatar Mark Otto
Browse files
Options

make .input-* classes match .btn-* size classes

parent 0220015e
Hide whitespace changes
Inline Side-by-side
Showing with 117 additions and 55 deletions
docs/assets/css/bootstrap.css
View file @ 9e970988
...@@ -952,28 +952,78 @@ textarea::-webkit-input-placeholder { ...@@ -952,28 +952,78 @@ textarea::-webkit-input-placeholder {
margin-left: 10px; margin-left: 10px;
} }
.input-mini { select.input-large,
width: 60px; textarea.input-large,
} input[type="text"].input-large,
input[type="password"].input-large,
.input-small { input[type="datetime"].input-large,
width: 90px; input[type="datetime-local"].input-large,
} input[type="date"].input-large,
input[type="month"].input-large,
.input-medium { input[type="time"].input-large,
width: 150px; input[type="week"].input-large,
} input[type="number"].input-large,
input[type="email"].input-large,
.input-large { input[type="url"].input-large,
width: 210px; 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-xlarge { select.input-small,
width: 270px; 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-xxlarge { select.input-mini,
width: 530px; 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"], input[class*="span"],
......
docs/base-css.html
View file @ 9e970988
...@@ -1336,30 +1336,22 @@ For example, <code><section></code> should be wrapped as inlin ...@@ -1336,30 +1336,22 @@ For example, <code><section></code> should be wrapped as inlin
<p>Use relative sizing classes like <code>.input-large</code> or match your inputs to the grid column sizes using <code>.span*</code> classes.</p> <p>Use relative sizing classes like <code>.input-large</code> or match your inputs to the grid column sizes using <code>.span*</code> classes.</p>
<h4>Relative sizing</h4> <h4>Relative sizing</h4>
<p>Create larger or smaller form controls that match button sizes.</p>
<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-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-large" type="text" placeholder=".input-large">
<input class="input-xlarge" type="text" placeholder=".input-xlarge"> <input class="input-small" type="text" placeholder=".input-small">
<input class="input-xxlarge" type="text" placeholder=".input-xxlarge"> <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-mini" type="text" placeholder=".input-mini"&gt;
&lt;input class="input-small" type="text" placeholder=".input-small"&gt;
&lt;input class="input-medium" type="text" placeholder=".input-medium"&gt;
&lt;input class="input-large" type="text" placeholder=".input-large"&gt; &lt;input class="input-large" type="text" placeholder=".input-large"&gt;
&lt;input class="input-xlarge" type="text" placeholder=".input-xlarge"&gt; &lt;input class="input-small" type="text" placeholder=".input-small"&gt;
&lt;input class="input-xxlarge" type="text" placeholder=".input-xxlarge"&gt; &lt;input class="input-mini" type="text" placeholder=".input-mini"&gt;
</pre> </pre>
<p>
<span class="label label-info">Heads up!</span> In future versions, we'll be altering the use of these relative input classes to match our button sizes. For example, <code>.input-large</code> will increase the padding and font-size of an input.
</p>
<h4>Grid sizing</h4> <h4>Column sizing</h4>
<p>Use <code>.span1</code> to <code>.span12</code> for inputs that match the same sizes of the grid columns.</p> <p>Use <code>.span1</code> to <code>.span12</code> for setting widths on inputs that match Bootstrap's grid system.</p>
<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="span1" type="text" placeholder=".span1"> <input class="span1" type="text" placeholder=".span1">
......
docs/templates/pages/base-css.mustache
View file @ 9e970988
...@@ -1273,30 +1273,22 @@ ...@@ -1273,30 +1273,22 @@
<p>{{_i}}Use relative sizing classes like <code>.input-large</code> or match your inputs to the grid column sizes using <code>.span*</code> classes.{{/i}}</p> <p>{{_i}}Use relative sizing classes like <code>.input-large</code> or match your inputs to the grid column sizes using <code>.span*</code> classes.{{/i}}</p>
<h4>{{_i}}Relative sizing{{/i}}</h4> <h4>{{_i}}Relative sizing{{/i}}</h4>
<p>{{_i}}Create larger or smaller form controls that match button sizes.{{/i}}</p>
<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-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-large" type="text" placeholder=".input-large">
<input class="input-xlarge" type="text" placeholder=".input-xlarge"> <input class="input-small" type="text" placeholder=".input-small">
<input class="input-xxlarge" type="text" placeholder=".input-xxlarge"> <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-mini" type="text" placeholder=".input-mini"&gt;
&lt;input class="input-small" type="text" placeholder=".input-small"&gt;
&lt;input class="input-medium" type="text" placeholder=".input-medium"&gt;
&lt;input class="input-large" type="text" placeholder=".input-large"&gt; &lt;input class="input-large" type="text" placeholder=".input-large"&gt;
&lt;input class="input-xlarge" type="text" placeholder=".input-xlarge"&gt; &lt;input class="input-small" type="text" placeholder=".input-small"&gt;
&lt;input class="input-xxlarge" type="text" placeholder=".input-xxlarge"&gt; &lt;input class="input-mini" type="text" placeholder=".input-mini"&gt;
</pre> </pre>
<p>
<span class="label label-info">{{_i}}Heads up!{{/i}}</span> In future versions, we'll be altering the use of these relative input classes to match our button sizes. For example, <code>.input-large</code> will increase the padding and font-size of an input.
</p>
<h4>{{_i}}Grid sizing{{/i}}</h4> <h4>{{_i}}Column sizing{{/i}}</h4>
<p>{{_i}}Use <code>.span1</code> to <code>.span12</code> for inputs that match the same sizes of the grid columns.{{/i}}</p> <p>{{_i}}Use <code>.span1</code> to <code>.span12</code> for setting widths on inputs that match Bootstrap's grid system.{{/i}}</p>
<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="span1" type="text" placeholder=".span1"> <input class="span1" type="text" placeholder=".span1">
......
less/forms.less
View file @ 9e970988
...@@ -256,13 +256,41 @@ textarea { ...@@ -256,13 +256,41 @@ textarea {
// INPUT SIZES // INPUT SIZES
// ----------- // -----------
// General classes for quick sizes select,
.input-mini { width: 60px; } textarea,
.input-small { width: 90px; } input[type="text"],
.input-medium { width: 150px; } input[type="password"],
.input-large { width: 210px; } input[type="datetime"],
.input-xlarge { width: 270px; } input[type="datetime-local"],
.input-xxlarge { width: 530px; } 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);
}
}
......
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