1 | // Framework grid generation
|
---|
2 | //
|
---|
3 | // Used only by Bootstrap to generate the correct number of grid classes given
|
---|
4 | // any value of `@grid-columns`.
|
---|
5 |
|
---|
6 | .make-grid-columns() {
|
---|
7 | // Common styles for all sizes of grid columns, widths 1-12
|
---|
8 | .col(@index) { // initial
|
---|
9 | @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
|
---|
10 | .col((@index + 1), @item);
|
---|
11 | }
|
---|
12 | .col(@index, @list) when (@index =< @grid-columns) { // general; "=<" isn't a typo
|
---|
13 | @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
|
---|
14 | .col((@index + 1), ~"@{list}, @{item}");
|
---|
15 | }
|
---|
16 | .col(@index, @list) when (@index > @grid-columns) { // terminal
|
---|
17 | @{list} {
|
---|
18 | position: relative;
|
---|
19 | // Prevent columns from collapsing when empty
|
---|
20 | min-height: 1px;
|
---|
21 | // Inner gutter via padding
|
---|
22 | padding-right: floor((@grid-gutter-width / 2));
|
---|
23 | padding-left: ceil((@grid-gutter-width / 2));
|
---|
24 | }
|
---|
25 | }
|
---|
26 | .col(1); // kickstart it
|
---|
27 | }
|
---|
28 |
|
---|
29 | .float-grid-columns(@class) {
|
---|
30 | .col(@index) { // initial
|
---|
31 | @item: ~".col-@{class}-@{index}";
|
---|
32 | .col((@index + 1), @item);
|
---|
33 | }
|
---|
34 | .col(@index, @list) when (@index =< @grid-columns) { // general
|
---|
35 | @item: ~".col-@{class}-@{index}";
|
---|
36 | .col((@index + 1), ~"@{list}, @{item}");
|
---|
37 | }
|
---|
38 | .col(@index, @list) when (@index > @grid-columns) { // terminal
|
---|
39 | @{list} {
|
---|
40 | float: left;
|
---|
41 | }
|
---|
42 | }
|
---|
43 | .col(1); // kickstart it
|
---|
44 | }
|
---|
45 |
|
---|
46 | .calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) {
|
---|
47 | .col-@{class}-@{index} {
|
---|
48 | width: percentage((@index / @grid-columns));
|
---|
49 | }
|
---|
50 | }
|
---|
51 | .calc-grid-column(@index, @class, @type) when (@type = push) and (@index > 0) {
|
---|
52 | .col-@{class}-push-@{index} {
|
---|
53 | left: percentage((@index / @grid-columns));
|
---|
54 | }
|
---|
55 | }
|
---|
56 | .calc-grid-column(@index, @class, @type) when (@type = push) and (@index = 0) {
|
---|
57 | .col-@{class}-push-0 {
|
---|
58 | left: auto;
|
---|
59 | }
|
---|
60 | }
|
---|
61 | .calc-grid-column(@index, @class, @type) when (@type = pull) and (@index > 0) {
|
---|
62 | .col-@{class}-pull-@{index} {
|
---|
63 | right: percentage((@index / @grid-columns));
|
---|
64 | }
|
---|
65 | }
|
---|
66 | .calc-grid-column(@index, @class, @type) when (@type = pull) and (@index = 0) {
|
---|
67 | .col-@{class}-pull-0 {
|
---|
68 | right: auto;
|
---|
69 | }
|
---|
70 | }
|
---|
71 | .calc-grid-column(@index, @class, @type) when (@type = offset) {
|
---|
72 | .col-@{class}-offset-@{index} {
|
---|
73 | margin-left: percentage((@index / @grid-columns));
|
---|
74 | }
|
---|
75 | }
|
---|
76 |
|
---|
77 | // Basic looping in LESS
|
---|
78 | .loop-grid-columns(@index, @class, @type) when (@index >= 0) {
|
---|
79 | .calc-grid-column(@index, @class, @type);
|
---|
80 | // next iteration
|
---|
81 | .loop-grid-columns((@index - 1), @class, @type);
|
---|
82 | }
|
---|
83 |
|
---|
84 | // Create grid for specific class
|
---|
85 | .make-grid(@class) {
|
---|
86 | .float-grid-columns(@class);
|
---|
87 | .loop-grid-columns(@grid-columns, @class, width);
|
---|
88 | .loop-grid-columns(@grid-columns, @class, pull);
|
---|
89 | .loop-grid-columns(@grid-columns, @class, push);
|
---|
90 | .loop-grid-columns(@grid-columns, @class, offset);
|
---|
91 | }
|
---|