kotovalexarian-likes-github/twbs--bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00
Code Releases Activity

refactored and renamed grid mixins

Browse source
This commit is contained in:
Donald Pipowitch 2014-01-28 10:48:45 +01:00
parent 3a62811bbd
commit 7037c6fc72
2 changed files with 20 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
less/grid.less
View file

@ -53,11 +53,7 @@
// Columns, offsets, pushes, and pulls for extra small devices like // Columns, offsets, pushes, and pulls for extra small devices like
// smartphones. // smartphones.
.make-grid-columns-float(xs); .make-grid(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);
// Small grid // Small grid
@ -66,11 +62,7 @@
// to tablets. // to tablets.
@media (min-width: @screen-sm-min) { @media (min-width: @screen-sm-min) {
.make-grid-columns-float(sm); .make-grid(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);
} }
@ -79,11 +71,7 @@
// Columns, offsets, pushes, and pulls for the desktop device range. // Columns, offsets, pushes, and pulls for the desktop device range.
@media (min-width: @screen-md-min) { @media (min-width: @screen-md-min) {
.make-grid-columns-float(md); .make-grid(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);
} }
@ -92,9 +80,5 @@
// Columns, offsets, pushes, and pulls for the large desktop device range. // Columns, offsets, pushes, and pulls for the large desktop device range.
@media (min-width: @screen-lg-min) { @media (min-width: @screen-lg-min) {
.make-grid-columns-float(lg); .make-grid(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);
} }

24
less/mixins.less
View file

@ -796,7 +796,7 @@
.col(1); // kickstart it .col(1); // kickstart it
} }
.make-grid-columns-float(@class) { .float-grid-columns(@class) {
.col(@index) when (@index = 1) { // initial .col(@index) when (@index = 1) { // initial
@item: ~".col-@{class}-@{index}"; @item: ~".col-@{class}-@{index}";
.col((@index + 1), @item); .col((@index + 1), @item);
@ -813,34 +813,42 @@
.col(1); // kickstart it .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} { .col-@{class}-@{index} {
width: percentage((@index / @grid-columns)); 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} { .col-@{class}-push-@{index} {
left: percentage((@index / @grid-columns)); 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} { .col-@{class}-pull-@{index} {
right: percentage((@index / @grid-columns)); 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} { .col-@{class}-offset-@{index} {
margin-left: percentage((@index / @grid-columns)); margin-left: percentage((@index / @grid-columns));
} }
} }
// Basic looping in LESS // Basic looping in LESS
.make-grid(@index, @class, @type) when (@index >= 0) { .loop-grid-columns(@index, @class, @type) when (@index >= 0) {
.calc-grid(@index, @class, @type); .calc-grid-column(@index, @class, @type);
// next iteration // 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 // Form validation states
// //