fixes #3384: add support for multiple inputs per line when using grid sizing
This commit is contained in:
Mark Otto
parent
dbea3e2784
commit
93be608bf0
|
|
@ -358,6 +358,9 @@
|
|||
.uneditable-input {
|
||||
margin-left: 0;
|
||||
}
|
||||
.controls-row [class*="span"] + [class*="span"] {
|
||||
margin-left: 30px;
|
||||
}
|
||||
input.span12,
|
||||
textarea.span12,
|
||||
.uneditable-input.span12 {
|
||||
|
|
@ -700,6 +703,9 @@
|
|||
.uneditable-input {
|
||||
margin-left: 0;
|
||||
}
|
||||
.controls-row [class*="span"] + [class*="span"] {
|
||||
margin-left: 20px;
|
||||
}
|
||||
input.span12,
|
||||
textarea.span12,
|
||||
.uneditable-input.span12 {
|
||||
|
|
|
|||
|
|
@ -1143,6 +1143,10 @@ textarea,
|
|||
margin-left: 0;
|
||||
}
|
||||
|
||||
.controls-row [class*="span"] + [class*="span"] {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
input.span12,
|
||||
textarea.span12,
|
||||
.uneditable-input.span12 {
|
||||
|
|
@ -1215,6 +1219,25 @@ textarea.span1,
|
|||
width: 50px;
|
||||
}
|
||||
|
||||
.controls-row {
|
||||
*zoom: 1;
|
||||
}
|
||||
|
||||
.controls-row:before,
|
||||
.controls-row:after {
|
||||
display: table;
|
||||
line-height: 0;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.controls-row:after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.controls-row [class*="span"] {
|
||||
float: left;
|
||||
}
|
||||
|
||||
input[disabled],
|
||||
select[disabled],
|
||||
textarea[disabled],
|
||||
|
|
@ -2740,7 +2763,7 @@ button.close {
|
|||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
|
||||
background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
|
||||
background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
|
||||
background-image: linear-gradient(top, #ffffff, #e6e6e6);
|
||||
background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
|
||||
background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
|
||||
background-repeat: repeat-x;
|
||||
border: 1px solid #cccccc;
|
||||
|
|
@ -2885,7 +2908,7 @@ button.close {
|
|||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
|
||||
background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
|
||||
background-image: -o-linear-gradient(top, #0088cc, #0044cc);
|
||||
background-image: linear-gradient(top, #0088cc, #0044cc);
|
||||
background-image: linear-gradient(to bottom, #0088cc, #0044cc);
|
||||
background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
|
||||
background-repeat: repeat-x;
|
||||
border-color: #0044cc #0044cc #002a80;
|
||||
|
|
@ -2914,7 +2937,7 @@ button.close {
|
|||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406));
|
||||
background-image: -webkit-linear-gradient(top, #fbb450, #f89406);
|
||||
background-image: -o-linear-gradient(top, #fbb450, #f89406);
|
||||
background-image: linear-gradient(top, #fbb450, #f89406);
|
||||
background-image: linear-gradient(to bottom, #fbb450, #f89406);
|
||||
background-image: -moz-linear-gradient(top, #fbb450, #f89406);
|
||||
background-repeat: repeat-x;
|
||||
border-color: #f89406 #f89406 #ad6704;
|
||||
|
|
@ -2943,7 +2966,7 @@ button.close {
|
|||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#bd362f));
|
||||
background-image: -webkit-linear-gradient(top, #ee5f5b, #bd362f);
|
||||
background-image: -o-linear-gradient(top, #ee5f5b, #bd362f);
|
||||
background-image: linear-gradient(top, #ee5f5b, #bd362f);
|
||||
background-image: linear-gradient(to bottom, #ee5f5b, #bd362f);
|
||||
background-image: -moz-linear-gradient(top, #ee5f5b, #bd362f);
|
||||
background-repeat: repeat-x;
|
||||
border-color: #bd362f #bd362f #802420;
|
||||
|
|
@ -2972,7 +2995,7 @@ button.close {
|
|||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#51a351));
|
||||
background-image: -webkit-linear-gradient(top, #62c462, #51a351);
|
||||
background-image: -o-linear-gradient(top, #62c462, #51a351);
|
||||
background-image: linear-gradient(top, #62c462, #51a351);
|
||||
background-image: linear-gradient(to bottom, #62c462, #51a351);
|
||||
background-image: -moz-linear-gradient(top, #62c462, #51a351);
|
||||
background-repeat: repeat-x;
|
||||
border-color: #51a351 #51a351 #387038;
|
||||
|
|
@ -3001,7 +3024,7 @@ button.close {
|
|||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#2f96b4));
|
||||
background-image: -webkit-linear-gradient(top, #5bc0de, #2f96b4);
|
||||
background-image: -o-linear-gradient(top, #5bc0de, #2f96b4);
|
||||
background-image: linear-gradient(top, #5bc0de, #2f96b4);
|
||||
background-image: linear-gradient(to bottom, #5bc0de, #2f96b4);
|
||||
background-image: -moz-linear-gradient(top, #5bc0de, #2f96b4);
|
||||
background-repeat: repeat-x;
|
||||
border-color: #2f96b4 #2f96b4 #1f6377;
|
||||
|
|
@ -3030,7 +3053,7 @@ button.close {
|
|||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#444444), to(#222222));
|
||||
background-image: -webkit-linear-gradient(top, #444444, #222222);
|
||||
background-image: -o-linear-gradient(top, #444444, #222222);
|
||||
background-image: linear-gradient(top, #444444, #222222);
|
||||
background-image: linear-gradient(to bottom, #444444, #222222);
|
||||
background-image: -moz-linear-gradient(top, #444444, #222222);
|
||||
background-repeat: repeat-x;
|
||||
border-color: #222222 #222222 #000000;
|
||||
|
|
@ -3775,7 +3798,7 @@ input[type="submit"].btn.btn-mini {
|
|||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#222222), to(#111111));
|
||||
background-image: -webkit-linear-gradient(top, #222222, #111111);
|
||||
background-image: -o-linear-gradient(top, #222222, #111111);
|
||||
background-image: linear-gradient(top, #222222, #111111);
|
||||
background-image: linear-gradient(to bottom, #222222, #111111);
|
||||
background-repeat: repeat-x;
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
|
|
@ -4049,7 +4072,7 @@ input[type="submit"].btn.btn-mini {
|
|||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#151515), to(#040404));
|
||||
background-image: -webkit-linear-gradient(top, #151515, #040404);
|
||||
background-image: -o-linear-gradient(top, #151515, #040404);
|
||||
background-image: linear-gradient(top, #151515, #040404);
|
||||
background-image: linear-gradient(to bottom, #151515, #040404);
|
||||
background-image: -moz-linear-gradient(top, #151515, #040404);
|
||||
background-repeat: repeat-x;
|
||||
border-color: #040404 #040404 #000000;
|
||||
|
|
@ -4178,7 +4201,7 @@ input[type="submit"].btn.btn-mini {
|
|||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f1f1f1));
|
||||
background-image: -webkit-linear-gradient(top, #ffffff, #f1f1f1);
|
||||
background-image: -o-linear-gradient(top, #ffffff, #f1f1f1);
|
||||
background-image: linear-gradient(top, #ffffff, #f1f1f1);
|
||||
background-image: linear-gradient(to bottom, #ffffff, #f1f1f1);
|
||||
background-image: -moz-linear-gradient(top, #ffffff, #f1f1f1);
|
||||
background-repeat: repeat-x;
|
||||
border: 1px solid #e5e5e5;
|
||||
|
|
@ -4281,7 +4304,7 @@ input[type="submit"].btn.btn-mini {
|
|||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f5f5f5));
|
||||
background-image: -webkit-linear-gradient(top, #ffffff, #f5f5f5);
|
||||
background-image: -o-linear-gradient(top, #ffffff, #f5f5f5);
|
||||
background-image: linear-gradient(top, #ffffff, #f5f5f5);
|
||||
background-image: linear-gradient(to bottom, #ffffff, #f5f5f5);
|
||||
background-repeat: repeat-x;
|
||||
border: 1px solid #ddd;
|
||||
-webkit-border-radius: 3px;
|
||||
|
|
@ -5025,7 +5048,7 @@ a.badge:hover {
|
|||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#f9f9f9));
|
||||
background-image: -webkit-linear-gradient(top, #f5f5f5, #f9f9f9);
|
||||
background-image: -o-linear-gradient(top, #f5f5f5, #f9f9f9);
|
||||
background-image: linear-gradient(top, #f5f5f5, #f9f9f9);
|
||||
background-image: linear-gradient(to bottom, #f5f5f5, #f9f9f9);
|
||||
background-repeat: repeat-x;
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
|
|
@ -5047,7 +5070,7 @@ a.badge:hover {
|
|||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#149bdf), to(#0480be));
|
||||
background-image: -webkit-linear-gradient(top, #149bdf, #0480be);
|
||||
background-image: -o-linear-gradient(top, #149bdf, #0480be);
|
||||
background-image: linear-gradient(top, #149bdf, #0480be);
|
||||
background-image: linear-gradient(to bottom, #149bdf, #0480be);
|
||||
background-image: -moz-linear-gradient(top, #149bdf, #0480be);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff149bdf', endColorstr='#ff0480be', GradientType=0);
|
||||
|
|
@ -5090,7 +5113,7 @@ a.badge:hover {
|
|||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#c43c35));
|
||||
background-image: -webkit-linear-gradient(top, #ee5f5b, #c43c35);
|
||||
background-image: -o-linear-gradient(top, #ee5f5b, #c43c35);
|
||||
background-image: linear-gradient(top, #ee5f5b, #c43c35);
|
||||
background-image: linear-gradient(to bottom, #ee5f5b, #c43c35);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffee5f5b', endColorstr='#ffc43c35', GradientType=0);
|
||||
}
|
||||
|
|
@ -5110,7 +5133,7 @@ a.badge:hover {
|
|||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#57a957));
|
||||
background-image: -webkit-linear-gradient(top, #62c462, #57a957);
|
||||
background-image: -o-linear-gradient(top, #62c462, #57a957);
|
||||
background-image: linear-gradient(top, #62c462, #57a957);
|
||||
background-image: linear-gradient(to bottom, #62c462, #57a957);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff62c462', endColorstr='#ff57a957', GradientType=0);
|
||||
}
|
||||
|
|
@ -5130,7 +5153,7 @@ a.badge:hover {
|
|||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#339bb9));
|
||||
background-image: -webkit-linear-gradient(top, #5bc0de, #339bb9);
|
||||
background-image: -o-linear-gradient(top, #5bc0de, #339bb9);
|
||||
background-image: linear-gradient(top, #5bc0de, #339bb9);
|
||||
background-image: linear-gradient(to bottom, #5bc0de, #339bb9);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff339bb9', GradientType=0);
|
||||
}
|
||||
|
|
@ -5150,7 +5173,7 @@ a.badge:hover {
|
|||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406));
|
||||
background-image: -webkit-linear-gradient(top, #fbb450, #f89406);
|
||||
background-image: -o-linear-gradient(top, #fbb450, #f89406);
|
||||
background-image: linear-gradient(top, #fbb450, #f89406);
|
||||
background-image: linear-gradient(to bottom, #fbb450, #f89406);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1074,7 +1074,7 @@ For example, <code>section</code> should be wrapped as inline.
|
|||
<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>
|
||||
<form class="bs-docs-example">
|
||||
<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">
|
||||
|
|
@ -1092,10 +1092,13 @@ For example, <code>section</code> should be wrapped as inline.
|
|||
<input class="input-xlarge" type="text">
|
||||
<input class="input-xxlarge" type="text">
|
||||
</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>
|
||||
<form class="bs-docs-example">
|
||||
<form class="bs-docs-example" style="padding-bottom: 15px;">
|
||||
<div class="controls docs-input-sizes">
|
||||
<input class="span1" type="text" placeholder=".span1">
|
||||
<input class="span2" type="text" placeholder=".span2">
|
||||
|
|
@ -1127,6 +1130,35 @@ For example, <code>section</code> should be wrapped as inline.
|
|||
<input class="span1" type="text">
|
||||
<input class="span2" type="text">
|
||||
<input class="span3" type="text">
|
||||
</pre>
|
||||
|
||||
<p>For multiple grid inputs per line, <strong>use the <code>.controls-row</code> modifier class for proper spacing</strong>. It floats the inputs to collapse white-space, sets the proper margins, and the clears the float.</p>
|
||||
<form class="bs-docs-example" style="padding-bottom: 15px;">
|
||||
<div class="controls">
|
||||
<input class="span5" type="text" placeholder=".span5">
|
||||
</div>
|
||||
<div class="controls controls-row">
|
||||
<input class="span4" type="text" placeholder=".span4">
|
||||
<input class="span1" type="text" placeholder=".span1">
|
||||
</div>
|
||||
<div class="controls controls-row">
|
||||
<input class="span3" type="text" placeholder=".span3">
|
||||
<input class="span2" type="text" placeholder=".span2">
|
||||
</div>
|
||||
<div class="controls controls-row">
|
||||
<input class="span2" type="text" placeholder=".span2">
|
||||
<input class="span3" type="text" placeholder=".span3">
|
||||
</div>
|
||||
<div class="controls controls-row">
|
||||
<input class="span1" type="text" placeholder=".span1">
|
||||
<input class="span4" type="text" placeholder=".span4">
|
||||
</div>
|
||||
</form>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="controls controls-row">
|
||||
<input class="span4" type="text" placeholder=".span4">
|
||||
<input class="span1" type="text" placeholder=".span1">
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h3>Uneditable inputs</h3>
|
||||
|
|
|
|||
|
|
@ -1012,7 +1012,7 @@
|
|||
<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>
|
||||
<form class="bs-docs-example">
|
||||
<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">
|
||||
|
|
@ -1030,10 +1030,13 @@
|
|||
<input class="input-xlarge" type="text">
|
||||
<input class="input-xxlarge" type="text">
|
||||
</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>
|
||||
<form class="bs-docs-example">
|
||||
<form class="bs-docs-example" style="padding-bottom: 15px;">
|
||||
<div class="controls docs-input-sizes">
|
||||
<input class="span1" type="text" placeholder=".span1">
|
||||
<input class="span2" type="text" placeholder=".span2">
|
||||
|
|
@ -1065,6 +1068,35 @@
|
|||
<input class="span1" type="text">
|
||||
<input class="span2" type="text">
|
||||
<input class="span3" type="text">
|
||||
</pre>
|
||||
|
||||
<p>{{_i}}For multiple grid inputs per line, <strong>use the <code>.controls-row</code> modifier class for proper spacing</strong>. It floats the inputs to collapse white-space, sets the proper margins, and the clears the float.{{/i}}</p>
|
||||
<form class="bs-docs-example" style="padding-bottom: 15px;">
|
||||
<div class="controls">
|
||||
<input class="span5" type="text" placeholder=".span5">
|
||||
</div>
|
||||
<div class="controls controls-row">
|
||||
<input class="span4" type="text" placeholder=".span4">
|
||||
<input class="span1" type="text" placeholder=".span1">
|
||||
</div>
|
||||
<div class="controls controls-row">
|
||||
<input class="span3" type="text" placeholder=".span3">
|
||||
<input class="span2" type="text" placeholder=".span2">
|
||||
</div>
|
||||
<div class="controls controls-row">
|
||||
<input class="span2" type="text" placeholder=".span2">
|
||||
<input class="span3" type="text" placeholder=".span3">
|
||||
</div>
|
||||
<div class="controls controls-row">
|
||||
<input class="span1" type="text" placeholder=".span1">
|
||||
<input class="span4" type="text" placeholder=".span4">
|
||||
</div>
|
||||
</form>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="controls controls-row">
|
||||
<input class="span4" type="text" placeholder=".span4">
|
||||
<input class="span1" type="text" placeholder=".span1">
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h3>{{_i}}Uneditable inputs{{/i}}</h3>
|
||||
|
|
|
|||
|
|
@ -290,8 +290,18 @@ textarea[class*="span"],
|
|||
// GRID SIZING FOR INPUTS
|
||||
// ----------------------
|
||||
|
||||
// Grid sizes
|
||||
#grid > .input(@gridColumnWidth, @gridGutterWidth);
|
||||
|
||||
// Control row for multiple inputs per line
|
||||
.controls-row {
|
||||
.clearfix(); // Clear the float from controls
|
||||
}
|
||||
.controls-row [class*="span"] {
|
||||
float: left; // Float to collapse white-space for proper grid alignment
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// DISABLED STATE
|
||||
|
|
|
|||
|
|
@ -721,6 +721,11 @@
|
|||
margin-left: 0; // override margin-left from core grid system
|
||||
}
|
||||
|
||||
// Space grid-sized controls properly if multiple per line
|
||||
.controls-row [class*="span"] + [class*="span"] {
|
||||
margin-left: @gridGutterWidth;
|
||||
}
|
||||
|
||||
// generate .spanX
|
||||
.spanX (@gridColumns);
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue