]>
Commit | Line | Data |
---|---|---|
31f18b77 FG |
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) { | |
9 | // initial | |
10 | @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}"; | |
11 | .col((@index + 1), @item); | |
12 | } | |
13 | .col(@index, @list) when (@index =< @grid-columns) { | |
14 | // general; "=<" isn't a typo | |
15 | @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}"; | |
16 | .col((@index + 1), ~"@{list}, @{item}"); | |
17 | } | |
18 | .col(@index, @list) when (@index > @grid-columns) { | |
19 | // terminal | |
20 | @{list} { | |
21 | position: relative; | |
22 | // Prevent columns from collapsing when empty | |
23 | min-height: 1px; | |
24 | // Inner gutter via padding | |
25 | padding-left: (@grid-gutter-width / 2); | |
26 | padding-right: (@grid-gutter-width / 2); | |
27 | } | |
28 | } | |
29 | .col(1); // kickstart it | |
30 | } | |
31 | ||
32 | .float-grid-columns(@class) { | |
33 | .col(@index) { | |
34 | // initial | |
35 | @item: ~".col-@{class}-@{index}"; | |
36 | .col((@index + 1), @item); | |
37 | } | |
38 | .col(@index, @list) when (@index =< @grid-columns) { | |
39 | // general | |
40 | @item: ~".col-@{class}-@{index}"; | |
41 | .col((@index + 1), ~"@{list}, @{item}"); | |
42 | } | |
43 | .col(@index, @list) when (@index > @grid-columns) { | |
44 | // terminal | |
45 | @{list} { | |
46 | float: left; | |
47 | } | |
48 | } | |
49 | .col(1); // kickstart it | |
50 | } | |
51 | ||
52 | .calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) { | |
53 | .col-@{class}-@{index} { | |
54 | width: percentage((@index / @grid-columns)); | |
55 | } | |
56 | } | |
57 | ||
58 | .calc-grid-column(@index, @class, @type) when (@type = push) and (@index > 0) { | |
59 | .col-@{class}-push-@{index} { | |
60 | left: percentage((@index / @grid-columns)); | |
61 | } | |
62 | } | |
63 | ||
64 | .calc-grid-column(@index, @class, @type) when (@type = push) and (@index = 0) { | |
65 | .col-@{class}-push-0 { | |
66 | left: auto; | |
67 | } | |
68 | } | |
69 | ||
70 | .calc-grid-column(@index, @class, @type) when (@type = pull) and (@index > 0) { | |
71 | .col-@{class}-pull-@{index} { | |
72 | right: percentage((@index / @grid-columns)); | |
73 | } | |
74 | } | |
75 | ||
76 | .calc-grid-column(@index, @class, @type) when (@type = pull) and (@index = 0) { | |
77 | .col-@{class}-pull-0 { | |
78 | right: auto; | |
79 | } | |
80 | } | |
81 | ||
82 | .calc-grid-column(@index, @class, @type) when (@type = offset) { | |
83 | .col-@{class}-offset-@{index} { | |
84 | margin-left: percentage((@index / @grid-columns)); | |
85 | } | |
86 | } | |
87 | ||
88 | // Basic looping in LESS | |
89 | .loop-grid-columns(@index, @class, @type) when (@index >= 0) { | |
90 | .calc-grid-column(@index, @class, @type); | |
91 | // next iteration | |
92 | .loop-grid-columns((@index - 1), @class, @type); | |
93 | } | |
94 | ||
95 | // Create grid for specific class | |
96 | .make-grid(@class) { | |
97 | .float-grid-columns(@class); | |
98 | .loop-grid-columns(@grid-columns, @class, width); | |
99 | .loop-grid-columns(@grid-columns, @class, pull); | |
100 | .loop-grid-columns(@grid-columns, @class, push); | |
101 | .loop-grid-columns(@grid-columns, @class, offset); | |
102 | } |