Mercurial > repos > vimalkumarvelayudhan > riboplot

comparison data/css/skeleton.css @ 0:ca58e9466cbf

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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) {}