Mercurial > wikked

comparison static/bootstrap/less/grid.less @ 149:d29e2f337b00

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Updated to Bootstrap 3.0.
author Ludovic Chabant <ludovic@chabant.com>
date Thu, 12 Dec 2013 21:54:04 -0800
parents 130eccd396d8
children
comparison
equal deleted inserted replaced
148:f02e049d6546 149:d29e2f337b00
1 // 1 //
2 // Grid system 2 // Grid system
3 // -------------------------------------------------- 3 // --------------------------------------------------
4 4
5 // Set the container width, and override it for fixed navbars in media queries
6 .container {
7 .container-fixed();
5 8
6 // Fixed (940px) 9 @media (min-width: @screen-sm) {
7 #grid > .core(@gridColumnWidth, @gridGutterWidth); 10 width: @container-sm;
8 11 }
9 // Fluid (940px) 12 @media (min-width: @screen-md) {
10 #grid > .fluid(@fluidGridColumnWidth, @fluidGridGutterWidth); 13 width: @container-md;
11 14 }
12 // Reset utility classes due to specificity 15 @media (min-width: @screen-lg-min) {
13 [class*="span"].hide, 16 width: @container-lg;
14 .row-fluid [class*="span"].hide { 17 }
15 display: none;
16 } 18 }
17 19
18 [class*="span"].pull-right, 20 // mobile first defaults
19 .row-fluid [class*="span"].pull-right { 21 .row {
20 float: right; 22 .make-row();
21 } 23 }
24
25 // Common styles for small and large grid columns
26 .make-grid-columns();
27
28
29 // Extra small grid
30 //
31 // Columns, offsets, pushes, and pulls for extra small devices like
32 // smartphones.
33
34 .make-grid-columns-float(xs);
35 .make-grid(@grid-columns, xs, width);
36 .make-grid(@grid-columns, xs, pull);
37 .make-grid(@grid-columns, xs, push);
38 .make-grid(@grid-columns, xs, offset);
39
40
41 // Small grid
42 //
43 // Columns, offsets, pushes, and pulls for the small device range, from phones
44 // to tablets.
45
46 @media (min-width: @screen-sm-min) {
47 .make-grid-columns-float(sm);
48 .make-grid(@grid-columns, sm, width);
49 .make-grid(@grid-columns, sm, pull);
50 .make-grid(@grid-columns, sm, push);
51 .make-grid(@grid-columns, sm, offset);
52 }
53
54
55 // Medium grid
56 //
57 // Columns, offsets, pushes, and pulls for the desktop device range.
58
59 @media (min-width: @screen-md-min) {
60 .make-grid-columns-float(md);
61 .make-grid(@grid-columns, md, width);
62 .make-grid(@grid-columns, md, pull);
63 .make-grid(@grid-columns, md, push);
64 .make-grid(@grid-columns, md, offset);
65 }
66
67
68 // Large grid
69 //
70 // Columns, offsets, pushes, and pulls for the large desktop device range.
71
72 @media (min-width: @screen-lg-min) {
73 .make-grid-columns-float(lg);
74 .make-grid(@grid-columns, lg, width);
75 .make-grid(@grid-columns, lg, pull);
76 .make-grid(@grid-columns, lg, push);
77 .make-grid(@grid-columns, lg, offset);
78 }
79