mirror of
https://github.com/twbs/bootstrap.git
synced 2024-12-01 13:24:25 +01:00
make .input-* classes match .btn-* size classes
This commit is contained in:
Mark Otto
parent
0220015edd
commit
9e97098802
86
docs/assets/css/bootstrap.css
vendored
86
docs/assets/css/bootstrap.css
vendored
@ -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"],
|
||||
|
||||
@ -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>
|
||||
|
||||
<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;">
|
||||
<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-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">
|
||||
</div>
|
||||
</form>
|
||||
<pre class="prettyprint linenums">
|
||||
<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">
|
||||
</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>
|
||||
<p>Use <code>.span1</code> to <code>.span12</code> for inputs that match the same sizes of the grid columns.</p>
|
||||
<h4>Column sizing</h4>
|
||||
<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;">
|
||||
<div class="controls docs-input-sizes">
|
||||
<input class="span1" type="text" placeholder=".span1">
|
||||
|
||||
22
docs/templates/pages/base-css.mustache
vendored
22
docs/templates/pages/base-css.mustache
vendored
@ -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>
|
||||
|
||||
<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;">
|
||||
<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-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">
|
||||
</div>
|
||||
</form>
|
||||
<pre class="prettyprint linenums">
|
||||
<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">
|
||||
</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>
|
||||
<p>{{_i}}Use <code>.span1</code> to <code>.span12</code> for inputs that match the same sizes of the grid columns.{{/i}}</p>
|
||||
<h4>{{_i}}Column sizing{{/i}}</h4>
|
||||
<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;">
|
||||
<div class="controls docs-input-sizes">
|
||||
<input class="span1" type="text" placeholder=".span1">
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user