Skip to content
_normalize.scss 14 KiB
Newer Older
/* normalize.css v2.1.0 | MIT License | git.io/normalize */
/* normalize.scss v2.1.0 | MIT/GPLv2 License | bit.ly/normalize-with-compass */
/* =============================================================================
   Normalize.css is intended to be used as an alternative to CSS resets.

   It's suggested that you read the normalize.scss file and customise it to meet
   your needs, rather then including the file in your project and overriding the
   defaults later in your CSS.
   @see http://nicolasgallagher.com/about-normalize-css/
   Also: @see http://meiert.com/en/blog/20080419/reset-style-sheets-are-bad/
         @see http://snook.ca/archives/html_and_css/no_css_reset/
   ========================================================================== */
/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */

/**
 * Correct `block` display not defined in IE 8/9.
/**
 * Correct `inline-block` display not defined in IE 8/9.
  @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
    *display: inline;
    *zoom: 1;
  }
/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
/**
 * Address styling not present in IE 7/8/9.
 * Known issue: no IE 6 support.
/* ==========================================================================
   Base
   ========================================================================== */

/* Instead of relying on the fonts that are available on a user's computer, you
   can use web fonts which, like images, are resources downloaded to the user's
   browser. Because of the bandwidth and rendering resources required, web fonts
   should be used with care.

   Numerous resources for web fonts can be found on Google. Here are a few
   websites where you can find Open Source fonts to download:
   - http://www.fontsquirrel.com/fontface
   - http://www.theleagueofmoveabletype.com

   In order to use these fonts, you will need to convert them into formats
   suitable for web fonts. We recommend the free-to-use Font Squirrel's
   Font-Face Generator:
     http://www.fontsquirrel.com/fontface/generator

   The following is an example @font-face declaration. This font can then be
   used in any ruleset using a property like this:  font-family: Example, serif;

   Since we're using Sass, you'll need to declare your font faces here, then you
   can add them to the font variables in the _base.scss partial.
*/

/*
@font-face {
  font-family: 'Example';
  src: url('../fonts/example.eot');
  src: url('../fonts/example.eot?iefix') format('eot'),
    url('../fonts/example.woff') format('woff'),
    url('../fonts/example.ttf') format('truetype'),
    url('../fonts/example.svg#webfontOkOndcij') format('svg');
  font-weight: normal;
  font-style: normal;
}
*/

/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 * 3. Correct text resizing oddly in IE 6/7 when body `font-size` is set using
 *    `em` units.
  font-family: $base-font-family; /* 1 */
  font-size: 100% * ($base-font-size / 16px); /* 3 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -ms-text-size-adjust: 100%; /* 2 */
  // Establish a vertical rhythm unit using $base-line-height.
@if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
  /**
   * Address `font-family` inconsistency between `textarea` and other form
   * elements in IE 6/7.
   */
  button,
  input,
  select,
  textarea {
    font-family: $base-font-family;
  }
/**
 * Remove default margin.
/* ==========================================================================
   Links
   ========================================================================== */
 * The order of link states are based on Eric Meyer's article:
 * http://meyerweb.com/eric/thoughts/2007/06/11/who-ordered-the-link-states
 */
/**
 * Address `outline` inconsistency between Chrome and other browsers.
/**
 * Improve readability when focused and also mouse hovered in all browsers.
a:active,
a:hover {
/* ==========================================================================
   To achieve a pleasant vertical rhythm, we use Compass' Vertical Rhythm mixins
   so that the line height of our base font becomes the basic unit of vertical
   measurement. We use multiples of that unit to set the top and bottom margins
   for our block level elements and to set the line heights of any fonts.
   For more information, see http://24ways.org/2006/compose-to-a-vertical-rhythm
   ========================================================================== */

/**
 * Set 1 unit of vertical rhythm on the top and bottom margin.
 */

p,
pre {
  margin: rhythm(1) 0;
}

blockquote {
  /* Set 1 unit of vertical rhythm on the top and bottom margin. */
  margin: rhythm(1) $indent-amount;
}

 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari 5, and Chrome.
  /* Set the font-size and line-height while keeping a proper vertical rhythm. */
  @include adjust-font-size-to( $h1-font-size );

  /* Set 1 unit of vertical rhythm on the top and bottom margins. */
  @include leader(1, $h1-font-size);
  @include trailer(1, $h1-font-size);
  @include adjust-font-size-to( $h2-font-size );
  @include leader(1, $h2-font-size);
  @include trailer(1, $h2-font-size);
  @include adjust-font-size-to( $h3-font-size );
  @include leader(1, $h3-font-size);
  @include trailer(1, $h3-font-size);
  @include adjust-font-size-to( $h4-font-size );
  @include leader(1, $h4-font-size);
  @include trailer(1, $h4-font-size);
  @include adjust-font-size-to( $h5-font-size );
  @include leader(1, $h5-font-size);
  @include trailer(1, $h5-font-size);
  @include adjust-font-size-to( $h6-font-size );
  @include leader(1, $h6-font-size);
  @include trailer(1, $h6-font-size);
/**
 * Address styling not present in IE 8/9, Safari 5, and Chrome.
/**
 * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
/**
 * Address styling not present in Safari 5 and Chrome.
/**
 * Address differences between Firefox and other browsers.
 * Known issue: no IE 6/7 normalization.
 */

hr {
  @include box-sizing(border-box);
  height: 1px;
  border: 1px solid #666;
  padding-bottom: -1px;
  margin: rhythm(1) 0;
}

/**
 * Address styling not present in IE 8/9.
/**
 * Correct font family set oddly in Safari 5 and Chrome.
  font-family: $font-monospace; // The value of $font-monospace ends with ", serif".
  @if $legacy-support-for-ie6 {
    _font-family: 'courier new', monospace;
  }
  @include adjust-font-size-to( 1 * $base-font-size );
/**
 * Improve readability of pre-formatted text in all browsers.
/**
 * Set consistent quote types.
  quotes: "\201C" "\201D" "\2018" "\2019";
/**
 * Address inconsistent and variable font size in all browsers.
  font-size: 80%;
/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
/* ==========================================================================
   Lists
   ========================================================================== */
 * Set 1 unit of vertical rhythm and a consistent indentation.
  padding: 0 0 0 $indent-amount; /* LTR */
    margin: 0; /* Turn off margins on nested lists. */
dd {
  margin: 0 0 0 $indent-amount; /* LTR */
@if $legacy-support-for-ie7 {
  /**
   * Correct list images handled incorrectly in IE 7.
  nav ul,
  nav ol {
    list-style: none;
    list-style-image: none;
  }
/* ==========================================================================
   Embedded content
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9.
  border: 0;
  @if $legacy-support-for-ie7 {
    /* Improve image quality when scaled in IE 7. */
    -ms-interpolation-mode: bicubic;
  /* vertical-align: bottom; */ /* Suppress the space beneath the baseline */
  /* Responsive images */
  /* @todo Look into adding responsive embedded video. */
  @if $legacy-support-for-ie8 {
    width: auto; /* Correct IE 8 not scaling image height when resized. */
  }
/**
 * Correct overflow displayed oddly in IE 9.
/* ==========================================================================
   Figures
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari 5.
/* ==========================================================================
   Forms
   ========================================================================== */
@if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
  /**
   * Correct margin displayed oddly in IE 6/7.
  form {
    margin: 0;
  }
 * Define consistent border, margin, and padding.
  /* Apply borders and padding that keep the vertical rhythm. */
  @include apply-side-rhythm-border(top,    $width: 1px, $lines: 0.35);
  @include apply-side-rhythm-border(bottom, $width: 1px, $lines: 0.65);
  @include apply-side-rhythm-border(left,  $width: 1px, $lines: 0.65);
  @include apply-side-rhythm-border(right, $width: 1px, $lines: 0.65);
/**
 * 1. Correct `color` not being inherited in IE 8/9.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 * 3. Correct alignment displayed oddly in IE 6/7.
  padding: 0; /* 2 */
  @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
    *margin-left: -7px; /* 3 */ /* LTR */
/**
 * 1. Correct font family not being inherited in all browsers.
 * 2. Correct font size not being inherited in all browsers.
 * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
 * 4. Improve appearance and consistency with IE 6/7.
  font-family: inherit; /* 1 */
  font-size: 100%; /* 2 */
  margin: 0; /* 3 */
  @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
    vertical-align: baseline; /* 4 */
    *vertical-align: middle; /* 4 */
/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
  line-height: normal;
/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
 * Correct `select` style inheritance in Firefox 4+ and Opera.
 */

button,
select {
  text-transform: none;
}

 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 * 4. Remove inner spacing in IE 7 without affecting normal text inputs.
 *    Known issue: inner spacing remains in IE 6.
html input[type="button"], /* 1 */
  -webkit-appearance: button; /* 2 */
  cursor: pointer; /* 3 */
  @if $legacy-support-for-ie7 {
    *overflow: visible; /* 4 */
 * Re-set default cursor for disabled elements.
html input[disabled] {
/**
 * 1. Address box sizing set to `content-box` in IE 8/9.
 * 2. Remove excess padding in IE 8/9.
 * 3. Remove excess padding in IE 7.
 *    Known issue: excess padding remains in IE 6.
  @include box-sizing(border-box); /* 1 */
  padding: 0; /* 2 */
  @if $legacy-support-for-ie7 {
    *height: 13px; /* 3 */
    *width: 13px; /* 3 */
/**
 * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
 *    (include `-moz` to future-proof).
  -webkit-appearance: textfield; /* 1 */
  @include box-sizing(content-box); /* 2 */
/**
 * Remove inner padding and search cancel button in Safari 5 and Chrome
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
/**
 * Remove inner padding and border in Firefox 4+.
/**
 * 1. Remove default vertical scrollbar in IE 8/9.
 * 2. Improve readability and alignment in all browsers.
  overflow: auto; /* 1 */
  vertical-align: top; /* 2 */
/* ==========================================================================
   Tables
   ========================================================================== */
 * Remove most spacing between table cells.
  /* width: 100%; */ /* Prevent cramped-looking tables */
  /* Add vertical rhythm margins. */