diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css index ab336de1e465efb3d37b26635540ef82ad16d71e..4f6eb75ba2a099b43d55176560dfbf52ad2ae603 100644 --- a/docs/assets/css/bootstrap-responsive.css +++ b/docs/assets/css/bootstrap-responsive.css @@ -310,6 +310,7 @@ width: 100%; min-height: 28px; margin-left: 2.762430939%; + *margin-left: 2.709239449638298%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; @@ -320,39 +321,51 @@ } .row-fluid .span12 { width: 99.999999993%; + *width: 99.9468085036383%; } .row-fluid .span11 { width: 91.436464082%; + *width: 91.38327259263829%; } .row-fluid .span10 { width: 82.87292817100001%; + *width: 82.8197366816383%; } .row-fluid .span9 { width: 74.30939226%; + *width: 74.25620077063829%; } .row-fluid .span8 { width: 65.74585634900001%; + *width: 65.6926648596383%; } .row-fluid .span7 { width: 57.182320438000005%; + *width: 57.129128948638304%; } .row-fluid .span6 { width: 48.618784527%; + *width: 48.5655930376383%; } .row-fluid .span5 { width: 40.055248616%; + *width: 40.0020571266383%; } .row-fluid .span4 { width: 31.491712705%; + *width: 31.4385212156383%; } .row-fluid .span3 { width: 22.928176794%; + *width: 22.874985304638297%; } .row-fluid .span2 { width: 14.364640883%; + *width: 14.311449393638298%; } .row-fluid .span1 { width: 5.801104972%; + *width: 5.747913482638298%; } input, textarea, @@ -533,6 +546,7 @@ width: 100%; min-height: 28px; margin-left: 2.564102564%; + *margin-left: 2.510911074638298%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; @@ -543,39 +557,51 @@ } .row-fluid .span12 { width: 100%; + *width: 99.94680851063829%; } .row-fluid .span11 { width: 91.45299145300001%; + *width: 91.3997999636383%; } .row-fluid .span10 { width: 82.905982906%; + *width: 82.8527914166383%; } .row-fluid .span9 { width: 74.358974359%; + *width: 74.30578286963829%; } .row-fluid .span8 { width: 65.81196581200001%; + *width: 65.7587743226383%; } .row-fluid .span7 { width: 57.264957265%; + *width: 57.2117657756383%; } .row-fluid .span6 { width: 48.717948718%; + *width: 48.6647572286383%; } .row-fluid .span5 { width: 40.170940171000005%; + *width: 40.117748681638304%; } .row-fluid .span4 { width: 31.623931624%; + *width: 31.5707401346383%; } .row-fluid .span3 { width: 23.076923077%; + *width: 23.0237315876383%; } .row-fluid .span2 { width: 14.529914530000001%; + *width: 14.4767230406383%; } .row-fluid .span1 { width: 5.982905983%; + *width: 5.929714493638298%; } input, textarea, diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 8037a33a888122b8fb609cdba9cdc2f05d459eaa..62a2327ec4b62869d228c01ac9a485f55c69128e 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -313,6 +313,7 @@ a:hover { width: 100%; min-height: 28px; margin-left: 2.127659574%; + *margin-left: 2.0744680846382977%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; @@ -325,50 +326,62 @@ a:hover { .row-fluid .span12 { width: 99.99999998999999%; + *width: 99.94680850063828%; } .row-fluid .span11 { width: 91.489361693%; + *width: 91.4361702036383%; } .row-fluid .span10 { width: 82.97872339599999%; + *width: 82.92553190663828%; } .row-fluid .span9 { width: 74.468085099%; + *width: 74.4148936096383%; } .row-fluid .span8 { width: 65.95744680199999%; + *width: 65.90425531263828%; } .row-fluid .span7 { width: 57.446808505%; + *width: 57.3936170156383%; } .row-fluid .span6 { width: 48.93617020799999%; + *width: 48.88297871863829%; } .row-fluid .span5 { width: 40.425531911%; + *width: 40.3723404216383%; } .row-fluid .span4 { width: 31.914893614%; + *width: 31.8617021246383%; } .row-fluid .span3 { width: 23.404255317%; + *width: 23.3510638276383%; } .row-fluid .span2 { width: 14.89361702%; + *width: 14.8404255306383%; } .row-fluid .span1 { width: 6.382978723%; + *width: 6.329787233638298%; } .container { diff --git a/less/mixins.less b/less/mixins.less index e0cb5f8a501dd57c018c76297e148ee849b5900a..b107955f57b7ca2ff41963809ba65dd05ee7d922 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -583,6 +583,7 @@ .span (@columns) { width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)); + *width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%); } .row-fluid { @@ -592,6 +593,7 @@ .input-block-level(); float: left; margin-left: @fluidGridGutterWidth; + *margin-left: @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%); } [class*="span"]:first-child { margin-left: 0; diff --git a/less/tests/css-tests.css b/less/tests/css-tests.css index 95067048d1948788a59e816d8d1f1a3191225e4a..a4f07e93689a238dddac59a6e05fcc1dec79c891 100644 --- a/less/tests/css-tests.css +++ b/less/tests/css-tests.css @@ -33,3 +33,17 @@ h4 { #fluidRowInputs .row-fluid > [class*=span] { background-color: rgba(255,0,0,.1); } + + +/* Fluid grid */ +.fluid-grid .row { + height: 60px; + padding-top: 10px; + margin-top: 10px; + color: #fff; + text-align: center; + background-color: #eee; +} +.fluid-grid .span1 { + background-color: #999; +} diff --git a/less/tests/css-tests.html b/less/tests/css-tests.html index a39dde53db4ee886f2ff0c49491dd39100ade677..2c44f7d18c7e06cc4566525794c4f148ce573e55 100644 --- a/less/tests/css-tests.html +++ b/less/tests/css-tests.html @@ -54,6 +54,241 @@ + +<!-- Fluid grid +================================================== --> + +<div class="page-header"> + <h1>Fluid grids</h1> +</div> + +<div class="fluid-grid"> + <div class="row"> + <div class="span12">12 + <div class="row-fluid"> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + </div> + </div> + </div> + <div class="row"> + <div class="span11">11 + <div class="row-fluid"> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + </div> + </div> + <div class="span1">1 + <div class="row-fluid"> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + </div> + </div> + </div> + <div class="row"> + <div class="span10">10 + <div class="row-fluid"> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + </div> + </div> + <div class="span2">2 + <div class="row-fluid"> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + </div> + </div> + </div> + <div class="row"> + <div class="span9">9 + <div class="row-fluid"> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + </div> + </div> + <div class="span3">3 + <div class="row-fluid"> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + </div> + </div> + </div> + <div class="row"> + <div class="span8">8 + <div class="row-fluid"> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + </div> + </div> + <div class="span4">4 + <div class="row-fluid"> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + </div> + </div> + </div> + <div class="row"> + <div class="span7">7 + <div class="row-fluid"> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + </div> + </div> + <div class="span5">5 + <div class="row-fluid"> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + </div> + </div> + </div> + <div class="row"> + <div class="span6">6 + <div class="row-fluid"> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + </div> + </div> + <div class="span6">6 + <div class="row-fluid"> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + <div class="span1">1</div> + </div> + </div> + </div> +</div> <!-- fluid grids --> + + + <!-- Tables ================================================== --> diff --git a/less/variables.less b/less/variables.less index ca8e3ae40fc3630faced9b9a33bcbf31f28102ab..d8825fb0764bd178d806cc6821699c6c2f33cbed 100644 --- a/less/variables.less +++ b/less/variables.less @@ -197,6 +197,7 @@ @gridColumns: 12; @gridColumnWidth: 60px; @gridGutterWidth: 20px; +@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); // Fluid grid // -------------------------