diff --git a/less/mixins.less b/less/mixins.less index 2cf683c3a1c4b43dbc0e2760ec3614fd41e6f8fd..1ee11f98977f35284e7d220d235b865ce742c4ab 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -459,8 +459,25 @@ } } -// 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; @@ -469,46 +486,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 //