scratch – Blame information for rev 93
?pathlinks?
Rev | Author | Line No. | Line |
---|---|---|---|
58 | 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 | } |