1 /* normalize.css v2.1.3 | MIT License | git.io/normalize */ 2 /* normalize.scss v2.1.3 | MIT/GPLv2 License | bit.ly/normalize-with-compass */ 3 4 5 // ============================================================================= 6 // Variables and Imports 7 // 8 // If you have a base partial (or equivalent), you should move these lines to 9 // that file. @see http://compass-style.org/help/tutorials/best_practices/ 10 // ============================================================================= 11 12 // Set this to true to force CSS output to exactly match normalize.css. 13 $strict-normalize: true !default; 14 15 // The default font family. 16 $base-font-family: sans-serif !default; 17 18 // The base font size. 19 $base-font-size: 16px !default; // Override default set in Compass' Vertical Rhythm partial. 20 21 // The base line height determines the basic unit of vertical rhythm. 22 $base-line-height: 24px !default; // Override default set in Compass' Vertical Rhythm partial. 23 24 // The font sizes for h1-h6. 25 $h1-font-size: 2 * $base-font-size !default; 26 $h2-font-size: 1.5 * $base-font-size !default; 27 $h3-font-size: 1.17 * $base-font-size !default; 28 $h4-font-size: 1 * $base-font-size !default; 29 $h5-font-size: 0.83 * $base-font-size !default; 30 $h6-font-size: 0.67 * $base-font-size !default; 31 32 // The amount lists and blockquotes are indented. 33 $indent-amount: 40px !default; 34 35 // Set this to true to add support for IE 6. 36 $legacy-support-for-ie6: false !default; // Override default set in Compass' Support partial. 37 38 // Set this to true to add support for IE 7. 39 $legacy-support-for-ie7: false !default; // Override default set in Compass' Support partial. 40 41 // After the default variables are set, import the required Compass partials. 42 @import "compass/support"; 43 @import "compass/css3/box-sizing"; 44 @import "compass/typography/vertical_rhythm"; 45 46 47 /* ========================================================================== 48 HTML5 display definitions 49 ========================================================================== */ 50 51 /** 52 * Correct `block` display not defined in IE 8/9. 53 */ 54 55 article, 56 aside, 57 details, 58 figcaption, 59 figure, 60 footer, 61 header, 62 hgroup, 63 main, 64 nav, 65 section, 66 summary { 67 display: block; 68 } 69 70 /** 71 * Correct `inline-block` display not defined in IE 8/9. 72 */ 73 74 audio, 75 canvas, 76 video { 77 display: inline-block; 78 @if $legacy-support-for-ie6 or $legacy-support-for-ie7 { 79 *display: inline; 80 *zoom: 1; 81 } 82 } 83 84 /** 85 * Prevent modern browsers from displaying `audio` without controls. 86 * Remove excess height in iOS 5 devices. 87 */ 88 89 audio:not([controls]) { 90 display: none; 91 height: 0; 92 } 93 94 /** 95 * Address `[hidden]` styling not present in IE 8/9. 96 * Hide the `template` element in IE, Safari, and Firefox < 22. 97 */ 98 99 [hidden], 100 template { 101 display: none; 102 } 103 104 /* ========================================================================== 105 Base 106 ========================================================================== */ 107 108 /** 109 * 1. Set default font family to sans-serif. 110 * 2. Prevent iOS text size adjust after orientation change, without disabling 111 * user zoom. 112 * 3. Correct text resizing oddly in IE 6/7 when body `font-size` is set using 113 * `em` units. 114 */ 115 116 html { 117 font-family: $base-font-family; /* 1 */ 118 @if not $strict-normalize or $legacy-support-for-ie6 or $legacy-support-for-ie7 { 119 font-size: 100% * ($base-font-size / 16px); /* 3 */ 120 } 121 -ms-text-size-adjust: 100%; /* 2 */ 122 -webkit-text-size-adjust: 100%; /* 2 */ 123 124 @if not $strict-normalize { 125 /* Establish a vertical rhythm unit using $base-line-height. */ 126 @include adjust-leading-to(1); 127 } 128 } 129 130 @if $legacy-support-for-ie6 or $legacy-support-for-ie7 { 131 /** 132 * Address `font-family` inconsistency between `textarea` and other form 133 * elements. 134 */ 135 136 button, 137 input, 138 select, 139 textarea { 140 font-family: $base-font-family; 141 } 142 } 143 144 /** 145 * Remove default margin. 146 */ 147 148 body { 149 margin: 0; 150 } 151 152 /* ========================================================================== 153 Links 154 ========================================================================== */ 155 156 /** 157 * Remove the gray background color from active links in IE 10. 158 */ 159 160 a { 161 background: transparent; 162 } 163 164 /** 165 * Address `outline` inconsistency between Chrome and other browsers. 166 */ 167 168 a:focus { 169 outline: thin dotted; 170 } 171 172 /** 173 * Improve readability when focused and also mouse hovered in all browsers. 174 */ 175 176 a:active, 177 a:hover { 178 outline: 0; 179 } 180 181 /* ========================================================================== 182 Typography 183 ========================================================================== */ 184 185 @if not $strict-normalize or $legacy-support-for-ie6 or $legacy-support-for-ie7 { 186 /** 187 * Set 1 unit of vertical rhythm on the top and bottom margin. 188 */ 189 190 p, 191 pre { 192 margin: rhythm(1) 0; 193 } 194 195 blockquote { 196 /* Set 1 unit of vertical rhythm on the top and bottom margin. */ 197 margin: rhythm(1) $indent-amount; 198 } 199 } 200 201 /** 202 * Address variable `h1` font-size and margin within `section` and `article` 203 * contexts in Firefox 4+, Safari 5, and Chrome. 204 */ 205 206 h1 { 207 /* Set the font-size and line-height while keeping a proper vertical rhythm. */ 208 @if not $strict-normalize or $legacy-support-for-ie6 or $legacy-support-for-ie7 { 209 @include adjust-font-size-to( $h1-font-size ); 210 } 211 @else { 212 font-size: 1em * ($h1-font-size / $base-font-size); 213 } 214 215 /* Set 1 unit of vertical rhythm on the top and bottom margins. */ 216 @include leader(1, $h1-font-size); 217 @include trailer(1, $h1-font-size); 218 } 219 220 @if not $strict-normalize or $legacy-support-for-ie6 or $legacy-support-for-ie7 { 221 h2 { 222 @include adjust-font-size-to( $h2-font-size ); 223 @include leader(1, $h2-font-size); 224 @include trailer(1, $h2-font-size); 225 } 226 227 h3 { 228 @include adjust-font-size-to( $h3-font-size ); 229 @include leader(1, $h3-font-size); 230 @include trailer(1, $h3-font-size); 231 } 232 233 h4 { 234 @include adjust-font-size-to( $h4-font-size ); 235 @include leader(1, $h4-font-size); 236 @include trailer(1, $h4-font-size); 237 } 238 239 h5 { 240 @include adjust-font-size-to( $h5-font-size ); 241 @include leader(1, $h5-font-size); 242 @include trailer(1, $h5-font-size); 243 } 244 245 h6 { 246 @include adjust-font-size-to( $h6-font-size ); 247 @include leader(1, $h6-font-size); 248 @include trailer(1, $h6-font-size); 249 } 250 } 251 252 /** 253 * Address styling not present in IE 8/9, Safari 5, and Chrome. 254 */ 255 256 abbr[title] { 257 border-bottom: 1px dotted; 258 } 259 260 /** 261 * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. 262 */ 263 264 b, 265 strong { 266 font-weight: bold; 267 } 268 269 /** 270 * Address styling not present in Safari 5 and Chrome. 271 */ 272 273 dfn { 274 font-style: italic; 275 } 276 277 /** 278 * Address differences between Firefox and other browsers. 279 */ 280 281 hr { 282 @include box-sizing(content-box); 283 height: 0; 284 } 285 286 /** 287 * Address styling not present in IE 8/9. 288 */ 289 290 mark { 291 background: #ff0; 292 color: #000; 293 } 294 295 /** 296 * Correct font family set oddly in Safari 5 and Chrome. 297 */ 298 299 code, 300 kbd, 301 pre, 302 samp { 303 font-family: monospace, serif; 304 @if $legacy-support-for-ie6 { 305 _font-family: 'courier new', monospace; 306 } 307 @if $strict-normalize { 308 font-size: 1em; 309 } 310 @else { 311 @include adjust-font-size-to( $base-font-size ); 312 } 313 } 314 315 /** 316 * Improve readability of pre-formatted text in all browsers. 317 */ 318 319 pre { 320 @if $legacy-support-for-ie6 or $legacy-support-for-ie7 { 321 white-space: pre; 322 white-space: pre-wrap; 323 word-wrap: break-word; 324 } 325 @else { 326 white-space: pre-wrap; 327 } 328 } 329 330 /** 331 * Set consistent quote types. 332 */ 333 334 q { 335 quotes: "\201C" "\201D" "\2018" "\2019"; 336 } 337 338 /** 339 * Address inconsistent and variable font size in all browsers. 340 */ 341 342 small { 343 font-size: 80%; 344 } 345 346 /** 347 * Prevent `sub` and `sup` affecting `line-height` in all browsers. 348 */ 349 350 sub, 351 sup { 352 font-size: 75%; 353 line-height: 0; 354 position: relative; 355 vertical-align: baseline; 356 } 357 358 sup { 359 top: -0.5em; 360 } 361 362 sub { 363 bottom: -0.25em; 364 } 365 366 /* ========================================================================== 367 Lists 368 ========================================================================== */ 369 370 @if not $strict-normalize or $legacy-support-for-ie6 or $legacy-support-for-ie7 { 371 /** 372 * Address margins set differently in IE 6/7. 373 */ 374 375 dl, 376 menu, 377 ol, 378 ul { 379 margin: rhythm(1) 0; 380 } 381 382 @if not $strict-normalize { 383 ol, 384 ul { 385 ol, 386 ul { 387 margin: 0; 388 } 389 } 390 } 391 392 dd { 393 margin: 0 0 0 $indent-amount; 394 } 395 396 /** 397 * Address paddings set differently in IE 6/7. 398 */ 399 400 menu, 401 ol, 402 ul { 403 padding: 0 0 0 $indent-amount; 404 } 405 } 406 407 @if $legacy-support-for-ie7 { 408 /** 409 * Correct list images handled incorrectly in IE 7. 410 */ 411 412 nav ul, 413 nav ol { 414 list-style: none; 415 list-style-image: none; 416 } 417 } 418 419 /* ========================================================================== 420 Embedded content 421 ========================================================================== */ 422 423 /** 424 * Remove border when inside `a` element in IE 8/9. 425 */ 426 427 img { 428 border: 0; 429 @if $legacy-support-for-ie7 { 430 /* Improve image quality when scaled in IE 7. */ 431 -ms-interpolation-mode: bicubic; 432 } 433 } 434 435 /** 436 * Correct overflow displayed oddly in IE 9. 437 */ 438 439 svg:not(:root) { 440 overflow: hidden; 441 } 442 443 /* ========================================================================== 444 Figures 445 ========================================================================== */ 446 447 /** 448 * Address margin not present in IE 8/9 and Safari 5. 449 */ 450 451 figure { 452 margin: 0; 453 } 454 455 /* ========================================================================== 456 Forms 457 ========================================================================== */ 458 459 @if $legacy-support-for-ie6 or $legacy-support-for-ie7 { 460 /** 461 * Correct margin displayed oddly in IE 6/7. 462 */ 463 464 form { 465 margin: 0; 466 } 467 } 468 469 /** 470 * Define consistent border, margin, and padding. 471 */ 472 473 fieldset { 474 margin: 0 2px; 475 /* Apply borders and padding that keep the vertical rhythm. */ 476 border-color: #c0c0c0; 477 @include apply-side-rhythm-border(top, $width: 1px, $lines: 0.35); 478 @include apply-side-rhythm-border(bottom, $width: 1px, $lines: 0.65); 479 @include apply-side-rhythm-border(left, $width: 1px, $lines: 0.625); 480 @include apply-side-rhythm-border(right, $width: 1px, $lines: 0.625); 481 } 482 483 /** 484 * 1. Correct `color` not being inherited in IE 8/9. 485 * 2. Remove padding so people aren't caught out if they zero out fieldsets. 486 * 3. Correct alignment displayed oddly in IE 6/7. 487 */ 488 489 legend { 490 border: 0; /* 1 */ 491 padding: 0; /* 2 */ 492 @if $legacy-support-for-ie6 or $legacy-support-for-ie7 { 493 *margin-left: -7px; /* 3 */ 494 } 495 } 496 497 /** 498 * 1. Correct font family not being inherited in all browsers. 499 * 2. Correct font size not being inherited in all browsers. 500 * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. 501 * 4. Improve appearance and consistency with IE 6/7. 502 */ 503 504 button, 505 input, 506 select, 507 textarea { 508 font-family: inherit; /* 1 */ 509 font-size: 100%; /* 2 */ 510 margin: 0; /* 3 */ 511 @if $legacy-support-for-ie6 or $legacy-support-for-ie7 { 512 vertical-align: baseline; /* 4 */ 513 *vertical-align: middle; /* 4 */ 514 } 515 } 516 517 /** 518 * Address Firefox 4+ setting `line-height` on `input` using `!important` in 519 * the UA stylesheet. 520 */ 521 522 button, 523 input { 524 line-height: normal; 525 } 526 527 /** 528 * Address inconsistent `text-transform` inheritance for `button` and `select`. 529 * All other form control elements do not inherit `text-transform` values. 530 * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+. 531 * Correct `select` style inheritance in Firefox 4+ and Opera. 532 */ 533 534 button, 535 select { 536 text-transform: none; 537 } 538 539 /** 540 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 541 * and `video` controls. 542 * 2. Correct inability to style clickable `input` types in iOS. 543 * 3. Improve usability and consistency of cursor style between image-type 544 * `input` and others. 545 * 4. Remove inner spacing in IE 7 without affecting normal text inputs. 546 * Known issue: inner spacing remains in IE 6. 547 */ 548 549 button, 550 html input[type="button"], /* 1 */ 551 input[type="reset"], 552 input[type="submit"] { 553 -webkit-appearance: button; /* 2 */ 554 cursor: pointer; /* 3 */ 555 @if $legacy-support-for-ie7 { 556 *overflow: visible; /* 4 */ 557 } 558 } 559 560 /** 561 * Re-set default cursor for disabled elements. 562 */ 563 564 button[disabled], 565 html input[disabled] { 566 cursor: default; 567 } 568 569 /** 570 * 1. Address box sizing set to `content-box` in IE 8/9/10. 571 * 2. Remove excess padding in IE 8/9/10. 572 * 3. Remove excess padding in IE 7. 573 * Known issue: excess padding remains in IE 6. 574 */ 575 576 input[type="checkbox"], 577 input[type="radio"] { 578 @include box-sizing(border-box); /* 1 */ 579 padding: 0; /* 2 */ 580 @if $legacy-support-for-ie7 { 581 *height: 13px; /* 3 */ 582 *width: 13px; /* 3 */ 583 } 584 } 585 586 /** 587 * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. 588 * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome 589 * (include `-moz` to future-proof). 590 */ 591 592 input[type="search"] { 593 -webkit-appearance: textfield; /* 1 */ 594 @include box-sizing(content-box); /* 2 */ 595 } 596 597 /** 598 * Remove inner padding and search cancel button in Safari 5 and Chrome 599 * on OS X. 600 */ 601 602 input[type="search"]::-webkit-search-cancel-button, 603 input[type="search"]::-webkit-search-decoration { 604 -webkit-appearance: none; 605 } 606 607 /** 608 * Remove inner padding and border in Firefox 4+. 609 */ 610 611 button::-moz-focus-inner, 612 input::-moz-focus-inner { 613 border: 0; 614 padding: 0; 615 } 616 617 /** 618 * 1. Remove default vertical scrollbar in IE 8/9. 619 * 2. Improve readability and alignment in all browsers. 620 */ 621 622 textarea { 623 overflow: auto; /* 1 */ 624 vertical-align: top; /* 2 */ 625 } 626 627 /* ========================================================================== 628 Tables 629 ========================================================================== */ 630 631 /** 632 * Remove most spacing between table cells. 633 */ 634 635 table { 636 border-collapse: collapse; 637 border-spacing: 0; 638 } 639