From d8aaf507981dbecb146bc77e288a3f10387923cd Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 24 Apr 2012 02:11:59 -0700 Subject: implement ie7 fluid tests and semantic.gs IE7 hack for rounding in ie7; not perfect, but mostly solid --- less/mixins.less | 2 + less/tests/css-tests.css | 14 +++ less/tests/css-tests.html | 235 ++++++++++++++++++++++++++++++++++++++++++++++ less/variables.less | 1 + 4 files changed, 252 insertions(+) (limited to 'less') diff --git a/less/mixins.less b/less/mixins.less index e0cb5f8a5..b107955f5 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 95067048d..a4f07e936 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 a39dde53d..2c44f7d18 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 ca8e3ae40..d8825fb07 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 // ------------------------- -- cgit v1.2.3