Commit 001e5d3d authored by Guillermo González de Agüero's avatar Guillermo González de Agüero
Browse files

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.
parent d490c35a
Showing with 47 additions and 14 deletions
+47 -14
...@@ -459,8 +459,25 @@ ...@@ -459,8 +459,25 @@
} }
} }
// Generate the columns // Generate the default columns
.make-column(@columns; @gutter: @grid-gutter-width) { .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; position: relative;
// Prevent columns from collapsing when empty // Prevent columns from collapsing when empty
min-height: 1px; min-height: 1px;
...@@ -469,46 +486,62 @@ ...@@ -469,46 +486,62 @@
padding-right: (@gutter / 2); padding-right: (@gutter / 2);
// Calculate width based on number of columns available // Calculate width based on number of columns available
@media (min-width: @grid-float-breakpoint) { @media (min-width: @screen-small) {
float: left; float: left;
width: percentage((@columns / @grid-columns)); width: percentage((@columns / @grid-columns));
} }
} }
// Generate the column offsets // Generate the small column offsets
.make-column-offset(@columns) { .make-small-column-offset(@columns) {
@media (min-width: @grid-float-breakpoint) { @media (min-width: @screen-small) {
margin-left: percentage((@columns / @grid-columns)); margin-left: percentage((@columns / @grid-columns));
} }
} }
.make-column-push(@columns) { .make-small-column-push(@columns) {
@media (min-width: @grid-float-breakpoint) { @media (min-width: @screen-small) {
left: percentage((@columns / @grid-columns)); left: percentage((@columns / @grid-columns));
} }
} }
.make-column-pull(@columns) { .make-small-column-pull(@columns) {
@media (min-width: @grid-float-breakpoint) { @media (min-width: @screen-small) {
right: percentage((@columns / @grid-columns)); right: percentage((@columns / @grid-columns));
} }
} }
// Generate the small columns // Generate the large columns
.make-small-column(@columns; @gutter: @grid-gutter-width) { .make-large-column(@columns; @gutter: @grid-gutter-width) {
position: relative; position: relative;
float: left;
// Prevent columns from collapsing when empty // Prevent columns from collapsing when empty
min-height: 1px; min-height: 1px;
// Inner gutter via padding // Inner gutter via padding
padding-left: (@gutter / 2); padding-left: (@gutter / 2);
padding-right: (@gutter / 2); padding-right: (@gutter / 2);
@max-width: (@grid-float-breakpoint - 1);
// Calculate width based on number of columns available // 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)); 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 // Form validation states
// //
......
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