aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorMark Otto <[email protected]>2013-08-12 00:31:28 -0700
committerMark Otto <[email protected]>2013-08-12 00:31:28 -0700
commitf50aea30c46e42ccfbdd1971f6f60bb2eadf3588 (patch)
tree9def0905ff91339a46750c10019624e135076051
parenta2b9988eb908e5b95fb253aac7fde0fbd61c375e (diff)
parent001e5d3da9c53474a61adda8046cb6d05901dcbd (diff)
downloadbootstrap-f50aea30c46e42ccfbdd1971f6f60bb2eadf3588.tar.xz
bootstrap-f50aea30c46e42ccfbdd1971f6f60bb2eadf3588.zip
Merge branch 'patch-12' of https://github.com/ggam/bootstrap into ggam-patch-12
-rw-r--r--less/mixins.less61
1 files changed, 47 insertions, 14 deletions
diff --git a/less/mixins.less b/less/mixins.less
index 54fe4c21c..2802570b3 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -470,9 +470,26 @@
}
}
-// Generate the columns
+// Generate the default columns
.make-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
+ float: left;
+ // Prevent columns from collapsing when empty
+ min-height: 1px;
+ // Inner gutter via padding
+ padding-left: (@gutter / 2);
+ padding-right: (@gutter / 2);
+ @max-width: (@screen-small - 1);
+
+ // Calculate width based on number of columns available
+ @media (max-width: @max-width) {
+ width: percentage((@columns / @grid-columns));
+ }
+}
+
+// Generate the small columns
+.make-small-column(@columns; @gutter: @grid-gutter-width) {
+ position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
@@ -480,46 +497,62 @@
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
- @media (min-width: @grid-float-breakpoint) {
+ @media (min-width: @screen-small) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
-// Generate the column offsets
-.make-column-offset(@columns) {
- @media (min-width: @grid-float-breakpoint) {
+// Generate the small column offsets
+.make-small-column-offset(@columns) {
+ @media (min-width: @screen-small) {
margin-left: percentage((@columns / @grid-columns));
}
}
-.make-column-push(@columns) {
- @media (min-width: @grid-float-breakpoint) {
+.make-small-column-push(@columns) {
+ @media (min-width: @screen-small) {
left: percentage((@columns / @grid-columns));
}
}
-.make-column-pull(@columns) {
- @media (min-width: @grid-float-breakpoint) {
+.make-small-column-pull(@columns) {
+ @media (min-width: @screen-small) {
right: percentage((@columns / @grid-columns));
}
}
-// Generate the small columns
-.make-small-column(@columns; @gutter: @grid-gutter-width) {
+// Generate the large columns
+.make-large-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
- float: left;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
- @max-width: (@grid-float-breakpoint - 1);
// Calculate width based on number of columns available
- @media (max-width: @max-width) {
+ @media (min-width: @screen-medium) {
+ float: left;
width: percentage((@columns / @grid-columns));
}
}
+// Generate the large column offsets
+.make-large-column-offset(@columns) {
+ @media (min-width: @screen-medium) {
+ margin-left: percentage((@columns / @grid-columns));
+ }
+}
+.make-large-column-push(@columns) {
+ @media (min-width: @screen-medium) {
+ left: percentage((@columns / @grid-columns));
+ }
+}
+.make-large-column-pull(@columns) {
+ @media (min-width: @screen-medium) {
+ right: percentage((@columns / @grid-columns));
+ }
+}
+
// Form validation states
//