corrade-nucleus-nucleons – Blame information for rev
?pathlinks?
Rev | Author | Line No. | Line |
---|---|---|---|
1 | office | 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-left: ceil((@grid-gutter-width / 2)); |
||
23 | padding-right: floor((@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 | } |