Chris@2
|
1 // =============================================================================
|
Chris@2
|
2 // Normalize.scss settings
|
Chris@2
|
3 // =============================================================================
|
Chris@2
|
4
|
Chris@2
|
5 // Set to false if you want to drop support for IE6 and IE7
|
Chris@2
|
6 // Notice: setting to false might render some elements
|
Chris@2
|
7 // slightly differently than when set to true
|
Chris@2
|
8
|
Chris@2
|
9 $support-for-ie6-and-ie7: false;
|
Chris@2
|
10
|
Chris@2
|
11 // =============================================================================
|
Chris@2
|
12 // HTML5 display definitions
|
Chris@2
|
13 // =============================================================================
|
Chris@2
|
14
|
Chris@2
|
15 // Corrects block display not defined in IE6/7/8/9 & FF3
|
Chris@2
|
16
|
Chris@2
|
17 article,
|
Chris@2
|
18 aside,
|
Chris@2
|
19 details,
|
Chris@2
|
20 figcaption,
|
Chris@2
|
21 figure,
|
Chris@2
|
22 footer,
|
Chris@2
|
23 header,
|
Chris@2
|
24 hgroup,
|
Chris@2
|
25 nav,
|
Chris@2
|
26 section,
|
Chris@2
|
27 summary {
|
Chris@2
|
28 display: block;
|
Chris@2
|
29 }
|
Chris@2
|
30
|
Chris@2
|
31 // Corrects inline-block display not defined in IE6/7/8/9 & FF3
|
Chris@2
|
32
|
Chris@2
|
33 audio,
|
Chris@2
|
34 canvas,
|
Chris@2
|
35 video {
|
Chris@2
|
36 display: inline-block;
|
Chris@2
|
37 @if $support-for-ie6-and-ie7 {
|
Chris@2
|
38 *display: inline;
|
Chris@2
|
39 *zoom: 1;
|
Chris@2
|
40 }
|
Chris@2
|
41 }
|
Chris@2
|
42
|
Chris@2
|
43 // 1. Prevents modern browsers from displaying 'audio' without controls
|
Chris@2
|
44 // 2. Remove excess height in iOS5 devices
|
Chris@2
|
45
|
Chris@2
|
46 audio:not([controls]) {
|
Chris@2
|
47 display: none; // 1
|
Chris@2
|
48 height: 0; // 2
|
Chris@2
|
49 }
|
Chris@2
|
50
|
Chris@2
|
51 // Addresses styling for 'hidden' attribute not present in IE7/8/9, FF3, S4
|
Chris@2
|
52 // Known issue: no IE6 support
|
Chris@2
|
53
|
Chris@2
|
54 [hidden] {
|
Chris@2
|
55 display: none;
|
Chris@2
|
56 }
|
Chris@2
|
57
|
Chris@2
|
58 // =============================================================================
|
Chris@2
|
59 // Base
|
Chris@2
|
60 // =============================================================================
|
Chris@2
|
61
|
Chris@2
|
62 // 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units
|
Chris@2
|
63 // http://clagnut.com/blog/348/#c790
|
Chris@2
|
64 // 2. Prevents iOS text size adjust after orientation change, without disabling user zoom
|
Chris@2
|
65 // www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
|
Chris@2
|
66
|
Chris@2
|
67 html {
|
Chris@2
|
68 @if $support-for-ie6-and-ie7 {
|
Chris@2
|
69 font-size: 100%; // 1
|
Chris@2
|
70 }
|
Chris@2
|
71 -webkit-text-size-adjust: 100%; // 2
|
Chris@2
|
72 -ms-text-size-adjust: 100%; // 2
|
Chris@2
|
73 }
|
Chris@2
|
74
|
Chris@2
|
75 // Addresses font-family inconsistency between 'textarea' and other form elements.
|
Chris@2
|
76
|
Chris@2
|
77 html,
|
Chris@2
|
78 button,
|
Chris@2
|
79 input,
|
Chris@2
|
80 select,
|
Chris@2
|
81 textarea {
|
Chris@2
|
82 font-family: sans-serif;
|
Chris@2
|
83 }
|
Chris@2
|
84
|
Chris@2
|
85 // Addresses margins handled incorrectly in IE6/7
|
Chris@2
|
86
|
Chris@2
|
87 body {
|
Chris@2
|
88 margin: 0;
|
Chris@2
|
89 }
|
Chris@2
|
90
|
Chris@2
|
91 // =============================================================================
|
Chris@2
|
92 // Typography
|
Chris@2
|
93 // =============================================================================
|
Chris@2
|
94
|
Chris@2
|
95 // Addresses font sizes and margins set differently in IE6/7
|
Chris@2
|
96 // Addresses font sizes within 'section' and 'article' in FF4+, Chrome, S5
|
Chris@2
|
97
|
Chris@2
|
98 h1 {
|
Chris@2
|
99 font-size: 2em;
|
Chris@2
|
100 margin: 0.67em 0;
|
Chris@2
|
101 }
|
Chris@2
|
102
|
Chris@2
|
103 #header h1 {
|
Chris@2
|
104 margin: 0 0;
|
Chris@2
|
105 }
|
Chris@2
|
106
|
Chris@2
|
107 h2 {
|
Chris@2
|
108 font-size: 1.5em;
|
Chris@2
|
109 margin: 0.83em 0;
|
Chris@2
|
110 }
|
Chris@2
|
111
|
Chris@2
|
112 h3 {
|
Chris@2
|
113 font-size: 1.17em;
|
Chris@2
|
114 margin: 1em 0;
|
Chris@2
|
115 }
|
Chris@2
|
116
|
Chris@2
|
117 h4 {
|
Chris@2
|
118 font-size: 1em;
|
Chris@2
|
119 margin: 1.33em 0;
|
Chris@2
|
120 }
|
Chris@2
|
121
|
Chris@2
|
122 h5 {
|
Chris@2
|
123 font-size: 0.83em;
|
Chris@2
|
124 margin: 1.67em 0;
|
Chris@2
|
125 }
|
Chris@2
|
126
|
Chris@2
|
127 h6 {
|
Chris@2
|
128 font-size: 0.75em;
|
Chris@2
|
129 margin: 2.33em 0;
|
Chris@2
|
130 }
|
Chris@2
|
131
|
Chris@2
|
132 // Addresses styling not present in IE7/8/9, S5, Chrome
|
Chris@2
|
133
|
Chris@2
|
134 abbr[title] {
|
Chris@2
|
135 border-bottom: 1px dotted;
|
Chris@2
|
136 }
|
Chris@2
|
137
|
Chris@2
|
138 // Addresses style set to 'bolder' in FF3+, S4/5, Chrome
|
Chris@2
|
139
|
Chris@2
|
140 b,
|
Chris@2
|
141 strong {
|
Chris@2
|
142 font-weight: bold;
|
Chris@2
|
143 }
|
Chris@2
|
144
|
Chris@2
|
145 @if $support-for-ie6-and-ie7 {
|
Chris@2
|
146 blockquote {
|
Chris@2
|
147 margin: 1em 40px;
|
Chris@2
|
148 }
|
Chris@2
|
149 }
|
Chris@2
|
150
|
Chris@2
|
151 // Addresses styling not present in S5, Chrome
|
Chris@2
|
152
|
Chris@2
|
153 dfn {
|
Chris@2
|
154 font-style: italic;
|
Chris@2
|
155 }
|
Chris@2
|
156
|
Chris@2
|
157 // Addresses styling not present in IE6/7/8/9
|
Chris@2
|
158
|
Chris@2
|
159 mark {
|
Chris@2
|
160 background: #ff0;
|
Chris@2
|
161 color: #000;
|
Chris@2
|
162 }
|
Chris@2
|
163
|
Chris@2
|
164 // Addresses margins set differently in IE6/7
|
Chris@2
|
165 @if $support-for-ie6-and-ie7 {
|
Chris@2
|
166 p,
|
Chris@2
|
167 pre {
|
Chris@2
|
168 margin: 1em 0;
|
Chris@2
|
169 }
|
Chris@2
|
170 }
|
Chris@2
|
171
|
Chris@2
|
172 // Corrects font family set oddly in IE6, S4/5, Chrome
|
Chris@2
|
173 // en.wikipedia.org/wiki/User:Davidgothberg/Test59
|
Chris@2
|
174
|
Chris@2
|
175 pre,
|
Chris@2
|
176 code,
|
Chris@2
|
177 kbd,
|
Chris@2
|
178 samp {
|
Chris@2
|
179 font-family: monospace, serif;
|
Chris@2
|
180 @if $support-for-ie6-and-ie7 {
|
Chris@2
|
181 _font-family: 'courier new', monospace;
|
Chris@2
|
182 }
|
Chris@2
|
183 font-size: 1em;
|
Chris@2
|
184 }
|
Chris@2
|
185
|
Chris@2
|
186 // Improves readability of pre-formatted text in all browsers
|
Chris@2
|
187
|
Chris@2
|
188 pre {
|
Chris@2
|
189 white-space: pre;
|
Chris@2
|
190 white-space: pre-wrap;
|
Chris@2
|
191 word-wrap: break-word;
|
Chris@2
|
192 }
|
Chris@2
|
193
|
Chris@2
|
194 // 1. Addresses CSS quotes not supported in IE6/7
|
Chris@2
|
195 // 2. Addresses quote property not supported in S4
|
Chris@2
|
196
|
Chris@2
|
197 // 1
|
Chris@2
|
198 @if $support-for-ie6-and-ie7 {
|
Chris@2
|
199 q {
|
Chris@2
|
200 quotes: none;
|
Chris@2
|
201 }
|
Chris@2
|
202 }
|
Chris@2
|
203
|
Chris@2
|
204 // 2
|
Chris@2
|
205
|
Chris@2
|
206 q:before,
|
Chris@2
|
207 q:after {
|
Chris@2
|
208 content: '';
|
Chris@2
|
209 content: none;
|
Chris@2
|
210 }
|
Chris@2
|
211
|
Chris@2
|
212 small {
|
Chris@2
|
213 font-size: 75%;
|
Chris@2
|
214 }
|
Chris@2
|
215
|
Chris@2
|
216 // Prevents sub and sup affecting line-height in all browsers
|
Chris@2
|
217 // gist.github.com/413930
|
Chris@2
|
218
|
Chris@2
|
219 sub,
|
Chris@2
|
220 sup {
|
Chris@2
|
221 font-size: 75%;
|
Chris@2
|
222 line-height: 0;
|
Chris@2
|
223 position: relative;
|
Chris@2
|
224 vertical-align: baseline;
|
Chris@2
|
225 }
|
Chris@2
|
226
|
Chris@2
|
227 sup {
|
Chris@2
|
228 top: -0.5em;
|
Chris@2
|
229 }
|
Chris@2
|
230
|
Chris@2
|
231 sub {
|
Chris@2
|
232 bottom: -0.25em;
|
Chris@2
|
233 }
|
Chris@2
|
234
|
Chris@2
|
235 // =============================================================================
|
Chris@2
|
236 // Lists
|
Chris@2
|
237 // =============================================================================
|
Chris@2
|
238
|
Chris@2
|
239 // Addresses margins set differently in IE6/7
|
Chris@2
|
240 @if $support-for-ie6-and-ie7 {
|
Chris@2
|
241 dl,
|
Chris@2
|
242 menu,
|
Chris@2
|
243 ol,
|
Chris@2
|
244 ul {
|
Chris@2
|
245 margin: 0;
|
Chris@2
|
246 padding: 0;
|
Chris@2
|
247 }
|
Chris@2
|
248 }
|
Chris@2
|
249
|
Chris@2
|
250 @if $support-for-ie6-and-ie7 {
|
Chris@2
|
251 dd {
|
Chris@2
|
252 margin: 0 0 0 40px;
|
Chris@2
|
253 }
|
Chris@2
|
254 }
|
Chris@2
|
255
|
Chris@2
|
256 // Addresses paddings set differently in IE6/7
|
Chris@2
|
257 @if $support-for-ie6-and-ie7 {
|
Chris@2
|
258 menu,
|
Chris@2
|
259 ol,
|
Chris@2
|
260 ul {
|
Chris@2
|
261 padding: 0 0 0 40px;
|
Chris@2
|
262 }
|
Chris@2
|
263 }
|
Chris@2
|
264
|
Chris@2
|
265 // Corrects list images handled incorrectly in IE7
|
Chris@2
|
266
|
Chris@2
|
267 nav {
|
Chris@2
|
268 ul,
|
Chris@2
|
269 ol {
|
Chris@2
|
270 list-style: none;
|
Chris@2
|
271 padding: 0;
|
Chris@2
|
272 @if $support-for-ie6-and-ie7 {
|
Chris@2
|
273 list-style-image: none;
|
Chris@2
|
274 }
|
Chris@2
|
275 }
|
Chris@2
|
276 }
|
Chris@2
|
277
|
Chris@2
|
278 // =============================================================================
|
Chris@2
|
279 // Embedded content
|
Chris@2
|
280 // =============================================================================
|
Chris@2
|
281
|
Chris@2
|
282 // 1. Removes border when inside 'a' element in IE6/7/8/9, FF3
|
Chris@2
|
283 // 2. Improves image quality when scaled in IE7
|
Chris@2
|
284 // code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
|
Chris@2
|
285
|
Chris@2
|
286 img {
|
Chris@2
|
287 border: 0; // 1
|
Chris@2
|
288 @if $support-for-ie6-and-ie7 {
|
Chris@2
|
289 -ms-interpolation-mode: bicubic; // 2
|
Chris@2
|
290 }
|
Chris@2
|
291 }
|
Chris@2
|
292
|
Chris@2
|
293 // Corrects overflow displayed oddly in IE9
|
Chris@2
|
294
|
Chris@2
|
295 svg:not(:root) {
|
Chris@2
|
296 overflow: hidden;
|
Chris@2
|
297 }
|
Chris@2
|
298
|
Chris@2
|
299 // =============================================================================
|
Chris@2
|
300 // Figures
|
Chris@2
|
301 // =============================================================================
|
Chris@2
|
302
|
Chris@2
|
303 // Addresses margin not present in IE6/7/8/9, S5, O11
|
Chris@2
|
304
|
Chris@2
|
305 figure {
|
Chris@2
|
306 margin: 0;
|
Chris@2
|
307 }
|
Chris@2
|
308
|
Chris@2
|
309 // =============================================================================
|
Chris@2
|
310 // Forms
|
Chris@2
|
311 // =============================================================================
|
Chris@2
|
312
|
Chris@2
|
313 // Corrects margin displayed oddly in IE6/7
|
Chris@2
|
314 @if $support-for-ie6-and-ie7 {
|
Chris@2
|
315 form {
|
Chris@2
|
316 margin: 0;
|
Chris@2
|
317 }
|
Chris@2
|
318 }
|
Chris@2
|
319
|
Chris@2
|
320 // Define consistent border, margin, and padding
|
Chris@2
|
321
|
Chris@2
|
322 fieldset {
|
Chris@2
|
323 border: 1px solid #c0c0c0;
|
Chris@2
|
324 margin: 0 2px;
|
Chris@2
|
325 padding: 0.35em 0.625em 0.75em;
|
Chris@2
|
326 }
|
Chris@2
|
327
|
Chris@2
|
328 // 1. Corrects color not being inherited in IE6/7/8/9
|
Chris@2
|
329 // 2. Corrects text not wrapping in FF3
|
Chris@2
|
330 // 3. Corrects alignment displayed oddly in IE6/7
|
Chris@2
|
331
|
Chris@2
|
332 legend {
|
Chris@2
|
333 border: 0; // 1
|
Chris@2
|
334 padding: 0;
|
Chris@2
|
335 white-space: normal; // 2
|
Chris@2
|
336 @if $support-for-ie6-and-ie7 {
|
Chris@2
|
337 *margin-left: -7px; // 3
|
Chris@2
|
338 }
|
Chris@2
|
339 }
|
Chris@2
|
340
|
Chris@2
|
341 // 1. Corrects font size not being inherited in all browsers
|
Chris@2
|
342 // 2. Addresses margins set differently in IE6/7, FF3+, S5, Chrome
|
Chris@2
|
343 // 3. Improves appearance and consistency in all browsers
|
Chris@2
|
344
|
Chris@2
|
345 button,
|
Chris@2
|
346 input,
|
Chris@2
|
347 select,
|
Chris@2
|
348 textarea {
|
Chris@2
|
349 font-size: 100%; // 1
|
Chris@2
|
350 margin: 0; // 2
|
Chris@2
|
351 vertical-align: baseline; // 3
|
Chris@2
|
352 @if $support-for-ie6-and-ie7 {
|
Chris@2
|
353 *vertical-align: middle; // 3
|
Chris@2
|
354 }
|
Chris@2
|
355 }
|
Chris@2
|
356
|
Chris@2
|
357 // Addresses FF3/4 setting line-height on 'input' using !important in the UA stylesheet
|
Chris@2
|
358
|
Chris@2
|
359 button,
|
Chris@2
|
360 input {
|
Chris@2
|
361 line-height: normal; // 1
|
Chris@2
|
362 }
|
Chris@2
|
363
|
Chris@2
|
364 // 1. Improves usability and consistency of cursor style between image-type 'input' and others
|
Chris@2
|
365 // 2. Corrects inability to style clickable 'input' types in iOS
|
Chris@2
|
366 // 3. Removes inner spacing in IE7 without affecting normal text inputs
|
Chris@2
|
367 // Known issue: inner spacing remains in IE6
|
Chris@2
|
368
|
Chris@2
|
369 button,
|
Chris@2
|
370 input[type="button"],
|
Chris@2
|
371 input[type="reset"],
|
Chris@2
|
372 input[type="submit"] {
|
Chris@2
|
373 cursor: pointer; // 1
|
Chris@2
|
374 -webkit-appearance: button; // 2
|
Chris@2
|
375 @if $support-for-ie6-and-ie7 {
|
Chris@2
|
376 *overflow: visible; // 3
|
Chris@2
|
377 }
|
Chris@2
|
378 }
|
Chris@2
|
379
|
Chris@2
|
380 // Re-set default cursor for disabled elements
|
Chris@2
|
381
|
Chris@2
|
382 button[disabled],
|
Chris@2
|
383 input[disabled] {
|
Chris@2
|
384 cursor: default;
|
Chris@2
|
385 }
|
Chris@2
|
386
|
Chris@2
|
387 // 1. Addresses box sizing set to content-box in IE8/9
|
Chris@2
|
388 // 2. Removes excess padding in IE8/9
|
Chris@2
|
389 // 3. Removes excess padding in IE7
|
Chris@2
|
390 // Known issue: excess padding remains in IE6
|
Chris@2
|
391
|
Chris@2
|
392 input[type="checkbox"],
|
Chris@2
|
393 input[type="radio"] {
|
Chris@2
|
394 box-sizing: border-box; // 1
|
Chris@2
|
395 padding: 0; // 2
|
Chris@2
|
396 @if $support-for-ie6-and-ie7 {
|
Chris@2
|
397 *height: 13px; // 3
|
Chris@2
|
398 *width: 13px; // 3
|
Chris@2
|
399 }
|
Chris@2
|
400 }
|
Chris@2
|
401
|
Chris@2
|
402 // 1. Addresses appearance set to searchfield in S5, Chrome
|
Chris@2
|
403 // 2. Addresses box-sizing set to border-box in S5, Chrome (include -moz to future-proof)
|
Chris@2
|
404 // 3. Removes inner padding and search cancel button in S5, Chrome on OS X
|
Chris@2
|
405
|
Chris@2
|
406 input[type="search"] {
|
Chris@2
|
407 -webkit-appearance: textfield; // 1
|
Chris@2
|
408 -moz-box-sizing: content-box;
|
Chris@2
|
409 -webkit-box-sizing: content-box; // 2
|
Chris@2
|
410 box-sizing: content-box;
|
Chris@2
|
411 &::-webkit-search-decoration, &::-webkit-search-cancel-button { // 3
|
Chris@2
|
412 -webkit-appearance: none;
|
Chris@2
|
413 }
|
Chris@2
|
414 }
|
Chris@2
|
415
|
Chris@2
|
416 // Removes inner padding and border in FF3+
|
Chris@2
|
417 // www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/
|
Chris@2
|
418
|
Chris@2
|
419 button, input {
|
Chris@2
|
420 &::-moz-focus-inner {
|
Chris@2
|
421 border: 0;
|
Chris@2
|
422 padding: 0;
|
Chris@2
|
423 }
|
Chris@2
|
424 }
|
Chris@2
|
425
|
Chris@2
|
426 // 1. Removes default vertical scrollbar in IE6/7/8/9
|
Chris@2
|
427 // 2. Improves readability and alignment in all browsers
|
Chris@2
|
428
|
Chris@2
|
429 textarea {
|
Chris@2
|
430 overflow: auto; // 1
|
Chris@2
|
431 vertical-align: top; // 2
|
Chris@2
|
432 }
|
Chris@2
|
433
|
Chris@2
|
434 // =============================================================================
|
Chris@2
|
435 // Tables
|
Chris@2
|
436 // =============================================================================
|
Chris@2
|
437
|
Chris@2
|
438 // Remove most spacing between table cells
|
Chris@2
|
439
|
Chris@2
|
440 table {
|
Chris@2
|
441 border-collapse: collapse;
|
Chris@2
|
442 border-spacing: 0;
|
Chris@2
|
443 } |