Skip to content
GitLab
Commit dd1bce26 authored by Mark Otto's avatar Mark Otto
Browse files

latest tweaks to grid classes for forms

parent b53da4b6
21 merge requests!7033Fix backdrop undefined bug in modal,!8635ignore Gruntfile.js in jekyll,!8339Fix broken links to navbar component in docs examples,!7329Fix for issue #7328,!7219Fix for mini typo mistake in css.html,!7674Clear float on all when navbar is collapsed - v3,!7344Fixed .spanX selector (*= instead of ^=),!7346Fix compilation error,!7775added some tests for tooltip title setter,!8157Close Me: Docs "Customize and Download" button fix,!7509Proposed fix for allowing Collapse events ('show'/'hide') to be cancelled,!7964commit fixes #7792,!8656Added rel="stylesheet" to CDN-Examples,!8527Inner properties move 1,!8245Interactive color picker - Closed: request against wrong branch,!7865Patch 2,!7651Drop the sizzle dependency to allow smaller builds targeting mobile devices,!6853typeahead: do not store item data in an attribute,!6666Patch 1,!65463.0.0 wip - fixed the issue in which the test pid isn't killed if a test fails,!6503control markup changes added
Hide whitespace changes
Inline Side-by-side
Showing
with 256 additions and 8 deletions
+256 -8
docs/assets/css/bootstrap-responsive.css
+ 94
- 0
View file @ dd1bce26
......@@ -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;
}
......
docs/assets/css/bootstrap.css
+ 108
- 0
View file @ dd1bce26
......@@ -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"],
......
less/forms.less
+ 4
- 0
View file @ dd1bce26
......@@ -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"],
......
less/mixins.less
+ 34
- 0
View file @ dd1bce26
......@@ -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);
}
}
less/responsive-1200px-min.less
+ 1
- 0
View file @ dd1bce26
......@@ -14,6 +14,7 @@
// Fixed grid
#grid > .core(@gridColumnWidth1200, @gridGutterWidth1200, @gridRowWidth1200);
#grid > .input(@gridColumnWidth1200, @gridGutterWidth1200, @gridRowWidth1200);
// Thumbnails
.thumbnails {
......
less/tests/grid.html
+ 15
- 8
View file @ dd1bce26
......@@ -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 -->
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment