diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css index 3f372560cb..4de21bbf36 100644 --- a/docs/assets/css/bootstrap-responsive.css +++ b/docs/assets/css/bootstrap-responsive.css @@ -192,100 +192,174 @@ .offset1 { margin-left: 8.333333333333332%; } - 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; - } input.span12, textarea.span12, + select.span12, .uneditable-input.span12 { - width: 99.97589305281613%; + width: 97.43589743589743%; margin-right: 1.282051282051282%; margin-left: 1.282051282051282%; } input.span11, textarea.span11, + select.span11, .uneditable-input.span11 { - width: 91.64657754401344%; + width: 89.10256410256409%; margin-right: 1.282051282051282%; margin-left: 1.282051282051282%; } input.span10, textarea.span10, + select.span10, .uneditable-input.span10 { - width: 83.31689677843524%; + width: 80.76923076923077%; margin-right: 1.282051282051282%; margin-left: 1.282051282051282%; } input.span9, textarea.span9, + select.span9, .uneditable-input.span9 { - width: 74.98685075608152%; + width: 72.43589743589743%; margin-right: 1.282051282051282%; margin-left: 1.282051282051282%; } input.span8, textarea.span8, + select.span8, .uneditable-input.span8 { - width: 66.6564394769523%; + width: 64.10256410256409%; margin-right: 1.282051282051282%; margin-left: 1.282051282051282%; } input.span7, textarea.span7, + select.span7, .uneditable-input.span7 { - width: 58.325662941047554%; + width: 55.769230769230774%; margin-right: 1.282051282051282%; margin-left: 1.282051282051282%; } input.span6, textarea.span6, + select.span6, .uneditable-input.span6 { - width: 49.994521148367305%; + width: 47.43589743589744%; margin-right: 1.282051282051282%; margin-left: 1.282051282051282%; } input.span5, textarea.span5, + select.span5, .uneditable-input.span5 { - width: 41.663014098911525%; + width: 39.10256410256411%; margin-right: 1.282051282051282%; margin-left: 1.282051282051282%; } input.span4, textarea.span4, + select.span4, .uneditable-input.span4 { - width: 33.33114179268025%; + width: 30.769230769230766%; margin-right: 1.282051282051282%; margin-left: 1.282051282051282%; } input.span3, textarea.span3, + select.span3, .uneditable-input.span3 { - width: 24.998904229673464%; + width: 22.435897435897438%; margin-right: 1.282051282051282%; margin-left: 1.282051282051282%; } input.span2, textarea.span2, + select.span2, .uneditable-input.span2 { - width: 16.66630140989115%; + width: 14.1025641025641%; margin-right: 1.282051282051282%; margin-left: 1.282051282051282%; } input.span1, textarea.span1, + select.span1, .uneditable-input.span1 { - width: 8.333333333333332%; + width: 5.769230769230768%; margin-right: 1.282051282051282%; margin-left: 1.282051282051282%; } + input.offset12, + textarea.offset12, + select.offset12, + uneditable-input.offset12 { + margin-left: 101.28205128205128%; + } + input.offset11, + textarea.offset11, + select.offset11, + uneditable-input.offset11 { + margin-left: 92.94871794871794%; + } + input.offset10, + textarea.offset10, + select.offset10, + uneditable-input.offset10 { + margin-left: 84.61538461538463%; + } + input.offset9, + textarea.offset9, + select.offset9, + uneditable-input.offset9 { + margin-left: 76.28205128205128%; + } + input.offset8, + textarea.offset8, + select.offset8, + uneditable-input.offset8 { + margin-left: 67.94871794871794%; + } + input.offset7, + textarea.offset7, + select.offset7, + uneditable-input.offset7 { + margin-left: 59.61538461538462%; + } + input.offset6, + textarea.offset6, + select.offset6, + uneditable-input.offset6 { + margin-left: 51.282051282051285%; + } + input.offset5, + textarea.offset5, + select.offset5, + uneditable-input.offset5 { + margin-left: 42.948717948717956%; + } + input.offset4, + textarea.offset4, + select.offset4, + uneditable-input.offset4 { + margin-left: 34.61538461538461%; + } + input.offset3, + textarea.offset3, + select.offset3, + uneditable-input.offset3 { + margin-left: 26.28205128205128%; + } + input.offset2, + textarea.offset2, + select.offset2, + uneditable-input.offset2 { + margin-left: 17.948717948717945%; + } + input.offset1, + textarea.offset1, + select.offset1, + uneditable-input.offset1 { + margin-left: 9.615384615384613%; + } .thumbnails { margin-left: -30px; } diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 3bba084f31..49c45ca489 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -975,136 +975,211 @@ textarea::-webkit-input-placeholder { input[class*="span"], select[class*="span"], textarea[class*="span"], -.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"] { - xmargin-left: 0; - xfloat: none; -} - -.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"] { - display: inline-block; -} - -.controls-row input[class*="span"]:first-child, -.controls-row textarea[class*="span"]:first-child, -.controls-row .uneditable-input[class*="span"]:first-child { - margin-left: 0; -} - -.controls-row input[class*="span"]:last-child, -.controls-row textarea[class*="span"]:last-child, -.controls-row .uneditable-input[class*="span"]:last-child { +.uneditable-input[class*="span"] { + float: none; margin-right: 0; + margin-left: 0; } .controls-row input.span12, textarea.span12, +select.span12, .uneditable-input.span12 { - width: 99.97510185604347%; + width: 97.87234042553192%; margin-right: 1.0638297872340425%; margin-left: 1.0638297872340425%; } .controls-row input.span11, textarea.span11, +select.span11, .uneditable-input.span11 { - width: 91.64591821336955%; + width: 89.53900709219857%; margin-right: 1.0638297872340425%; margin-left: 1.0638297872340425%; } .controls-row input.span10, textarea.span10, +select.span10, .uneditable-input.span10 { - width: 83.31635732609024%; + width: 81.20567375886526%; margin-right: 1.0638297872340425%; margin-left: 1.0638297872340425%; } .controls-row input.span9, textarea.span9, +select.span9, .uneditable-input.span9 { - width: 74.98641919420552%; + width: 72.87234042553192%; margin-right: 1.0638297872340425%; margin-left: 1.0638297872340425%; } .controls-row input.span8, textarea.span8, +select.span8, .uneditable-input.span8 { - width: 66.6561038177154%; + width: 64.53900709219857%; margin-right: 1.0638297872340425%; margin-left: 1.0638297872340425%; } .controls-row input.span7, textarea.span7, +select.span7, .uneditable-input.span7 { - width: 58.32541119661988%; + width: 56.20567375886525%; margin-right: 1.0638297872340425%; margin-left: 1.0638297872340425%; } .controls-row input.span6, textarea.span6, +select.span6, .uneditable-input.span6 { - width: 49.99434133091897%; + width: 47.87234042553192%; margin-right: 1.0638297872340425%; margin-left: 1.0638297872340425%; } .controls-row input.span5, textarea.span5, +select.span5, .uneditable-input.span5 { - width: 41.66289422061264%; + width: 39.53900709219859%; margin-right: 1.0638297872340425%; margin-left: 1.0638297872340425%; } .controls-row input.span4, textarea.span4, +select.span4, .uneditable-input.span4 { - width: 33.33106986570092%; + width: 31.205673758865245%; margin-right: 1.0638297872340425%; margin-left: 1.0638297872340425%; } .controls-row input.span3, textarea.span3, +select.span3, .uneditable-input.span3 { - width: 24.998868266183795%; + width: 22.872340425531917%; margin-right: 1.0638297872340425%; margin-left: 1.0638297872340425%; } .controls-row input.span2, textarea.span2, +select.span2, .uneditable-input.span2 { - width: 16.666289422061265%; + width: 14.53900709219858%; margin-right: 1.0638297872340425%; margin-left: 1.0638297872340425%; } .controls-row input.span1, textarea.span1, +select.span1, .uneditable-input.span1 { - width: 8.333333333333332%; + width: 6.205673758865247%; margin-right: 1.0638297872340425%; margin-left: 1.0638297872340425%; } +.controls-row input.offset12, +textarea.offset12, +select.offset12, +uneditable-input.offset12 { + margin-left: 101.06382978723404%; +} + +.controls-row input.offset11, +textarea.offset11, +select.offset11, +uneditable-input.offset11 { + margin-left: 92.7304964539007%; +} + +.controls-row input.offset10, +textarea.offset10, +select.offset10, +uneditable-input.offset10 { + margin-left: 84.39716312056738%; +} + +.controls-row input.offset9, +textarea.offset9, +select.offset9, +uneditable-input.offset9 { + margin-left: 76.06382978723404%; +} + +.controls-row input.offset8, +textarea.offset8, +select.offset8, +uneditable-input.offset8 { + margin-left: 67.7304964539007%; +} + +.controls-row input.offset7, +textarea.offset7, +select.offset7, +uneditable-input.offset7 { + margin-left: 59.39716312056738%; +} + +.controls-row input.offset6, +textarea.offset6, +select.offset6, +uneditable-input.offset6 { + margin-left: 51.06382978723404%; +} + +.controls-row input.offset5, +textarea.offset5, +select.offset5, +uneditable-input.offset5 { + margin-left: 42.73049645390071%; +} + +.controls-row input.offset4, +textarea.offset4, +select.offset4, +uneditable-input.offset4 { + margin-left: 34.39716312056737%; +} + +.controls-row input.offset3, +textarea.offset3, +select.offset3, +uneditable-input.offset3 { + margin-left: 26.06382978723404%; +} + +.controls-row input.offset2, +textarea.offset2, +select.offset2, +uneditable-input.offset2 { + margin-left: 17.730496453900706%; +} + +.controls-row input.offset1, +textarea.offset1, +select.offset1, +uneditable-input.offset1 { + margin-left: 9.397163120567374%; +} + +.input-append input[class*="span"], +.input-append .uneditable-input[class*="span"], +.input-prepend input[class*="span"], +.input-prepend .uneditable-input[class*="span"] { + display: inline-block; +} + input[class*="span"], select[class*="span"], textarea[class*="span"], @@ -1372,8 +1447,8 @@ select:focus:required:invalid:focus { .input-append .uneditable-input, .input-prepend .uneditable-input { position: relative; - margin-bottom: 0; - *margin-left: 0; + float: none; + margin: 0; font-size: 14px; vertical-align: top; -webkit-border-radius: 0 3px 3px 0; @@ -1390,6 +1465,15 @@ select:focus:required:invalid:focus { z-index: 2; } +.input-append input[class*="span"], +.input-prepend input[class*="span"], +.input-append select[class*="span"], +.input-prepend select[class*="span"], +.input-append .uneditable-input[class*="span"], +.input-prepend .uneditable-input[class*="span"] { + margin: 0; +} + .input-append .add-on, .input-prepend .add-on { display: inline-block; diff --git a/docs/base-css.html b/docs/base-css.html index b87c278299..8a18ab9a3a 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -1131,20 +1131,22 @@ For example, <code><section></code> should be wrapped as inlin
@ - +

- + .00 
 <div class="input-prepend">
-  <span class="add-on">@</span><input class="span2" id="prependedInput" size="16" type="text" placeholder="Username">
+  <span class="add-on">@</span>
+  <input id="prependedInput" size="16" type="text" placeholder="Username">
 </div>
 <div class="input-append">
-  <input class="span2" id="appendedInput" size="16" type="text"><span class="add-on">.00</span>
+  <input id="appendedInput" size="16" type="text">
+  <span class="add-on">.00</span>
 </div>
@@ -1153,13 +1155,15 @@ For example, <code><section></code> should be wrapped as inlin
$ - + .00 
 <div class="input-prepend input-append">
-  <span class="add-on">$</span><input class="span2" id="appendedPrependedInput" size="16" type="text"><span class="add-on">.00</span>
+  <span class="add-on">$</span>
+  <input id="appendedPrependedInput" size="16" type="text">
+  <span class="add-on">.00</span>
 </div>
@@ -1167,46 +1171,49 @@ For example, <code><section></code> should be wrapped as inlin

Instead of a <span> with text, use a .btn to attach a button (or two) to an input.

- +

- + 
 <div class="input-append">
-  <input class="span2" id="appendedInputButton" size="16" type="text"><button class="btn" type="button">Go!</button>
+  <input id="appendedInputButton" size="16" type="text">
+  <button class="btn" type="button">Go!</button>
 </div>
 
 <div class="input-append">
-  <input class="span2" id="appendedInputButtons" size="16" type="text"><button class="btn" type="button">Search</button><button class="btn" type="button">Options</button>
+  <input id="appendedInputButtons" size="16" type="text">
+  <button class="btn" type="button">Search</button>
+  <button class="btn" type="button">Options</button>
 </div>

Search form

- +
- + 
 <form class="form-search">
   <div class="input-append">
-    <input type="text" class="span2 search-query">
+    <input type="text" class="search-query">
     <button type="submit" class="btn">Search</button>
   </div>
   <div class="input-prepend">
     <button type="submit" class="btn">Search</button>
-    <input type="text" class="span2 search-query">
+    <input type="text" class="search-query">
   </div>
 </form>
@@ -1284,7 +1291,7 @@ For example, <code><section></code> should be wrapped as inlin

For multiple grid inputs per line, use the .controls-row modifier class for proper spacing. It floats the inputs to collapse white-space, sets the proper margins, and the clears the float.

-
+
diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index c242fef50a..7432700046 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -1068,20 +1068,22 @@
@ - +

- + .00 
 <div class="input-prepend">
-  <span class="add-on">@</span><input class="span2" id="prependedInput" size="16" type="text" placeholder="{{_i}}Username{{/i}}">
+  <span class="add-on">@</span>
+  <input id="prependedInput" size="16" type="text" placeholder="{{_i}}Username{{/i}}">
 </div>
 <div class="input-append">
-  <input class="span2" id="appendedInput" size="16" type="text"><span class="add-on">.00</span>
+  <input id="appendedInput" size="16" type="text">
+  <span class="add-on">.00</span>
 </div>
@@ -1090,13 +1092,15 @@
$ - + .00 
 <div class="input-prepend input-append">
-  <span class="add-on">$</span><input class="span2" id="appendedPrependedInput" size="16" type="text"><span class="add-on">.00</span>
+  <span class="add-on">$</span>
+  <input id="appendedPrependedInput" size="16" type="text">
+  <span class="add-on">.00</span>
 </div>
@@ -1104,46 +1108,49 @@

{{_i}}Instead of a <span> with text, use a .btn to attach a button (or two) to an input.{{/i}}

- +

- + 
 <div class="input-append">
-  <input class="span2" id="appendedInputButton" size="16" type="text"><button class="btn" type="button">Go!</button>
+  <input id="appendedInputButton" size="16" type="text">
+  <button class="btn" type="button">Go!</button>
 </div>
 
 <div class="input-append">
-  <input class="span2" id="appendedInputButtons" size="16" type="text"><button class="btn" type="button">Search</button><button class="btn" type="button">Options</button>
+  <input id="appendedInputButtons" size="16" type="text">
+  <button class="btn" type="button">Search</button>
+  <button class="btn" type="button">Options</button>
 </div>

{{_i}}Search form{{/i}}

- +
- +
{{! /example }} 
 <form class="form-search">
   <div class="input-append">
-    <input type="text" class="span2 search-query">
+    <input type="text" class="search-query">
     <button type="submit" class="btn">{{_i}}Search{{/i}}</button>
   </div>
   <div class="input-prepend">
     <button type="submit" class="btn">{{_i}}Search{{/i}}</button>
-    <input type="text" class="span2 search-query">
+    <input type="text" class="search-query">
   </div>
 </form>
@@ -1221,7 +1228,7 @@

{{_i}}For multiple grid inputs per line, use the .controls-row modifier class for proper spacing. It floats the inputs to collapse white-space, sets the proper margins, and the clears the float.{{/i}}

-
+
diff --git a/less/forms.less b/less/forms.less index 7e9036a6a1..0e656cc1dc 100644 --- a/less/forms.less +++ b/less/forms.less @@ -265,42 +265,33 @@ textarea { .input-xlarge { width: 270px; } .input-xxlarge { width: 530px; } -// 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; -} -// 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"] { - display: inline-block; -} - // GRID SIZING FOR INPUTS // ---------------------- +// Grid style input sizes +input[class*="span"], +select[class*="span"], +textarea[class*="span"], +.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"] { + display: inline-block; +} + 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 bfce2c9c20..8bf338c29d 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) {} + .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) {} + .span(@columns) { - //width: percentage(@columns / @gridColumns) - percentage(@gridGutterWidth / @gridRowWidth) + percentage(@gridGutterWidth/(@columns - 1)); - //width: (100% - ((@columns - 1) * (@gridGutterWidth / @gridRowWidth))) / @gridColumns; - - - //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 - + // 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 c0cb1485e9..ca9dd3ea31 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 @@
-