m2u-upass-admin / WebContent / css / blueprint / src / grid.css @ 79:1e5a64d7cd65
History | View | Annotate | Download (9.75 KB)
1 | 0:ea666cc7880e | hadi | /* --------------------------------------------------------------
|
---|---|---|---|
2 | |||
3 | grid.css
|
||
4 | * Sets up an easy-to-use grid of 24 columns.
|
||
5 | |||
6 | By default, the grid is 950px wide, with 24 columns
|
||
7 | spanning 30px, and a 10px margin between columns.
|
||
8 | |||
9 | If you need fewer or more columns, namespaces or semantic
|
||
10 | element names, use the compressor script (lib/compress.rb)
|
||
11 | |||
12 | Note: Changes made in this file will not be applied when
|
||
13 | using the compressor: make changes in lib/blueprint/grid.css.rb
|
||
14 | |||
15 | -------------------------------------------------------------- */
|
||
16 | |||
17 | /* A container should group all your columns. */
|
||
18 | .container {
|
||
19 | width: 950px; |
||
20 | margin: 0 auto; |
||
21 | } |
||
22 | |||
23 | /* Use this class on any div.span / container to see the grid. */
|
||
24 | .showgrid {
|
||
25 | background: url(src/grid.png); |
||
26 | } |
||
27 | |||
28 | |||
29 | /* Columns
|
||
30 | -------------------------------------------------------------- */
|
||
31 | |||
32 | /* Sets up basic grid floating and margin. */
|
||
33 | .column, div.span-1, div.span-2, div.span-3, div.span-4, div.span-5, div.span-6, div.span-7, div.span-8, div.span-9, div.span-10, div.span-11, div.span-12, div.span-13, div.span-14, div.span-15, div.span-16, div.span-17, div.span-18, div.span-19, div.span-20, div.span-21, div.span-22, div.span-23, div.span-24 { |
||
34 | float: left; |
||
35 | margin-right: 10px; |
||
36 | } |
||
37 | |||
38 | /* The last column in a row needs this class. */
|
||
39 | .last, div.last { margin-right: 0; } |
||
40 | |||
41 | /* Use these classes to set the width of a column. */
|
||
42 | .span-1 {width: 30px;} |
||
43 | |||
44 | .span-2 {width: 70px;} |
||
45 | .span-3 {width: 110px;} |
||
46 | .span-4 {width: 150px;} |
||
47 | .span-5 {width: 190px;} |
||
48 | .span-6 {width: 230px;} |
||
49 | .span-7 {width: 270px;} |
||
50 | .span-8 {width: 310px;} |
||
51 | .span-9 {width: 350px;} |
||
52 | .span-10 {width: 390px;} |
||
53 | .span-11 {width: 430px;} |
||
54 | .span-12 {width: 470px;} |
||
55 | .span-13 {width: 510px;} |
||
56 | .span-14 {width: 550px;} |
||
57 | .span-15 {width: 590px;} |
||
58 | .span-16 {width: 630px;} |
||
59 | .span-17 {width: 670px;} |
||
60 | .span-18 {width: 710px;} |
||
61 | .span-19 {width: 750px;} |
||
62 | .span-20 {width: 790px;} |
||
63 | .span-21 {width: 830px;} |
||
64 | .span-22 {width: 870px;} |
||
65 | .span-23 {width: 910px;} |
||
66 | .span-24, div.span-24 { width: 950px; margin-right: 0; } |
||
67 | |||
68 | /* Use these classes to set the width of an input. */
|
||
69 | input.span-1, textarea.span-1, input.span-2, textarea.span-2, input.span-3, textarea.span-3, input.span-4, textarea.span-4, input.span-5, textarea.span-5, input.span-6, textarea.span-6, input.span-7, textarea.span-7, input.span-8, textarea.span-8, input.span-9, textarea.span-9, input.span-10, textarea.span-10, input.span-11, textarea.span-11, input.span-12, textarea.span-12, input.span-13, textarea.span-13, input.span-14, textarea.span-14, input.span-15, textarea.span-15, input.span-16, textarea.span-16, input.span-17, textarea.span-17, input.span-18, textarea.span-18, input.span-19, textarea.span-19, input.span-20, textarea.span-20, input.span-21, textarea.span-21, input.span-22, textarea.span-22, input.span-23, textarea.span-23, input.span-24, textarea.span-24 { |
||
70 | border-left-width: 1px!important; |
||
71 | border-right-width: 1px!important; |
||
72 | padding-left: 5px!important; |
||
73 | padding-right: 5px!important; |
||
74 | } |
||
75 | |||
76 | input.span-1, textarea.span-1 { width: 18px!important; } |
||
77 | input.span-2, textarea.span-2 { width: 58px!important; } |
||
78 | input.span-3, textarea.span-3 { width: 98px!important; } |
||
79 | input.span-4, textarea.span-4 { width: 138px!important; } |
||
80 | input.span-5, textarea.span-5 { width: 178px!important; } |
||
81 | input.span-6, textarea.span-6 { width: 218px!important; } |
||
82 | input.span-7, textarea.span-7 { width: 258px!important; } |
||
83 | input.span-8, textarea.span-8 { width: 298px!important; } |
||
84 | input.span-9, textarea.span-9 { width: 338px!important; } |
||
85 | input.span-10, textarea.span-10 { width: 378px!important; } |
||
86 | input.span-11, textarea.span-11 { width: 418px!important; } |
||
87 | input.span-12, textarea.span-12 { width: 458px!important; } |
||
88 | input.span-13, textarea.span-13 { width: 498px!important; } |
||
89 | input.span-14, textarea.span-14 { width: 538px!important; } |
||
90 | input.span-15, textarea.span-15 { width: 578px!important; } |
||
91 | input.span-16, textarea.span-16 { width: 618px!important; } |
||
92 | input.span-17, textarea.span-17 { width: 658px!important; } |
||
93 | input.span-18, textarea.span-18 { width: 698px!important; } |
||
94 | input.span-19, textarea.span-19 { width: 738px!important; } |
||
95 | input.span-20, textarea.span-20 { width: 778px!important; } |
||
96 | input.span-21, textarea.span-21 { width: 818px!important; } |
||
97 | input.span-22, textarea.span-22 { width: 858px!important; } |
||
98 | input.span-23, textarea.span-23 { width: 898px!important; } |
||
99 | input.span-24, textarea.span-24 { width: 938px!important; } |
||
100 | |||
101 | /* Add these to a column to append empty cols. */
|
||
102 | |||
103 | .append-1 { padding-right: 40px;} |
||
104 | .append-2 { padding-right: 80px;} |
||
105 | .append-3 { padding-right: 120px;} |
||
106 | .append-4 { padding-right: 160px;} |
||
107 | .append-5 { padding-right: 200px;} |
||
108 | .append-6 { padding-right: 240px;} |
||
109 | .append-7 { padding-right: 280px;} |
||
110 | .append-8 { padding-right: 320px;} |
||
111 | .append-9 { padding-right: 360px;} |
||
112 | .append-10 { padding-right: 400px;} |
||
113 | .append-11 { padding-right: 440px;} |
||
114 | .append-12 { padding-right: 480px;} |
||
115 | .append-13 { padding-right: 520px;} |
||
116 | .append-14 { padding-right: 560px;} |
||
117 | .append-15 { padding-right: 600px;} |
||
118 | .append-16 { padding-right: 640px;} |
||
119 | .append-17 { padding-right: 680px;} |
||
120 | .append-18 { padding-right: 720px;} |
||
121 | .append-19 { padding-right: 760px;} |
||
122 | .append-20 { padding-right: 800px;} |
||
123 | .append-21 { padding-right: 840px;} |
||
124 | .append-22 { padding-right: 880px;} |
||
125 | .append-23 { padding-right: 920px;} |
||
126 | |||
127 | /* Add these to a column to prepend empty cols. */
|
||
128 | |||
129 | .prepend-1 { padding-left: 40px;} |
||
130 | .prepend-2 { padding-left: 80px;} |
||
131 | .prepend-3 { padding-left: 120px;} |
||
132 | .prepend-4 { padding-left: 160px;} |
||
133 | .prepend-5 { padding-left: 200px;} |
||
134 | .prepend-6 { padding-left: 240px;} |
||
135 | .prepend-7 { padding-left: 280px;} |
||
136 | .prepend-8 { padding-left: 320px;} |
||
137 | .prepend-9 { padding-left: 360px;} |
||
138 | .prepend-10 { padding-left: 400px;} |
||
139 | .prepend-11 { padding-left: 440px;} |
||
140 | .prepend-12 { padding-left: 480px;} |
||
141 | .prepend-13 { padding-left: 520px;} |
||
142 | .prepend-14 { padding-left: 560px;} |
||
143 | .prepend-15 { padding-left: 600px;} |
||
144 | .prepend-16 { padding-left: 640px;} |
||
145 | .prepend-17 { padding-left: 680px;} |
||
146 | .prepend-18 { padding-left: 720px;} |
||
147 | .prepend-19 { padding-left: 760px;} |
||
148 | .prepend-20 { padding-left: 800px;} |
||
149 | .prepend-21 { padding-left: 840px;} |
||
150 | .prepend-22 { padding-left: 880px;} |
||
151 | .prepend-23 { padding-left: 920px;} |
||
152 | |||
153 | |||
154 | /* Border on right hand side of a column. */
|
||
155 | div.border { |
||
156 | padding-right: 4px; |
||
157 | margin-right: 5px; |
||
158 | border-right: 1px solid #eee; |
||
159 | } |
||
160 | |||
161 | /* Border with more whitespace, spans one column. */
|
||
162 | div.colborder { |
||
163 | padding-right: 24px; |
||
164 | margin-right: 25px; |
||
165 | border-right: 1px solid #eee; |
||
166 | } |
||
167 | |||
168 | |||
169 | /* Use these classes on an element to push it into the
|
||
170 | next column, or to pull it into the previous column. */
|
||
171 | |||
172 | |||
173 | .pull-1 { margin-left: -40px; } |
||
174 | .pull-2 { margin-left: -80px; } |
||
175 | .pull-3 { margin-left: -120px; } |
||
176 | .pull-4 { margin-left: -160px; } |
||
177 | .pull-5 { margin-left: -200px; } |
||
178 | .pull-6 { margin-left: -240px; } |
||
179 | .pull-7 { margin-left: -280px; } |
||
180 | .pull-8 { margin-left: -320px; } |
||
181 | .pull-9 { margin-left: -360px; } |
||
182 | .pull-10 { margin-left: -400px; } |
||
183 | .pull-11 { margin-left: -440px; } |
||
184 | .pull-12 { margin-left: -480px; } |
||
185 | .pull-13 { margin-left: -520px; } |
||
186 | .pull-14 { margin-left: -560px; } |
||
187 | .pull-15 { margin-left: -600px; } |
||
188 | .pull-16 { margin-left: -640px; } |
||
189 | .pull-17 { margin-left: -680px; } |
||
190 | .pull-18 { margin-left: -720px; } |
||
191 | .pull-19 { margin-left: -760px; } |
||
192 | .pull-20 { margin-left: -800px; } |
||
193 | .pull-21 { margin-left: -840px; } |
||
194 | .pull-22 { margin-left: -880px; } |
||
195 | .pull-23 { margin-left: -920px; } |
||
196 | .pull-24 { margin-left: -960px; } |
||
197 | |||
198 | .pull-1, .pull-2, .pull-3, .pull-4, .pull-5, .pull-6, .pull-7, .pull-8, .pull-9, .pull-10, .pull-11, .pull-12, .pull-13, .pull-14, .pull-15, .pull-16, .pull-17, .pull-18, .pull-19, .pull-20, .pull-21, .pull-22, .pull-23, .pull-24 {float: left; position:relative;} |
||
199 | |||
200 | |||
201 | .push-1 { margin: 0 -40px 1.5em 40px; } |
||
202 | .push-2 { margin: 0 -80px 1.5em 80px; } |
||
203 | .push-3 { margin: 0 -120px 1.5em 120px; } |
||
204 | .push-4 { margin: 0 -160px 1.5em 160px; } |
||
205 | .push-5 { margin: 0 -200px 1.5em 200px; } |
||
206 | .push-6 { margin: 0 -240px 1.5em 240px; } |
||
207 | .push-7 { margin: 0 -280px 1.5em 280px; } |
||
208 | .push-8 { margin: 0 -320px 1.5em 320px; } |
||
209 | .push-9 { margin: 0 -360px 1.5em 360px; } |
||
210 | .push-10 { margin: 0 -400px 1.5em 400px; } |
||
211 | .push-11 { margin: 0 -440px 1.5em 440px; } |
||
212 | .push-12 { margin: 0 -480px 1.5em 480px; } |
||
213 | .push-13 { margin: 0 -520px 1.5em 520px; } |
||
214 | .push-14 { margin: 0 -560px 1.5em 560px; } |
||
215 | .push-15 { margin: 0 -600px 1.5em 600px; } |
||
216 | .push-16 { margin: 0 -640px 1.5em 640px; } |
||
217 | .push-17 { margin: 0 -680px 1.5em 680px; } |
||
218 | .push-18 { margin: 0 -720px 1.5em 720px; } |
||
219 | .push-19 { margin: 0 -760px 1.5em 760px; } |
||
220 | .push-20 { margin: 0 -800px 1.5em 800px; } |
||
221 | .push-21 { margin: 0 -840px 1.5em 840px; } |
||
222 | .push-22 { margin: 0 -880px 1.5em 880px; } |
||
223 | .push-23 { margin: 0 -920px 1.5em 920px; } |
||
224 | .push-24 { margin: 0 -960px 1.5em 960px; } |
||
225 | |||
226 | .push-1, .push-2, .push-3, .push-4, .push-5, .push-6, .push-7, .push-8, .push-9, .push-10, .push-11, .push-12, .push-13, .push-14, .push-15, .push-16, .push-17, .push-18, .push-19, .push-20, .push-21, .push-22, .push-23, .push-24 {float: right; position:relative;} |
||
227 | |||
228 | |||
229 | /* Misc classes and elements
|
||
230 | -------------------------------------------------------------- */
|
||
231 | |||
232 | /* In case you need to add a gutter above/below an element */
|
||
233 | .prepend-top {
|
||
234 | margin-top:1.5em; |
||
235 | } |
||
236 | .append-bottom {
|
||
237 | margin-bottom:1.5em; |
||
238 | } |
||
239 | |||
240 | /* Use a .box to create a padded box inside a column. */
|
||
241 | .box {
|
||
242 | padding: 1.5em; |
||
243 | margin-bottom: 1.5em; |
||
244 | background: #E5ECF9; |
||
245 | } |
||
246 | |||
247 | /* Use this to create a horizontal ruler across a column. */
|
||
248 | hr {
|
||
249 | background: #ddd; |
||
250 | color: #ddd; |
||
251 | clear: both; |
||
252 | float: none; |
||
253 | width: 100%; |
||
254 | height: .1em; |
||
255 | margin: 0 0 1.45em; |
||
256 | border: none; |
||
257 | } |
||
258 | hr.space { |
||
259 | background: #fff; |
||
260 | color: #fff; |
||
261 | } |
||
262 | |||
263 | |||
264 | /* Clearing floats without extra markup
|
||
265 | Based on How To Clear Floats Without Structural Markup by PiE
|
||
266 | [http://www.positioniseverything.net/easyclearing.html] */
|
||
267 | |||
268 | .clearfix:after, .container:after { |
||
269 | content: "\0020"; |
||
270 | display: block; |
||
271 | height: 0; |
||
272 | clear: both; |
||
273 | visibility: hidden; |
||
274 | overflow:hidden; |
||
275 | } |
||
276 | .clearfix, .container {display: block;} |
||
277 | |||
278 | /* Regular clearing
|
||
279 | apply to column that should drop below previous ones. */
|
||
280 | |||
281 | .clear { clear:both; } |