fix fluid grid selectors to remove > in selectors

This commit is contained in:
Mark Otto 2012-03-31 00:53:38 -07:00
parent 2f4810e72f
commit 37745cd899
6 changed files with 122 additions and 40 deletions

Binary file not shown.

View File

@ -286,46 +286,57 @@
clear: both; clear: both;
} }
.row-fluid [class*="span"] { .row-fluid [class*="span"] {
display: block;
width: 100%;
min-height: 28px;
/* Make inputs at least the height of their button counterpart */
/* Makes inputs behave like true block-level elements */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
float: left; float: left;
margin-left: 2.762430939%; margin-left: 2.762430939%;
} }
.row-fluid [class*="span"]:first-child { .row-fluid [class*="span"]:first-child {
margin-left: 0; margin-left: 0;
} }
.row-fluid > .span12 { .row-fluid .span12 {
width: 99.999999993%; width: 99.999999993%;
} }
.row-fluid > .span11 { .row-fluid .span11 {
width: 91.436464082%; width: 91.436464082%;
} }
.row-fluid > .span10 { .row-fluid .span10 {
width: 82.87292817100001%; width: 82.87292817100001%;
} }
.row-fluid > .span9 { .row-fluid .span9 {
width: 74.30939226%; width: 74.30939226%;
} }
.row-fluid > .span8 { .row-fluid .span8 {
width: 65.74585634900001%; width: 65.74585634900001%;
} }
.row-fluid > .span7 { .row-fluid .span7 {
width: 57.182320438000005%; width: 57.182320438000005%;
} }
.row-fluid > .span6 { .row-fluid .span6 {
width: 48.618784527%; width: 48.618784527%;
} }
.row-fluid > .span5 { .row-fluid .span5 {
width: 40.055248616%; width: 40.055248616%;
} }
.row-fluid > .span4 { .row-fluid .span4 {
width: 31.491712705%; width: 31.491712705%;
} }
.row-fluid > .span3 { .row-fluid .span3 {
width: 22.928176794%; width: 22.928176794%;
} }
.row-fluid > .span2 { .row-fluid .span2 {
width: 14.364640883%; width: 14.364640883%;
} }
.row-fluid > .span1 { .row-fluid .span1 {
width: 5.801104972%; width: 5.801104972%;
} }
input, input,
@ -477,46 +488,57 @@
clear: both; clear: both;
} }
.row-fluid [class*="span"] { .row-fluid [class*="span"] {
display: block;
width: 100%;
min-height: 28px;
/* Make inputs at least the height of their button counterpart */
/* Makes inputs behave like true block-level elements */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
float: left; float: left;
margin-left: 2.564102564%; margin-left: 2.564102564%;
} }
.row-fluid [class*="span"]:first-child { .row-fluid [class*="span"]:first-child {
margin-left: 0; margin-left: 0;
} }
.row-fluid > .span12 { .row-fluid .span12 {
width: 100%; width: 100%;
} }
.row-fluid > .span11 { .row-fluid .span11 {
width: 91.45299145300001%; width: 91.45299145300001%;
} }
.row-fluid > .span10 { .row-fluid .span10 {
width: 82.905982906%; width: 82.905982906%;
} }
.row-fluid > .span9 { .row-fluid .span9 {
width: 74.358974359%; width: 74.358974359%;
} }
.row-fluid > .span8 { .row-fluid .span8 {
width: 65.81196581200001%; width: 65.81196581200001%;
} }
.row-fluid > .span7 { .row-fluid .span7 {
width: 57.264957265%; width: 57.264957265%;
} }
.row-fluid > .span6 { .row-fluid .span6 {
width: 48.717948718%; width: 48.717948718%;
} }
.row-fluid > .span5 { .row-fluid .span5 {
width: 40.170940171000005%; width: 40.170940171000005%;
} }
.row-fluid > .span4 { .row-fluid .span4 {
width: 31.623931624%; width: 31.623931624%;
} }
.row-fluid > .span3 { .row-fluid .span3 {
width: 23.076923077%; width: 23.076923077%;
} }
.row-fluid > .span2 { .row-fluid .span2 {
width: 14.529914530000001%; width: 14.529914530000001%;
} }
.row-fluid > .span1 { .row-fluid .span1 {
width: 5.982905983%; width: 5.982905983%;
} }
input, input,

View File

@ -254,46 +254,57 @@ a:hover {
clear: both; clear: both;
} }
.row-fluid [class*="span"] { .row-fluid [class*="span"] {
display: block;
width: 100%;
min-height: 28px;
/* Make inputs at least the height of their button counterpart */
/* Makes inputs behave like true block-level elements */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
float: left; float: left;
margin-left: 2.127659574%; margin-left: 2.127659574%;
} }
.row-fluid [class*="span"]:first-child { .row-fluid [class*="span"]:first-child {
margin-left: 0; margin-left: 0;
} }
.row-fluid > .span12 { .row-fluid .span12 {
width: 99.99999998999999%; width: 99.99999998999999%;
} }
.row-fluid > .span11 { .row-fluid .span11 {
width: 91.489361693%; width: 91.489361693%;
} }
.row-fluid > .span10 { .row-fluid .span10 {
width: 82.97872339599999%; width: 82.97872339599999%;
} }
.row-fluid > .span9 { .row-fluid .span9 {
width: 74.468085099%; width: 74.468085099%;
} }
.row-fluid > .span8 { .row-fluid .span8 {
width: 65.95744680199999%; width: 65.95744680199999%;
} }
.row-fluid > .span7 { .row-fluid .span7 {
width: 57.446808505%; width: 57.446808505%;
} }
.row-fluid > .span6 { .row-fluid .span6 {
width: 48.93617020799999%; width: 48.93617020799999%;
} }
.row-fluid > .span5 { .row-fluid .span5 {
width: 40.425531911%; width: 40.425531911%;
} }
.row-fluid > .span4 { .row-fluid .span4 {
width: 31.914893614%; width: 31.914893614%;
} }
.row-fluid > .span3 { .row-fluid .span3 {
width: 23.404255317%; width: 23.404255317%;
} }
.row-fluid > .span2 { .row-fluid .span2 {
width: 14.89361702%; width: 14.89361702%;
} }
.row-fluid > .span1 { .row-fluid .span1 {
width: 6.382978723%; width: 6.382978723%;
} }
.container { .container {

View File

@ -577,7 +577,7 @@
.fluid (@fluidGridColumnWidth, @fluidGridGutterWidth) { .fluid (@fluidGridColumnWidth, @fluidGridGutterWidth) {
.spanX (@index) when (@index > 0) { .spanX (@index) when (@index > 0) {
(~"> .span@{index}") { .span(@index); } (~".span@{index}") { .span(@index); }
.spanX(@index - 1); .spanX(@index - 1);
} }
.spanX (0) {} .spanX (0) {}
@ -590,6 +590,7 @@
width: 100%; width: 100%;
.clearfix(); .clearfix();
[class*="span"] { [class*="span"] {
.input-block-level();
float: left; float: left;
margin-left: @fluidGridGutterWidth; margin-left: @fluidGridGutterWidth;
} }

View File

@ -8,6 +8,7 @@
* Designed and built with all the love in the world @twitter by @mdo and @fat. * Designed and built with all the love in the world @twitter by @mdo and @fat.
*/ */
// Responsive.less // Responsive.less
// For phone and tablet devices // For phone and tablet devices
// ------------------------------------------------------------- // -------------------------------------------------------------

View File

@ -269,14 +269,61 @@
<p>Inputs should not extend past the light red background, set on their parent, a <code>.span*</code> column.</p> <p>Inputs should not extend past the light red background, set on their parent, a <code>.span*</code> column.</p>
<div id="fluidRowInputs"> <div id="fluidRowInputs">
<div class="row-fluid"> <div class="row-fluid">
<div class="span4"> <div class="span12">
<input class="span1" placeholder="span1">
</div><!--/span-->
</div><!--/row-->
<div class="row-fluid">
<div class="span12">
<input class="span2" placeholder="span2">
</div><!--/span-->
</div><!--/row-->
<div class="row-fluid">
<div class="span12">
<input class="span3" placeholder="span3">
</div><!--/span-->
</div><!--/row-->
<div class="row-fluid">
<div class="span12">
<input class="span4" placeholder="span4"> <input class="span4" placeholder="span4">
</div><!--/span--> </div><!--/span-->
<div class="span8"> </div><!--/row-->
<div class="row-fluid">
<div class="span12">
<input class="span5" placeholder="span5">
</div><!--/span-->
</div><!--/row-->
<div class="row-fluid">
<div class="span12">
<input class="span6" placeholder="span6">
</div><!--/span-->
</div><!--/row-->
<div class="row-fluid">
<div class="span12">
<input class="span7" placeholder="span7">
</div><!--/span-->
</div><!--/row-->
<div class="row-fluid">
<div class="span12">
<input class="span8" placeholder="span8"> <input class="span8" placeholder="span8">
</div><!--/span--> </div><!--/span-->
</div><!--/row--> </div><!--/row-->
<div class="row-fluid" id="fluidRowInputs"> <div class="row-fluid">
<div class="span12">
<input class="span9" placeholder="span9">
</div><!--/span-->
</div><!--/row-->
<div class="row-fluid">
<div class="span12">
<input class="span10" placeholder="span10">
</div><!--/span-->
</div><!--/row-->
<div class="row-fluid">
<div class="span12">
<input class="span11" placeholder="span11">
</div><!--/span-->
</div><!--/row-->
<div class="row-fluid">
<div class="span12"> <div class="span12">
<input class="span12" placeholder="span12"> <input class="span12" placeholder="span12">
</div><!--/span--> </div><!--/span-->