diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css index 16ea44aa2f..5abdc180d6 100644 --- a/docs/assets/css/bootstrap-responsive.css +++ b/docs/assets/css/bootstrap-responsive.css @@ -192,6 +192,100 @@ .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, + .uneditable-input.span12 { + width: 97.43589743589743%; + margin-right: 1.282051282051282%; + margin-left: 1.282051282051282%; + } + input.span11, + textarea.span11, + .uneditable-input.span11 { + width: 89.10256410256409%; + margin-right: 1.282051282051282%; + margin-left: 1.282051282051282%; + } + input.span10, + textarea.span10, + .uneditable-input.span10 { + width: 80.76923076923077%; + margin-right: 1.282051282051282%; + margin-left: 1.282051282051282%; + } + input.span9, + textarea.span9, + .uneditable-input.span9 { + width: 72.43589743589743%; + margin-right: 1.282051282051282%; + margin-left: 1.282051282051282%; + } + input.span8, + textarea.span8, + .uneditable-input.span8 { + width: 64.10256410256409%; + margin-right: 1.282051282051282%; + margin-left: 1.282051282051282%; + } + input.span7, + textarea.span7, + .uneditable-input.span7 { + width: 55.769230769230774%; + margin-right: 1.282051282051282%; + margin-left: 1.282051282051282%; + } + input.span6, + textarea.span6, + .uneditable-input.span6 { + width: 47.43589743589744%; + margin-right: 1.282051282051282%; + margin-left: 1.282051282051282%; + } + input.span5, + textarea.span5, + .uneditable-input.span5 { + width: 39.10256410256411%; + margin-right: 1.282051282051282%; + margin-left: 1.282051282051282%; + } + input.span4, + textarea.span4, + .uneditable-input.span4 { + width: 30.769230769230766%; + margin-right: 1.282051282051282%; + margin-left: 1.282051282051282%; + } + input.span3, + textarea.span3, + .uneditable-input.span3 { + width: 22.435897435897438%; + margin-right: 1.282051282051282%; + margin-left: 1.282051282051282%; + } + input.span2, + textarea.span2, + .uneditable-input.span2 { + width: 14.1025641025641%; + margin-right: 1.282051282051282%; + margin-left: 1.282051282051282%; + } + input.span1, + textarea.span1, + .uneditable-input.span1 { + width: 5.769230769230768%; + margin-right: 1.282051282051282%; + margin-left: 1.282051282051282%; + } .thumbnails { margin-left: -30px; } diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 3ac976ea26..efc3d8718e 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -997,6 +997,114 @@ textarea[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 { + margin-right: 0; +} + +.controls-row input.span12, +textarea.span12, +.uneditable-input.span12 { + width: 97.87234042553192%; + margin-right: 1.0638297872340425%; + margin-left: 1.0638297872340425%; +} + +.controls-row input.span11, +textarea.span11, +.uneditable-input.span11 { + width: 89.53900709219857%; + margin-right: 1.0638297872340425%; + margin-left: 1.0638297872340425%; +} + +.controls-row input.span10, +textarea.span10, +.uneditable-input.span10 { + width: 81.20567375886526%; + margin-right: 1.0638297872340425%; + margin-left: 1.0638297872340425%; +} + +.controls-row input.span9, +textarea.span9, +.uneditable-input.span9 { + width: 72.87234042553192%; + margin-right: 1.0638297872340425%; + margin-left: 1.0638297872340425%; +} + +.controls-row input.span8, +textarea.span8, +.uneditable-input.span8 { + width: 64.53900709219857%; + margin-right: 1.0638297872340425%; + margin-left: 1.0638297872340425%; +} + +.controls-row input.span7, +textarea.span7, +.uneditable-input.span7 { + width: 56.20567375886525%; + margin-right: 1.0638297872340425%; + margin-left: 1.0638297872340425%; +} + +.controls-row input.span6, +textarea.span6, +.uneditable-input.span6 { + width: 47.87234042553192%; + margin-right: 1.0638297872340425%; + margin-left: 1.0638297872340425%; +} + +.controls-row input.span5, +textarea.span5, +.uneditable-input.span5 { + width: 39.53900709219859%; + margin-right: 1.0638297872340425%; + margin-left: 1.0638297872340425%; +} + +.controls-row input.span4, +textarea.span4, +.uneditable-input.span4 { + width: 31.205673758865245%; + margin-right: 1.0638297872340425%; + margin-left: 1.0638297872340425%; +} + +.controls-row input.span3, +textarea.span3, +.uneditable-input.span3 { + width: 22.872340425531917%; + margin-right: 1.0638297872340425%; + margin-left: 1.0638297872340425%; +} + +.controls-row input.span2, +textarea.span2, +.uneditable-input.span2 { + width: 14.53900709219858%; + margin-right: 1.0638297872340425%; + margin-left: 1.0638297872340425%; +} + +.controls-row input.span1, +textarea.span1, +.uneditable-input.span1 { + width: 6.205673758865247%; + margin-right: 1.0638297872340425%; + margin-left: 1.0638297872340425%; +} + input[class*="span"], select[class*="span"], textarea[class*="span"], diff --git a/less/forms.less b/less/forms.less index afb84caee3..7e9036a6a1 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 9a0650132c..803837e2d8 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 8b909b8cdb..e8dcb73dcc 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 1360d3ebc7..abfd5fbb2f 100644 --- a/less/tests/grid.html +++ b/less/tests/grid.html @@ -16,6 +16,8 @@ padding-top: 30px; padding-bottom: 30px; } + + @@ -73,19 +75,24 @@