From 001e5d3da9c53474a61adda8046cb6d05901dcbd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Guillermo=20Gonz=C3=A1lez=20de=20Ag=C3=BCero?= <ggam@brainleakage.com> Date: Wed, 7 Aug 2013 21:15:01 +0200 Subject: [PATCH] Added missing grid make-column mixins and fixed some inconsistencies make-column() was still been use to generate "medium size" columns (col-sm), while make-small-column was creating the default columns (col). I also changed @grid-float-breakpoint to @screen-small, as it was used in make-row() and I think it makes more sense here than the other. --- less/mixins.less | 61 +++++++++++++++++++++++++++++++++++++----------- 1 file changed, 47 insertions(+), 14 deletions(-) diff --git a/less/mixins.less b/less/mixins.less index 2cf683c3a1..1ee11f9897 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 // -- GitLab