corrade-nucleus-nucleons – Blame information for rev 20

Subversion Repositories:
Rev:
Rev Author Line No. Line
20 office 1 // Grid system
2 //
3 // Generate semantic grid columns with these mixins.
4  
5 // Centered container element
6 .container-fixed(@gutter: @grid-gutter-width) {
7 margin-right: auto;
8 margin-left: auto;
9 padding-left: floor((@gutter / 2));
10 padding-right: ceil((@gutter / 2));
11 &:extend(.clearfix all);
12 }
13  
14 // Creates a wrapper for a series of columns
15 .make-row(@gutter: @grid-gutter-width) {
16 margin-left: ceil((@gutter / -2));
17 margin-right: floor((@gutter / -2));
18 &:extend(.clearfix all);
19 }
20  
21 // Generate the extra small columns
22 .make-xs-column(@columns; @gutter: @grid-gutter-width) {
23 position: relative;
24 float: left;
25 width: percentage((@columns / @grid-columns));
26 min-height: 1px;
27 padding-left: (@gutter / 2);
28 padding-right: (@gutter / 2);
29 }
30 .make-xs-column-offset(@columns) {
31 margin-left: percentage((@columns / @grid-columns));
32 }
33 .make-xs-column-push(@columns) {
34 left: percentage((@columns / @grid-columns));
35 }
36 .make-xs-column-pull(@columns) {
37 right: percentage((@columns / @grid-columns));
38 }
39  
40 // Generate the small columns
41 .make-sm-column(@columns; @gutter: @grid-gutter-width) {
42 position: relative;
43 min-height: 1px;
44 padding-left: (@gutter / 2);
45 padding-right: (@gutter / 2);
46  
47 @media (min-width: @screen-sm-min) {
48 float: left;
49 width: percentage((@columns / @grid-columns));
50 }
51 }
52 .make-sm-column-offset(@columns) {
53 @media (min-width: @screen-sm-min) {
54 margin-left: percentage((@columns / @grid-columns));
55 }
56 }
57 .make-sm-column-push(@columns) {
58 @media (min-width: @screen-sm-min) {
59 left: percentage((@columns / @grid-columns));
60 }
61 }
62 .make-sm-column-pull(@columns) {
63 @media (min-width: @screen-sm-min) {
64 right: percentage((@columns / @grid-columns));
65 }
66 }
67  
68 // Generate the medium columns
69 .make-md-column(@columns; @gutter: @grid-gutter-width) {
70 position: relative;
71 min-height: 1px;
72 padding-left: (@gutter / 2);
73 padding-right: (@gutter / 2);
74  
75 @media (min-width: @screen-md-min) {
76 float: left;
77 width: percentage((@columns / @grid-columns));
78 }
79 }
80 .make-md-column-offset(@columns) {
81 @media (min-width: @screen-md-min) {
82 margin-left: percentage((@columns / @grid-columns));
83 }
84 }
85 .make-md-column-push(@columns) {
86 @media (min-width: @screen-md-min) {
87 left: percentage((@columns / @grid-columns));
88 }
89 }
90 .make-md-column-pull(@columns) {
91 @media (min-width: @screen-md-min) {
92 right: percentage((@columns / @grid-columns));
93 }
94 }
95  
96 // Generate the large columns
97 .make-lg-column(@columns; @gutter: @grid-gutter-width) {
98 position: relative;
99 min-height: 1px;
100 padding-left: (@gutter / 2);
101 padding-right: (@gutter / 2);
102  
103 @media (min-width: @screen-lg-min) {
104 float: left;
105 width: percentage((@columns / @grid-columns));
106 }
107 }
108 .make-lg-column-offset(@columns) {
109 @media (min-width: @screen-lg-min) {
110 margin-left: percentage((@columns / @grid-columns));
111 }
112 }
113 .make-lg-column-push(@columns) {
114 @media (min-width: @screen-lg-min) {
115 left: percentage((@columns / @grid-columns));
116 }
117 }
118 .make-lg-column-pull(@columns) {
119 @media (min-width: @screen-lg-min) {
120 right: percentage((@columns / @grid-columns));
121 }
122 }