From d8aaf507981dbecb146bc77e288a3f10387923cd Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 24 Apr 2012 02:11:59 -0700 Subject: [PATCH] implement ie7 fluid tests and semantic.gs IE7 hack for rounding in ie7; not perfect, but mostly solid --- docs/assets/css/bootstrap-responsive.css | 26 +++ docs/assets/css/bootstrap.css | 13 ++ less/mixins.less | 2 + less/tests/css-tests.css | 14 ++ less/tests/css-tests.html | 235 +++++++++++++++++++++++ less/variables.less | 1 + 6 files changed, 291 insertions(+) diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css index ab336de1e4..4f6eb75ba2 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 8037a33a88..62a2327ec4 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 e0cb5f8a50..b107955f57 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 95067048d1..a4f07e9368 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 a39dde53db..2c44f7d18c 100644 --- a/less/tests/css-tests.html +++ b/less/tests/css-tests.html @@ -54,6 +54,241 @@ + + + +
+

Fluid grids

+
+ +
+
+
12 +
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
+
+
+
+
11 +
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
+
+
1 +
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
+
+
+
+
10 +
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
+
+
2 +
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
+
+
+
+
9 +
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
+
+
3 +
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
+
+
+
+
8 +
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
+
+
4 +
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
+
+
+
+
7 +
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
+
+
5 +
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
+
+
+
+
6 +
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
+
+
6 +
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
+
+
+
+ + + diff --git a/less/variables.less b/less/variables.less index ca8e3ae40f..d8825fb076 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 // -------------------------