diff options
| author | Mark Otto <[email protected]> | 2012-09-08 12:50:37 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2012-09-08 12:50:37 -0700 |
| commit | dd1bce2611a83365c0b2fd14b14512180ec09ec1 (patch) | |
| tree | 7029ddbec4fa871c74e2f47ae8175f41d3364718 /less | |
| parent | b53da4b6e7744f2cb44a1cc323fa92ef6b52840d (diff) | |
| download | bootstrap-dd1bce2611a83365c0b2fd14b14512180ec09ec1.tar.xz bootstrap-dd1bce2611a83365c0b2fd14b14512180ec09ec1.zip | |
latest tweaks to grid classes for forms
Diffstat (limited to 'less')
| -rw-r--r-- | less/forms.less | 4 | ||||
| -rw-r--r-- | less/mixins.less | 34 | ||||
| -rw-r--r-- | less/responsive-1200px-min.less | 1 | ||||
| -rw-r--r-- | less/tests/grid.html | 23 |
4 files changed, 54 insertions, 8 deletions
diff --git a/less/forms.less b/less/forms.less index afb84caee..7e9036a6a 100644 --- a/less/forms.less +++ b/less/forms.less @@ -297,6 +297,10 @@ textarea[class*="span"], // GRID SIZING FOR INPUTS // ---------------------- +.controls-row { + #grid > .input(@gridColumnWidth, @gridGutterWidth, @gridRowWidth); +} + input[class*="span"], select[class*="span"], textarea[class*="span"], diff --git a/less/mixins.less b/less/mixins.less index 9a0650132..803837e2d 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -599,4 +599,38 @@ } + + .input(@gridColumnWidth, @gridGutterWidth, @gridRowWidth) { + + .spanX (@index) when (@index > 0) { + (~"input.span@{index}, textarea.span@{index}, .uneditable-input.span@{index}") { .span(@index); } + .spanX(@index - 1); + } + .spanX (0) {} + + .span(@columns) { + width: percentage(@columns / @gridColumns) - percentage(@gridGutterWidth / @gridRowWidth); + margin-left: percentage((@gridGutterWidth / 2) / @gridRowWidth); + margin-right: percentage((@gridGutterWidth / 2) / @gridRowWidth); + } + + // 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; + } + + + // generate .spanX + .spanX (@gridColumns); + + } + + } diff --git a/less/responsive-1200px-min.less b/less/responsive-1200px-min.less index 8b909b8cd..e8dcb73dc 100644 --- a/less/responsive-1200px-min.less +++ b/less/responsive-1200px-min.less @@ -14,6 +14,7 @@ // Fixed grid #grid > .core(@gridColumnWidth1200, @gridGutterWidth1200, @gridRowWidth1200); + #grid > .input(@gridColumnWidth1200, @gridGutterWidth1200, @gridRowWidth1200); // Thumbnails .thumbnails { diff --git a/less/tests/grid.html b/less/tests/grid.html index 1360d3ebc..abfd5fbb2 100644 --- a/less/tests/grid.html +++ b/less/tests/grid.html @@ -16,6 +16,8 @@ padding-top: 30px; padding-bottom: 30px; } + + </style> <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements --> @@ -73,19 +75,24 @@ <h2>Inputs</h2> - - <h4>No additional markup</h4> - <input type="text" class="span4" placeholder=".span4"> - <input type="text" class="span4" placeholder=".span4"> + <input type="text" class="span1" placeholder=".span1"> + <input type="text" class="span2" placeholder=".span2"> <input type="text" class="span4" placeholder=".span4"> + <input type="text" class="span5" placeholder=".span5"> - <h4>With .controls-row</h4> - <div class="controls-row"> - <input type="text" class="span4" placeholder=".span4"> - <input type="text" class="span4" placeholder=".span4"> + <div class="row"> + <input type="text" class="span1" placeholder=".span1"> + <input type="text" class="span2" placeholder=".span2"> <input type="text" class="span4" placeholder=".span4"> + <input type="text" class="span5" placeholder=".span5"> </div> + <div class="controls-row"> + <input type="text" class="span1" placeholder=".span1"> + <input type="text" class="span2" placeholder=".span2"> + <input type="text" class="span4" placeholder=".span4"> + <input type="text" class="span5" placeholder=".span5"> + </div> </form> <!-- /container --> |