_normalize.scss in compass-h5bp-0.1.0

- old
+ new

@@ -1,25 +1,12 @@
 //
-// Normalize
+// Normalize v1.0.1 | MIT License | git.io/normalize
 //
 
-$line-height: 1.4 !default;
-$font-color: #222 !default;
-$font-family: sans-serif !default;
-$font-size: 1em !default;
-$link-color: #00e !default;
-$link-hover-color: #06e !default;
-$link-visited-color: #551a8b !default;
-$selected-font-color: #fff !default;
-$selected-background-color: #fe57a1 !default;
-$invalid-background-color: #f0dddd !default;
-
-
 @mixin h5bp-normalize {
   @include h5bp-display;
   @include h5bp-base;
-  @include h5bp-selection;
   @include h5bp-links;
   @include h5bp-typography;
   @include h5bp-lists;
   @include h5bp-embeds;
   @include h5bp-figures;
@@ -29,185 +16,399 @@
 
 
 // Html5 display definitions
 @mixin h5bp-display {
 
-  article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
-  audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
-  audio:not([controls]) { display: none; }
-  [hidden] { display: none; }
+  // Corrects `block` display not defined in IE 6/7/8/9 and Firefox 3.
+  article,
+  aside,
+  details,
+  figcaption,
+  figure,
+  footer,
+  header,
+  hgroup,
+  nav,
+  section,
+  summary {
+      display: block;
+  }
 
+  // Corrects `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
+  audio,
+  canvas,
+  video {
+      display: inline-block;
+      *display: inline;
+      *zoom: 1;
+  }
+
+  // Prevents modern browsers from displaying `audio` without controls.
+  // Remove excess height in iOS 5 devices.
+  audio:not([controls]) {
+      display: none;
+      height: 0;
+  }
+
+  // Addresses styling for `hidden` attribute not present in IE 7/8/9, Firefox 3,
+  // and Safari 4.
+  // Known issue: no IE 6 support.
+  [hidden] {
+      display: none;
+  }
+
 }
 
 
 // Base
 @mixin h5bp-base {
 
-  // 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
-  // 2. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
+  // 1. Corrects text resizing oddly in IE 6/7 when body `font-size` is set using
+  //    `em` units.
+  // 2. Prevents iOS text size adjust after orientation change, without disabling
+  //    user zoom.
+  html {
+      font-size: 100%; // 1
+      -webkit-text-size-adjust: 100%; // 2
+      -ms-text-size-adjust: 100%; // 2
+  }
 
-  html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
+  // Addresses `font-family` inconsistency between `textarea` and other form
+  // elements.
 
-  html, button, input, select, textarea { font-family: $font-family; color: $font-color; }
+  html,
+  button,
+  input,
+  select,
+  textarea {
+      font-family: sans-serif;
+  }
 
-  body { margin: 0; font-size: $font-size; line-height: $line-height; }
+  // Addresses margins handled incorrectly in IE 6/7.
 
+  body {
+      margin: 0;
+  }
+
 }
 
+// Deprecation
 @mixin h5bp-selection {
-  
-  // Remove text-shadow in selection highlight: h5bp.com/i
-  // These selection declarations have to be separate
-  // Also: hot pink! (or customize the background color to match your design)
-
-  ::-moz-selection { background: $selected-background-color; color: $selected-font-color; text-shadow: none; }
-  ::selection { background: $selected-background-color; color: $selected-font-color; text-shadow: none; }
-
+  @warn "The selection mixin has been removed. The selection code is in the h5bp-base-styles mixin starting with Boilerplate version 4.0.";
 }
 
-
 // Links
 @mixin h5bp-links {
 
-  a { color: $link-color; }
-  a:visited { color: $link-visited-color; }
-  a:hover { color: $link-hover-color; }
-  a:focus { outline: thin dotted; }
+  // Addresses `outline` inconsistency between Chrome and other browsers.
+  a:focus {
+      outline: thin dotted;
+  }
 
-  // Improve readability when focused and hovered in all browsers: h5bp.com/h
-  a:hover, a:active { outline: 0; }
+  // Improves readability when focused and also mouse hovered in all browsers.
+  a:active,
+  a:hover {
+      outline: 0;
+  }
 
 }
 
 
 // Typography
 @mixin h5bp-typography {
 
-  abbr[title] { border-bottom: 1px dotted; }
+  // Addresses font sizes and margins set differently in IE 6/7.
+  // Addresses font sizes within `section` and `article` in Firefox 4+, Safari 5,
+  // and Chrome.
+  h1 {
+      font-size: 2em;
+      margin: 0.67em 0;
+  }
 
-  b, strong { font-weight: bold; }
+  h2 {
+      font-size: 1.5em;
+      margin: 0.83em 0;
+  }
 
-  blockquote { margin: 1em 40px; }
+  h3 {
+      font-size: 1.17em;
+      margin: 1em 0;
+  }
 
-  dfn { font-style: italic; }
+  h4 {
+      font-size: 1em;
+      margin: 1.33em 0;
+  }
 
-  hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
+  h5 {
+      font-size: 0.83em;
+      margin: 1.67em 0;
+  }
 
-  ins { background: #ff9; color: #000; text-decoration: none; }
+  h6 {
+      font-size: 0.75em;
+      margin: 2.33em 0;
+  }
 
-  mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
+  // Addresses styling not present in IE 7/8/9, Safari 5, and Chrome.
+  abbr[title] {
+      border-bottom: 1px dotted;
+  }
 
-  // Redeclare monospace font family: h5bp.com/j
-  pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
+  // Addresses style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome.
+  b,
+  strong {
+      font-weight: bold;
+  }
 
-  // Improve readability of pre-formatted text in all browsers
-  pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
+  blockquote {
+      margin: 1em 40px;
+  }
 
-  q { quotes: none; }
-  q:before, q:after { content: ""; content: none; }
+  // Addresses styling not present in Safari 5 and Chrome.
+  dfn {
+      font-style: italic;
+  }
 
-  small { font-size: 85%; }
+  // Addresses styling not present in IE 6/7/8/9.
+  mark {
+      background: #ff0;
+      color: #000;
+  }
 
-  // Position subscript and superscript content without affecting line-height: h5bp.com/k
-  sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
-  sup { top: -0.5em; }
-  sub { bottom: -0.25em; }
+  // Addresses margins set differently in IE 6/7.
+  p,
+  pre {
+      margin: 1em 0;
+  }
 
+  // Corrects font family set oddly in IE 6, Safari 4/5, and Chrome.
+  code,
+  kbd,
+  pre,
+  samp {
+      font-family: monospace, serif;
+      _font-family: 'courier new', monospace;
+      font-size: 1em;
+  }
+
+  // Improves readability of pre-formatted text in all browsers.
+  pre {
+      white-space: pre;
+      white-space: pre-wrap;
+      word-wrap: break-word;
+  }
+
+  // Addresses CSS quotes not supported in IE 6/7.
+  q {
+      quotes: none;
+  }
+
+  // Addresses `quotes` property not supported in Safari 4.
+  q:before,
+  q:after {
+      content: '';
+      content: none;
+  }
+
+  // Addresses inconsistent and variable font size in all browsers.
+  small {
+      font-size: 80%;
+  }
+
+  // Prevents `sub` and `sup` affecting `line-height` in all browsers.
+  sub,
+  sup {
+      font-size: 75%;
+      line-height: 0;
+      position: relative;
+      vertical-align: baseline;
+  }
+
+  sup {
+      top: -0.5em;
+  }
+
+  sub {
+      bottom: -0.25em;
+  }
+
 }
 
 
 // Lists
 @mixin h5bp-lists {
 
-  ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
-  dd { margin: 0 0 0 40px; }
-  nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
+  // Addresses margins set differently in IE 6/7.
+  dl,
+  menu,
+  ol,
+  ul {
+      margin: 1em 0;
+  }
 
+  dd {
+      margin: 0 0 0 40px;
+  }
+
+  // Addresses paddings set differently in IE 6/7.
+  menu,
+  ol,
+  ul {
+      padding: 0 0 0 40px;
+  }
+
 }
 
 
 // Embedded content
 @mixin h5bp-embeds {
 
-  // 1. Improve image quality when scaled in IE7: h5bp.com/d
-  // 2. Remove the gap between images and borders on image containers: h5bp.com/i/440
+  // 1. Removes border when inside `a` element in IE 6/7/8/9 and Firefox 3.
+  // 2. Improves image quality when scaled in IE 7.
+  img {
+      border: 0; /* 1 */
+      -ms-interpolation-mode: bicubic; /* 2 */
+  }
 
-  img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
+  // Corrects overflow displayed oddly in IE 9.
+  svg:not(:root) {
+      overflow: hidden;
+  }
 
-  // Correct overflow not hidden in IE9
-
-  svg:not(:root) { overflow: hidden; }
-
 }
 
 
 // Figures
 @mixin h5bp-figures {
 
-  figure { margin: 0; }
+  // Addresses margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
+  figure {
+      margin: 0;
+  }
 
 }
 
 
 // Forms
 @mixin h5bp-forms {
 
-  form { margin: 0; }
-  fieldset { border: 0; margin: 0; padding: 0; }
+  // Corrects margin displayed oddly in IE 6/7.
+  form {
+      margin: 0;
+  }
 
-  // Indicate that 'label' will shift focus to the associated form element
-  label { cursor: pointer; }
+  // Define consistent border, margin, and padding.
+  fieldset {
+      border: 1px solid #c0c0c0;
+      margin: 0 2px;
+      padding: 0.35em 0.625em 0.75em;
+  }
 
-   // 1. Correct color not inheriting in IE6/7/8/9
-   // 2. Correct alignment displayed oddly in IE6/7
+  // 1. Corrects color not being inherited in IE 6/7/8/9.
+  // 2. Corrects text not wrapping in Firefox 3.
+  // 3. Corrects alignment displayed oddly in IE 6/7.
+  legend {
+      border: 0; // 1
+      padding: 0;
+      white-space: normal; // 2
+      *margin-left: -7px; // 3
+  }
 
-  legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }
+  // 1. Corrects font size not being inherited in all browsers.
+  // 2. Addresses margins set differently in IE 6/7, Firefox 3+, Safari 5,
+  //    and Chrome.
+  // 3. Improves appearance and consistency in all browsers.button,
+  input,
+  select,
+  textarea {
+      font-size: 100%; // 1
+      margin: 0; // 2
+      vertical-align: baseline; // 3
+      *vertical-align: middle; // 3
+  }
 
-   // 1. Correct font-size not inheriting in all browsers
-   // 2. Remove margins in FF3/4 S5 Chrome
-   // 3. Define consistent vertical alignment display in all browsers
+  // Addresses Firefox 3+ setting `line-height` on `input` using `!important` in
+  // the UA stylesheet.
+  button,
+  input {
+      line-height: normal;
+  }
 
-  button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
+  // 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+  //    and `video` controls.
+  // 2. Corrects inability to style clickable `input` types in iOS.
+  // 3. Improves usability and consistency of cursor style between image-type
+  //    `input` and others.
+  // 4. Removes inner spacing in IE 7 without affecting normal text inputs.
+  //    Known issue: inner spacing remains in IE 6.
+  button,
+  html input[type="button"], // 1
+  input[type="reset"],
+  input[type="submit"] {
+      -webkit-appearance: button; // 2
+      cursor: pointer; // 3
+      *overflow: visible;  // 4
+  }
 
-   // 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
+  // Re-set default cursor for disabled elements.
+  button[disabled],
+  input[disabled] {
+      cursor: default;
+  }
 
-  button, input { line-height: normal; }
+  // 1. Addresses box sizing set to content-box in IE 8/9.
+  // 2. Removes excess padding in IE 8/9.
+  // 3. Removes excess padding in IE 7.
+  //    Known issue: excess padding remains in IE 6.
+  input[type="checkbox"],
+  input[type="radio"] {
+      box-sizing: border-box; // 1
+      padding: 0; // 2
+      *height: 13px; // 3
+      *width: 13px; // 3
+  }
 
-   // 1. Display hand cursor for clickable form elements
-   // 2. Allow styling of clickable form elements in iOS
-   // 3. Correct inner spacing displayed oddly in IE7 (doesn't effect IE6)
+  // 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
+  // 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
+  //    (include `-moz` to future-proof).
+  input[type="search"] {
+      -webkit-appearance: textfield; // 1
+      -moz-box-sizing: content-box;
+      -webkit-box-sizing: content-box; // 2
+      box-sizing: content-box;
+  }
 
-  button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
+  // Removes inner padding and search cancel button in Safari 5 and Chrome
+  // on OS X.
+  input[type="search"]::-webkit-search-cancel-button,
+  input[type="search"]::-webkit-search-decoration {
+      -webkit-appearance: none;
+  }
 
-   // Re-set default cursor for disabled elements
+  // Removes inner padding and border in Firefox 3+.
+  button::-moz-focus-inner,
+  input::-moz-focus-inner {
+      border: 0;
+      padding: 0;
+  }
 
-  button[disabled], input[disabled] { cursor: default; }
+  // 1. Removes default vertical scrollbar in IE 6/7/8/9.
+  // 2. Improves readability and alignment in all browsers.
+  textarea {
+      overflow: auto; // 1
+      vertical-align: top; // 2
+  }
 
-   // Consistent box sizing and appearance
-
-  input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
-  input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
-  input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
-
-   // Remove inner padding and border in FF3/4: h5bp.com/l
-
-  button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
-
-   // 1. Remove default vertical scrollbar in IE6/7/8/9
-   // 2. Allow only vertical resizing
-
-  textarea { overflow: auto; vertical-align: top; resize: vertical; }
-
-  // Colors for form validity
-  input:valid, textarea:valid {  }
-  input:invalid, textarea:invalid { background-color: $invalid-background-color; }
-
 }
 
 
 // Tables
 @mixin h5bp-tables {
 
-  table { border-collapse: collapse; border-spacing: 0; }
-  td { vertical-align: top; }
+  // Remove most spacing between table cells.
+  table {
+      border-collapse: collapse;
+      border-spacing: 0;
+  }
 
 }
\ No newline at end of file