Commit 7037c6fc authored by Donald Pipowitch's avatar Donald Pipowitch
Browse files

refactored and renamed grid mixins

parent 3a62811b
4 merge requests!28721Hot test,!12412Refactored and renamed grid mixins,!22103test,!25326Adjust examples
Showing with 20 additions and 28 deletions
+20 -28
......@@ -53,11 +53,7 @@
// Columns, offsets, pushes, and pulls for extra small devices like
// smartphones.
.make-grid-columns-float(xs);
.make-grid(@grid-columns, xs, width);
.make-grid(@grid-columns, xs, pull);
.make-grid(@grid-columns, xs, push);
.make-grid(@grid-columns, xs, offset);
.make-grid(xs);
// Small grid
......@@ -66,11 +62,7 @@
// to tablets.
@media (min-width: @screen-sm-min) {
.make-grid-columns-float(sm);
.make-grid(@grid-columns, sm, width);
.make-grid(@grid-columns, sm, pull);
.make-grid(@grid-columns, sm, push);
.make-grid(@grid-columns, sm, offset);
.make-grid(sm);
}
......@@ -79,11 +71,7 @@
// Columns, offsets, pushes, and pulls for the desktop device range.
@media (min-width: @screen-md-min) {
.make-grid-columns-float(md);
.make-grid(@grid-columns, md, width);
.make-grid(@grid-columns, md, pull);
.make-grid(@grid-columns, md, push);
.make-grid(@grid-columns, md, offset);
.make-grid(md);
}
......@@ -92,9 +80,5 @@
// Columns, offsets, pushes, and pulls for the large desktop device range.
@media (min-width: @screen-lg-min) {
.make-grid-columns-float(lg);
.make-grid(@grid-columns, lg, width);
.make-grid(@grid-columns, lg, pull);
.make-grid(@grid-columns, lg, push);
.make-grid(@grid-columns, lg, offset);
.make-grid(lg);
}
......@@ -796,7 +796,7 @@
.col(1); // kickstart it
}
.make-grid-columns-float(@class) {
.float-grid-columns(@class) {
.col(@index) when (@index = 1) { // initial
@item: ~".col-@{class}-@{index}";
.col((@index + 1), @item);
......@@ -813,34 +813,42 @@
.col(1); // kickstart it
}
.calc-grid(@index, @class, @type) when (@type = width) and (@index > 0) {
.calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) {
.col-@{class}-@{index} {
width: percentage((@index / @grid-columns));
}
}
.calc-grid(@index, @class, @type) when (@type = push) {
.calc-grid-column(@index, @class, @type) when (@type = push) {
.col-@{class}-push-@{index} {
left: percentage((@index / @grid-columns));
}
}
.calc-grid(@index, @class, @type) when (@type = pull) {
.calc-grid-column(@index, @class, @type) when (@type = pull) {
.col-@{class}-pull-@{index} {
right: percentage((@index / @grid-columns));
}
}
.calc-grid(@index, @class, @type) when (@type = offset) {
.calc-grid-column(@index, @class, @type) when (@type = offset) {
.col-@{class}-offset-@{index} {
margin-left: percentage((@index / @grid-columns));
}
}
// Basic looping in LESS
.make-grid(@index, @class, @type) when (@index >= 0) {
.calc-grid(@index, @class, @type);
.loop-grid-columns(@index, @class, @type) when (@index >= 0) {
.calc-grid-column(@index, @class, @type);
// next iteration
.make-grid((@index - 1), @class, @type);
.loop-grid-columns((@index - 1), @class, @type);
}
// Create grid for specific class
.make-grid(@class) {
.float-grid-columns(@class);
.loop-grid-columns(@grid-columns, @class, width);
.loop-grid-columns(@grid-columns, @class, pull);
.loop-grid-columns(@grid-columns, @class, push);
.loop-grid-columns(@grid-columns, @class, offset);
}
// 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