From 527d01ce99a0cae8eae7868c0649dca60cda338c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 25 Sep 2012 15:01:03 -0700 Subject: headway, cleanup, and tests --- less/forms.less | 48 +++---- less/mixins.less | 76 +++++----- less/tests/css-tests.html | 343 +++++++++++++++------------------------------- 3 files changed, 165 insertions(+), 302 deletions(-) (limited to 'less') diff --git a/less/forms.less b/less/forms.less index 7e9036a6a..0e656cc1d 100644 --- a/less/forms.less +++ b/less/forms.less @@ -265,42 +265,33 @@ textarea { .input-xlarge { width: 270px; } .input-xxlarge { width: 530px; } + + +// GRID SIZING FOR INPUTS +// ---------------------- + // Grid style input sizes input[class*="span"], select[class*="span"], textarea[class*="span"], -.uneditable-input[class*="span"], -// Redeclare since the fluid row class is more specific -.row-fluid input[class*="span"], -.row-fluid select[class*="span"], -.row-fluid textarea[class*="span"], -.row-fluid .uneditable-input[class*="span"] { - xfloat: none; - xmargin-left: 0; +.uneditable-input[class*="span"] { + float: none; + margin-left: 0; + margin-right: 0; +} + +.controls-row { + #grid > .input(@gridColumnWidth, @gridGutterWidth, @gridRowWidth); } + // Ensure input-prepend/append never wraps .input-append input[class*="span"], .input-append .uneditable-input[class*="span"], .input-prepend input[class*="span"], -.input-prepend .uneditable-input[class*="span"], -.row-fluid input[class*="span"], -.row-fluid select[class*="span"], -.row-fluid textarea[class*="span"], -.row-fluid .uneditable-input[class*="span"], -.row-fluid .input-prepend [class*="span"], -.row-fluid .input-append [class*="span"] { +.input-prepend .uneditable-input[class*="span"] { display: inline-block; } - - -// GRID SIZING FOR INPUTS -// ---------------------- - -.controls-row { - #grid > .input(@gridColumnWidth, @gridGutterWidth, @gridRowWidth); -} - input[class*="span"], select[class*="span"], textarea[class*="span"], @@ -427,8 +418,8 @@ select:focus:required:invalid { select, .uneditable-input { position: relative; // placed here by default so that on :focus we can place the input above the .add-on for full border and box-shadow goodness - margin-bottom: 0; // prevent bottom margin from screwing up alignment in stacked forms - *margin-left: 0; + float: none; // Undo the float from grid sizing + margin: 0; // Prevent bottom margin from screwing up alignment in stacked forms font-size: @baseFontSize; vertical-align: top; .border-radius(0 @inputBorderRadius @inputBorderRadius 0); @@ -437,6 +428,11 @@ select:focus:required:invalid { z-index: 2; } } + input[class*="span"], + select[class*="span"], + .uneditable-input[class*="span"] { + margin: 0; + } .add-on { display: inline-block; width: auto; diff --git a/less/mixins.less b/less/mixins.less index bfce2c9c2..8bf338c29 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -555,92 +555,86 @@ // The Grid #grid { - .core (@gridColumnWidth, @gridGutterWidth, @gridRowWidth) { + .core(@gridColumnWidth, @gridGutterWidth, @gridRowWidth) { - .spanX (@index) when (@index > 0) { + .spanX(@index) when (@index > 0) { (~".span@{index}") { .span(@index); } .spanX(@index - 1); } - .spanX (0) {} + .spanX(0) {} - .offsetX (@index) when (@index > 0) { + .offsetX(@index) when (@index > 0) { (~".offset@{index}") { .offset(@index); } .offsetX(@index - 1); } - .offsetX (0) {} + .offsetX(0) {} - .offset (@columns) { + + // Base styles + .offset(@columns) { margin-left: percentage(@columns / @gridColumns); } - - .span (@columns) { + .span(@columns) { width: percentage(@columns / @gridColumns); } .row { + // Negative indent the columns so text lines up margin-left: @gridGutterWidth / -2; margin-right: @gridGutterWidth / -2; + // Clear the floated columns .clearfix(); } [class*="span"] { - float: left; - min-height: 1px; // prevent column collapsing + float: left; // Collapse whitespace + min-height: 1px; // Prevent empty columns from collapsing padding-left: @gridGutterWidth / 2; padding-right: @gridGutterWidth / 2; + // Proper box-model (padding doesnt' add to width) -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } - // generate .spanX and .offsetX - .spanX (@gridColumns); - .offsetX (@gridColumns); + // Generate .spanX and .offsetX + .spanX(@gridColumns); + .offsetX(@gridColumns); } .input(@gridColumnWidth, @gridGutterWidth, @gridRowWidth) { - .spanX (@index) when (@index > 0) { - (~"input.span@{index}, textarea.span@{index}, .uneditable-input.span@{index}") { .span(@index); } + .spanX(@index) when (@index > 0) { + (~"input.span@{index}, textarea.span@{index}, select.span@{index}, .uneditable-input.span@{index}") { .span(@index); } .spanX(@index - 1); } - .spanX (0) {} - - .span(@columns) { - //width: percentage(@columns / @gridColumns) - percentage(@gridGutterWidth / @gridRowWidth) + percentage(@gridGutterWidth/(@columns - 1)); - //width: (100% - ((@columns - 1) * (@gridGutterWidth / @gridRowWidth))) / @gridColumns; + .spanX(0) {} + .offsetX(@index) when (@index > 0) { + (~"input.offset@{index}, textarea.offset@{index}, select.offset@{index}, uneditable-input.offset@{index}") { .offset(@index); } + .offsetX(@index - 1); + } + .offsetX(0) {} - //width: percentage((@columns * (((@columns - 1) * (@gridGutterWidth/@gridRowWidth)))) / @gridRowWidth); - width: percentage((@columns * (@gridRowWidth - ( @columns - 1 ) * (@gridGutterWidth/@gridRowWidth)) / 12 ) / @gridRowWidth); - //( 4 * (940 - (num_col - 1 )*(20/940)) )/940 + .span(@columns) { + // Part 1: Since inputs require padding *and* margin, we subtract the grid gutter width, as a percent of the row, from the default column width. + width: percentage(@columns / @gridColumns) - percentage(@gridGutterWidth / @gridRowWidth); + // Part 2: That subtracted width then gets split in half and added to the left and right margins. margin-left: percentage((@gridGutterWidth / 2) / @gridRowWidth); - //margin-left: percentage((((@columns - 1) * @gridGutterWidth)/ @gridRowWidth ) / (2 * (@columns - 1) ); - margin-right: percentage((@gridGutterWidth / 2) / @gridRowWidth); - //margin-right: percentage((((@columns - 1) * @gridGutterWidth)/ @gridRowWidth ) / (2 * (@columns - 1) ); } - // 940*4/12 - 20/940 = .312056737 - - // Space grid-sized controls properly if multiple per line - input[class*="span"]:first-child, - textarea[class*="span"]:first-child, - .uneditable-input[class*="span"]:first-child { - margin-left: 0; - } - input[class*="span"]:last-child, - textarea[class*="span"]:last-child, - .uneditable-input[class*="span"]:last-child { - margin-right: 0; + .offset(@columns) { + // Take the normal offset margin and add an extra gutter's worth. + margin-left: percentage(@columns / @gridColumns) + percentage((@gridGutterWidth / 2) / @gridRowWidth); } - - // generate .spanX - .spanX (@gridColumns); + // Generate .spanX and .offsetX + .spanX(@gridColumns); + .offsetX(@gridColumns); } diff --git a/less/tests/css-tests.html b/less/tests/css-tests.html index c0cb1485e..ca9dd3ea3 100644 --- a/less/tests/css-tests.html +++ b/less/tests/css-tests.html @@ -53,12 +53,119 @@ -
+ + +
+
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
+
+
4
+
4
+
4
+
+
+
6
+
6
+
+
+
12
+
+
+ +
+ + + + + + + + + + + + +
+ +
+ + + +
+ +
+ + +
+ +
+ +
+ +
+ + +
+ + +
+ Horizontal form example +
+ +
+ + +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+
+ + +
+
+
+ + + + +


+ + + + @@ -136,239 +243,6 @@ - - -
-

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
-
-
-
-
- - @@ -1268,7 +1142,6 @@
-