_normalize.scss in normalize-scss-3.0.0.alpha.1 vs _normalize.scss in normalize-scss-3.0.0.alpha.2

- old
+ new

@@ -1,40 +1,39 @@ -/* normalize.scss 3.0.0-alpha.1+normalize.2.1.3 | MIT/GPLv2 License | bit.ly/normalize-with-compass */ +/* normalize-scss 3.0.0-alpha.2+normalize.3.0.0 | MIT/GPLv2 License | bit.ly/normalize-scss */ -// ============================================================================= // Variables and Imports // // If you have a base partial (or equivalent), you should move these lines to // that file. NOTE: Edit the lines to remove "!default". // @see http://compass-style.org/help/tutorials/best_practices/ // ============================================================================= // These 3 variables are copies of ones used in Compass' Vertical Rhythm module. - // The base font size. - $base-font-size: 16px !default; + // The base font size. + $base-font-size: 16px !default; - // The base line height determines the basic unit of vertical rhythm. - $base-line-height: 24px !default; + // The base line height determines the basic unit of vertical rhythm. + $base-line-height: 24px !default; - // The length unit in which to output vertical rhythm values. - // Supported values: px, em, rem. - $rhythm-unit: 'em' !default; + // The length unit in which to output vertical rhythm values. + // Supported values: px, em, rem. + $rhythm-unit: 'em' !default; // This variable is a copy of the one used in Compass' support module. - // Optional map of minimum browser versions to support. For example, to - // remove support for IE 7 and earlier, set $browser-minimum-versions['ie'] - // to '8'. - $browser-minimum-versions: ( - 'chrome': null, - 'firefox': null, - 'ie': null, - 'safari': null, - 'opera': null - ) !default; + // Optional map of minimum browser versions to support. For example, to + // remove support for IE 7 and earlier, set $browser-minimum-versions['ie'] + // to '8'. + $browser-minimum-versions: ( + 'chrome': null, + 'firefox': null, + 'ie': null, + 'safari': null, + 'opera': null + ) !default; // Set this to true to force CSS output to exactly match normalize.css. $strict-normalize: true !default; @@ -56,14 +55,15 @@ @import "compass/support"; @import "compass/css3/box-sizing"; @import "compass/typography/vertical_rhythm"; -// To work around a bug in Compass 1.0.0-alpha.17, we override Compass' +// To work around a bug in compass-core 1.0.0-alpha.17, we override Compass' // support-legacy-browser() function with a version of our own. // @TODO Remove this monkey patch after it's fixed in Compass. // @see https://github.com/chriseppstein/compass/pull/1524 +// @see also https://github.com/chriseppstein/compass/pull/1520 @function support-legacy-browser($browser, $min-version, $max-version: null, $threshold: $critical-usage-threshold) { @if not index($supported-browsers, $browser) { @return false; } // Check against declared minimums. @@ -77,18 +77,53 @@ omitted-usage($browser, $min-version)); @return $usage > $threshold; } } -/* ========================================================================== - HTML5 display definitions +/* Base ========================================================================== */ +@if not $strict-normalize or support-legacy-browser(ie, "7") { + /** + * Establish a vertical rhythm unit using $base-font-size, $base-line-height, + * and $rhythm-unit variables. Also, correct text resizing oddly in IE 6/7 when + * body `font-size` is set using `em` units. + */ + + @include establish-baseline(); +} + /** - * Correct `block` display not defined in IE 8/9. + * 1. Set default font family to sans-serif. + * 2. Prevent iOS text size adjust after orientation change, without disabling + * user zoom. */ +html { + font-family: $base-font-family; /* 1 */ + -ms-text-size-adjust: 100%; /* 2 */ + -webkit-text-size-adjust: 100%; /* 2 */ + // Show a background image that can be used to debug your alignments. + // @include debug-vertical-alignment(); +} + +/** + * Remove default margin. + */ + +body { + margin: 0; +} + +/* HTML5 display definitions + ========================================================================== */ + +/** + * Correct `block` display not defined in IE 8/9. Correct `block` display + * not defined on `summary` and `details` in IE and Firefox and on `main` in IE. + */ + article, aside, details, figcaption, figure, @@ -97,477 +132,402 @@ hgroup, main, nav, section, summary { - display: block; + display: block; } /** - * Correct `inline-block` display not defined in IE 8/9. + * 1. Correct `inline-block` display not defined in IE 8/9. + * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. */ audio, canvas, +progress, video { - display: inline-block; + @if support-legacy-browser(ie, "9") { + display: inline-block; /* 1 */ @if support-legacy-browser(ie, "7") { - *display: inline; - *zoom: 1; + *display: inline; + *zoom: 1; } + } + vertical-align: baseline; /* 2 */ } /** * Prevent modern browsers from displaying `audio` without controls. * Remove excess height in iOS 5 devices. */ audio:not([controls]) { + display: none; + height: 0; +} + +@if support-legacy-browser(ie, "10") { + /** + * Address `[hidden]` styling not present in IE 8/9/10. + */ + + [hidden] { display: none; - height: 0; + } } /** - * Address `[hidden]` styling not present in IE 8/9. * Hide the `template` element in IE, Safari, and Firefox < 22. */ -[hidden], template { - display: none; + display: none; } -/* ========================================================================== - Base +/* Links ========================================================================== */ -@if not $strict-normalize or support-legacy-browser(ie, "7") { - /** - * Establish a vertical rhythm unit using $base-font-size, $base-line-height, - * and $rhythm-unit variables. Also, correct text resizing oddly in IE 6/7 when - * body `font-size` is set using `em` units. - */ +@if support-legacy-browser(ie, "10") { + /** + * Remove the gray background color from active links in IE 10. + */ - @include establish-baseline(); + a { + background: transparent; + } } /** - * 1. Set default font family to sans-serif. - * 2. Prevent iOS text size adjust after orientation change, without disabling - * user zoom. + * Improve readability when focused and also mouse hovered in all browsers. */ -html { - font-family: $base-font-family; /* 1 */ - -ms-text-size-adjust: 100%; /* 2 */ - -webkit-text-size-adjust: 100%; /* 2 */ - // Show a background image that can be used to debug your alignments. - // @include debug-vertical-alignment(); +a:active, +a:hover { + outline: 0; } -@if support-legacy-browser(ie, "7") { - /** - * Address `font-family` inconsistency between `textarea` and other form - * elements. - */ +/* Text-level semantics + ========================================================================== */ - button, - input, - select, - textarea { - font-family: $base-font-family; - } -} - /** - * Remove default margin. + * Address styling not present in IE, Safari 5, and Chrome. */ -body { - margin: 0; +abbr[title] { + border-bottom: 1px dotted; } -/* ========================================================================== - Links - ========================================================================== */ - /** - * Remove the gray background color from active links in IE 10. + * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. */ -a { - background: transparent; +b, +strong { + font-weight: bold; } -/** - * Address `outline` inconsistency between Chrome and other browsers. - */ +@if not $strict-normalize or support-legacy-browser(ie, "7") { + /** + * Set 1 unit of vertical rhythm on the top and bottom margin. + */ -a:focus { - outline: thin dotted; + blockquote { + margin: rhythm(1) $indent-amount; + } } /** - * Improve readability when focused and also mouse hovered in all browsers. + * Address odd `em`-unit font size rendering in all browsers. */ -a:active, -a:hover { - outline: 0; +code, +kbd, +pre, +samp { + font-family: monospace, serif; + @if support-legacy-browser(ie, "6") { + _font-family: 'courier new', monospace; + } + font-size: 1em; } -/* ========================================================================== - Typography - ========================================================================== */ +/** + * Address styling not present in Safari 5 and Chrome. + */ -@if not $strict-normalize or support-legacy-browser(ie, "7") { - /** - * 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; - } +dfn { + font-style: italic; } /** * Address variable `h1` font-size and margin within `section` and `article` * contexts in Firefox 4+, Safari 5, and Chrome. */ h1 { - /* Set the font-size and line-height while keeping a proper vertical rhythm. */ - @if not $strict-normalize or support-legacy-browser(ie, "7") { - @include adjust-font-size-to( $h1-font-size ); - } - @else { - font-size: if($rhythm-unit == "px", $h1-font-size, ($h1-font-size / $base-font-size)#{$rhythm-unit}); - } + /* Set the font-size and line-height while keeping a proper vertical rhythm. */ + @if not $strict-normalize or support-legacy-browser(ie, "7") { + @include adjust-font-size-to( $h1-font-size ); + } + @else { + font-size: if($rhythm-unit == "px", $h1-font-size, ($h1-font-size / $base-font-size)#{$rhythm-unit}); + } - /* Set 1 unit of vertical rhythm on the top and bottom margins. */ - @include leader(1, $h1-font-size); - @include trailer(1, $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); } @if not $strict-normalize or support-legacy-browser(ie, "7") { - h2 { - @include adjust-font-size-to( $h2-font-size ); - @include leader(1, $h2-font-size); - @include trailer(1, $h2-font-size); - } + h2 { + @include adjust-font-size-to( $h2-font-size ); + @include leader(1, $h2-font-size); + @include trailer(1, $h2-font-size); + } - h3 { - @include adjust-font-size-to( $h3-font-size ); - @include leader(1, $h3-font-size); - @include trailer(1, $h3-font-size); - } + h3 { + @include adjust-font-size-to( $h3-font-size ); + @include leader(1, $h3-font-size); + @include trailer(1, $h3-font-size); + } - h4 { - @include adjust-font-size-to( $h4-font-size ); - @include leader(1, $h4-font-size); - @include trailer(1, $h4-font-size); - } + h4 { + @include adjust-font-size-to( $h4-font-size ); + @include leader(1, $h4-font-size); + @include trailer(1, $h4-font-size); + } - h5 { - @include adjust-font-size-to( $h5-font-size ); - @include leader(1, $h5-font-size); - @include trailer(1, $h5-font-size); - } + h5 { + @include adjust-font-size-to( $h5-font-size ); + @include leader(1, $h5-font-size); + @include trailer(1, $h5-font-size); + } - h6 { - @include adjust-font-size-to( $h6-font-size ); - @include leader(1, $h6-font-size); - @include trailer(1, $h6-font-size); - } + h6 { + @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. - */ +@if support-legacy-browser(ie, "9") { + /** + * Address styling not present in IE 8/9. + */ -abbr[title] { - border-bottom: 1px dotted; -} - -/** - * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. - */ - -b, -strong { - font-weight: bold; -} - -/** - * Address styling not present in Safari 5 and Chrome. - */ - -dfn { - font-style: italic; -} - -/** - * Address differences between Firefox and other browsers. - */ - -hr { - @include box-sizing(content-box); - height: 0; -} - -/** - * Address styling not present in IE 8/9. - */ - -mark { + mark { background: #ff0; color: #000; + } } -/** - * Correct font family set oddly in Safari 5 and Chrome. - */ +@if not $strict-normalize or support-legacy-browser(ie, "7") { + /** + * Set 1 unit of vertical rhythm on the top and bottom margin. + */ -code, -kbd, -pre, -samp { - font-family: monospace, serif; - @if support-legacy-browser(ie, "6") { - _font-family: 'courier new', monospace; - } - font-size: 1em; + p, + pre { + margin: rhythm(1) 0; + } } /** - * Improve readability of pre-formatted text in all browsers. + * Contain overflow in all browsers. */ pre { - @if support-legacy-browser(ie, "7") { - white-space: pre; - white-space: pre-wrap; - word-wrap: break-word; - } - @else { - white-space: pre-wrap; - } + overflow: auto; } /** - * Set consistent quote types. - */ - -q { - quotes: "\201C" "\201D" "\2018" "\2019"; -} - -/** * Address inconsistent and variable font size in all browsers. */ small { - font-size: 80%; + font-size: 80%; } /** * Prevent `sub` and `sup` affecting `line-height` in all browsers. */ sub, sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; } sup { - top: -0.5em; + top: -0.5em; } sub { - bottom: -0.25em; + bottom: -0.25em; } -/* ========================================================================== - Lists - ========================================================================== */ - @if not $strict-normalize or support-legacy-browser(ie, "7") { - /** - * Address margins set differently in IE 6/7. - */ + /* Lists + ========================================================================== */ - dl, - menu, + /** + * Address margins set differently in IE 6/7. + */ + + dl, + menu, + ol, + ul { + margin: rhythm(1) 0; + } + + @if not $strict-normalize { ol, ul { - margin: rhythm(1) 0; + ol, + ul { + margin: 0; + } } + } - @if not $strict-normalize { - ol, - ul { - ol, - ul { - margin: 0; - } - } - } + dd { + margin: 0 0 0 $indent-amount; + } - dd { - margin: 0 0 0 $indent-amount; - } + /** + * Address paddings set differently in IE 6/7. + */ - /** - * Address paddings set differently in IE 6/7. - */ - - menu, - ol, - ul { - padding: 0 0 0 $indent-amount; - } + menu, + ol, + ul { + padding: 0 0 0 $indent-amount; + } } @if support-legacy-browser(ie, "7") { - /** - * Correct list images handled incorrectly in IE 7. - */ + /** + * Correct list images handled incorrectly in IE 7. + */ - nav ul, - nav ol { - list-style: none; - list-style-image: none; - } + nav ul, + nav ol { + list-style: none; + list-style-image: none; + } } -/* ========================================================================== - Embedded content +/* Embedded content ========================================================================== */ -/** - * Remove border when inside `a` element in IE 8/9. - */ +@if support-legacy-browser(ie, "10") { + /** + * Remove border when inside `a` element in IE 8/9/10. + */ -img { + img { border: 0; @if support-legacy-browser(ie, "7") { - /* Improve image quality when scaled in IE 7. */ - -ms-interpolation-mode: bicubic; + /* Improve image quality when scaled in IE 7. */ + -ms-interpolation-mode: bicubic; } + } } /** - * Correct overflow displayed oddly in IE 9. + * Correct overflow displayed in IE. */ svg:not(:root) { - overflow: hidden; + overflow: hidden; } -/* ========================================================================== - Figures +/* Grouping content ========================================================================== */ -/** - * Address margin not present in IE 8/9 and Safari 5. - */ +@if support-legacy-browser(ie, "9") or support-legacy-browser(safari, "5") { + /** + * Address margin not present in IE 8/9 and Safari 5. + */ -figure { - margin: 0; + figure { + margin: rhythm(1) $indent-amount; + } } -/* ========================================================================== - Forms - ========================================================================== */ - -@if support-legacy-browser(ie, "7") { - /** - * Correct margin displayed oddly in IE 6/7. - */ - - form { - margin: 0; - } -} - /** - * Define consistent border, margin, and padding. + * Address differences between Firefox and other browsers. */ -fieldset { - margin: 0 2px; - /* Apply borders and padding that keep the vertical rhythm. */ - border-color: #c0c0c0; - @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.625); - @include apply-side-rhythm-border(right, $width: 1px, $lines: 0.625); +hr { + @include box-sizing(content-box); + height: 0; } +/* Forms + ========================================================================== */ + /** - * 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. + * Known limitation: by default, Chrome and Safari on OS X allow very limited + * styling of `select`, unless a `border` property is set. */ -legend { - border: 0; /* 1 */ - padding: 0; /* 2 */ - @if support-legacy-browser(ie, "7") { - *margin-left: -7px; /* 3 */ - } +@if support-legacy-browser(ie, "7") { + /** + * Correct margin displayed oddly in IE 6/7. + */ + + form { + margin: 0; + } } /** - * 1. Correct font family not being inherited in all browsers. - * 2. Correct font size not being inherited in all browsers. + * 1. Correct color not being inherited. + * Known issue: affects color of disabled elements. + * 2. Correct font properties not being inherited. * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. - * 4. Improve appearance and consistency with IE 6/7. + * 4. Address `font-family` inconsistency between `textarea` and other form in IE 7 + * 5. Improve appearance and consistency with IE 6/7. */ button, input, +optgroup, select, textarea { - font-family: inherit; /* 1 */ - font-size: 100%; /* 2 */ - margin: 0; /* 3 */ - @if support-legacy-browser(ie, "7") { - vertical-align: baseline; /* 4 */ - *vertical-align: middle; /* 4 */ - } + color: inherit; /* 1 */ + font: inherit; /* 2 */ + margin: 0; /* 3 */ + @if support-legacy-browser(ie, "7") { + *font-family: $base-font-family; /* 4 */ + *vertical-align: middle; /* 5 */ + } } /** - * Address Firefox 4+ setting `line-height` on `input` using `!important` in - * the UA stylesheet. + * Address `overflow` set to `hidden` in IE. */ -button, -input { - line-height: normal; +button { + overflow: visible; } /** * 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. + * Correct `button` style inheritance in Firefox, IE, and Opera. + * Correct `select` style inheritance in Firefox. */ button, select { - text-transform: none; + text-transform: none; } /** * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` * and `video` controls. @@ -580,91 +540,158 @@ button, html input[type="button"], /* 1 */ input[type="reset"], input[type="submit"] { - -webkit-appearance: button; /* 2 */ - cursor: pointer; /* 3 */ - @if support-legacy-browser(ie, "7") { - *overflow: visible; /* 4 */ - } + -webkit-appearance: button; /* 2 */ + cursor: pointer; /* 3 */ + @if support-legacy-browser(ie, "7") { + *overflow: visible; /* 4 */ + } } /** * Re-set default cursor for disabled elements. */ button[disabled], html input[disabled] { - cursor: default; + cursor: default; } /** - * 1. Address box sizing set to `content-box` in IE 8/9/10. - * 2. Remove excess padding in IE 8/9/10. - * 3. Remove excess padding in IE 7. - * Known issue: excess padding remains in IE 6. + * Remove inner padding and border in Firefox 4+. */ -input[type="checkbox"], -input[type="radio"] { +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +/** + * Address Firefox 4+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ + +input { + line-height: normal; +} + +@if support-legacy-browser(ie, "10") { + /** + * It's recommended that you don't attempt to style these elements. + * Firefox's implementation doesn't respect box-sizing, padding, or width. + * + * 1. Address box sizing set to `content-box` in IE 8/9/10. + * 2. Remove excess padding in IE 8/9/10. + * 3. Remove excess padding in IE 7. + * Known issue: excess padding remains in IE 6. + */ + + input[type="checkbox"], + input[type="radio"] { @include box-sizing(border-box); /* 1 */ padding: 0; /* 2 */ @if support-legacy-browser(ie, "7") { - *height: 13px; /* 3 */ - *width: 13px; /* 3 */ + *height: 13px; /* 3 */ + *width: 13px; /* 3 */ } + } } /** + * Fix the cursor style for Chrome's increment/decrement buttons. For certain + * `font-size` values of the `input`, it causes the cursor style of the + * decrement button to change from `default` to `text`. + */ + +input[type="number"]::-webkit-inner-spin-button, +input[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** * 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). */ input[type="search"] { - -webkit-appearance: textfield; /* 1 */ - @include box-sizing(content-box); /* 2 */ + -webkit-appearance: textfield; /* 1 */ + @include box-sizing(content-box); /* 2 */ + + /** + * Remove inner padding and search cancel button in Safari and Chrome on OS X. + * Safari (but not Chrome) clips the cancel button when the search input has + * padding (and `textfield` appearance). + */ + + &::-webkit-search-cancel-button, + &::-webkit-search-decoration { + -webkit-appearance: none; + } } /** - * Remove inner padding and search cancel button in Safari 5 and Chrome - * on OS X. + * Define consistent border, margin, and padding. */ -input[type="search"]::-webkit-search-cancel-button, -input[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; +fieldset { + margin: 0 2px; + /* Apply borders and padding that keep the vertical rhythm. */ + border-color: #c0c0c0; + @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.625); + @include apply-side-rhythm-border(right, $width: 1px, $lines: 0.625); } /** - * Remove inner padding and border in Firefox 4+. + * 1. Correct `color` not being inherited in IE. + * 2. Remove padding so people aren't caught out if they zero out fieldsets. + * 3. Correct alignment displayed oddly in IE 6/7. */ -button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; - padding: 0; +legend { + @if support-legacy-browser(ie, "9") { + border: 0; /* 1 */ + } + padding: 0; /* 2 */ + @if support-legacy-browser(ie, "7") { + *margin-left: -7px; /* 3 */ + } } /** - * 1. Remove default vertical scrollbar in IE 8/9. - * 2. Improve readability and alignment in all browsers. + * Remove default vertical scrollbar in IE. */ textarea { - overflow: auto; /* 1 */ - vertical-align: top; /* 2 */ + overflow: auto; } -/* ========================================================================== - Tables +/** + * Don't inherit the `font-weight` (applied by a rule above). + * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. + */ + +optgroup { + font-weight: bold; +} + +/* Tables ========================================================================== */ /** * Remove most spacing between table cells. */ table { - border-collapse: collapse; - border-spacing: 0; + border-collapse: collapse; + border-spacing: 0; +} + +td, +th { + padding: 0; }