grid-framework.less
91 lines
| 2.7 KiB
| text/x-less
|
LessCssLexer
r0 | // Framework grid generation | |||
// | ||||
// Used only by Bootstrap to generate the correct number of grid classes given | ||||
// any value of `@grid-columns`. | ||||
.make-grid-columns() { | ||||
// Common styles for all sizes of grid columns, widths 1-12 | ||||
.col(@index) { // initial | ||||
@item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}"; | ||||
.col((@index + 1), @item); | ||||
} | ||||
.col(@index, @list) when (@index =< @grid-columns) { // general; "=<" isn't a typo | ||||
@item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}"; | ||||
.col((@index + 1), ~"@{list}, @{item}"); | ||||
} | ||||
.col(@index, @list) when (@index > @grid-columns) { // terminal | ||||
@{list} { | ||||
position: relative; | ||||
// Prevent columns from collapsing when empty | ||||
min-height: 1px; | ||||
// Inner gutter via padding | ||||
padding-left: ceil((@grid-gutter-width / 2)); | ||||
padding-right: floor((@grid-gutter-width / 2)); | ||||
} | ||||
} | ||||
.col(1); // kickstart it | ||||
} | ||||
.float-grid-columns(@class) { | ||||
.col(@index) { // initial | ||||
@item: ~".col-@{class}-@{index}"; | ||||
.col((@index + 1), @item); | ||||
} | ||||
.col(@index, @list) when (@index =< @grid-columns) { // general | ||||
@item: ~".col-@{class}-@{index}"; | ||||
.col((@index + 1), ~"@{list}, @{item}"); | ||||
} | ||||
.col(@index, @list) when (@index > @grid-columns) { // terminal | ||||
@{list} { | ||||
float: left; | ||||
} | ||||
} | ||||
.col(1); // kickstart it | ||||
} | ||||
.calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) { | ||||
.col-@{class}-@{index} { | ||||
width: percentage((@index / @grid-columns)); | ||||
} | ||||
} | ||||
.calc-grid-column(@index, @class, @type) when (@type = push) and (@index > 0) { | ||||
.col-@{class}-push-@{index} { | ||||
left: percentage((@index / @grid-columns)); | ||||
} | ||||
} | ||||
.calc-grid-column(@index, @class, @type) when (@type = push) and (@index = 0) { | ||||
.col-@{class}-push-0 { | ||||
left: auto; | ||||
} | ||||
} | ||||
.calc-grid-column(@index, @class, @type) when (@type = pull) and (@index > 0) { | ||||
.col-@{class}-pull-@{index} { | ||||
right: percentage((@index / @grid-columns)); | ||||
} | ||||
} | ||||
.calc-grid-column(@index, @class, @type) when (@type = pull) and (@index = 0) { | ||||
.col-@{class}-pull-0 { | ||||
right: auto; | ||||
} | ||||
} | ||||
.calc-grid-column(@index, @class, @type) when (@type = offset) { | ||||
.col-@{class}-offset-@{index} { | ||||
margin-left: percentage((@index / @grid-columns)); | ||||
} | ||||
} | ||||
// Basic looping in LESS | ||||
.loop-grid-columns(@index, @class, @type) when (@index >= 0) { | ||||
.calc-grid-column(@index, @class, @type); | ||||
// next iteration | ||||
.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); | ||||
} | ||||