diff options
| author | Mark Otto <[email protected]> | 2013-08-12 00:31:28 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2013-08-12 00:31:28 -0700 |
| commit | f50aea30c46e42ccfbdd1971f6f60bb2eadf3588 (patch) | |
| tree | 9def0905ff91339a46750c10019624e135076051 | |
| parent | a2b9988eb908e5b95fb253aac7fde0fbd61c375e (diff) | |
| parent | 001e5d3da9c53474a61adda8046cb6d05901dcbd (diff) | |
| download | bootstrap-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.less | 61 |
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 // |
