Mercurial > repos > vimalkumarvelayudhan > riboplot
comparison data/css/skeleton.css @ 0:ca58e9466cbf
First commit
author | Vimalkumar Velayudhan <vimal@biotechcoder.com> |
---|---|
date | Mon, 29 Jun 2015 16:38:36 +0100 |
parents | |
children |
comparison
equal
deleted
inserted
replaced
-1:000000000000 | 0:ca58e9466cbf |
---|---|
1 /* | |
2 * Skeleton V2.0.4 | |
3 * Copyright 2014, Dave Gamache | |
4 * www.getskeleton.com | |
5 * Free to use under the MIT license. | |
6 * http://www.opensource.org/licenses/mit-license.php | |
7 * 12/29/2014 | |
8 */ | |
9 | |
10 | |
11 /* Table of contents | |
12 –––––––––––––––––––––––––––––––––––––––––––––––––– | |
13 - Grid | |
14 - Base Styles | |
15 - Typography | |
16 - Links | |
17 - Buttons | |
18 - Forms | |
19 - Lists | |
20 - Code | |
21 - Tables | |
22 - Spacing | |
23 - Utilities | |
24 - Clearing | |
25 - Media Queries | |
26 */ | |
27 | |
28 | |
29 /* Grid | |
30 –––––––––––––––––––––––––––––––––––––––––––––––––– */ | |
31 .container { | |
32 position: relative; | |
33 width: 100%; | |
34 max-width: 960px; | |
35 margin: 0 auto; | |
36 padding: 0 20px; | |
37 box-sizing: border-box; } | |
38 .column, | |
39 .columns { | |
40 width: 100%; | |
41 float: left; | |
42 box-sizing: border-box; } | |
43 | |
44 /* For devices larger than 400px */ | |
45 @media (min-width: 400px) { | |
46 .container { | |
47 width: 85%; | |
48 padding: 0; } | |
49 } | |
50 | |
51 /* For devices larger than 550px */ | |
52 @media (min-width: 550px) { | |
53 .container { | |
54 width: 80%; } | |
55 .column, | |
56 .columns { | |
57 margin-left: 4%; } | |
58 .column:first-child, | |
59 .columns:first-child { | |
60 margin-left: 0; } | |
61 | |
62 .one.column, | |
63 .one.columns { width: 4.66666666667%; } | |
64 .two.columns { width: 13.3333333333%; } | |
65 .three.columns { width: 22%; } | |
66 .four.columns { width: 30.6666666667%; } | |
67 .five.columns { width: 39.3333333333%; } | |
68 .six.columns { width: 48%; } | |
69 .seven.columns { width: 56.6666666667%; } | |
70 .eight.columns { width: 65.3333333333%; } | |
71 .nine.columns { width: 74.0%; } | |
72 .ten.columns { width: 82.6666666667%; } | |
73 .eleven.columns { width: 91.3333333333%; } | |
74 .twelve.columns { width: 100%; margin-left: 0; } | |
75 | |
76 .one-third.column { width: 30.6666666667%; } | |
77 .two-thirds.column { width: 65.3333333333%; } | |
78 | |
79 .one-half.column { width: 48%; } | |
80 | |
81 /* Offsets */ | |
82 .offset-by-one.column, | |
83 .offset-by-one.columns { margin-left: 8.66666666667%; } | |
84 .offset-by-two.column, | |
85 .offset-by-two.columns { margin-left: 17.3333333333%; } | |
86 .offset-by-three.column, | |
87 .offset-by-three.columns { margin-left: 26%; } | |
88 .offset-by-four.column, | |
89 .offset-by-four.columns { margin-left: 34.6666666667%; } | |
90 .offset-by-five.column, | |
91 .offset-by-five.columns { margin-left: 43.3333333333%; } | |
92 .offset-by-six.column, | |
93 .offset-by-six.columns { margin-left: 52%; } | |
94 .offset-by-seven.column, | |
95 .offset-by-seven.columns { margin-left: 60.6666666667%; } | |
96 .offset-by-eight.column, | |
97 .offset-by-eight.columns { margin-left: 69.3333333333%; } | |
98 .offset-by-nine.column, | |
99 .offset-by-nine.columns { margin-left: 78.0%; } | |
100 .offset-by-ten.column, | |
101 .offset-by-ten.columns { margin-left: 86.6666666667%; } | |
102 .offset-by-eleven.column, | |
103 .offset-by-eleven.columns { margin-left: 95.3333333333%; } | |
104 | |
105 .offset-by-one-third.column, | |
106 .offset-by-one-third.columns { margin-left: 34.6666666667%; } | |
107 .offset-by-two-thirds.column, | |
108 .offset-by-two-thirds.columns { margin-left: 69.3333333333%; } | |
109 | |
110 .offset-by-one-half.column, | |
111 .offset-by-one-half.columns { margin-left: 52%; } | |
112 | |
113 } | |
114 | |
115 | |
116 /* Base Styles | |
117 –––––––––––––––––––––––––––––––––––––––––––––––––– */ | |
118 /* NOTE | |
119 html is set to 62.5% so that all the REM measurements throughout Skeleton | |
120 are based on 10px sizing. So basically 1.5rem = 15px :) */ | |
121 html { | |
122 font-size: 62.5%; } | |
123 body { | |
124 font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */ | |
125 line-height: 1.6; | |
126 font-weight: 400; | |
127 font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; | |
128 color: #515151; } | |
129 | |
130 | |
131 /* Typography | |
132 –––––––––––––––––––––––––––––––––––––––––––––––––– */ | |
133 h1, h2, h3, h4, h5, h6 { | |
134 margin-top: 0; | |
135 margin-bottom: 2rem; | |
136 font-weight: 300; } | |
137 h1 { font-size: 4.0rem; line-height: 1.2; letter-spacing: -.1rem;} | |
138 h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; } | |
139 h3 { font-size: 3.0rem; line-height: 1.3; letter-spacing: -.1rem; } | |
140 h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; } | |
141 h5 { font-size: 1.8rem; line-height: 1.5; letter-spacing: -.05rem; } | |
142 h6 { font-size: 1.5rem; line-height: 1.6; letter-spacing: 0; } | |
143 | |
144 /* Larger than phablet */ | |
145 @media (min-width: 550px) { | |
146 h1 { font-size: 5.0rem; } | |
147 h2 { font-size: 4.2rem; } | |
148 h3 { font-size: 3.6rem; } | |
149 h4 { font-size: 3.0rem; } | |
150 h5 { font-size: 2.4rem; } | |
151 h6 { font-size: 1.5rem; } | |
152 } | |
153 | |
154 p { | |
155 margin-top: 0; } | |
156 | |
157 | |
158 /* Links | |
159 –––––––––––––––––––––––––––––––––––––––––––––––––– */ | |
160 a { | |
161 color: #00b4ff; } | |
162 a:hover { | |
163 color: #008CD7; } | |
164 | |
165 | |
166 /* Buttons | |
167 –––––––––––––––––––––––––––––––––––––––––––––––––– */ | |
168 .button, | |
169 button, | |
170 input[type="submit"], | |
171 input[type="reset"], | |
172 input[type="button"] { | |
173 display: inline-block; | |
174 height: 38px; | |
175 padding: 0 30px; | |
176 color: #555; | |
177 text-align: center; | |
178 font-size: 11px; | |
179 font-weight: 600; | |
180 line-height: 38px; | |
181 letter-spacing: .1rem; | |
182 text-transform: uppercase; | |
183 text-decoration: none; | |
184 white-space: nowrap; | |
185 background-color: transparent; | |
186 border-radius: 4px; | |
187 border: 1px solid #bbb; | |
188 cursor: pointer; | |
189 box-sizing: border-box; } | |
190 .button:hover, | |
191 button:hover, | |
192 input[type="submit"]:hover, | |
193 input[type="reset"]:hover, | |
194 input[type="button"]:hover, | |
195 .button:focus, | |
196 button:focus, | |
197 input[type="submit"]:focus, | |
198 input[type="reset"]:focus, | |
199 input[type="button"]:focus { | |
200 color: #333; | |
201 border-color: #888; | |
202 outline: 0; } | |
203 .button.button-primary, | |
204 button.button-primary, | |
205 input[type="submit"].button-primary, | |
206 input[type="reset"].button-primary, | |
207 input[type="button"].button-primary { | |
208 color: #FFF; | |
209 background-color: #33C3F0; | |
210 border-color: #33C3F0; } | |
211 .button.button-primary:hover, | |
212 button.button-primary:hover, | |
213 input[type="submit"].button-primary:hover, | |
214 input[type="reset"].button-primary:hover, | |
215 input[type="button"].button-primary:hover, | |
216 .button.button-primary:focus, | |
217 button.button-primary:focus, | |
218 input[type="submit"].button-primary:focus, | |
219 input[type="reset"].button-primary:focus, | |
220 input[type="button"].button-primary:focus { | |
221 color: #FFF; | |
222 background-color: #1EAEDB; | |
223 border-color: #1EAEDB; } | |
224 | |
225 | |
226 /* Forms | |
227 –––––––––––––––––––––––––––––––––––––––––––––––––– */ | |
228 input[type="email"], | |
229 input[type="number"], | |
230 input[type="search"], | |
231 input[type="text"], | |
232 input[type="tel"], | |
233 input[type="url"], | |
234 input[type="password"], | |
235 textarea, | |
236 select { | |
237 height: 38px; | |
238 padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */ | |
239 background-color: #fff; | |
240 border: 1px solid #D1D1D1; | |
241 border-radius: 4px; | |
242 box-shadow: none; | |
243 box-sizing: border-box; } | |
244 /* Removes awkward default styles on some inputs for iOS */ | |
245 input[type="email"], | |
246 input[type="number"], | |
247 input[type="search"], | |
248 input[type="text"], | |
249 input[type="tel"], | |
250 input[type="url"], | |
251 input[type="password"], | |
252 textarea { | |
253 -webkit-appearance: none; | |
254 -moz-appearance: none; | |
255 appearance: none; } | |
256 textarea { | |
257 min-height: 65px; | |
258 padding-top: 6px; | |
259 padding-bottom: 6px; } | |
260 input[type="email"]:focus, | |
261 input[type="number"]:focus, | |
262 input[type="search"]:focus, | |
263 input[type="text"]:focus, | |
264 input[type="tel"]:focus, | |
265 input[type="url"]:focus, | |
266 input[type="password"]:focus, | |
267 textarea:focus, | |
268 select:focus { | |
269 border: 1px solid #33C3F0; | |
270 outline: 0; } | |
271 label, | |
272 legend { | |
273 display: block; | |
274 margin-bottom: .5rem; | |
275 font-weight: 600; } | |
276 fieldset { | |
277 padding: 0; | |
278 border-width: 0; } | |
279 input[type="checkbox"], | |
280 input[type="radio"] { | |
281 display: inline; } | |
282 label > .label-body { | |
283 display: inline-block; | |
284 margin-left: .5rem; | |
285 font-weight: normal; } | |
286 | |
287 | |
288 /* Lists | |
289 –––––––––––––––––––––––––––––––––––––––––––––––––– */ | |
290 ul { | |
291 list-style: circle inside; } | |
292 ol { | |
293 list-style: decimal inside; } | |
294 ol, ul { | |
295 padding-left: 0; | |
296 margin-top: 0; } | |
297 ul ul, | |
298 ul ol, | |
299 ol ol, | |
300 ol ul { | |
301 margin: 1.5rem 0 1.5rem 3rem; | |
302 font-size: 90%; } | |
303 li { | |
304 margin-bottom: 1rem; } | |
305 | |
306 | |
307 /* Code | |
308 –––––––––––––––––––––––––––––––––––––––––––––––––– */ | |
309 code { | |
310 padding: .2rem .5rem; | |
311 margin: 0 .2rem; | |
312 font-size: 90%; | |
313 white-space: nowrap; | |
314 background: #F1F1F1; | |
315 border: 1px solid #E1E1E1; | |
316 border-radius: 4px; } | |
317 pre > code { | |
318 display: block; | |
319 padding: 1rem 1.5rem; | |
320 white-space: pre; } | |
321 | |
322 | |
323 /* Tables | |
324 –––––––––––––––––––––––––––––––––––––––––––––––––– */ | |
325 th, | |
326 td { | |
327 padding: 12px 15px; | |
328 text-align: left; | |
329 border-bottom: 1px solid #E1E1E1; } | |
330 | |
331 /*th:first-child, | |
332 td:first-child { | |
333 padding-left: 0; } | |
334 th:last-child, | |
335 td:last-child { | |
336 padding-right: 0; } | |
337 */ | |
338 | |
339 /* Spacing | |
340 –––––––––––––––––––––––––––––––––––––––––––––––––– */ | |
341 button, | |
342 .button { | |
343 margin-bottom: 1rem; } | |
344 input, | |
345 textarea, | |
346 select, | |
347 fieldset { | |
348 margin-bottom: 1.5rem; } | |
349 pre, | |
350 blockquote, | |
351 dl, | |
352 figure, | |
353 table, | |
354 p, | |
355 ul, | |
356 ol, | |
357 form { | |
358 margin-bottom: 2.5rem; } | |
359 | |
360 | |
361 /* Utilities | |
362 –––––––––––––––––––––––––––––––––––––––––––––––––– */ | |
363 .u-full-width { | |
364 width: 100%; | |
365 box-sizing: border-box; } | |
366 .u-max-full-width { | |
367 max-width: 100%; | |
368 box-sizing: border-box; } | |
369 .u-pull-right { | |
370 float: right; } | |
371 .u-pull-left { | |
372 float: left; } | |
373 | |
374 | |
375 /* Misc | |
376 –––––––––––––––––––––––––––––––––––––––––––––––––– */ | |
377 hr { | |
378 margin-top: 3rem; | |
379 margin-bottom: 3.5rem; | |
380 border-width: 0; | |
381 border-top: 1px solid #E1E1E1; } | |
382 | |
383 | |
384 /* Clearing | |
385 –––––––––––––––––––––––––––––––––––––––––––––––––– */ | |
386 | |
387 /* Self Clearing Goodness */ | |
388 .container:after, | |
389 .row:after, | |
390 .u-cf { | |
391 content: ""; | |
392 display: table; | |
393 clear: both; } | |
394 | |
395 | |
396 /* Media Queries | |
397 –––––––––––––––––––––––––––––––––––––––––––––––––– */ | |
398 /* | |
399 Note: The best way to structure the use of media queries is to create the queries | |
400 near the relevant code. For example, if you wanted to change the styles for buttons | |
401 on small devices, paste the mobile query code up in the buttons section and style it | |
402 there. | |
403 */ | |
404 | |
405 | |
406 /* Larger than mobile */ | |
407 @media (min-width: 400px) {} | |
408 | |
409 /* Larger than phablet (also point when grid becomes active) */ | |
410 @media (min-width: 550px) {} | |
411 | |
412 /* Larger than tablet */ | |
413 @media (min-width: 750px) {} | |
414 | |
415 /* Larger than desktop */ | |
416 @media (min-width: 1000px) {} | |
417 | |
418 /* Larger than Desktop HD */ | |
419 @media (min-width: 1200px) {} |