diff options
author | JohnAlbin <virtually.johnalbin@gmail.com> | 2016-10-24 10:37:56 +0300 |
---|---|---|
committer | JohnAlbin <virtually.johnalbin@gmail.com> | 2016-10-24 10:37:56 +0300 |
commit | b341a18906ace8d5140d904da90e8edfb27dab28 (patch) | |
tree | 5e9de761d9b466f908ca92a56762605f6bb9c7c9 | |
parent | fd058831047946fa1f298504cce150894e0d60b0 (diff) | |
parent | 47c7ef746458e2ad8cea7c632e0143f03ddc72f0 (diff) |
Update to normalize.css 5.0.0. Fixes #88
35 files changed, 3493 insertions, 2308 deletions
diff --git a/fork-versions/default/_normalize.scss b/fork-versions/default/_normalize.scss index 3ddda42..a107a23 100644 --- a/fork-versions/default/_normalize.scss +++ b/fork-versions/default/_normalize.scss @@ -17,23 +17,36 @@ $normalize-vertical-rhythm: true !global; } +/* Document + ========================================================================== */ + /** * 1. Change the default font family in all browsers (opinionated). - * 2. Prevent adjustments of font size after orientation changes in IE and iOS. + * 2. Correct the line height in all browsers. + * 3. Prevent adjustments of font size after orientation changes in + * IE on Windows Phone and in iOS. */ html { + font-family: $base-font-family; /* 1 */ @if $normalize-vertical-rhythm { // Correct old browser bug that prevented accessible resizing of text // when root font-size is set with px or em. font-size: ($base-font-size / 16px) * 100%; - line-height: ($base-line-height / $base-font-size) * 1em; + // Establish a vertical rhythm unit using $base-font-size and + // $base-line-height variables. + line-height: ($base-line-height / $base-font-size) * 1em; /* 2 */ } - font-family: $base-font-family; /* 1 */ - -ms-text-size-adjust: 100%; /* 2 */ - -webkit-text-size-adjust: 100%; /* 2 */ + @else { + line-height: 1.15; /* 2 */ + } + -ms-text-size-adjust: 100%; /* 3 */ + -webkit-text-size-adjust: 100%; /* 3 */ } +/* Sections + ========================================================================== */ + /** * Remove the margin in all browsers (opinionated). */ @@ -42,66 +55,175 @@ body { margin: 0; } -/* HTML5 display definitions - ========================================================================== */ - /** - * Add the correct display in IE <10. - * Add the correct display in Edge, IE, and Firefox for `details` or `summary`. - * Add the correct display in IE for `main`. + * Add the correct display in IE 9-. */ article, aside, -details, -figcaption, -figure, footer, header, -main, -menu, nav, -section, -summary { +section { display: block; } /** - * Add the correct display in IE <10. + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. */ -audio, -canvas, -progress, -video { - display: inline-block; +h1 { + @include normalize-font-size($h1-font-size); + @if $normalize-vertical-rhythm { + @include normalize-line-height($h1-font-size); + } + + @if $normalize-vertical-rhythm { + /* Set 1 unit of vertical rhythm on the top and bottom margins. */ + @include normalize-margin(1 0, $h1-font-size); + } + @else { + margin: 0.67em 0; + } +} + +@if $normalize-vertical-rhythm { + h2 { + @include normalize-font-size($h2-font-size); + @include normalize-line-height($h2-font-size); + @include normalize-margin(1 0, $h2-font-size); + } + + h3 { + @include normalize-font-size($h3-font-size); + @include normalize-line-height($h3-font-size); + @include normalize-margin(1 0, $h3-font-size); + } + + h4 { + @include normalize-font-size($h4-font-size); + @include normalize-line-height($h4-font-size); + @include normalize-margin(1 0, $h4-font-size); + } + + h5 { + @include normalize-font-size($h5-font-size); + @include normalize-line-height($h5-font-size); + @include normalize-margin(1 0, $h5-font-size); + } + + h6 { + @include normalize-font-size($h6-font-size); + @include normalize-line-height($h6-font-size); + @include normalize-margin(1 0, $h6-font-size); + } +} + +/* Grouping content + ========================================================================== */ + +@if $normalize-vertical-rhythm { + /** + * Set 1 unit of vertical rhythm on the top and bottom margin. + */ + + blockquote { + @include normalize-margin(1 $indent-amount); + } + + dl, + ol, + ul { + @include normalize-margin(1 0); + } + + /** + * Turn off margins on nested lists. + */ + + ol, + ul { + ol, + ul { + margin: 0; + } + } + + dd { + margin: 0 0 0 $indent-amount; + } + + ol, + ul { + padding: 0 0 0 $indent-amount; + } } /** - * Add the correct display and remove excess height in iOS 4-7. + * Add the correct display in IE 9-. */ -audio:not([controls]) { - display: none; - height: 0; +figcaption, +figure { + display: block; } /** - * Add the correct vertical alignment in Chrome, Firefox, and Opera. + * Add the correct margin in IE 8. */ -progress { - vertical-align: baseline; +figure { + @if $normalize-vertical-rhythm { + @include normalize-margin(1 $indent-amount); + } + @else { + margin: 1em $indent-amount; + } } /** - * Add the correct display in IE <11, Safari <8, and Firefox <22. - * 1. Add the correct display in IE. + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. */ -template, /* 1 */ -[hidden] { - display: none; +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * Add the correct display in IE. + */ + +main { + display: block; +} + +@if $normalize-vertical-rhythm { + /** + * Set 1 unit of vertical rhythm on the top and bottom margin. + */ + + p, + pre { + @include normalize-margin(1 0); + } +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +%monospace { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +pre { + @extend %monospace; } /* Links @@ -131,7 +253,7 @@ a:hover { ========================================================================== */ /** - * 1. Remove the bottom border in Firefox <40. + * 1. Remove the bottom border in Firefox 39-. * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ @@ -159,21 +281,14 @@ strong { font-weight: bolder; } -/** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ - -%monospace, code, kbd, samp { - font-family: monospace, monospace; /* 1 */ - font-size: 1em; /* 2 */ + @extend %monospace; } /** - * Add the correct font style in Android <4.4. + * Add the correct font style in Android 4.3-. */ dfn { @@ -181,54 +296,7 @@ dfn { } /** - * Correct the font size and margin on `h1` elements within `section` and - * `article` contexts in Chrome, Firefox, and Safari. - */ - -h1 { - @include normalize-font-size($h1-font-size); - @if $normalize-vertical-rhythm { - @include normalize-line-height($h1-font-size); - } - - /* Set 1 unit of vertical rhythm on the top and bottom margins. */ - @include normalize-margin(1 0, $h1-font-size); -} - -@if $normalize-vertical-rhythm { - h2 { - @include normalize-font-size($h2-font-size); - @include normalize-line-height($h2-font-size); - @include normalize-margin(1 0, $h2-font-size); - } - - h3 { - @include normalize-font-size($h3-font-size); - @include normalize-line-height($h3-font-size); - @include normalize-margin(1 0, $h3-font-size); - } - - h4 { - @include normalize-font-size($h4-font-size); - @include normalize-line-height($h4-font-size); - @include normalize-margin(1 0, $h4-font-size); - } - - h5 { - @include normalize-font-size($h5-font-size); - @include normalize-line-height($h5-font-size); - @include normalize-margin(1 0, $h5-font-size); - } - - h6 { - @include normalize-font-size($h6-font-size); - @include normalize-line-height($h6-font-size); - @include normalize-margin(1 0, $h6-font-size); - } -} - -/** - * Add the correct background and color in IE <10. + * Add the correct background and color in IE 9-. */ mark { @@ -269,95 +337,37 @@ sup { ========================================================================== */ /** - * Remove the border on images inside links in IE <11. + * Add the correct display in IE 9-. */ -img { - border-style: none; +audio, +video { + display: inline-block; } /** - * Hide the overflow in IE. + * Add the correct display in iOS 4-7. */ -svg:not(:root) { - overflow: hidden; -} - -/* Grouping content - ========================================================================== */ - -@if $normalize-vertical-rhythm { - /** - * Set 1 unit of vertical rhythm on the top and bottom margin. - */ - - blockquote { - @include normalize-margin(1 $indent-amount); - } - - dl, - menu, - ol, - ul { - @include normalize-margin(1 0); - } - - /** - * Turn off margins on nested lists. - */ - - ol, - ul { - ol, - ul { - margin: 0; - } - } - - dd { - margin: 0 0 0 $indent-amount; - } - - menu, - ol, - ul { - padding: 0 0 0 $indent-amount; - } +audio:not([controls]) { + display: none; + height: 0; } /** - * Add the correct margin in IE 8. + * Remove the border on images inside links in IE 10-. */ -figure { - @include normalize-margin(1 $indent-amount); +img { + border-style: none; } /** - * 1. Add the correct box sizing in Firefox. - * 2. Show the overflow in Edge and IE. + * Hide the overflow in IE. */ -hr { - box-sizing: content-box; /* 1 */ - height: 0; /* 1 */ - overflow: visible; /* 2 */ -} - -@if $normalize-vertical-rhythm { - /** - * Set 1 unit of vertical rhythm on the top and bottom margin. - */ - - p, - pre { - @include normalize-margin(1 0); - } -} - -pre { - @extend %monospace; +svg:not(:root) { + overflow: hidden; } /* Forms @@ -365,26 +375,35 @@ pre { /** * Known issues: - * - By default, Chrome on OS X and Safari on OS X allow very limited styling of + * - `select`: + * By default, Chrome on OS X and Safari on OS X allow very limited styling of * select, unless a border property is set. The default font weight on * optgroup elements cannot safely be changed in Chrome on OSX and Safari on * OS X. - * - It is recommended that you do not style checkbox and radio inputs as + * - `[type="checkbox"]`: + * It is recommended that you do not style checkbox and radio inputs as * Firefox's implementation does not respect box-sizing, padding, or width. - * - Certain font size values applied to number inputs cause the cursor style of - * the decrement button to change from default to text. - * - The search input is not fully stylable by default. In Chrome and Safari on - * OSX/iOS you can't control font, padding, border, or background. In Chrome - * and Safari on Windows you can't control border properly. It will apply - * border-width but will only show a border color (which cannot be controlled) - * for the outer 1px of that border. Applying -webkit-appearance: textfield - * addresses these issues without removing the benefits of search inputs (e.g. - * showing past searches). Safari (but not Chrome) will clip the cancel button - * on when it has padding (and textfield appearance). - */ - -/** - * 1. Change font properties to `inherit` in all browsers (opinionated). + * - `[type="number"]`: + * Certain font size values applied to number inputs cause the cursor style of + * the decrement button to change from `default` to `text`. + * - `[type="search"]`: + * The search input is not fully stylable by default. In Chrome and Safari on + * OSX/iOS you can't control `font`, `padding`, `border`, or `background`. In + * Chrome and Safari on Windows you can't control `border` properly. It will + * apply `border-width` but will only show a border color (which cannot be + * controlled) for the outer 1px of that border. Applying + * `-webkit-appearance: textfield` addresses these issues without removing the + * benefits of search inputs (e.g. showing past searches). Safari (but not + * Chrome) will clip the cancel button on when it has padding (and `textfield` + * appearance). + * - `::placeholder`: + * In Edge, placeholders will disappear on `relative` or `absolute` positioned + * `<input>` elements if you use `opacity` less than `1` due to a + * [bug](https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/3901363/). + */ + +/** + * 1. Change the font styles in all browsers (opinionated). * 2. Remove the margin in Firefox and Safari. */ @@ -393,7 +412,14 @@ input, optgroup, select, textarea { - font: inherit; /* 1 */ + @if $normalize-vertical-rhythm { + @include normalize-line-height($base-font-size); /* 1 */ + } + @else { + line-height: 1.15; /* 1 */ + } + font-family: $base-font-family; /* 1 */ + font-size: 100%; /* 1 */ margin: 0; /* 2 */ } @@ -460,8 +486,8 @@ input { } /** - * 1. Add the correct box sizing in IE <11. - * 2. Remove the padding in IE <11. + * 1. Add the correct box sizing in IE 10-. + * 2. Remove the padding in IE 10-. */ [type="checkbox"], @@ -489,7 +515,7 @@ input { outline-offset: -2px; /* 2 */ /** - * Remove the inner padding and cancel buttons in Chrome and Safari on OS X. + * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. */ &::-webkit-search-cancel-button, @@ -499,15 +525,6 @@ input { } /** - * Correct the text style of placeholders in Chrome, Edge, and Safari. - */ - -::-webkit-input-placeholder { - color: inherit; - opacity: 0.54; -} - -/** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ @@ -538,17 +555,19 @@ legend { box-sizing: border-box; /* 1 */ display: table; /* 1 */ max-width: 100%; /* 1 */ - white-space: normal; /* 1 */ - color: inherit; /* 2 */ padding: 0; /* 3 */ + color: inherit; /* 2 */ + white-space: normal; /* 1 */ } /** - * Restore the font weight unset by a previous rule. + * 1. Add the correct display in IE 9-. + * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. */ -optgroup { - font-weight: bold; +progress { + display: inline-block; /* 1 */ + vertical-align: baseline; /* 2 */ } /** @@ -558,3 +577,81 @@ optgroup { textarea { overflow: auto; } + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in Edge, IE, and Firefox. + */ + +details { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + + +/* + * Add the correct display in IE 9-. + */ + +menu { + display: block; + + @if $normalize-vertical-rhythm { + /* + * 1. Set 1 unit of vertical rhythm on the top and bottom margin. + * 2. Set consistent space for the list style image. + */ + + @include normalize-margin(1 0); /* 1 */ + padding: 0 0 0 $indent-amount; /* 2 */ + + /** + * Turn off margins on nested lists. + */ + + menu &, + ol &, + ul & { + margin: 0; + } + } +} + +/* Scripting + ========================================================================== */ + +/** + * Add the correct display in IE 9-. + */ + +canvas { + display: inline-block; +} + +/** + * Add the correct display in IE. + */ + +template { + display: none; +} + +/* Hidden + ========================================================================== */ + +/** + * Add the correct display in IE 10-. + */ + +[hidden] { + display: none; +} diff --git a/fork-versions/deprecated-compass/_normalize.scss b/fork-versions/deprecated-compass/_normalize.scss index 9f70e0b..0ab446c 100644 --- a/fork-versions/deprecated-compass/_normalize.scss +++ b/fork-versions/deprecated-compass/_normalize.scss @@ -20,29 +20,36 @@ $normalize-vertical-rhythm: true !global; } -@if $normalize-vertical-rhythm { - /** - * Establish a vertical rhythm unit using $base-font-size, $base-line-height, - * and $rhythm-unit variables. Also, correct old browser bug that prevented - * accessible resizing of text when root font-size is set with px or em. - */ +/* Document + ========================================================================== */ - @include establish-baseline(); -} +/** + * 1. Establish a vertical rhythm unit using $base-font-size, $base-line-height, + * and $rhythm-unit variables. + * 2. Correct old browser bug that prevented accessible resizing of text when + * root font-size is set with px or em. + * 3. Correct the line height in all browsers. + */ + +@include establish-baseline(); /** * 1. Change the default font family in all browsers (opinionated). - * 2. Prevent adjustments of font size after orientation changes in IE and iOS. + * 2. Prevent adjustments of font size after orientation changes in + * IE on Windows Phone and in iOS. */ html { + // Show a background image that can be used to debug your alignments. + // @include debug-vertical-alignment(); 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(); } +/* Sections + ========================================================================== */ + /** * Remove the margin in all browsers (opinionated). */ @@ -51,66 +58,169 @@ body { margin: 0; } -/* HTML5 display definitions - ========================================================================== */ - /** - * Add the correct display in IE <10. - * Add the correct display in Edge, IE, and Firefox for `details` or `summary`. - * Add the correct display in IE for `main`. + * Add the correct display in IE 9-. */ article, aside, -details, -figcaption, -figure, footer, header, -main, -menu, nav, -section, -summary { +section { display: block; } /** - * Add the correct display in IE <10. + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. */ -audio, -canvas, -progress, -video { - display: inline-block; +h1 { + /* Set the font-size and line-height while keeping a proper vertical rhythm. */ + @if $normalize-vertical-rhythm { + @include adjust-font-size-to( $h1-font-size ); + } + @else { + font-size: if($rhythm-unit == "px", $h1-font-size, unquote("#{$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); +} + +@if $normalize-vertical-rhythm { + 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); + } + + 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); + } + + h6 { + @include adjust-font-size-to( $h6-font-size ); + @include leader(1, $h6-font-size); + @include trailer(1, $h6-font-size); + } +} + +/* Grouping content + ========================================================================== */ + +@if $normalize-vertical-rhythm { + /** + * Set 1 unit of vertical rhythm on the top and bottom margin. + */ + + blockquote { + @include output-rhythm(margin, rhythm(1) $indent-amount); + } + + dl, + ol, + ul { + @include output-rhythm(margin, rhythm(1) 0); + } + + /** + * Turn off margins on nested lists. + */ + + ol, + ul { + ol, + ul { + margin: 0; + } + } + + dd { + margin: 0 0 0 $indent-amount; + } + + ol, + ul { + padding: 0 0 0 $indent-amount; + } } /** - * Add the correct display and remove excess height in iOS 4-7. + * Add the correct display in IE 9-. */ -audio:not([controls]) { - display: none; - height: 0; +figcaption, +figure { + display: block; } /** - * Add the correct vertical alignment in Chrome, Firefox, and Opera. + * Add the correct margin in IE 8. */ -progress { - vertical-align: baseline; +figure { + @include output-rhythm(margin, rhythm(1) $indent-amount); } /** - * Add the correct display in IE <11, Safari <8, and Firefox <22. - * 1. Add the correct display in IE. + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. */ -template, /* 1 */ -[hidden] { - display: none; +hr { + @include box-sizing(content-box); /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * Add the correct display in IE. + */ + +main { + display: block; +} + +@if $normalize-vertical-rhythm { + /** + * Set 1 unit of vertical rhythm on the top and bottom margin. + */ + + p, + pre { + @include output-rhythm(margin, rhythm(1) 0); + } +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +%monospace { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +pre { + @extend %monospace; } /* Links @@ -140,7 +250,7 @@ a:hover { ========================================================================== */ /** - * 1. Remove the bottom border in Firefox <40. + * 1. Remove the bottom border in Firefox 39-. * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ @@ -168,21 +278,14 @@ strong { font-weight: bolder; } -/** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ - -%monospace, code, kbd, samp { - font-family: monospace, monospace; /* 1 */ - font-size: 1em; /* 2 */ + @extend %monospace; } /** - * Add the correct font style in Android <4.4. + * Add the correct font style in Android 4.3-. */ dfn { @@ -190,58 +293,7 @@ dfn { } /** - * Correct the font size and margin on `h1` elements within `section` and - * `article` contexts in Chrome, Firefox, and Safari. - */ - -h1 { - /* Set the font-size and line-height while keeping a proper vertical rhythm. */ - @if $normalize-vertical-rhythm { - @include adjust-font-size-to( $h1-font-size ); - } - @else { - font-size: if($rhythm-unit == "px", $h1-font-size, unquote("#{$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); -} - -@if $normalize-vertical-rhythm { - 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); - } - - 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); - } - - h6 { - @include adjust-font-size-to( $h6-font-size ); - @include leader(1, $h6-font-size); - @include trailer(1, $h6-font-size); - } -} - -/** - * Add the correct background and color in IE <10. + * Add the correct background and color in IE 9-. */ mark { @@ -282,95 +334,37 @@ sup { ========================================================================== */ /** - * Remove the border on images inside links in IE <11. + * Add the correct display in IE 9-. */ -img { - border-style: none; +audio, +video { + display: inline-block; } /** - * Hide the overflow in IE. + * Add the correct display in iOS 4-7. */ -svg:not(:root) { - overflow: hidden; -} - -/* Grouping content - ========================================================================== */ - -@if $normalize-vertical-rhythm { - /** - * Set 1 unit of vertical rhythm on the top and bottom margin. - */ - - blockquote { - @include output-rhythm(margin, rhythm(1) $indent-amount); - } - - dl, - menu, - ol, - ul { - @include output-rhythm(margin, rhythm(1) 0); - } - - /** - * Turn off margins on nested lists. - */ - - ol, - ul { - ol, - ul { - margin: 0; - } - } - - dd { - margin: 0 0 0 $indent-amount; - } - - menu, - ol, - ul { - padding: 0 0 0 $indent-amount; - } +audio:not([controls]) { + display: none; + height: 0; } /** - * Add the correct margin in IE 8. + * Remove the border on images inside links in IE 10-. */ -figure { - @include output-rhythm(margin, rhythm(1) $indent-amount); +img { + border-style: none; } /** - * 1. Add the correct box sizing in Firefox. - * 2. Show the overflow in Edge and IE. + * Hide the overflow in IE. */ -hr { - @include box-sizing(content-box); /* 1 */ - height: 0; /* 1 */ - overflow: visible; /* 2 */ -} - -@if $normalize-vertical-rhythm { - /** - * Set 1 unit of vertical rhythm on the top and bottom margin. - */ - - p, - pre { - @include output-rhythm(margin, rhythm(1) 0); - } -} - -pre { - @extend %monospace; +svg:not(:root) { + overflow: hidden; } /* Forms @@ -378,26 +372,35 @@ pre { /** * Known issues: - * - By default, Chrome on OS X and Safari on OS X allow very limited styling of + * - `select`: + * By default, Chrome on OS X and Safari on OS X allow very limited styling of * select, unless a border property is set. The default font weight on * optgroup elements cannot safely be changed in Chrome on OSX and Safari on * OS X. - * - It is recommended that you do not style checkbox and radio inputs as + * - `[type="checkbox"]`: + * It is recommended that you do not style checkbox and radio inputs as * Firefox's implementation does not respect box-sizing, padding, or width. - * - Certain font size values applied to number inputs cause the cursor style of - * the decrement button to change from default to text. - * - The search input is not fully stylable by default. In Chrome and Safari on - * OSX/iOS you can't control font, padding, border, or background. In Chrome - * and Safari on Windows you can't control border properly. It will apply - * border-width but will only show a border color (which cannot be controlled) - * for the outer 1px of that border. Applying -webkit-appearance: textfield - * addresses these issues without removing the benefits of search inputs (e.g. - * showing past searches). Safari (but not Chrome) will clip the cancel button - * on when it has padding (and textfield appearance). - */ - -/** - * 1. Change font properties to `inherit` in all browsers (opinionated). + * - `[type="number"]`: + * Certain font size values applied to number inputs cause the cursor style of + * the decrement button to change from `default` to `text`. + * - `[type="search"]`: + * The search input is not fully stylable by default. In Chrome and Safari on + * OSX/iOS you can't control `font`, `padding`, `border`, or `background`. In + * Chrome and Safari on Windows you can't control `border` properly. It will + * apply `border-width` but will only show a border color (which cannot be + * controlled) for the outer 1px of that border. Applying + * `-webkit-appearance: textfield` addresses these issues without removing the + * benefits of search inputs (e.g. showing past searches). Safari (but not + * Chrome) will clip the cancel button on when it has padding (and `textfield` + * appearance). + * - `::placeholder`: + * In Edge, placeholders will disappear on `relative` or `absolute` positioned + * `<input>` elements if you use `opacity` less than `1` due to a + * [bug](https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/3901363/). + */ + +/** + * 1. Change the font styles in all browsers (opinionated). * 2. Remove the margin in Firefox and Safari. */ @@ -406,7 +409,14 @@ input, optgroup, select, textarea { - font: inherit; /* 1 */ + @if $normalize-vertical-rhythm { + @include adjust-leading-to(1); /* 1 */ + } + @else { + line-height: 1.15; /* 1 */ + } + font-family: $base-font-family; /* 1 */ + font-size: 100%; /* 1 */ margin: 0; /* 2 */ } @@ -473,8 +483,8 @@ input { } /** - * 1. Add the correct box sizing in IE <11. - * 2. Remove the padding in IE <11. + * 1. Add the correct box sizing in IE 10-. + * 2. Remove the padding in IE 10-. */ [type="checkbox"], @@ -502,7 +512,7 @@ input { outline-offset: -2px; /* 2 */ /** - * Remove the inner padding and cancel buttons in Chrome and Safari on OS X. + * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. */ &::-webkit-search-cancel-button, @@ -512,15 +522,6 @@ input { } /** - * Correct the text style of placeholders in Chrome, Edge, and Safari. - */ - -::-webkit-input-placeholder { - color: inherit; - opacity: 0.54; -} - -/** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ @@ -555,17 +556,19 @@ legend { box-sizing: border-box; /* 1 */ display: table; /* 1 */ max-width: 100%; /* 1 */ - white-space: normal; /* 1 */ - color: inherit; /* 2 */ padding: 0; /* 3 */ + color: inherit; /* 2 */ + white-space: normal; /* 1 */ } /** - * Restore the font weight unset by a previous rule. + * 1. Add the correct display in IE 9-. + * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. */ -optgroup { - font-weight: bold; +progress { + display: inline-block; /* 1 */ + vertical-align: baseline; /* 2 */ } /** @@ -575,3 +578,80 @@ optgroup { textarea { overflow: auto; } + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in Edge, IE, and Firefox. + */ + +details { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* + * Add the correct display in IE 9-. + */ + +menu { + display: block; + + @if $normalize-vertical-rhythm { + /* + * 1. Set 1 unit of vertical rhythm on the top and bottom margin. + * 2. Set consistent space for the list style image. + */ + + @include output-rhythm(margin, rhythm(1) 0); /* 1 */ + padding: 0 0 0 $indent-amount; /* 2 */ + + /** + * Turn off margins on nested lists. + */ + + menu &, + ol &, + ul & { + margin: 0; + } + } +} + +/* Scripting + ========================================================================== */ + +/** + * Add the correct display in IE 9-. + */ + +canvas { + display: inline-block; +} + +/** + * Add the correct display in IE. + */ + +template { + display: none; +} + +/* Hidden + ========================================================================== */ + +/** + * Add the correct display in IE 10-. + */ + +[hidden] { + display: none; +} diff --git a/fork-versions/typey-chroma-kss/base/_html5.scss b/fork-versions/typey-chroma-kss/base/_html5.scss deleted file mode 100644 index 2a1a594..0000000 --- a/fork-versions/typey-chroma-kss/base/_html5.scss +++ /dev/null @@ -1,45 +0,0 @@ -// HTML5 display definitions -// ========================================================================== - -// Add the correct display in IE <10. -// Add the correct display in Edge, IE, and Firefox for `details` or `summary`. -// Add the correct display in IE for `main`. -article, -aside, -details, -figcaption, -figure, -footer, -header, -main, -menu, -nav, -section, -summary { - display: block; -} - -// Add the correct display in IE <10. -audio, -canvas, -progress, -video { - display: inline-block; -} - -// Add the correct display and remove excess height in iOS 4-7. -audio:not([controls]) { - display: none; - height: 0; -} - -// Add the correct vertical alignment in Chrome, Firefox, and Opera. -progress { - vertical-align: baseline; -} - -// Add the correct display in IE <11, Safari <8, and Firefox <22. -template, -[hidden] { - display: none; -} diff --git a/fork-versions/typey-chroma-kss/base/_normalize.scss b/fork-versions/typey-chroma-kss/base/_normalize.scss index 0667d0d..40f1662 100644 --- a/fork-versions/typey-chroma-kss/base/_normalize.scss +++ b/fork-versions/typey-chroma-kss/base/_normalize.scss @@ -1,15 +1,25 @@ /*! normalize-scss | MIT/GPLv2 License | bit.ly/normalize-scss */ +// Universal +// ========================================================================== + +// Use the saner border-box model for all elements. +* { + box-sizing: border-box; +} + // Normalize-scss is broken into modular pieces to make it easier to edit. -@import 'root'; -@import 'html5'; +@import 'document/document'; +@import 'sections/sections'; +@import 'grouping/grouping'; @import 'links/links'; -@import 'headings/headings'; @import 'text/text'; -@import 'grouping/grouping'; @import 'embedded/embedded'; @import 'forms/forms'; @import 'tables/tables'; +@import 'interactive/interactive'; +@import 'scripting/scripting'; +@import 'hidden/hidden'; // Note: we allow the .button component (loaded by forms) to override :link, by // loading links first. diff --git a/fork-versions/typey-chroma-kss/base/_root.scss b/fork-versions/typey-chroma-kss/base/document/_document.scss index 1c0bdf5..7c74081 100644 --- a/fork-versions/typey-chroma-kss/base/_root.scss +++ b/fork-versions/typey-chroma-kss/base/document/_document.scss @@ -1,27 +1,21 @@ // sass-lint:disable no-vendor-prefixes -// Use the saner border-box model for all elements. -* { - box-sizing: border-box; -} +// Document +// +// The default font styles are inherited from the `<html>` element. +// +// Style guide: base.document html { - @include define-type-sizing(); // Change the default font family in all browsers (opinionated). @include typeface(body); - // Prevent adjustments of font size after orientation changes in IE and iOS. + // Correct the line height in all browsers. + @include define-type-sizing(); + // Prevent adjustments of font size after orientation changes in IE on Windows + // Phone and in iOS. -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; // On short pages, we want any background gradients to fill the entire height // of the browser. min-height: 100%; } - -body { - // Output a horizontal grid to help with debugging typography. The - // $typey-debug variable will toggle its output. - @include typey-debug-grid(); - // Remove default margin and padding. - margin: 0; - padding: 0; -} diff --git a/fork-versions/typey-chroma-kss/base/embedded/_embedded.scss b/fork-versions/typey-chroma-kss/base/embedded/_embedded.scss index 23359d0..f1580cb 100644 --- a/fork-versions/typey-chroma-kss/base/embedded/_embedded.scss +++ b/fork-versions/typey-chroma-kss/base/embedded/_embedded.scss @@ -4,6 +4,21 @@ // // Style guide: base.embedded +// Audio +// +// Style guide: base.embedded.audio + +audio { + // Add the correct display in IE 9-. + display: inline-block; +} + +// Add the correct display in iOS 4-7. +audio:not([controls]) { + display: none; + height: 0; +} + // Image // // An `<img>` element represents an image. @@ -13,7 +28,7 @@ // Style guide: base.embedded.img img { - // Remove the border on images inside links in IE <11. + // Remove the border on images inside links in IE 10-. border-style: none; } @@ -39,3 +54,12 @@ svg:not(:root) { // Hide the overflow in IE. overflow: hidden; } + +// Video +// +// Style guide: base.embedded.video + +video { + // Add the correct display in IE 9-. + display: inline-block; +} diff --git a/fork-versions/typey-chroma-kss/base/forms/_forms.scss b/fork-versions/typey-chroma-kss/base/forms/_forms.scss index c59c0ff..826f588 100644 --- a/fork-versions/typey-chroma-kss/base/forms/_forms.scss +++ b/fork-versions/typey-chroma-kss/base/forms/_forms.scss @@ -22,11 +22,13 @@ input, optgroup, select, textarea { + // Change the font styles in all browsers (opinionated). + @include typeface(body); + @include line-height(1); + font-size: 100%; // Keep form elements constrained in their containers. box-sizing: border-box; max-width: 100%; - // Change font properties to `inherit` in all browsers (opinionated). - font: inherit; // Remove the margin in Firefox and Safari. margin: 0; } @@ -59,19 +61,13 @@ input { // Correct the outline style in Safari. outline-offset: -2px; - // Remove the inner padding and cancel buttons in Chrome and Safari on OS X. + // Remove the inner padding and cancel buttons in Chrome and Safari on macOS. &::-webkit-search-cancel-button, &::-webkit-search-decoration { -webkit-appearance: none; } } -// Correct the text style of placeholders in Chrome, Edge, and Safari. -::-webkit-input-placeholder { - color: inherit; - opacity: .54; -} - ::-webkit-file-upload-button { // Correct the inability to style clickable types in iOS and Safari. -webkit-appearance: button; @@ -109,6 +105,19 @@ input { // HTML5 types: `text`, `search`, `tel`, `url`, `email`, `password`, `date`, // `time`, `number`, `range`, `color`, and `file`. // +// Note: Certain font size values applied to `number` inputs cause the cursor +// style of the decrement button to change from `default` to `text`. +// +// Note: The search input is not fully stylable by default. In Chrome and Safari +// on OSX/iOS you can't control `font`, `padding`, `border`, or `background`. In +// Chrome and Safari on Windows you can't control `border` properly. It will +// apply `border-width` but will only show a border color (which cannot be +// controlled) for the outer 1px of that border. Applying +// `-webkit-appearance: textfield` addresses these issues without removing the +// benefits of search inputs (e.g. showing past searches). Safari (but not +// Chrome) will clip the cancel button on when it has padding (and `textfield` +// appearance). +// // Markup: forms-input.twig // // Style guide: forms.base.input @@ -142,8 +151,8 @@ input { // If an `<input>` element has the `type='checkbox'` attribute set, the form // field is displayed as a checkbox. // -// It's recommended that you don't attempt to style these elements. Firefox's -// implementation doesn't respect `box-sizing`, `padding`, or `width`. +// It is recommended that you do not style checkbox and radio inputs as +// Firefox's implementation does not respect box-sizing, padding, or width. // // Markup: forms-input-checkbox.twig // @@ -154,8 +163,8 @@ input { // If an `<input>` element has the `type='radio'` attribute set, the form field // is displayed as a radio button. // -// It's recommended that you don't attempt to style these elements. Firefox's -// implementation doesn't respect `box-sizing`, `padding`, or `width`. +// It is recommended that you do not style checkbox and radio inputs as +// Firefox's implementation does not respect box-sizing, padding, or width. // // Markup: forms-input-radio.twig // @@ -163,9 +172,9 @@ input { [type='checkbox'], [type='radio'] { - // Add the correct box sizing in IE <11. + // Add the correct box sizing in IE 10-. box-sizing: border-box; - // Remove the padding in IE <11. + // Remove the padding in IE 10-. padding: 0; } @@ -190,13 +199,13 @@ legend { box-sizing: border-box; display: table; max-width: 100%; - white-space: normal; - // Correct the color inheritance from `fieldset` elements in IE. - color: inherit; // Align legend text with a fieldset's text while removing left padding so // people aren't caught out if they zero out fieldset padding. margin-left: -5px; padding: 0 5px; + // Correct the color inheritance from `fieldset` elements in IE. + color: inherit; + white-space: normal; } // Labels @@ -219,7 +228,9 @@ label { // options. // // Known limitation: by default, Chrome and Safari on OS X allow very limited -// styling of `<select>`, unless a `border` property is set. +// styling of `<select>`, unless a `border` property is set. The default font +// weight on `optgroup` elements cannot safely be changed in Chrome on OSX and +// Safari on OS X. // // Markup: forms-select.twig // @@ -229,9 +240,17 @@ select { // Add your styles. } -optgroup { - // Restore the font weight unset by a previous rule. - font-weight: bold; +// Progress +// +// The `<progress>` element represents the completion progress of a task. +// +// Style guide: forms.base.progress + +progress { + // Add the correct display in IE 9-. + display: inline-block; + // Add the correct vertical alignment in Chrome, Firefox, and Opera. + vertical-align: baseline; } // Text areas diff --git a/fork-versions/typey-chroma-kss/base/grouping/_grouping.scss b/fork-versions/typey-chroma-kss/base/grouping/_grouping.scss index 820489c..bef19f5 100644 --- a/fork-versions/typey-chroma-kss/base/grouping/_grouping.scss +++ b/fork-versions/typey-chroma-kss/base/grouping/_grouping.scss @@ -63,7 +63,6 @@ blockquote { // Style guide: base.grouping.lists.dl dl, -menu, ol, ul { @include margin(1 0); @@ -90,7 +89,6 @@ dd { } } -menu, ol, ul { padding: 0 0 0 $indent-amount; @@ -115,10 +113,13 @@ ul { figure { // Add the correct margin in IE 8. @include margin(1 $indent-amount); + // Add the correct display in IE 9-. + display: block; } figcaption { - // Add your styles. + // Add the correct display in IE 9-. + display: block; } // Horizontal rule @@ -140,6 +141,17 @@ hr { overflow: visible; } +// Main +// +// The `<main>` element represents the main content of the page. +// +// Style guide: base.grouping.main + +main { + // Add the correct display in IE. + display: block; +} + // Body copy // // The default `font-size` and `line-height` properties are applied to the @@ -167,6 +179,14 @@ pre { // // Style guide: base.grouping.pre +%monospace { + // Correct the inheritance and scaling of font size in all browsers. + // The font-family value ends with ", serif". + @include typeface(monospace); + // Correct the odd `em` font sizing in all browsers. + font-size: 1em; +} + pre { @extend %monospace; } diff --git a/fork-versions/typey-chroma-kss/base/hidden/_hidden.scss b/fork-versions/typey-chroma-kss/base/hidden/_hidden.scss new file mode 100644 index 0000000..0b5bf13 --- /dev/null +++ b/fork-versions/typey-chroma-kss/base/hidden/_hidden.scss @@ -0,0 +1,10 @@ +// Hidden +// +// Some older browsers do not hide elements that have a `hidden` attribute. +// +// Style guide: base.hidden + +[hidden] { + // Add the correct display in IE 10-. + display: none; +} diff --git a/fork-versions/typey-chroma-kss/base/interactive/_interactive.scss b/fork-versions/typey-chroma-kss/base/interactive/_interactive.scss new file mode 100644 index 0000000..60bf832 --- /dev/null +++ b/fork-versions/typey-chroma-kss/base/interactive/_interactive.scss @@ -0,0 +1,41 @@ +// Interactive +// +// Style guide: base.interactive + +// Details +// +// Style guide: base.interactive.details + +details { + // Add the correct display in Edge, IE, and Firefox. + display: block; +} + +summary { + // Add the correct display in all browsers. + display: list-item; +} + +// Menu +// +// Style guide: base.interactive.menu + +menu { + // Set 1 unit of vertical rhythm on the top and bottom margin. + @include margin(1 0); + // Add the correct display in IE 9-. + display: block; + // Set consistent space for the list style image. + padding: 0 0 0 $indent-amount; + + @include rtl { + padding: 0 $indent-amount 0 0; + } + + // Turn off margins on nested lists. + menu &, + ol &, + ul & { + margin: 0; + } +} diff --git a/fork-versions/typey-chroma-kss/base/scripting/_scripting.scss b/fork-versions/typey-chroma-kss/base/scripting/_scripting.scss new file mode 100644 index 0000000..05448d9 --- /dev/null +++ b/fork-versions/typey-chroma-kss/base/scripting/_scripting.scss @@ -0,0 +1,24 @@ +// Scripting +// +// Style guide: base.scripting + +// Canvas +// +// Style guide: base.scripting.canvas + +canvas { + // Add the correct display in IE 9-. + display: inline-block; +} + +// Template +// +// Some older browsers do not hide elements the web components' `template` +// element. +// +// Style guide: base.scripting.template + +template { + // Add the correct display in IE. + display: none; +} diff --git a/fork-versions/typey-chroma-kss/base/headings/_headings.scss b/fork-versions/typey-chroma-kss/base/sections/_sections.scss index 7993211..2dd3697 100644 --- a/fork-versions/typey-chroma-kss/base/headings/_headings.scss +++ b/fork-versions/typey-chroma-kss/base/sections/_sections.scss @@ -1,3 +1,26 @@ +// Sections +// ========================================================================== + + +body { + // Output a horizontal grid to help with debugging typography. The + // $typey-debug variable will toggle its output. + @include typey-debug-grid(); + // Remove the margin in all browsers (opinionated). + margin: 0; + padding: 0; +} + +// Add the correct display in IE 9-. +article, +aside, +footer, +header, +nav, +section { + display: block; +} + // Headings // // All HTML headings, `<h1>` through `<h6>`, are available. `%h1` through `%h6` @@ -8,8 +31,8 @@ // // Style guide: base.headings -// Address variable `h1` font-size and margin within `section` and `article` -// contexts in Firefox 4+, Safari, and Chrome. +// Correct the font size and margin on `h1` elements within `section` and +// `article` contexts in Chrome, Firefox, and Safari. h1, %h1 { // Set the font-size and line-height while keeping a proper vertical rhythm. diff --git a/fork-versions/typey-chroma-kss/base/headings/headings-h.twig b/fork-versions/typey-chroma-kss/base/sections/headings-h.twig index 4806892..4806892 100644 --- a/fork-versions/typey-chroma-kss/base/headings/headings-h.twig +++ b/fork-versions/typey-chroma-kss/base/sections/headings-h.twig diff --git a/fork-versions/typey-chroma-kss/base/text/_text.scss b/fork-versions/typey-chroma-kss/base/text/_text.scss index a8b0962..c4e3083 100644 --- a/fork-versions/typey-chroma-kss/base/text/_text.scss +++ b/fork-versions/typey-chroma-kss/base/text/_text.scss @@ -16,7 +16,7 @@ // Style guide: base.text.abbr abbr[title] { - // Remove the bottom border in Firefox <40. + // Remove the bottom border in Firefox 39-. border-bottom: 0; // Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. text-decoration: underline; @@ -73,25 +73,18 @@ cite { // Code // -// The `<code>` element represents a fragment of computer code. The `<var>` -// element represents a variable. The `<samp>` element represents (sample) -// output from a program or computing system. The `<kbd>` element represents -// user input (typically keyboard input.) +// The `<code>` element represents a fragment of computer code. The `<samp>` +// element represents (sample) output from a program or computing system. The +// `<kbd>` element represents user input (typically keyboard input.) // // Markup: text-code.twig // // Style guide: base.text.code -%monospace, code, kbd, -samp, -var { - // Correct the inheritance and scaling of font size in all browsers. - // The font-family value ends with ", serif". - @include typeface(monospace); - // Correct the odd `em` font sizing in all browsers. - font-size: 1em; +samp { + @extend %monospace; } // Deleted text @@ -115,7 +108,7 @@ del { // Style guide: base.text.dfn dfn { - // Add the correct font style in Android <4.4. + // Add the correct font style in Android 4.3-. font-style: italic; } @@ -160,7 +153,7 @@ ins { // Style guide: base.text.mark mark { - // Add the correct background and color in IE <10. + // Add the correct background and color in IE 9-. background-color: color(mark-bg); color: color(text); } diff --git a/fork-versions/typey/_normalize.scss b/fork-versions/typey/_normalize.scss index d206427..7d3f02c 100644 --- a/fork-versions/typey/_normalize.scss +++ b/fork-versions/typey/_normalize.scss @@ -3,20 +3,29 @@ @import 'variables'; @import 'typey'; +/* Document + ========================================================================== */ + /** * 1. Change the default font family in all browsers (opinionated). - * 2. Prevent adjustments of font size after orientation changes in IE and iOS. + * 2. Correct the line height in all browsers. + * 3. Prevent adjustments of font size after orientation changes in + * IE on Windows Phone and in iOS. */ html { - @include define-type-sizing(); - // Show a background image that can be used to debug your alignments. - // @include debug-vertical-alignment(); - font-family: $base-font-family; /* 1 */ - -ms-text-size-adjust: 100%; /* 2 */ - -webkit-text-size-adjust: 100%; /* 2 */ + @include typeface(body); /* 1 */ + @include define-type-sizing(); /* 2 */ + // Output a horizontal grid to help with debugging typography. The + // $typey-debug variable will toggle its output. + @include typey-debug-grid(); + -ms-text-size-adjust: 100%; /* 3 */ + -webkit-text-size-adjust: 100%; /* 3 */ } +/* Sections + ========================================================================== */ + /** * Remove the margin in all browsers (opinionated). */ @@ -25,66 +34,151 @@ body { margin: 0; } -/* HTML5 display definitions - ========================================================================== */ - /** - * Add the correct display in IE <10. - * Add the correct display in Edge, IE, and Firefox for `details` or `summary`. - * Add the correct display in IE for `main`. + * Add the correct display in IE 9-. */ article, aside, -details, -figcaption, -figure, footer, header, -main, -menu, nav, -section, -summary { +section { display: block; } /** - * Add the correct display in IE <10. + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. */ -audio, -canvas, -progress, -video { - display: inline-block; +h1 { + @include type-layout(xxl, 2); + + /* Set 1 unit of vertical rhythm on the top and bottom margins. */ + @include margin(1 0, xxl); } +h2 { + @include type-layout(xl, 1.5); + @include margin(1 0, xl); +} + +h3 { + @include type-layout(l, 1); + @include margin(1 0, l); +} + +h4 { + @include type-layout(m, 1); + @include margin(1 0, m); +} + +h5 { + @include type-layout(s, 1); + @include margin(1 0, s); +} + +h6 { + @include type-layout(xs, 1); + @include margin(1 0, xs); +} + +/* Grouping content + ========================================================================== */ + /** - * Add the correct display and remove excess height in iOS 4-7. + * Set 1 unit of vertical rhythm on the top and bottom margin. */ -audio:not([controls]) { - display: none; - height: 0; +blockquote { + @include margin(1 $indent-amount); +} + +dl, +ol, +ul { + @include margin(1 0); } /** - * Add the correct vertical alignment in Chrome, Firefox, and Opera. + * Turn off margins on nested lists. */ -progress { - vertical-align: baseline; +ol, +ul { + ol, + ul { + margin: 0; + } +} + +dd { + margin: 0 0 0 $indent-amount; +} + +ol, +ul { + padding: 0 0 0 $indent-amount; } /** - * Add the correct display in IE <11, Safari <8, and Firefox <22. - * 1. Add the correct display in IE. + * Add the correct display in IE 9-. */ -template, /* 1 */ -[hidden] { - display: none; +figcaption, +figure { + display: block; +} + +/** + * Add the correct margin in IE 8. + */ + +figure { + @include margin(1 $indent-amount); +} + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * Add the correct display in IE. + */ + +main { + display: block; +} + +/** + * Set 1 unit of vertical rhythm on the top and bottom margin. + */ + +p, +pre { + @include margin(1 0); +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +%monospace { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +pre { + @extend %monospace; } /* Links @@ -114,7 +208,7 @@ a:hover { ========================================================================== */ /** - * 1. Remove the bottom border in Firefox <40. + * 1. Remove the bottom border in Firefox 39-. * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ @@ -142,21 +236,14 @@ strong { font-weight: bolder; } -/** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ - -%monospace, code, kbd, samp { - font-family: monospace, monospace; /* 1 */ - font-size: 1em; /* 2 */ + @extend %monospace; } /** - * Add the correct font style in Android <4.4. + * Add the correct font style in Android 4.3-. */ dfn { @@ -164,44 +251,7 @@ dfn { } /** - * Correct the font size and margin on `h1` elements within `section` and - * `article` contexts in Chrome, Firefox, and Safari. - */ - -h1 { - @include type-layout(xxl, 2); - - /* Set 1 unit of vertical rhythm on the top and bottom margins. */ - @include margin(1 0, xxl); -} - -h2 { - @include type-layout(xl, 1.5); - @include margin(1 0, xl); -} - -h3 { - @include type-layout(l, 1); - @include margin(1 0, l); -} - -h4 { - @include type-layout(m, 1); - @include margin(1 0, m); -} - -h5 { - @include type-layout(s, 1); - @include margin(1 0, s); -} - -h6 { - @include type-layout(xs, 1); - @include margin(1 0, xs); -} - -/** - * Add the correct background and color in IE <10. + * Add the correct background and color in IE 9-. */ mark { @@ -242,91 +292,37 @@ sup { ========================================================================== */ /** - * Remove the border on images inside links in IE <11. + * Add the correct display in IE 9-. */ -img { - border-style: none; -} - -/** - * Hide the overflow in IE. - */ - -svg:not(:root) { - overflow: hidden; -} - -/* Grouping content - ========================================================================== */ - -/** - * Set 1 unit of vertical rhythm on the top and bottom margin. - */ - -blockquote { - @include margin(1 $indent-amount); -} - -dl, -menu, -ol, -ul { - @include margin(1 0); +audio, +video { + display: inline-block; } /** - * Turn off margins on nested lists. + * Add the correct display in iOS 4-7. */ -ol, -ul { - ol, - ul { - margin: 0; - } -} - -dd { - margin: 0 0 0 $indent-amount; -} - -menu, -ol, -ul { - padding: 0 0 0 $indent-amount; +audio:not([controls]) { + display: none; + height: 0; } /** - * Add the correct margin in IE 8. + * Remove the border on images inside links in IE 10-. */ -figure { - @include margin(1 $indent-amount); -} - -/** - * 1. Add the correct box sizing in Firefox. - * 2. Show the overflow in Edge and IE. - */ - -hr { - box-sizing: content-box; /* 1 */ - height: 0; /* 1 */ - overflow: visible; /* 2 */ +img { + border-style: none; } /** - * Set 1 unit of vertical rhythm on the top and bottom margin. + * Hide the overflow in IE. */ -p, -pre { - @include margin(1 0); -} - -pre { - @extend %monospace; +svg:not(:root) { + overflow: hidden; } /* Forms @@ -334,26 +330,35 @@ pre { /** * Known issues: - * - By default, Chrome on OS X and Safari on OS X allow very limited styling of + * - `select`: + * By default, Chrome on OS X and Safari on OS X allow very limited styling of * select, unless a border property is set. The default font weight on * optgroup elements cannot safely be changed in Chrome on OSX and Safari on * OS X. - * - It is recommended that you do not style checkbox and radio inputs as + * - `[type="checkbox"]`: + * It is recommended that you do not style checkbox and radio inputs as * Firefox's implementation does not respect box-sizing, padding, or width. - * - Certain font size values applied to number inputs cause the cursor style of - * the decrement button to change from default to text. - * - The search input is not fully stylable by default. In Chrome and Safari on - * OSX/iOS you can't control font, padding, border, or background. In Chrome - * and Safari on Windows you can't control border properly. It will apply - * border-width but will only show a border color (which cannot be controlled) - * for the outer 1px of that border. Applying -webkit-appearance: textfield - * addresses these issues without removing the benefits of search inputs (e.g. - * showing past searches). Safari (but not Chrome) will clip the cancel button - * on when it has padding (and textfield appearance). - */ - -/** - * 1. Change font properties to `inherit` in all browsers (opinionated). + * - `[type="number"]`: + * Certain font size values applied to number inputs cause the cursor style of + * the decrement button to change from `default` to `text`. + * - `[type="search"]`: + * The search input is not fully stylable by default. In Chrome and Safari on + * OSX/iOS you can't control `font`, `padding`, `border`, or `background`. In + * Chrome and Safari on Windows you can't control `border` properly. It will + * apply `border-width` but will only show a border color (which cannot be + * controlled) for the outer 1px of that border. Applying + * `-webkit-appearance: textfield` addresses these issues without removing the + * benefits of search inputs (e.g. showing past searches). Safari (but not + * Chrome) will clip the cancel button on when it has padding (and `textfield` + * appearance). + * - `::placeholder`: + * In Edge, placeholders will disappear on `relative` or `absolute` positioned + * `<input>` elements if you use `opacity` less than `1` due to a + * [bug](https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/3901363/). + */ + +/** + * 1. Change the font styles in all browsers (opinionated). * 2. Remove the margin in Firefox and Safari. */ @@ -362,7 +367,9 @@ input, optgroup, select, textarea { - font: inherit; /* 1 */ + @include typeface(body); /* 1 */ + @include line-height(1); /* 1 */ + font-size: 100%; /* 1 */ margin: 0; /* 2 */ } @@ -429,8 +436,8 @@ input { } /** - * 1. Add the correct box sizing in IE <11. - * 2. Remove the padding in IE <11. + * 1. Add the correct box sizing in IE 10-. + * 2. Remove the padding in IE 10-. */ [type="checkbox"], @@ -458,7 +465,7 @@ input { outline-offset: -2px; /* 2 */ /** - * Remove the inner padding and cancel buttons in Chrome and Safari on OS X. + * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. */ &::-webkit-search-cancel-button, @@ -468,15 +475,6 @@ input { } /** - * Correct the text style of placeholders in Chrome, Edge, and Safari. - */ - -::-webkit-input-placeholder { - color: inherit; - opacity: 0.54; -} - -/** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ @@ -508,17 +506,19 @@ legend { box-sizing: border-box; /* 1 */ display: table; /* 1 */ max-width: 100%; /* 1 */ - white-space: normal; /* 1 */ - color: inherit; /* 2 */ padding: 0; /* 3 */ + color: inherit; /* 2 */ + white-space: normal; /* 1 */ } /** - * Restore the font weight unset by a previous rule. + * 1. Add the correct display in IE 9-. + * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. */ -optgroup { - font-weight: bold; +progress { + display: inline-block; /* 1 */ + vertical-align: baseline; /* 2 */ } /** @@ -528,3 +528,74 @@ optgroup { textarea { overflow: auto; } + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in Edge, IE, and Firefox. + */ + +details { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* + * 1. Set 1 unit of vertical rhythm on the top and bottom margin. + * 2. Add the correct display in IE 9-. + * 3. Set consistent space for the list style image. + */ + +menu { + @include margin(1 0); /* 1 */ + display: block; /* 2 */ + padding: 0 0 0 $indent-amount; /* 3 */ + + /** + * Turn off margins on nested lists. + */ + + menu &, + ol &, + ul & { + margin: 0; + } +} + +/* Scripting + ========================================================================== */ + +/** + * Add the correct display in IE 9-. + */ + +canvas { + display: inline-block; +} + +/** + * Add the correct display in IE. + */ + +template { + display: none; +} + +/* Hidden + ========================================================================== */ + +/** + * Add the correct display in IE 10-. + */ + +[hidden] { + display: none; +} diff --git a/fork-versions/typey/_variables.scss b/fork-versions/typey/_variables.scss index 5a14afa..0dbab32 100644 --- a/fork-versions/typey/_variables.scss +++ b/fork-versions/typey/_variables.scss @@ -17,8 +17,16 @@ $base-unit: 'rem' !default; // px fallbacks for rem units are needed for IE 8 and earlier. $rem-fallback: false !default; -// The default font family. -$base-font-family: sans-serif !default; +// The font faces you specify in the $typefaces map can be used in the +// typeface() mixin. +$typefaces: ( + body: ( + font-family: (sans-serif), + ), + monospace: ( + font-family: (monospace, monospace), + ), +) !default; // The font sizes for h1-h6 expressed as tee shirt sizes. $font-size: ( @@ -36,4 +44,4 @@ $indent-amount: 40px !default; // The following variable controls whether normalize-scss will output // font-sizes, line-heights and block-level top/bottom margins that form a basic // vertical rhythm on the page, which differs from the original Normalize.css. -$normalize-vertical-rhythm: false; +$normalize-vertical-rhythm: false !default; diff --git a/sass/normalize/_normalize-mixin.scss b/sass/normalize/_normalize-mixin.scss index c23c199..70a8d3d 100644 --- a/sass/normalize/_normalize-mixin.scss +++ b/sass/normalize/_normalize-mixin.scss @@ -39,30 +39,42 @@ or $h3-font-size != 1.17 * $base-font-size or $h4-font-size != 1 * $base-font-size or $h5-font-size != 0.83 * $base-font-size - or $h6-font-size != 0.67 * $base-font-size - or $indent-amount != 40px { + or $h6-font-size != 0.67 * $base-font-size { $normalize-vertical-rhythm: true !global; } /*! normalize-scss | MIT/GPLv2 License | bit.ly/normalize-scss */ - @if _normalize-include(root) { + @if _normalize-include(document) { + /* Document + ========================================================================== */ + /** * 1. Change the default font family in all browsers (opinionated). - * 2. Prevent adjustments of font size after orientation changes in IE and iOS. + * 2. Correct the line height in all browsers. + * 3. Prevent adjustments of font size after orientation changes in + * IE on Windows Phone and in iOS. */ html { + font-family: $base-font-family; /* 1 */ @if $normalize-vertical-rhythm { // Correct old browser bug that prevented accessible resizing of text // when root font-size is set with px or em. font-size: ($base-font-size / 16px) * 100%; - line-height: ($base-line-height / $base-font-size) * 1em; + line-height: ($base-line-height / $base-font-size) * 1em; /* 2 */ } - font-family: $base-font-family; /* 1 */ - -ms-text-size-adjust: 100%; /* 2 */ - -webkit-text-size-adjust: 100%; /* 2 */ + @else { + line-height: 1.15; /* 2 */ + } + -ms-text-size-adjust: 100%; /* 3 */ + -webkit-text-size-adjust: 100%; /* 3 */ } + } + + @if _normalize-include(sections) { + /* Sections + ========================================================================== */ /** * Remove the margin in all browsers (opinionated). @@ -71,69 +83,174 @@ body { margin: 0; } - } - - @if _normalize-include(html5) { - /* HTML5 display definitions - ========================================================================== */ /** - * Add the correct display in IE <10. - * Add the correct display in Edge, IE, and Firefox for `details` or `summary`. - * Add the correct display in IE for `main`. + * Add the correct display in IE 9-. */ article, aside, - details, - figcaption, - figure, footer, header, - main, - menu, nav, - section, - summary { + section { display: block; } /** - * Add the correct display in IE <10. + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. */ - audio, - canvas, - progress, - video { - display: inline-block; + h1 { + @include normalize-font-size($h1-font-size); + @if $normalize-vertical-rhythm { + @include normalize-line-height($h1-font-size); + } + + @if $normalize-vertical-rhythm { + /* Set 1 unit of vertical rhythm on the top and bottom margins. */ + @include normalize-margin(1 0, $h1-font-size); + } + @else { + margin: 0.67em 0; + } + } + + @if $normalize-vertical-rhythm { + h2 { + @include normalize-font-size($h2-font-size); + @include normalize-line-height($h2-font-size); + @include normalize-margin(1 0, $h2-font-size); + } + + h3 { + @include normalize-font-size($h3-font-size); + @include normalize-line-height($h3-font-size); + @include normalize-margin(1 0, $h3-font-size); + } + + h4 { + @include normalize-font-size($h4-font-size); + @include normalize-line-height($h4-font-size); + @include normalize-margin(1 0, $h4-font-size); + } + + h5 { + @include normalize-font-size($h5-font-size); + @include normalize-line-height($h5-font-size); + @include normalize-margin(1 0, $h5-font-size); + } + + h6 { + @include normalize-font-size($h6-font-size); + @include normalize-line-height($h6-font-size); + @include normalize-margin(1 0, $h6-font-size); + } + } + } + + @if _normalize-include(grouping) { + /* Grouping content + ========================================================================== */ + + @if $normalize-vertical-rhythm { + /** + * Set 1 unit of vertical rhythm on the top and bottom margin. + */ + + blockquote { + @include normalize-margin(1 $indent-amount); + } + + dl, + ol, + ul { + @include normalize-margin(1 0); + } + + /** + * Turn off margins on nested lists. + */ + + ol, + ul { + ol, + ul { + margin: 0; + } + } + + dd { + margin: 0 0 0 $indent-amount; + } + + ol, + ul { + padding: 0 0 0 $indent-amount; + } } /** - * Add the correct display and remove excess height in iOS 4-7. + * Add the correct display in IE 9-. */ - audio:not([controls]) { - display: none; - height: 0; + figcaption, + figure { + display: block; } /** - * Add the correct vertical alignment in Chrome, Firefox, and Opera. + * Add the correct margin in IE 8. */ - progress { - vertical-align: baseline; + figure { + @if $normalize-vertical-rhythm { + @include normalize-margin(1 $indent-amount); + } + @else { + margin: 1em $indent-amount; + } } /** - * Add the correct display in IE <11, Safari <8, and Firefox <22. - * 1. Add the correct display in IE. + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. */ - template, /* 1 */ - [hidden] { - display: none; + hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ + } + + /** + * Add the correct display in IE. + */ + + main { + display: block; + } + + @if $normalize-vertical-rhythm { + /** + * Set 1 unit of vertical rhythm on the top and bottom margin. + */ + + p, + pre { + @include normalize-margin(1 0); + } + } + + /** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + + pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ } } @@ -167,7 +284,7 @@ ========================================================================== */ /** - * 1. Remove the bottom border in Firefox <40. + * 1. Remove the bottom border in Firefox 39-. * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ @@ -203,12 +320,12 @@ code, kbd, samp { - font-family: monospace, monospace; - font-size: 1em; + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ } /** - * Add the correct font style in Android <4.4. + * Add the correct font style in Android 4.3-. */ dfn { @@ -216,54 +333,7 @@ } /** - * Correct the font size and margin on `h1` elements within `section` and - * `article` contexts in Chrome, Firefox, and Safari. - */ - - h1 { - @include normalize-font-size($h1-font-size); - @if $normalize-vertical-rhythm { - @include normalize-line-height($h1-font-size); - } - - /* Set 1 unit of vertical rhythm on the top and bottom margins. */ - @include normalize-margin(1 0, $h1-font-size); - } - - @if $normalize-vertical-rhythm { - h2 { - @include normalize-font-size($h2-font-size); - @include normalize-line-height($h2-font-size); - @include normalize-margin(1 0, $h2-font-size); - } - - h3 { - @include normalize-font-size($h3-font-size); - @include normalize-line-height($h3-font-size); - @include normalize-margin(1 0, $h3-font-size); - } - - h4 { - @include normalize-font-size($h4-font-size); - @include normalize-line-height($h4-font-size); - @include normalize-margin(1 0, $h4-font-size); - } - - h5 { - @include normalize-font-size($h5-font-size); - @include normalize-line-height($h5-font-size); - @include normalize-margin(1 0, $h5-font-size); - } - - h6 { - @include normalize-font-size($h6-font-size); - @include normalize-line-height($h6-font-size); - @include normalize-margin(1 0, $h6-font-size); - } - } - - /** - * Add the correct background and color in IE <10. + * Add the correct background and color in IE 9-. */ mark { @@ -306,98 +376,37 @@ ========================================================================== */ /** - * Remove the border on images inside links in IE <11. + * Add the correct display in IE 9-. */ - img { - border-style: none; + audio, + video { + display: inline-block; } /** - * Hide the overflow in IE. + * Add the correct display in iOS 4-7. */ - svg:not(:root) { - overflow: hidden; - } - } - - @if _normalize-include(grouping) { - /* Grouping content - ========================================================================== */ - - @if $normalize-vertical-rhythm { - /** - * Set 1 unit of vertical rhythm on the top and bottom margin. - */ - - blockquote { - @include normalize-margin(1 $indent-amount); - } - - dl, - menu, - ol, - ul { - @include normalize-margin(1 0); - } - - /** - * Turn off margins on nested lists. - */ - - ol, - ul { - ol, - ul { - margin: 0; - } - } - - dd { - margin: 0 0 0 $indent-amount; - } - - menu, - ol, - ul { - padding: 0 0 0 $indent-amount; - } + audio:not([controls]) { + display: none; + height: 0; } /** - * Add the correct margin in IE 8. + * Remove the border on images inside links in IE 10-. */ - figure { - @include normalize-margin(1 $indent-amount); + img { + border-style: none; } /** - * 1. Add the correct box sizing in Firefox. - * 2. Show the overflow in Edge and IE. + * Hide the overflow in IE. */ - hr { - box-sizing: content-box; /* 1 */ - height: 0; /* 1 */ - overflow: visible; /* 2 */ - } - - @if $normalize-vertical-rhythm { - /** - * Set 1 unit of vertical rhythm on the top and bottom margin. - */ - - p, - pre { - @include normalize-margin(1 0); - } - } - - pre { - font-family: monospace, monospace; - font-size: 1em; + svg:not(:root) { + overflow: hidden; } } @@ -406,27 +415,7 @@ ========================================================================== */ /** - * Known issues: - * - By default, Chrome on OS X and Safari on OS X allow very limited styling of - * select, unless a border property is set. The default font weight on - * optgroup elements cannot safely be changed in Chrome on OSX and Safari on - * OS X. - * - It is recommended that you do not style checkbox and radio inputs as - * Firefox's implementation does not respect box-sizing, padding, or width. - * - Certain font size values applied to number inputs cause the cursor style of - * the decrement button to change from default to text. - * - The search input is not fully stylable by default. In Chrome and Safari on - * OSX/iOS you can't control font, padding, border, or background. In Chrome - * and Safari on Windows you can't control border properly. It will apply - * border-width but will only show a border color (which cannot be controlled) - * for the outer 1px of that border. Applying -webkit-appearance: textfield - * addresses these issues without removing the benefits of search inputs (e.g. - * showing past searches). Safari (but not Chrome) will clip the cancel button - * on when it has padding (and textfield appearance). - */ - - /** - * 1. Change font properties to `inherit` in all browsers (opinionated). + * 1. Change the font styles in all browsers (opinionated). * 2. Remove the margin in Firefox and Safari. */ @@ -435,7 +424,14 @@ optgroup, select, textarea { - font: inherit; /* 1 */ + font-family: $base-font-family; /* 1 */ + font-size: 100%; /* 1 */ + @if $normalize-vertical-rhythm { + line-height: ($base-line-height / $base-font-size) * 1em; /* 1 */ + } + @else { + line-height: 1.15; /* 1 */ + } margin: 0; /* 2 */ } @@ -502,8 +498,8 @@ } /** - * 1. Add the correct box sizing in IE <11. - * 2. Remove the padding in IE <11. + * 1. Add the correct box sizing in IE 10-. + * 2. Remove the padding in IE 10-. */ [type="checkbox"], @@ -531,7 +527,7 @@ outline-offset: -2px; /* 2 */ /** - * Remove the inner padding and cancel buttons in Chrome and Safari on OS X. + * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. */ &::-webkit-search-cancel-button, @@ -541,15 +537,6 @@ } /** - * Correct the text style of placeholders in Chrome, Edge, and Safari. - */ - - ::-webkit-input-placeholder { - color: inherit; - opacity: 0.54; - } - - /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ @@ -580,17 +567,19 @@ box-sizing: border-box; /* 1 */ display: table; /* 1 */ max-width: 100%; /* 1 */ - white-space: normal; /* 1 */ - color: inherit; /* 2 */ padding: 0; /* 3 */ + color: inherit; /* 2 */ + white-space: normal; /* 1 */ } /** - * Restore the font weight unset by a previous rule. + * 1. Add the correct display in IE 9-. + * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. */ - optgroup { - font-weight: bold; + progress { + display: inline-block; /* 1 */ + vertical-align: baseline; /* 2 */ } /** @@ -601,4 +590,87 @@ overflow: auto; } } + + @if _normalize-include(interactive) { + /* Interactive + ========================================================================== */ + + /* + * Add the correct display in Edge, IE, and Firefox. + */ + + details { + display: block; + } + + /* + * Add the correct display in all browsers. + */ + + summary { + display: list-item; + } + + /* + * Add the correct display in IE 9-. + */ + + menu { + display: block; + + @if $normalize-vertical-rhythm { + /* + * 1. Set 1 unit of vertical rhythm on the top and bottom margin. + * 2. Set consistent space for the list style image. + */ + + @include normalize-margin(1 0); /* 1 */ + padding: 0 0 0 $indent-amount; /* 2 */ + + /** + * Turn off margins on nested lists. + */ + + menu &, + ol &, + ul & { + margin: 0; + } + } + } + } + + @if _normalize-include(scripting) { + /* Scripting + ========================================================================== */ + + /** + * Add the correct display in IE 9-. + */ + + canvas { + display: inline-block; + } + + /** + * Add the correct display in IE. + */ + + template { + display: none; + } + } + + @if _normalize-include(hidden) { + /* Hidden + ========================================================================== */ + + /** + * Add the correct display in IE 10-. + */ + + [hidden] { + display: none; + } + } } diff --git a/test/fixtures/fork-versions/default/output.css b/test/fixtures/fork-versions/default/output.css index 5373667..5c89210 100644 --- a/test/fixtures/fork-versions/default/output.css +++ b/test/fixtures/fork-versions/default/output.css @@ -1,72 +1,93 @@ /*! normalize-scss | MIT/GPLv2 License | bit.ly/normalize-scss */ +/* Document + ========================================================================== */ /** * 1. Change the default font family in all browsers (opinionated). - * 2. Prevent adjustments of font size after orientation changes in IE and iOS. + * 2. Correct the line height in all browsers. + * 3. Prevent adjustments of font size after orientation changes in + * IE on Windows Phone and in iOS. */ html { font-family: sans-serif; /* 1 */ - -ms-text-size-adjust: 100%; + line-height: 1.15; /* 2 */ + -ms-text-size-adjust: 100%; + /* 3 */ -webkit-text-size-adjust: 100%; - /* 2 */ } + /* 3 */ } +/* Sections + ========================================================================== */ /** * Remove the margin in all browsers (opinionated). */ body { margin: 0; } -/* HTML5 display definitions - ========================================================================== */ /** - * Add the correct display in IE <10. - * Add the correct display in Edge, IE, and Firefox for `details` or `summary`. - * Add the correct display in IE for `main`. + * Add the correct display in IE 9-. */ article, aside, -details, -figcaption, -figure, footer, header, -main, -menu, nav, -section, -summary { +section { display: block; } /** - * Add the correct display in IE <10. + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. */ -audio, -canvas, -progress, -video { - display: inline-block; } +h1 { + font-size: 2em; + margin: 0.67em 0; } +/* Grouping content + ========================================================================== */ /** - * Add the correct display and remove excess height in iOS 4-7. + * Add the correct display in IE 9-. */ -audio:not([controls]) { - display: none; - height: 0; } +figcaption, +figure { + display: block; } /** - * Add the correct vertical alignment in Chrome, Firefox, and Opera. + * Add the correct margin in IE 8. */ -progress { - vertical-align: baseline; } +figure { + margin: 1em 40px; } /** - * Add the correct display in IE <11, Safari <8, and Firefox <22. - * 1. Add the correct display in IE. + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. */ -template, -[hidden] { - display: none; } +hr { + box-sizing: content-box; + /* 1 */ + height: 0; + /* 1 */ + overflow: visible; + /* 2 */ } + +/** + * Add the correct display in IE. + */ +main { + display: block; } + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ +pre, code, +kbd, +samp { + font-family: monospace, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ } /* Links ========================================================================== */ @@ -91,7 +112,7 @@ a:hover { /* Text-level semantics ========================================================================== */ /** - * 1. Remove the bottom border in Firefox <40. + * 1. Remove the bottom border in Firefox 39-. * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { @@ -117,35 +138,13 @@ strong { font-weight: bolder; } /** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ -pre, -code, -kbd, -samp { - font-family: monospace, monospace; - /* 1 */ - font-size: 1em; - /* 2 */ } - -/** - * Add the correct font style in Android <4.4. + * Add the correct font style in Android 4.3-. */ dfn { font-style: italic; } /** - * Correct the font size and margin on `h1` elements within `section` and - * `article` contexts in Chrome, Firefox, and Safari. - */ -h1 { - font-size: 2em; - /* Set 1 unit of vertical rhythm on the top and bottom margins. */ - margin: 0.75em 0; } - -/** - * Add the correct background and color in IE <10. + * Add the correct background and color in IE 9-. */ mark { background-color: #ff0; @@ -177,60 +176,63 @@ sup { /* Embedded content ========================================================================== */ /** - * Remove the border on images inside links in IE <11. + * Add the correct display in IE 9-. */ -img { - border-style: none; } +audio, +video { + display: inline-block; } /** - * Hide the overflow in IE. + * Add the correct display in iOS 4-7. */ -svg:not(:root) { - overflow: hidden; } +audio:not([controls]) { + display: none; + height: 0; } -/* Grouping content - ========================================================================== */ /** - * Add the correct margin in IE 8. + * Remove the border on images inside links in IE 10-. */ -figure { - margin: 1.5em 40px; } +img { + border-style: none; } /** - * 1. Add the correct box sizing in Firefox. - * 2. Show the overflow in Edge and IE. + * Hide the overflow in IE. */ -hr { - box-sizing: content-box; - /* 1 */ - height: 0; - /* 1 */ - overflow: visible; - /* 2 */ } +svg:not(:root) { + overflow: hidden; } /* Forms ========================================================================== */ /** * Known issues: - * - By default, Chrome on OS X and Safari on OS X allow very limited styling of + * - `select`: + * By default, Chrome on OS X and Safari on OS X allow very limited styling of * select, unless a border property is set. The default font weight on * optgroup elements cannot safely be changed in Chrome on OSX and Safari on * OS X. - * - It is recommended that you do not style checkbox and radio inputs as + * - `[type="checkbox"]`: + * It is recommended that you do not style checkbox and radio inputs as * Firefox's implementation does not respect box-sizing, padding, or width. - * - Certain font size values applied to number inputs cause the cursor style of - * the decrement button to change from default to text. - * - The search input is not fully stylable by default. In Chrome and Safari on - * OSX/iOS you can't control font, padding, border, or background. In Chrome - * and Safari on Windows you can't control border properly. It will apply - * border-width but will only show a border color (which cannot be controlled) - * for the outer 1px of that border. Applying -webkit-appearance: textfield - * addresses these issues without removing the benefits of search inputs (e.g. - * showing past searches). Safari (but not Chrome) will clip the cancel button - * on when it has padding (and textfield appearance). - */ -/** - * 1. Change font properties to `inherit` in all browsers (opinionated). + * - `[type="number"]`: + * Certain font size values applied to number inputs cause the cursor style of + * the decrement button to change from `default` to `text`. + * - `[type="search"]`: + * The search input is not fully stylable by default. In Chrome and Safari on + * OSX/iOS you can't control `font`, `padding`, `border`, or `background`. In + * Chrome and Safari on Windows you can't control `border` properly. It will + * apply `border-width` but will only show a border color (which cannot be + * controlled) for the outer 1px of that border. Applying + * `-webkit-appearance: textfield` addresses these issues without removing the + * benefits of search inputs (e.g. showing past searches). Safari (but not + * Chrome) will clip the cancel button on when it has padding (and `textfield` + * appearance). + * - `::placeholder`: + * In Edge, placeholders will disappear on `relative` or `absolute` positioned + * `<input>` elements if you use `opacity` less than `1` due to a + * [bug](https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/3901363/). + */ +/** + * 1. Change the font styles in all browsers (opinionated). * 2. Remove the margin in Firefox and Safari. */ button, @@ -238,7 +240,11 @@ input, optgroup, select, textarea { - font: inherit; + line-height: 1.15; + /* 1 */ + font-family: sans-serif; + /* 1 */ + font-size: 100%; /* 1 */ margin: 0; /* 2 */ } @@ -299,8 +305,8 @@ input { overflow: visible; } /** - * 1. Add the correct box sizing in IE <11. - * 2. Remove the padding in IE <11. + * 1. Add the correct box sizing in IE 10-. + * 2. Remove the padding in IE 10-. */ [type="checkbox"], [type="radio"] { @@ -326,19 +332,12 @@ input { outline-offset: -2px; /* 2 */ /** - * Remove the inner padding and cancel buttons in Chrome and Safari on OS X. + * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. */ } [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** - * Correct the text style of placeholders in Chrome, Edge, and Safari. - */ -::-webkit-input-placeholder { - color: inherit; - opacity: 0.54; } - -/** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ @@ -369,21 +368,67 @@ legend { /* 1 */ max-width: 100%; /* 1 */ - white-space: normal; - /* 1 */ + padding: 0; + /* 3 */ color: inherit; /* 2 */ - padding: 0; - /* 3 */ } + white-space: normal; + /* 1 */ } /** - * Restore the font weight unset by a previous rule. + * 1. Add the correct display in IE 9-. + * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. */ -optgroup { - font-weight: bold; } +progress { + display: inline-block; + /* 1 */ + vertical-align: baseline; + /* 2 */ } /** * Remove the default vertical scrollbar in IE. */ textarea { overflow: auto; } + +/* Interactive + ========================================================================== */ +/* + * Add the correct display in Edge, IE, and Firefox. + */ +details { + display: block; } + +/* + * Add the correct display in all browsers. + */ +summary { + display: list-item; } + +/* + * Add the correct display in IE 9-. + */ +menu { + display: block; } + +/* Scripting + ========================================================================== */ +/** + * Add the correct display in IE 9-. + */ +canvas { + display: inline-block; } + +/** + * Add the correct display in IE. + */ +template { + display: none; } + +/* Hidden + ========================================================================== */ +/** + * Add the correct display in IE 10-. + */ +[hidden] { + display: none; } diff --git a/test/fixtures/fork-versions/deprecated-compass/output.css b/test/fixtures/fork-versions/deprecated-compass/output.css index 9ae6053..d99d989 100644 --- a/test/fixtures/fork-versions/deprecated-compass/output.css +++ b/test/fixtures/fork-versions/deprecated-compass/output.css @@ -1,7 +1,21 @@ /*! normalize-scss | MIT/GPLv2 License | bit.ly/normalize-scss */ +/* Document + ========================================================================== */ +/** + * 1. Establish a vertical rhythm unit using $base-font-size, $base-line-height, + * and $rhythm-unit variables. + * 2. Correct old browser bug that prevented accessible resizing of text when + * root font-size is set with px or em. + * 3. Correct the line height in all browsers. + */ +html { + font-size: 100%; + line-height: 1.5em; } + /** * 1. Change the default font family in all browsers (opinionated). - * 2. Prevent adjustments of font size after orientation changes in IE and iOS. + * 2. Prevent adjustments of font size after orientation changes in + * IE on Windows Phone and in iOS. */ html { font-family: sans-serif; @@ -11,62 +25,82 @@ html { -webkit-text-size-adjust: 100%; /* 2 */ } +/* Sections + ========================================================================== */ /** * Remove the margin in all browsers (opinionated). */ body { margin: 0; } -/* HTML5 display definitions - ========================================================================== */ /** - * Add the correct display in IE <10. - * Add the correct display in Edge, IE, and Firefox for `details` or `summary`. - * Add the correct display in IE for `main`. + * Add the correct display in IE 9-. */ article, aside, -details, -figcaption, -figure, footer, header, -main, -menu, nav, -section, -summary { +section { display: block; } /** - * Add the correct display in IE <10. + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. */ -audio, -canvas, -progress, -video { - display: inline-block; } +h1 { + /* Set the font-size and line-height while keeping a proper vertical rhythm. */ + font-size: 2em; + /* Set 1 unit of vertical rhythm on the top and bottom margins. */ + margin-top: 0.75em; + margin-bottom: 0.75em; } +/* Grouping content + ========================================================================== */ /** - * Add the correct display and remove excess height in iOS 4-7. + * Add the correct display in IE 9-. */ -audio:not([controls]) { - display: none; - height: 0; } +figcaption, +figure { + display: block; } /** - * Add the correct vertical alignment in Chrome, Firefox, and Opera. + * Add the correct margin in IE 8. */ -progress { - vertical-align: baseline; } +figure { + margin: 1.5em 40px; } /** - * Add the correct display in IE <11, Safari <8, and Firefox <22. - * 1. Add the correct display in IE. + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. */ -template, -[hidden] { - display: none; } +hr { + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; + box-sizing: content-box; + /* 1 */ + height: 0; + /* 1 */ + overflow: visible; + /* 2 */ } + +/** + * Add the correct display in IE. + */ +main { + display: block; } + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ +pre, code, +kbd, +samp { + font-family: monospace, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ } /* Links ========================================================================== */ @@ -91,7 +125,7 @@ a:hover { /* Text-level semantics ========================================================================== */ /** - * 1. Remove the bottom border in Firefox <40. + * 1. Remove the bottom border in Firefox 39-. * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { @@ -117,37 +151,13 @@ strong { font-weight: bolder; } /** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ -pre, -code, -kbd, -samp { - font-family: monospace, monospace; - /* 1 */ - font-size: 1em; - /* 2 */ } - -/** - * Add the correct font style in Android <4.4. + * Add the correct font style in Android 4.3-. */ dfn { font-style: italic; } /** - * Correct the font size and margin on `h1` elements within `section` and - * `article` contexts in Chrome, Firefox, and Safari. - */ -h1 { - /* Set the font-size and line-height while keeping a proper vertical rhythm. */ - font-size: 2em; - /* Set 1 unit of vertical rhythm on the top and bottom margins. */ - margin-top: 0.75em; - margin-bottom: 0.75em; } - -/** - * Add the correct background and color in IE <10. + * Add the correct background and color in IE 9-. */ mark { background-color: #ff0; @@ -179,62 +189,63 @@ sup { /* Embedded content ========================================================================== */ /** - * Remove the border on images inside links in IE <11. + * Add the correct display in IE 9-. */ -img { - border-style: none; } +audio, +video { + display: inline-block; } /** - * Hide the overflow in IE. + * Add the correct display in iOS 4-7. */ -svg:not(:root) { - overflow: hidden; } +audio:not([controls]) { + display: none; + height: 0; } -/* Grouping content - ========================================================================== */ /** - * Add the correct margin in IE 8. + * Remove the border on images inside links in IE 10-. */ -figure { - margin: 1.5em 40px; } +img { + border-style: none; } /** - * 1. Add the correct box sizing in Firefox. - * 2. Show the overflow in Edge and IE. + * Hide the overflow in IE. */ -hr { - -moz-box-sizing: content-box; - -webkit-box-sizing: content-box; - box-sizing: content-box; - /* 1 */ - height: 0; - /* 1 */ - overflow: visible; - /* 2 */ } +svg:not(:root) { + overflow: hidden; } /* Forms ========================================================================== */ /** * Known issues: - * - By default, Chrome on OS X and Safari on OS X allow very limited styling of + * - `select`: + * By default, Chrome on OS X and Safari on OS X allow very limited styling of * select, unless a border property is set. The default font weight on * optgroup elements cannot safely be changed in Chrome on OSX and Safari on * OS X. - * - It is recommended that you do not style checkbox and radio inputs as + * - `[type="checkbox"]`: + * It is recommended that you do not style checkbox and radio inputs as * Firefox's implementation does not respect box-sizing, padding, or width. - * - Certain font size values applied to number inputs cause the cursor style of - * the decrement button to change from default to text. - * - The search input is not fully stylable by default. In Chrome and Safari on - * OSX/iOS you can't control font, padding, border, or background. In Chrome - * and Safari on Windows you can't control border properly. It will apply - * border-width but will only show a border color (which cannot be controlled) - * for the outer 1px of that border. Applying -webkit-appearance: textfield - * addresses these issues without removing the benefits of search inputs (e.g. - * showing past searches). Safari (but not Chrome) will clip the cancel button - * on when it has padding (and textfield appearance). - */ -/** - * 1. Change font properties to `inherit` in all browsers (opinionated). + * - `[type="number"]`: + * Certain font size values applied to number inputs cause the cursor style of + * the decrement button to change from `default` to `text`. + * - `[type="search"]`: + * The search input is not fully stylable by default. In Chrome and Safari on + * OSX/iOS you can't control `font`, `padding`, `border`, or `background`. In + * Chrome and Safari on Windows you can't control `border` properly. It will + * apply `border-width` but will only show a border color (which cannot be + * controlled) for the outer 1px of that border. Applying + * `-webkit-appearance: textfield` addresses these issues without removing the + * benefits of search inputs (e.g. showing past searches). Safari (but not + * Chrome) will clip the cancel button on when it has padding (and `textfield` + * appearance). + * - `::placeholder`: + * In Edge, placeholders will disappear on `relative` or `absolute` positioned + * `<input>` elements if you use `opacity` less than `1` due to a + * [bug](https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/3901363/). + */ +/** + * 1. Change the font styles in all browsers (opinionated). * 2. Remove the margin in Firefox and Safari. */ button, @@ -242,7 +253,11 @@ input, optgroup, select, textarea { - font: inherit; + line-height: 1.15; + /* 1 */ + font-family: sans-serif; + /* 1 */ + font-size: 100%; /* 1 */ margin: 0; /* 2 */ } @@ -303,8 +318,8 @@ input { overflow: visible; } /** - * 1. Add the correct box sizing in IE <11. - * 2. Remove the padding in IE <11. + * 1. Add the correct box sizing in IE 10-. + * 2. Remove the padding in IE 10-. */ [type="checkbox"], [type="radio"] { @@ -332,19 +347,12 @@ input { outline-offset: -2px; /* 2 */ /** - * Remove the inner padding and cancel buttons in Chrome and Safari on OS X. + * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. */ } [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** - * Correct the text style of placeholders in Chrome, Edge, and Safari. - */ -::-webkit-input-placeholder { - color: inherit; - opacity: 0.54; } - -/** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ @@ -387,21 +395,67 @@ legend { /* 1 */ max-width: 100%; /* 1 */ - white-space: normal; - /* 1 */ + padding: 0; + /* 3 */ color: inherit; /* 2 */ - padding: 0; - /* 3 */ } + white-space: normal; + /* 1 */ } /** - * Restore the font weight unset by a previous rule. + * 1. Add the correct display in IE 9-. + * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. */ -optgroup { - font-weight: bold; } +progress { + display: inline-block; + /* 1 */ + vertical-align: baseline; + /* 2 */ } /** * Remove the default vertical scrollbar in IE. */ textarea { overflow: auto; } + +/* Interactive + ========================================================================== */ +/* + * Add the correct display in Edge, IE, and Firefox. + */ +details { + display: block; } + +/* + * Add the correct display in all browsers. + */ +summary { + display: list-item; } + +/* + * Add the correct display in IE 9-. + */ +menu { + display: block; } + +/* Scripting + ========================================================================== */ +/** + * Add the correct display in IE 9-. + */ +canvas { + display: inline-block; } + +/** + * Add the correct display in IE. + */ +template { + display: none; } + +/* Hidden + ========================================================================== */ +/** + * Add the correct display in IE 10-. + */ +[hidden] { + display: none; } diff --git a/test/fixtures/fork-versions/typey-chroma-kss/output.css b/test/fixtures/fork-versions/typey-chroma-kss/output.css index 18f47b0..f8de1ee 100644 --- a/test/fixtures/fork-versions/typey-chroma-kss/output.css +++ b/test/fixtures/fork-versions/typey-chroma-kss/output.css @@ -3,9 +3,9 @@ box-sizing: border-box; } html { + font-family: Verdana, Tahoma, "DejaVu Sans", sans-serif; font-size: 100%; line-height: 1.5em; - font-family: Verdana, Tahoma, "DejaVu Sans", sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; min-height: 100%; } @@ -19,64 +19,12 @@ body { article, aside, -details, -figcaption, -figure, footer, header, -main, -menu, nav, -section, -summary { +section { display: block; } -audio, -canvas, -progress, -video { - display: inline-block; } - -audio:not([controls]) { - display: none; - height: 0; } - -progress { - vertical-align: baseline; } - -template, -[hidden] { - display: none; } - -a { - color: #0072b9; - -webkit-text-decoration-skip: objects; } - -:visited { - color: #003353; } - -a:active { - color: #c00; } - a:active:not(.button) { - background-color: transparent; } - -a:active, -a:hover { - outline-width: 0; } - -@media print { - :link, - :visited { - text-decoration: underline; } - a[href]:after { - content: " (" attr(href) ")"; - font-weight: normal; - font-size: 16px; - text-decoration: none; } - a[href^='javascript:']:after, - a[href^='#']:after { - content: ''; } } - h1 { font-size: 2rem; line-height: 3rem; @@ -113,6 +61,89 @@ h6 { margin-top: 1.5rem; margin-bottom: 1.5rem; } +.divider, +hr { + margin: 1.5rem 0; + border: 0; + border-top: 1px solid #cccccc; } + .divider > :first-child, hr > :first-child { + margin-top: 1.5rem; } + +blockquote { + margin: 1.5rem 2rem; } + +dl, +ol, +ul { + margin: 1.5rem 0; } + +ol ol, +ol ul, +ul ol, +ul ul { + margin: 0; } + +dd { + margin: 0 0 0 32px; } + +ol, +ul { + padding: 0 0 0 32px; } + +figure { + margin: 1.5rem 2rem; + display: block; } + +figcaption { + display: block; } + +hr { + box-sizing: content-box; + height: 0; + overflow: visible; } + +main { + display: block; } + +p, +pre { + margin: 1.5rem 0; } + +pre, code, +kbd, +samp { + font-family: Menlo, "DejaVu Sans Mono", "Ubuntu Mono", Courier, "Courier New", monospace, sans-serif; + font-size: 1em; } + +a { + color: #0072b9; + -webkit-text-decoration-skip: objects; } + +:visited { + color: #003353; } + +a:active { + color: #c00; } + a:active:not(.button) { + background-color: transparent; } + +a:active, +a:hover { + outline-width: 0; } + +@media print { + :link, + :visited { + text-decoration: underline; } + a[href]:after { + content: " (" attr(href) ")"; + font-weight: normal; + font-size: 16px; + text-decoration: none; } + a[href^='javascript:']:after, + a[href^='#']:after { + content: ''; } } + abbr[title] { border-bottom: 0; text-decoration: underline; @@ -129,14 +160,6 @@ b, strong { font-weight: bolder; } -pre, -code, -kbd, -samp, -var { - font-family: Menlo, "DejaVu Sans Mono", "Ubuntu Mono", Courier, "Courier New", monospace, sans-serif; - font-size: 1em; } - dfn { font-style: italic; } @@ -160,48 +183,12 @@ sub { sup { top: -.5em; } -.divider, -hr { - margin: 1.5rem 0; - border: 0; - border-top: 1px solid #cccccc; } - .divider > :first-child, hr > :first-child { - margin-top: 1.5rem; } - -blockquote { - margin: 1.5rem 2rem; } - -dl, -menu, -ol, -ul { - margin: 1.5rem 0; } - -ol ol, -ol ul, -ul ol, -ul ul { - margin: 0; } - -dd { - margin: 0 0 0 32px; } - -menu, -ol, -ul { - padding: 0 0 0 32px; } - -figure { - margin: 1.5rem 2rem; } - -hr { - box-sizing: content-box; - height: 0; - overflow: visible; } +audio { + display: inline-block; } -p, -pre { - margin: 1.5rem 0; } +audio:not([controls]) { + display: none; + height: 0; } img { border-style: none; } @@ -214,14 +201,19 @@ svg { svg:not(:root) { overflow: hidden; } +video { + display: inline-block; } + button, input, optgroup, select, textarea { + font-family: Verdana, Tahoma, "DejaVu Sans", sans-serif; + line-height: 1.5rem; + font-size: 100%; box-sizing: border-box; max-width: 100%; - font: inherit; margin: 0; } button { @@ -244,10 +236,6 @@ input { [type='search']::-webkit-search-cancel-button, [type='search']::-webkit-search-decoration { -webkit-appearance: none; } -::-webkit-input-placeholder { - color: inherit; - opacity: .54; } - ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } @@ -336,13 +324,14 @@ legend { box-sizing: border-box; display: table; max-width: 100%; - white-space: normal; - color: inherit; margin-left: -5px; - padding: 0 5px; } + padding: 0 5px; + color: inherit; + white-space: normal; } -optgroup { - font-weight: bold; } +progress { + display: inline-block; + vertical-align: baseline; } textarea { overflow: auto; } @@ -356,3 +345,27 @@ table { td, th { padding: 0; } + +details { + display: block; } + +summary { + display: list-item; } + +menu { + margin: 1.5rem 0; + display: block; + padding: 0 0 0 32px; } + menu menu, + ol menu, + ul menu { + margin: 0; } + +canvas { + display: inline-block; } + +template { + display: none; } + +[hidden] { + display: none; } diff --git a/test/fixtures/fork-versions/typey/output.css b/test/fixtures/fork-versions/typey/output.css index 35c8cdc..0ddace9 100644 --- a/test/fixtures/fork-versions/typey/output.css +++ b/test/fixtures/fork-versions/typey/output.css @@ -1,77 +1,158 @@ /*! normalize-scss | MIT/GPLv2 License | bit.ly/normalize-scss */ +/* Document + ========================================================================== */ /** * 1. Change the default font family in all browsers (opinionated). - * 2. Prevent adjustments of font size after orientation changes in IE and iOS. + * 2. Correct the line height in all browsers. + * 3. Prevent adjustments of font size after orientation changes in + * IE on Windows Phone and in iOS. */ html { - font-size: 100%; - line-height: 1.5em; font-family: sans-serif; /* 1 */ - -ms-text-size-adjust: 100%; + font-size: 100%; + line-height: 1.5em; /* 2 */ + -ms-text-size-adjust: 100%; + /* 3 */ -webkit-text-size-adjust: 100%; - /* 2 */ } + /* 3 */ } @media print { html { font-size: 12pt; } } +/* Sections + ========================================================================== */ /** * Remove the margin in all browsers (opinionated). */ body { margin: 0; } -/* HTML5 display definitions - ========================================================================== */ /** - * Add the correct display in IE <10. - * Add the correct display in Edge, IE, and Firefox for `details` or `summary`. - * Add the correct display in IE for `main`. + * Add the correct display in IE 9-. */ article, aside, -details, -figcaption, -figure, footer, header, -main, -menu, nav, -section, -summary { +section { display: block; } /** - * Add the correct display in IE <10. + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. */ -audio, -canvas, -progress, -video { - display: inline-block; } +h1 { + font-size: 2rem; + line-height: 3rem; + /* Set 1 unit of vertical rhythm on the top and bottom margins. */ + margin: 1.5rem 0; } + +h2 { + font-size: 1.5rem; + line-height: 2.25rem; + margin: 1.5rem 0; } + +h3 { + font-size: 1.25rem; + line-height: 1.5rem; + margin: 1.5rem 0; } + +h4 { + font-size: 1rem; + line-height: 1.5rem; + margin: 1.5rem 0; } + +h5 { + font-size: 0.875rem; + line-height: 1.5rem; + margin: 1.5rem 0; } + +h6 { + font-size: 0.625rem; + line-height: 1.5rem; + margin: 1.5rem 0; } +/* Grouping content + ========================================================================== */ /** - * Add the correct display and remove excess height in iOS 4-7. + * Set 1 unit of vertical rhythm on the top and bottom margin. */ -audio:not([controls]) { - display: none; - height: 0; } +blockquote { + margin: 1.5rem 2.5rem; } + +dl, +ol, +ul { + margin: 1.5rem 0; } /** - * Add the correct vertical alignment in Chrome, Firefox, and Opera. + * Turn off margins on nested lists. */ -progress { - vertical-align: baseline; } +ol ol, +ol ul, +ul ol, +ul ul { + margin: 0; } + +dd { + margin: 0 0 0 40px; } + +ol, +ul { + padding: 0 0 0 40px; } /** - * Add the correct display in IE <11, Safari <8, and Firefox <22. - * 1. Add the correct display in IE. + * Add the correct display in IE 9-. */ -template, -[hidden] { - display: none; } +figcaption, +figure { + display: block; } + +/** + * Add the correct margin in IE 8. + */ +figure { + margin: 1.5rem 2.5rem; } + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ +hr { + box-sizing: content-box; + /* 1 */ + height: 0; + /* 1 */ + overflow: visible; + /* 2 */ } + +/** + * Add the correct display in IE. + */ +main { + display: block; } + +/** + * Set 1 unit of vertical rhythm on the top and bottom margin. + */ +p, +pre { + margin: 1.5rem 0; } + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ +pre, code, +kbd, +samp { + font-family: monospace, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ } /* Links ========================================================================== */ @@ -96,7 +177,7 @@ a:hover { /* Text-level semantics ========================================================================== */ /** - * 1. Remove the bottom border in Firefox <40. + * 1. Remove the bottom border in Firefox 39-. * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { @@ -122,61 +203,13 @@ strong { font-weight: bolder; } /** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ -pre, -code, -kbd, -samp { - font-family: monospace, monospace; - /* 1 */ - font-size: 1em; - /* 2 */ } - -/** - * Add the correct font style in Android <4.4. + * Add the correct font style in Android 4.3-. */ dfn { font-style: italic; } /** - * Correct the font size and margin on `h1` elements within `section` and - * `article` contexts in Chrome, Firefox, and Safari. - */ -h1 { - font-size: 2rem; - line-height: 3rem; - /* Set 1 unit of vertical rhythm on the top and bottom margins. */ - margin: 1.5rem 0; } - -h2 { - font-size: 1.5rem; - line-height: 2.25rem; - margin: 1.5rem 0; } - -h3 { - font-size: 1.25rem; - line-height: 1.5rem; - margin: 1.5rem 0; } - -h4 { - font-size: 1rem; - line-height: 1.5rem; - margin: 1.5rem 0; } - -h5 { - font-size: 0.875rem; - line-height: 1.5rem; - margin: 1.5rem 0; } - -h6 { - font-size: 0.625rem; - line-height: 1.5rem; - margin: 1.5rem 0; } - -/** - * Add the correct background and color in IE <10. + * Add the correct background and color in IE 9-. */ mark { background-color: #ff0; @@ -208,96 +241,63 @@ sup { /* Embedded content ========================================================================== */ /** - * Remove the border on images inside links in IE <11. - */ -img { - border-style: none; } - -/** - * Hide the overflow in IE. - */ -svg:not(:root) { - overflow: hidden; } - -/* Grouping content - ========================================================================== */ -/** - * Set 1 unit of vertical rhythm on the top and bottom margin. - */ -blockquote { - margin: 1.5rem 2.5rem; } - -dl, -menu, -ol, -ul { - margin: 1.5rem 0; } - -/** - * Turn off margins on nested lists. + * Add the correct display in IE 9-. */ -ol ol, -ol ul, -ul ol, -ul ul { - margin: 0; } - -dd { - margin: 0 0 0 40px; } - -menu, -ol, -ul { - padding: 0 0 0 40px; } +audio, +video { + display: inline-block; } /** - * Add the correct margin in IE 8. + * Add the correct display in iOS 4-7. */ -figure { - margin: 1.5rem 2.5rem; } +audio:not([controls]) { + display: none; + height: 0; } /** - * 1. Add the correct box sizing in Firefox. - * 2. Show the overflow in Edge and IE. + * Remove the border on images inside links in IE 10-. */ -hr { - box-sizing: content-box; - /* 1 */ - height: 0; - /* 1 */ - overflow: visible; - /* 2 */ } +img { + border-style: none; } /** - * Set 1 unit of vertical rhythm on the top and bottom margin. + * Hide the overflow in IE. */ -p, -pre { - margin: 1.5rem 0; } +svg:not(:root) { + overflow: hidden; } /* Forms ========================================================================== */ /** * Known issues: - * - By default, Chrome on OS X and Safari on OS X allow very limited styling of + * - `select`: + * By default, Chrome on OS X and Safari on OS X allow very limited styling of * select, unless a border property is set. The default font weight on * optgroup elements cannot safely be changed in Chrome on OSX and Safari on * OS X. - * - It is recommended that you do not style checkbox and radio inputs as + * - `[type="checkbox"]`: + * It is recommended that you do not style checkbox and radio inputs as * Firefox's implementation does not respect box-sizing, padding, or width. - * - Certain font size values applied to number inputs cause the cursor style of - * the decrement button to change from default to text. - * - The search input is not fully stylable by default. In Chrome and Safari on - * OSX/iOS you can't control font, padding, border, or background. In Chrome - * and Safari on Windows you can't control border properly. It will apply - * border-width but will only show a border color (which cannot be controlled) - * for the outer 1px of that border. Applying -webkit-appearance: textfield - * addresses these issues without removing the benefits of search inputs (e.g. - * showing past searches). Safari (but not Chrome) will clip the cancel button - * on when it has padding (and textfield appearance). - */ -/** - * 1. Change font properties to `inherit` in all browsers (opinionated). + * - `[type="number"]`: + * Certain font size values applied to number inputs cause the cursor style of + * the decrement button to change from `default` to `text`. + * - `[type="search"]`: + * The search input is not fully stylable by default. In Chrome and Safari on + * OSX/iOS you can't control `font`, `padding`, `border`, or `background`. In + * Chrome and Safari on Windows you can't control `border` properly. It will + * apply `border-width` but will only show a border color (which cannot be + * controlled) for the outer 1px of that border. Applying + * `-webkit-appearance: textfield` addresses these issues without removing the + * benefits of search inputs (e.g. showing past searches). Safari (but not + * Chrome) will clip the cancel button on when it has padding (and `textfield` + * appearance). + * - `::placeholder`: + * In Edge, placeholders will disappear on `relative` or `absolute` positioned + * `<input>` elements if you use `opacity` less than `1` due to a + * [bug](https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/3901363/). + */ +/** + * 1. Change the font styles in all browsers (opinionated). * 2. Remove the margin in Firefox and Safari. */ button, @@ -305,7 +305,11 @@ input, optgroup, select, textarea { - font: inherit; + font-family: sans-serif; + /* 1 */ + line-height: 1.5rem; + /* 1 */ + font-size: 100%; /* 1 */ margin: 0; /* 2 */ } @@ -366,8 +370,8 @@ input { overflow: visible; } /** - * 1. Add the correct box sizing in IE <11. - * 2. Remove the padding in IE <11. + * 1. Add the correct box sizing in IE 10-. + * 2. Remove the padding in IE 10-. */ [type="checkbox"], [type="radio"] { @@ -393,19 +397,12 @@ input { outline-offset: -2px; /* 2 */ /** - * Remove the inner padding and cancel buttons in Chrome and Safari on OS X. + * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. */ } [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** - * Correct the text style of placeholders in Chrome, Edge, and Safari. - */ -::-webkit-input-placeholder { - color: inherit; - opacity: 0.54; } - -/** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ @@ -436,21 +433,81 @@ legend { /* 1 */ max-width: 100%; /* 1 */ - white-space: normal; - /* 1 */ + padding: 0; + /* 3 */ color: inherit; /* 2 */ - padding: 0; - /* 3 */ } + white-space: normal; + /* 1 */ } /** - * Restore the font weight unset by a previous rule. + * 1. Add the correct display in IE 9-. + * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. */ -optgroup { - font-weight: bold; } +progress { + display: inline-block; + /* 1 */ + vertical-align: baseline; + /* 2 */ } /** * Remove the default vertical scrollbar in IE. */ textarea { overflow: auto; } + +/* Interactive + ========================================================================== */ +/* + * Add the correct display in Edge, IE, and Firefox. + */ +details { + display: block; } + +/* + * Add the correct display in all browsers. + */ +summary { + display: list-item; } + +/* + * 1. Set 1 unit of vertical rhythm on the top and bottom margin. + * 2. Add the correct display in IE 9-. + * 3. Set consistent space for the list style image. + */ +menu { + margin: 1.5rem 0; + /* 1 */ + display: block; + /* 2 */ + padding: 0 0 0 40px; + /* 3 */ + /** + * Turn off margins on nested lists. + */ } + menu menu, + ol menu, + ul menu { + margin: 0; } + +/* Scripting + ========================================================================== */ +/** + * Add the correct display in IE 9-. + */ +canvas { + display: inline-block; } + +/** + * Add the correct display in IE. + */ +template { + display: none; } + +/* Hidden + ========================================================================== */ +/** + * Add the correct display in IE 10-. + */ +[hidden] { + display: none; } diff --git a/test/fixtures/import-now/output.css b/test/fixtures/import-now/output.css index 0be7e3b..429af58 100644 --- a/test/fixtures/import-now/output.css +++ b/test/fixtures/import-now/output.css @@ -1,72 +1,91 @@ /*! normalize-scss | MIT/GPLv2 License | bit.ly/normalize-scss */ +/* Document + ========================================================================== */ /** * 1. Change the default font family in all browsers (opinionated). - * 2. Prevent adjustments of font size after orientation changes in IE and iOS. + * 2. Correct the line height in all browsers. + * 3. Prevent adjustments of font size after orientation changes in + * IE on Windows Phone and in iOS. */ html { font-family: sans-serif; /* 1 */ - -ms-text-size-adjust: 100%; + line-height: 1.15; /* 2 */ + -ms-text-size-adjust: 100%; + /* 3 */ -webkit-text-size-adjust: 100%; - /* 2 */ } + /* 3 */ } +/* Sections + ========================================================================== */ /** * Remove the margin in all browsers (opinionated). */ body { margin: 0; } -/* HTML5 display definitions - ========================================================================== */ /** - * Add the correct display in IE <10. - * Add the correct display in Edge, IE, and Firefox for `details` or `summary`. - * Add the correct display in IE for `main`. + * Add the correct display in IE 9-. */ article, aside, -details, -figcaption, -figure, footer, header, -main, -menu, nav, -section, -summary { +section { display: block; } /** - * Add the correct display in IE <10. + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. */ -audio, -canvas, -progress, -video { - display: inline-block; } +h1 { + font-size: 2em; + margin: 0.67em 0; } +/* Grouping content + ========================================================================== */ /** - * Add the correct display and remove excess height in iOS 4-7. + * Add the correct display in IE 9-. */ -audio:not([controls]) { - display: none; - height: 0; } +figcaption, +figure { + display: block; } /** - * Add the correct vertical alignment in Chrome, Firefox, and Opera. + * Add the correct margin in IE 8. */ -progress { - vertical-align: baseline; } +figure { + margin: 1em 40px; } /** - * Add the correct display in IE <11, Safari <8, and Firefox <22. - * 1. Add the correct display in IE. + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. */ -template, -[hidden] { - display: none; } +hr { + box-sizing: content-box; + /* 1 */ + height: 0; + /* 1 */ + overflow: visible; + /* 2 */ } + +/** + * Add the correct display in IE. + */ +main { + display: block; } + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ +pre { + font-family: monospace, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ } /* Links ========================================================================== */ @@ -91,7 +110,7 @@ a:hover { /* Text-level semantics ========================================================================== */ /** - * 1. Remove the bottom border in Firefox <40. + * 1. Remove the bottom border in Firefox 39-. * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { @@ -124,25 +143,18 @@ code, kbd, samp { font-family: monospace, monospace; - font-size: 1em; } + /* 1 */ + font-size: 1em; + /* 2 */ } /** - * Add the correct font style in Android <4.4. + * Add the correct font style in Android 4.3-. */ dfn { font-style: italic; } /** - * Correct the font size and margin on `h1` elements within `section` and - * `article` contexts in Chrome, Firefox, and Safari. - */ -h1 { - font-size: 2em; - /* Set 1 unit of vertical rhythm on the top and bottom margins. */ - margin: 0.75em 0; } - -/** - * Add the correct background and color in IE <10. + * Add the correct background and color in IE 9-. */ mark { background-color: #ff0; @@ -174,64 +186,35 @@ sup { /* Embedded content ========================================================================== */ /** - * Remove the border on images inside links in IE <11. + * Add the correct display in IE 9-. */ -img { - border-style: none; } +audio, +video { + display: inline-block; } /** - * Hide the overflow in IE. + * Add the correct display in iOS 4-7. */ -svg:not(:root) { - overflow: hidden; } +audio:not([controls]) { + display: none; + height: 0; } -/* Grouping content - ========================================================================== */ /** - * Add the correct margin in IE 8. + * Remove the border on images inside links in IE 10-. */ -figure { - margin: 1.5em 40px; } +img { + border-style: none; } /** - * 1. Add the correct box sizing in Firefox. - * 2. Show the overflow in Edge and IE. + * Hide the overflow in IE. */ -hr { - box-sizing: content-box; - /* 1 */ - height: 0; - /* 1 */ - overflow: visible; - /* 2 */ } - -pre { - font-family: monospace, monospace; - font-size: 1em; } +svg:not(:root) { + overflow: hidden; } /* Forms ========================================================================== */ /** - * Known issues: - * - By default, Chrome on OS X and Safari on OS X allow very limited styling of - * select, unless a border property is set. The default font weight on - * optgroup elements cannot safely be changed in Chrome on OSX and Safari on - * OS X. - * - It is recommended that you do not style checkbox and radio inputs as - * Firefox's implementation does not respect box-sizing, padding, or width. - * - Certain font size values applied to number inputs cause the cursor style of - * the decrement button to change from default to text. - * - The search input is not fully stylable by default. In Chrome and Safari on - * OSX/iOS you can't control font, padding, border, or background. In Chrome - * and Safari on Windows you can't control border properly. It will apply - * border-width but will only show a border color (which cannot be controlled) - * for the outer 1px of that border. Applying -webkit-appearance: textfield - * addresses these issues without removing the benefits of search inputs (e.g. - * showing past searches). Safari (but not Chrome) will clip the cancel button - * on when it has padding (and textfield appearance). - */ -/** - * 1. Change font properties to `inherit` in all browsers (opinionated). + * 1. Change the font styles in all browsers (opinionated). * 2. Remove the margin in Firefox and Safari. */ button, @@ -239,7 +222,11 @@ input, optgroup, select, textarea { - font: inherit; + font-family: sans-serif; + /* 1 */ + font-size: 100%; + /* 1 */ + line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } @@ -300,8 +287,8 @@ input { overflow: visible; } /** - * 1. Add the correct box sizing in IE <11. - * 2. Remove the padding in IE <11. + * 1. Add the correct box sizing in IE 10-. + * 2. Remove the padding in IE 10-. */ [type="checkbox"], [type="radio"] { @@ -327,19 +314,12 @@ input { outline-offset: -2px; /* 2 */ /** - * Remove the inner padding and cancel buttons in Chrome and Safari on OS X. + * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. */ } [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** - * Correct the text style of placeholders in Chrome, Edge, and Safari. - */ -::-webkit-input-placeholder { - color: inherit; - opacity: 0.54; } - -/** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ @@ -370,21 +350,67 @@ legend { /* 1 */ max-width: 100%; /* 1 */ - white-space: normal; - /* 1 */ + padding: 0; + /* 3 */ color: inherit; /* 2 */ - padding: 0; - /* 3 */ } + white-space: normal; + /* 1 */ } /** - * Restore the font weight unset by a previous rule. + * 1. Add the correct display in IE 9-. + * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. */ -optgroup { - font-weight: bold; } +progress { + display: inline-block; + /* 1 */ + vertical-align: baseline; + /* 2 */ } /** * Remove the default vertical scrollbar in IE. */ textarea { overflow: auto; } + +/* Interactive + ========================================================================== */ +/* + * Add the correct display in Edge, IE, and Firefox. + */ +details { + display: block; } + +/* + * Add the correct display in all browsers. + */ +summary { + display: list-item; } + +/* + * Add the correct display in IE 9-. + */ +menu { + display: block; } + +/* Scripting + ========================================================================== */ +/** + * Add the correct display in IE 9-. + */ +canvas { + display: inline-block; } + +/** + * Add the correct display in IE. + */ +template { + display: none; } + +/* Hidden + ========================================================================== */ +/** + * Add the correct display in IE 10-. + */ +[hidden] { + display: none; } diff --git a/test/fixtures/normalize/exclude-multiple/output.css b/test/fixtures/normalize/exclude-multiple/output.css index 912e923..bb64a34 100644 --- a/test/fixtures/normalize/exclude-multiple/output.css +++ b/test/fixtures/normalize/exclude-multiple/output.css @@ -1,72 +1,48 @@ /*! normalize-scss | MIT/GPLv2 License | bit.ly/normalize-scss */ +/* Document + ========================================================================== */ /** * 1. Change the default font family in all browsers (opinionated). - * 2. Prevent adjustments of font size after orientation changes in IE and iOS. + * 2. Correct the line height in all browsers. + * 3. Prevent adjustments of font size after orientation changes in + * IE on Windows Phone and in iOS. */ html { font-family: sans-serif; /* 1 */ - -ms-text-size-adjust: 100%; + line-height: 1.15; /* 2 */ + -ms-text-size-adjust: 100%; + /* 3 */ -webkit-text-size-adjust: 100%; - /* 2 */ } + /* 3 */ } +/* Sections + ========================================================================== */ /** * Remove the margin in all browsers (opinionated). */ body { margin: 0; } -/* HTML5 display definitions - ========================================================================== */ /** - * Add the correct display in IE <10. - * Add the correct display in Edge, IE, and Firefox for `details` or `summary`. - * Add the correct display in IE for `main`. + * Add the correct display in IE 9-. */ article, aside, -details, -figcaption, -figure, footer, header, -main, -menu, nav, -section, -summary { +section { display: block; } /** - * Add the correct display in IE <10. - */ -audio, -canvas, -progress, -video { - display: inline-block; } - -/** - * Add the correct display and remove excess height in iOS 4-7. - */ -audio:not([controls]) { - display: none; - height: 0; } - -/** - * Add the correct vertical alignment in Chrome, Firefox, and Opera. - */ -progress { - vertical-align: baseline; } - -/** - * Add the correct display in IE <11, Safari <8, and Firefox <22. - * 1. Add the correct display in IE. + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. */ -template, -[hidden] { - display: none; } +h1 { + font-size: 2em; + margin: 0.67em 0; } /* Links ========================================================================== */ @@ -91,7 +67,7 @@ a:hover { /* Text-level semantics ========================================================================== */ /** - * 1. Remove the bottom border in Firefox <40. + * 1. Remove the bottom border in Firefox 39-. * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { @@ -124,25 +100,18 @@ code, kbd, samp { font-family: monospace, monospace; - font-size: 1em; } + /* 1 */ + font-size: 1em; + /* 2 */ } /** - * Add the correct font style in Android <4.4. + * Add the correct font style in Android 4.3-. */ dfn { font-style: italic; } /** - * Correct the font size and margin on `h1` elements within `section` and - * `article` contexts in Chrome, Firefox, and Safari. - */ -h1 { - font-size: 2em; - /* Set 1 unit of vertical rhythm on the top and bottom margins. */ - margin: 0.75em 0; } - -/** - * Add the correct background and color in IE <10. + * Add the correct background and color in IE 9-. */ mark { background-color: #ff0; @@ -174,26 +143,7 @@ sup { /* Forms ========================================================================== */ /** - * Known issues: - * - By default, Chrome on OS X and Safari on OS X allow very limited styling of - * select, unless a border property is set. The default font weight on - * optgroup elements cannot safely be changed in Chrome on OSX and Safari on - * OS X. - * - It is recommended that you do not style checkbox and radio inputs as - * Firefox's implementation does not respect box-sizing, padding, or width. - * - Certain font size values applied to number inputs cause the cursor style of - * the decrement button to change from default to text. - * - The search input is not fully stylable by default. In Chrome and Safari on - * OSX/iOS you can't control font, padding, border, or background. In Chrome - * and Safari on Windows you can't control border properly. It will apply - * border-width but will only show a border color (which cannot be controlled) - * for the outer 1px of that border. Applying -webkit-appearance: textfield - * addresses these issues without removing the benefits of search inputs (e.g. - * showing past searches). Safari (but not Chrome) will clip the cancel button - * on when it has padding (and textfield appearance). - */ -/** - * 1. Change font properties to `inherit` in all browsers (opinionated). + * 1. Change the font styles in all browsers (opinionated). * 2. Remove the margin in Firefox and Safari. */ button, @@ -201,7 +151,11 @@ input, optgroup, select, textarea { - font: inherit; + font-family: sans-serif; + /* 1 */ + font-size: 100%; + /* 1 */ + line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } @@ -262,8 +216,8 @@ input { overflow: visible; } /** - * 1. Add the correct box sizing in IE <11. - * 2. Remove the padding in IE <11. + * 1. Add the correct box sizing in IE 10-. + * 2. Remove the padding in IE 10-. */ [type="checkbox"], [type="radio"] { @@ -289,19 +243,12 @@ input { outline-offset: -2px; /* 2 */ /** - * Remove the inner padding and cancel buttons in Chrome and Safari on OS X. + * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. */ } [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** - * Correct the text style of placeholders in Chrome, Edge, and Safari. - */ -::-webkit-input-placeholder { - color: inherit; - opacity: 0.54; } - -/** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ @@ -332,21 +279,67 @@ legend { /* 1 */ max-width: 100%; /* 1 */ - white-space: normal; - /* 1 */ + padding: 0; + /* 3 */ color: inherit; /* 2 */ - padding: 0; - /* 3 */ } + white-space: normal; + /* 1 */ } /** - * Restore the font weight unset by a previous rule. + * 1. Add the correct display in IE 9-. + * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. */ -optgroup { - font-weight: bold; } +progress { + display: inline-block; + /* 1 */ + vertical-align: baseline; + /* 2 */ } /** * Remove the default vertical scrollbar in IE. */ textarea { overflow: auto; } + +/* Interactive + ========================================================================== */ +/* + * Add the correct display in Edge, IE, and Firefox. + */ +details { + display: block; } + +/* + * Add the correct display in all browsers. + */ +summary { + display: list-item; } + +/* + * Add the correct display in IE 9-. + */ +menu { + display: block; } + +/* Scripting + ========================================================================== */ +/** + * Add the correct display in IE 9-. + */ +canvas { + display: inline-block; } + +/** + * Add the correct display in IE. + */ +template { + display: none; } + +/* Hidden + ========================================================================== */ +/** + * Add the correct display in IE 10-. + */ +[hidden] { + display: none; } diff --git a/test/fixtures/normalize/exclude-single/output.css b/test/fixtures/normalize/exclude-single/output.css index 6ee0f9b..0034bcb 100644 --- a/test/fixtures/normalize/exclude-single/output.css +++ b/test/fixtures/normalize/exclude-single/output.css @@ -1,72 +1,91 @@ /*! normalize-scss | MIT/GPLv2 License | bit.ly/normalize-scss */ +/* Document + ========================================================================== */ /** * 1. Change the default font family in all browsers (opinionated). - * 2. Prevent adjustments of font size after orientation changes in IE and iOS. + * 2. Correct the line height in all browsers. + * 3. Prevent adjustments of font size after orientation changes in + * IE on Windows Phone and in iOS. */ html { font-family: sans-serif; /* 1 */ - -ms-text-size-adjust: 100%; + line-height: 1.15; /* 2 */ + -ms-text-size-adjust: 100%; + /* 3 */ -webkit-text-size-adjust: 100%; - /* 2 */ } + /* 3 */ } +/* Sections + ========================================================================== */ /** * Remove the margin in all browsers (opinionated). */ body { margin: 0; } -/* HTML5 display definitions - ========================================================================== */ /** - * Add the correct display in IE <10. - * Add the correct display in Edge, IE, and Firefox for `details` or `summary`. - * Add the correct display in IE for `main`. + * Add the correct display in IE 9-. */ article, aside, -details, -figcaption, -figure, footer, header, -main, -menu, nav, -section, -summary { +section { display: block; } /** - * Add the correct display in IE <10. + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. */ -audio, -canvas, -progress, -video { - display: inline-block; } +h1 { + font-size: 2em; + margin: 0.67em 0; } +/* Grouping content + ========================================================================== */ /** - * Add the correct display and remove excess height in iOS 4-7. + * Add the correct display in IE 9-. */ -audio:not([controls]) { - display: none; - height: 0; } +figcaption, +figure { + display: block; } /** - * Add the correct vertical alignment in Chrome, Firefox, and Opera. + * Add the correct margin in IE 8. */ -progress { - vertical-align: baseline; } +figure { + margin: 1em 40px; } /** - * Add the correct display in IE <11, Safari <8, and Firefox <22. - * 1. Add the correct display in IE. + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. */ -template, -[hidden] { - display: none; } +hr { + box-sizing: content-box; + /* 1 */ + height: 0; + /* 1 */ + overflow: visible; + /* 2 */ } + +/** + * Add the correct display in IE. + */ +main { + display: block; } + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ +pre { + font-family: monospace, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ } /* Links ========================================================================== */ @@ -91,7 +110,7 @@ a:hover { /* Text-level semantics ========================================================================== */ /** - * 1. Remove the bottom border in Firefox <40. + * 1. Remove the bottom border in Firefox 39-. * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { @@ -124,25 +143,18 @@ code, kbd, samp { font-family: monospace, monospace; - font-size: 1em; } + /* 1 */ + font-size: 1em; + /* 2 */ } /** - * Add the correct font style in Android <4.4. + * Add the correct font style in Android 4.3-. */ dfn { font-style: italic; } /** - * Correct the font size and margin on `h1` elements within `section` and - * `article` contexts in Chrome, Firefox, and Safari. - */ -h1 { - font-size: 2em; - /* Set 1 unit of vertical rhythm on the top and bottom margins. */ - margin: 0.75em 0; } - -/** - * Add the correct background and color in IE <10. + * Add the correct background and color in IE 9-. */ mark { background-color: #ff0; @@ -174,7 +186,21 @@ sup { /* Embedded content ========================================================================== */ /** - * Remove the border on images inside links in IE <11. + * Add the correct display in IE 9-. + */ +audio, +video { + display: inline-block; } + +/** + * Add the correct display in iOS 4-7. + */ +audio:not([controls]) { + display: none; + height: 0; } + +/** + * Remove the border on images inside links in IE 10-. */ img { border-style: none; } @@ -185,26 +211,44 @@ img { svg:not(:root) { overflow: hidden; } -/* Grouping content +/* Interactive + ========================================================================== */ +/* + * Add the correct display in Edge, IE, and Firefox. + */ +details { + display: block; } + +/* + * Add the correct display in all browsers. + */ +summary { + display: list-item; } + +/* + * Add the correct display in IE 9-. + */ +menu { + display: block; } + +/* Scripting ========================================================================== */ /** - * Add the correct margin in IE 8. + * Add the correct display in IE 9-. */ -figure { - margin: 1.5em 40px; } +canvas { + display: inline-block; } /** - * 1. Add the correct box sizing in Firefox. - * 2. Show the overflow in Edge and IE. + * Add the correct display in IE. */ -hr { - box-sizing: content-box; - /* 1 */ - height: 0; - /* 1 */ - overflow: visible; - /* 2 */ } +template { + display: none; } -pre { - font-family: monospace, monospace; - font-size: 1em; } +/* Hidden + ========================================================================== */ +/** + * Add the correct display in IE 10-. + */ +[hidden] { + display: none; } diff --git a/test/fixtures/normalize/exclude-string/input.scss b/test/fixtures/normalize/exclude-string/input.scss index b34be63..9c070c4 100644 --- a/test/fixtures/normalize/exclude-string/input.scss +++ b/test/fixtures/normalize/exclude-string/input.scss @@ -1,2 +1,2 @@ @import 'normalize'; -@include normalize($exclude: tables); +@include normalize($exclude: scripting); diff --git a/test/fixtures/normalize/exclude-string/output.css b/test/fixtures/normalize/exclude-string/output.css index 0be7e3b..4c677fc 100644 --- a/test/fixtures/normalize/exclude-string/output.css +++ b/test/fixtures/normalize/exclude-string/output.css @@ -1,72 +1,91 @@ /*! normalize-scss | MIT/GPLv2 License | bit.ly/normalize-scss */ +/* Document + ========================================================================== */ /** * 1. Change the default font family in all browsers (opinionated). - * 2. Prevent adjustments of font size after orientation changes in IE and iOS. + * 2. Correct the line height in all browsers. + * 3. Prevent adjustments of font size after orientation changes in + * IE on Windows Phone and in iOS. */ html { font-family: sans-serif; /* 1 */ - -ms-text-size-adjust: 100%; + line-height: 1.15; /* 2 */ + -ms-text-size-adjust: 100%; + /* 3 */ -webkit-text-size-adjust: 100%; - /* 2 */ } + /* 3 */ } +/* Sections + ========================================================================== */ /** * Remove the margin in all browsers (opinionated). */ body { margin: 0; } -/* HTML5 display definitions - ========================================================================== */ /** - * Add the correct display in IE <10. - * Add the correct display in Edge, IE, and Firefox for `details` or `summary`. - * Add the correct display in IE for `main`. + * Add the correct display in IE 9-. */ article, aside, -details, -figcaption, -figure, footer, header, -main, -menu, nav, -section, -summary { +section { display: block; } /** - * Add the correct display in IE <10. + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. */ -audio, -canvas, -progress, -video { - display: inline-block; } +h1 { + font-size: 2em; + margin: 0.67em 0; } +/* Grouping content + ========================================================================== */ /** - * Add the correct display and remove excess height in iOS 4-7. + * Add the correct display in IE 9-. */ -audio:not([controls]) { - display: none; - height: 0; } +figcaption, +figure { + display: block; } /** - * Add the correct vertical alignment in Chrome, Firefox, and Opera. + * Add the correct margin in IE 8. */ -progress { - vertical-align: baseline; } +figure { + margin: 1em 40px; } /** - * Add the correct display in IE <11, Safari <8, and Firefox <22. - * 1. Add the correct display in IE. + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. */ -template, -[hidden] { - display: none; } +hr { + box-sizing: content-box; + /* 1 */ + height: 0; + /* 1 */ + overflow: visible; + /* 2 */ } + +/** + * Add the correct display in IE. + */ +main { + display: block; } + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ +pre { + font-family: monospace, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ } /* Links ========================================================================== */ @@ -91,7 +110,7 @@ a:hover { /* Text-level semantics ========================================================================== */ /** - * 1. Remove the bottom border in Firefox <40. + * 1. Remove the bottom border in Firefox 39-. * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { @@ -124,25 +143,18 @@ code, kbd, samp { font-family: monospace, monospace; - font-size: 1em; } + /* 1 */ + font-size: 1em; + /* 2 */ } /** - * Add the correct font style in Android <4.4. + * Add the correct font style in Android 4.3-. */ dfn { font-style: italic; } /** - * Correct the font size and margin on `h1` elements within `section` and - * `article` contexts in Chrome, Firefox, and Safari. - */ -h1 { - font-size: 2em; - /* Set 1 unit of vertical rhythm on the top and bottom margins. */ - margin: 0.75em 0; } - -/** - * Add the correct background and color in IE <10. + * Add the correct background and color in IE 9-. */ mark { background-color: #ff0; @@ -174,64 +186,35 @@ sup { /* Embedded content ========================================================================== */ /** - * Remove the border on images inside links in IE <11. + * Add the correct display in IE 9-. */ -img { - border-style: none; } +audio, +video { + display: inline-block; } /** - * Hide the overflow in IE. + * Add the correct display in iOS 4-7. */ -svg:not(:root) { - overflow: hidden; } +audio:not([controls]) { + display: none; + height: 0; } -/* Grouping content - ========================================================================== */ /** - * Add the correct margin in IE 8. + * Remove the border on images inside links in IE 10-. */ -figure { - margin: 1.5em 40px; } +img { + border-style: none; } /** - * 1. Add the correct box sizing in Firefox. - * 2. Show the overflow in Edge and IE. + * Hide the overflow in IE. */ -hr { - box-sizing: content-box; - /* 1 */ - height: 0; - /* 1 */ - overflow: visible; - /* 2 */ } - -pre { - font-family: monospace, monospace; - font-size: 1em; } +svg:not(:root) { + overflow: hidden; } /* Forms ========================================================================== */ /** - * Known issues: - * - By default, Chrome on OS X and Safari on OS X allow very limited styling of - * select, unless a border property is set. The default font weight on - * optgroup elements cannot safely be changed in Chrome on OSX and Safari on - * OS X. - * - It is recommended that you do not style checkbox and radio inputs as - * Firefox's implementation does not respect box-sizing, padding, or width. - * - Certain font size values applied to number inputs cause the cursor style of - * the decrement button to change from default to text. - * - The search input is not fully stylable by default. In Chrome and Safari on - * OSX/iOS you can't control font, padding, border, or background. In Chrome - * and Safari on Windows you can't control border properly. It will apply - * border-width but will only show a border color (which cannot be controlled) - * for the outer 1px of that border. Applying -webkit-appearance: textfield - * addresses these issues without removing the benefits of search inputs (e.g. - * showing past searches). Safari (but not Chrome) will clip the cancel button - * on when it has padding (and textfield appearance). - */ -/** - * 1. Change font properties to `inherit` in all browsers (opinionated). + * 1. Change the font styles in all browsers (opinionated). * 2. Remove the margin in Firefox and Safari. */ button, @@ -239,7 +222,11 @@ input, optgroup, select, textarea { - font: inherit; + font-family: sans-serif; + /* 1 */ + font-size: 100%; + /* 1 */ + line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } @@ -300,8 +287,8 @@ input { overflow: visible; } /** - * 1. Add the correct box sizing in IE <11. - * 2. Remove the padding in IE <11. + * 1. Add the correct box sizing in IE 10-. + * 2. Remove the padding in IE 10-. */ [type="checkbox"], [type="radio"] { @@ -327,19 +314,12 @@ input { outline-offset: -2px; /* 2 */ /** - * Remove the inner padding and cancel buttons in Chrome and Safari on OS X. + * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. */ } [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** - * Correct the text style of placeholders in Chrome, Edge, and Safari. - */ -::-webkit-input-placeholder { - color: inherit; - opacity: 0.54; } - -/** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ @@ -370,21 +350,53 @@ legend { /* 1 */ max-width: 100%; /* 1 */ - white-space: normal; - /* 1 */ + padding: 0; + /* 3 */ color: inherit; /* 2 */ - padding: 0; - /* 3 */ } + white-space: normal; + /* 1 */ } /** - * Restore the font weight unset by a previous rule. + * 1. Add the correct display in IE 9-. + * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. */ -optgroup { - font-weight: bold; } +progress { + display: inline-block; + /* 1 */ + vertical-align: baseline; + /* 2 */ } /** * Remove the default vertical scrollbar in IE. */ textarea { overflow: auto; } + +/* Interactive + ========================================================================== */ +/* + * Add the correct display in Edge, IE, and Firefox. + */ +details { + display: block; } + +/* + * Add the correct display in all browsers. + */ +summary { + display: list-item; } + +/* + * Add the correct display in IE 9-. + */ +menu { + display: block; } + +/* Hidden + ========================================================================== */ +/** + * Add the correct display in IE 10-. + */ +[hidden] { + display: none; } diff --git a/test/fixtures/normalize/include-multiple/input.scss b/test/fixtures/normalize/include-multiple/input.scss index 26efcce..4ce2f61 100644 --- a/test/fixtures/normalize/include-multiple/input.scss +++ b/test/fixtures/normalize/include-multiple/input.scss @@ -1,2 +1,2 @@ @import 'normalize'; -@include normalize((root html5)); +@include normalize((document sections)); diff --git a/test/fixtures/normalize/include-multiple/output.css b/test/fixtures/normalize/include-multiple/output.css index 75e1da7..b4008de 100644 --- a/test/fixtures/normalize/include-multiple/output.css +++ b/test/fixtures/normalize/include-multiple/output.css @@ -1,69 +1,45 @@ /*! normalize-scss | MIT/GPLv2 License | bit.ly/normalize-scss */ +/* Document + ========================================================================== */ /** * 1. Change the default font family in all browsers (opinionated). - * 2. Prevent adjustments of font size after orientation changes in IE and iOS. + * 2. Correct the line height in all browsers. + * 3. Prevent adjustments of font size after orientation changes in + * IE on Windows Phone and in iOS. */ html { font-family: sans-serif; /* 1 */ - -ms-text-size-adjust: 100%; + line-height: 1.15; /* 2 */ + -ms-text-size-adjust: 100%; + /* 3 */ -webkit-text-size-adjust: 100%; - /* 2 */ } + /* 3 */ } +/* Sections + ========================================================================== */ /** * Remove the margin in all browsers (opinionated). */ body { margin: 0; } -/* HTML5 display definitions - ========================================================================== */ /** - * Add the correct display in IE <10. - * Add the correct display in Edge, IE, and Firefox for `details` or `summary`. - * Add the correct display in IE for `main`. + * Add the correct display in IE 9-. */ article, aside, -details, -figcaption, -figure, footer, header, -main, -menu, nav, -section, -summary { +section { display: block; } /** - * Add the correct display in IE <10. - */ -audio, -canvas, -progress, -video { - display: inline-block; } - -/** - * Add the correct display and remove excess height in iOS 4-7. - */ -audio:not([controls]) { - display: none; - height: 0; } - -/** - * Add the correct vertical alignment in Chrome, Firefox, and Opera. - */ -progress { - vertical-align: baseline; } - -/** - * Add the correct display in IE <11, Safari <8, and Firefox <22. - * 1. Add the correct display in IE. + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. */ -template, -[hidden] { - display: none; } +h1 { + font-size: 2em; + margin: 0.67em 0; } diff --git a/test/fixtures/normalize/include-string/output.css b/test/fixtures/normalize/include-string/output.css index 89b6b57..48c3f52 100644 --- a/test/fixtures/normalize/include-string/output.css +++ b/test/fixtures/normalize/include-string/output.css @@ -2,7 +2,7 @@ /* Text-level semantics ========================================================================== */ /** - * 1. Remove the bottom border in Firefox <40. + * 1. Remove the bottom border in Firefox 39-. * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { @@ -35,25 +35,18 @@ code, kbd, samp { font-family: monospace, monospace; - font-size: 1em; } + /* 1 */ + font-size: 1em; + /* 2 */ } /** - * Add the correct font style in Android <4.4. + * Add the correct font style in Android 4.3-. */ dfn { font-style: italic; } /** - * Correct the font size and margin on `h1` elements within `section` and - * `article` contexts in Chrome, Firefox, and Safari. - */ -h1 { - font-size: 2em; - /* Set 1 unit of vertical rhythm on the top and bottom margins. */ - margin: 0.75em 0; } - -/** - * Add the correct background and color in IE <10. + * Add the correct background and color in IE 9-. */ mark { background-color: #ff0; diff --git a/test/fixtures/variables/default/output.css b/test/fixtures/variables/default/output.css index 0be7e3b..429af58 100644 --- a/test/fixtures/variables/default/output.css +++ b/test/fixtures/variables/default/output.css @@ -1,72 +1,91 @@ /*! normalize-scss | MIT/GPLv2 License | bit.ly/normalize-scss */ +/* Document + ========================================================================== */ /** * 1. Change the default font family in all browsers (opinionated). - * 2. Prevent adjustments of font size after orientation changes in IE and iOS. + * 2. Correct the line height in all browsers. + * 3. Prevent adjustments of font size after orientation changes in + * IE on Windows Phone and in iOS. */ html { font-family: sans-serif; /* 1 */ - -ms-text-size-adjust: 100%; + line-height: 1.15; /* 2 */ + -ms-text-size-adjust: 100%; + /* 3 */ -webkit-text-size-adjust: 100%; - /* 2 */ } + /* 3 */ } +/* Sections + ========================================================================== */ /** * Remove the margin in all browsers (opinionated). */ body { margin: 0; } -/* HTML5 display definitions - ========================================================================== */ /** - * Add the correct display in IE <10. - * Add the correct display in Edge, IE, and Firefox for `details` or `summary`. - * Add the correct display in IE for `main`. + * Add the correct display in IE 9-. */ article, aside, -details, -figcaption, -figure, footer, header, -main, -menu, nav, -section, -summary { +section { display: block; } /** - * Add the correct display in IE <10. + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. */ -audio, -canvas, -progress, -video { - display: inline-block; } +h1 { + font-size: 2em; + margin: 0.67em 0; } +/* Grouping content + ========================================================================== */ /** - * Add the correct display and remove excess height in iOS 4-7. + * Add the correct display in IE 9-. */ -audio:not([controls]) { - display: none; - height: 0; } +figcaption, +figure { + display: block; } /** - * Add the correct vertical alignment in Chrome, Firefox, and Opera. + * Add the correct margin in IE 8. */ -progress { - vertical-align: baseline; } +figure { + margin: 1em 40px; } /** - * Add the correct display in IE <11, Safari <8, and Firefox <22. - * 1. Add the correct display in IE. + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. */ -template, -[hidden] { - display: none; } +hr { + box-sizing: content-box; + /* 1 */ + height: 0; + /* 1 */ + overflow: visible; + /* 2 */ } + +/** + * Add the correct display in IE. + */ +main { + display: block; } + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ +pre { + font-family: monospace, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ } /* Links ========================================================================== */ @@ -91,7 +110,7 @@ a:hover { /* Text-level semantics ========================================================================== */ /** - * 1. Remove the bottom border in Firefox <40. + * 1. Remove the bottom border in Firefox 39-. * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { @@ -124,25 +143,18 @@ code, kbd, samp { font-family: monospace, monospace; - font-size: 1em; } + /* 1 */ + font-size: 1em; + /* 2 */ } /** - * Add the correct font style in Android <4.4. + * Add the correct font style in Android 4.3-. */ dfn { font-style: italic; } /** - * Correct the font size and margin on `h1` elements within `section` and - * `article` contexts in Chrome, Firefox, and Safari. - */ -h1 { - font-size: 2em; - /* Set 1 unit of vertical rhythm on the top and bottom margins. */ - margin: 0.75em 0; } - -/** - * Add the correct background and color in IE <10. + * Add the correct background and color in IE 9-. */ mark { background-color: #ff0; @@ -174,64 +186,35 @@ sup { /* Embedded content ========================================================================== */ /** - * Remove the border on images inside links in IE <11. + * Add the correct display in IE 9-. */ -img { - border-style: none; } +audio, +video { + display: inline-block; } /** - * Hide the overflow in IE. + * Add the correct display in iOS 4-7. */ -svg:not(:root) { - overflow: hidden; } +audio:not([controls]) { + display: none; + height: 0; } -/* Grouping content - ========================================================================== */ /** - * Add the correct margin in IE 8. + * Remove the border on images inside links in IE 10-. */ -figure { - margin: 1.5em 40px; } +img { + border-style: none; } /** - * 1. Add the correct box sizing in Firefox. - * 2. Show the overflow in Edge and IE. + * Hide the overflow in IE. */ -hr { - box-sizing: content-box; - /* 1 */ - height: 0; - /* 1 */ - overflow: visible; - /* 2 */ } - -pre { - font-family: monospace, monospace; - font-size: 1em; } +svg:not(:root) { + overflow: hidden; } /* Forms ========================================================================== */ /** - * Known issues: - * - By default, Chrome on OS X and Safari on OS X allow very limited styling of - * select, unless a border property is set. The default font weight on - * optgroup elements cannot safely be changed in Chrome on OSX and Safari on - * OS X. - * - It is recommended that you do not style checkbox and radio inputs as - * Firefox's implementation does not respect box-sizing, padding, or width. - * - Certain font size values applied to number inputs cause the cursor style of - * the decrement button to change from default to text. - * - The search input is not fully stylable by default. In Chrome and Safari on - * OSX/iOS you can't control font, padding, border, or background. In Chrome - * and Safari on Windows you can't control border properly. It will apply - * border-width but will only show a border color (which cannot be controlled) - * for the outer 1px of that border. Applying -webkit-appearance: textfield - * addresses these issues without removing the benefits of search inputs (e.g. - * showing past searches). Safari (but not Chrome) will clip the cancel button - * on when it has padding (and textfield appearance). - */ -/** - * 1. Change font properties to `inherit` in all browsers (opinionated). + * 1. Change the font styles in all browsers (opinionated). * 2. Remove the margin in Firefox and Safari. */ button, @@ -239,7 +222,11 @@ input, optgroup, select, textarea { - font: inherit; + font-family: sans-serif; + /* 1 */ + font-size: 100%; + /* 1 */ + line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } @@ -300,8 +287,8 @@ input { overflow: visible; } /** - * 1. Add the correct box sizing in IE <11. - * 2. Remove the padding in IE <11. + * 1. Add the correct box sizing in IE 10-. + * 2. Remove the padding in IE 10-. */ [type="checkbox"], [type="radio"] { @@ -327,19 +314,12 @@ input { outline-offset: -2px; /* 2 */ /** - * Remove the inner padding and cancel buttons in Chrome and Safari on OS X. + * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. */ } [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** - * Correct the text style of placeholders in Chrome, Edge, and Safari. - */ -::-webkit-input-placeholder { - color: inherit; - opacity: 0.54; } - -/** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ @@ -370,21 +350,67 @@ legend { /* 1 */ max-width: 100%; /* 1 */ - white-space: normal; - /* 1 */ + padding: 0; + /* 3 */ color: inherit; /* 2 */ - padding: 0; - /* 3 */ } + white-space: normal; + /* 1 */ } /** - * Restore the font weight unset by a previous rule. + * 1. Add the correct display in IE 9-. + * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. */ -optgroup { - font-weight: bold; } +progress { + display: inline-block; + /* 1 */ + vertical-align: baseline; + /* 2 */ } /** * Remove the default vertical scrollbar in IE. */ textarea { overflow: auto; } + +/* Interactive + ========================================================================== */ +/* + * Add the correct display in Edge, IE, and Firefox. + */ +details { + display: block; } + +/* + * Add the correct display in all browsers. + */ +summary { + display: list-item; } + +/* + * Add the correct display in IE 9-. + */ +menu { + display: block; } + +/* Scripting + ========================================================================== */ +/** + * Add the correct display in IE 9-. + */ +canvas { + display: inline-block; } + +/** + * Add the correct display in IE. + */ +template { + display: none; } + +/* Hidden + ========================================================================== */ +/** + * Add the correct display in IE 10-. + */ +[hidden] { + display: none; } diff --git a/test/fixtures/variables/font/output.css b/test/fixtures/variables/font/output.css index f3df41f..9f42c91 100644 --- a/test/fixtures/variables/font/output.css +++ b/test/fixtures/variables/font/output.css @@ -1,74 +1,153 @@ /*! normalize-scss | MIT/GPLv2 License | bit.ly/normalize-scss */ +/* Document + ========================================================================== */ /** * 1. Change the default font family in all browsers (opinionated). - * 2. Prevent adjustments of font size after orientation changes in IE and iOS. + * 2. Correct the line height in all browsers. + * 3. Prevent adjustments of font size after orientation changes in + * IE on Windows Phone and in iOS. */ html { - font-size: 150%; - line-height: 1.5em; font-family: Arial, sans-serif; /* 1 */ - -ms-text-size-adjust: 100%; + font-size: 150%; + line-height: 1.5em; /* 2 */ + -ms-text-size-adjust: 100%; + /* 3 */ -webkit-text-size-adjust: 100%; - /* 2 */ } + /* 3 */ } +/* Sections + ========================================================================== */ /** * Remove the margin in all browsers (opinionated). */ body { margin: 0; } -/* HTML5 display definitions - ========================================================================== */ /** - * Add the correct display in IE <10. - * Add the correct display in Edge, IE, and Firefox for `details` or `summary`. - * Add the correct display in IE for `main`. + * Add the correct display in IE 9-. */ article, aside, -details, -figcaption, -figure, footer, header, -main, -menu, nav, -section, -summary { +section { display: block; } /** - * Add the correct display in IE <10. + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. */ -audio, -canvas, -progress, -video { - display: inline-block; } +h1 { + font-size: 3rem; + line-height: 4.5rem; + /* Set 1 unit of vertical rhythm on the top and bottom margins. */ + margin: 1.5rem 0; } +h2 { + font-size: 2rem; + line-height: 3rem; + margin: 1.5rem 0; } + +h3 { + font-size: 1.5rem; + line-height: 3rem; + margin: 1.5rem 0; } + +h4 { + font-size: 0.9rem; + line-height: 1.5rem; + margin: 1.5rem 0; } + +h5 { + font-size: 0.75rem; + line-height: 1.5rem; + margin: 1.5rem 0; } + +h6 { + font-size: 0.5rem; + line-height: 1.5rem; + margin: 1.5rem 0; } + +/* Grouping content + ========================================================================== */ /** - * Add the correct display and remove excess height in iOS 4-7. + * Set 1 unit of vertical rhythm on the top and bottom margin. + */ +blockquote { + margin: 1.5rem 40px; } + +dl, +ol, +ul { + margin: 1.5rem 0; } + +/** + * Turn off margins on nested lists. + */ +ol ol, +ol ul, +ul ol, +ul ul { + margin: 0; } + +dd { + margin: 0 0 0 40px; } + +ol, +ul { + padding: 0 0 0 40px; } + +/** + * Add the correct display in IE 9-. */ -audio:not([controls]) { - display: none; - height: 0; } +figcaption, +figure { + display: block; } /** - * Add the correct vertical alignment in Chrome, Firefox, and Opera. + * Add the correct margin in IE 8. */ -progress { - vertical-align: baseline; } +figure { + margin: 1.5rem 40px; } /** - * Add the correct display in IE <11, Safari <8, and Firefox <22. - * 1. Add the correct display in IE. + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. */ -template, -[hidden] { - display: none; } +hr { + box-sizing: content-box; + /* 1 */ + height: 0; + /* 1 */ + overflow: visible; + /* 2 */ } + +/** + * Add the correct display in IE. + */ +main { + display: block; } + +/** + * Set 1 unit of vertical rhythm on the top and bottom margin. + */ +p, +pre { + margin: 1.5rem 0; } + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ +pre { + font-family: monospace, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ } /* Links ========================================================================== */ @@ -93,7 +172,7 @@ a:hover { /* Text-level semantics ========================================================================== */ /** - * 1. Remove the bottom border in Firefox <40. + * 1. Remove the bottom border in Firefox 39-. * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { @@ -126,51 +205,18 @@ code, kbd, samp { font-family: monospace, monospace; - font-size: 1em; } + /* 1 */ + font-size: 1em; + /* 2 */ } /** - * Add the correct font style in Android <4.4. + * Add the correct font style in Android 4.3-. */ dfn { font-style: italic; } /** - * Correct the font size and margin on `h1` elements within `section` and - * `article` contexts in Chrome, Firefox, and Safari. - */ -h1 { - font-size: 3rem; - line-height: 4.5rem; - /* Set 1 unit of vertical rhythm on the top and bottom margins. */ - margin: 1.5rem 0; } - -h2 { - font-size: 2rem; - line-height: 3rem; - margin: 1.5rem 0; } - -h3 { - font-size: 1.5rem; - line-height: 3rem; - margin: 1.5rem 0; } - -h4 { - font-size: 0.9rem; - line-height: 1.5rem; - margin: 1.5rem 0; } - -h5 { - font-size: 0.75rem; - line-height: 1.5rem; - margin: 1.5rem 0; } - -h6 { - font-size: 0.5rem; - line-height: 1.5rem; - margin: 1.5rem 0; } - -/** - * Add the correct background and color in IE <10. + * Add the correct background and color in IE 9-. */ mark { background-color: #ff0; @@ -202,100 +248,35 @@ sup { /* Embedded content ========================================================================== */ /** - * Remove the border on images inside links in IE <11. + * Add the correct display in IE 9-. */ -img { - border-style: none; } +audio, +video { + display: inline-block; } /** - * Hide the overflow in IE. + * Add the correct display in iOS 4-7. */ -svg:not(:root) { - overflow: hidden; } - -/* Grouping content - ========================================================================== */ -/** - * Set 1 unit of vertical rhythm on the top and bottom margin. - */ -blockquote { - margin: 1.5rem 40px; } - -dl, -menu, -ol, -ul { - margin: 1.5rem 0; } - -/** - * Turn off margins on nested lists. - */ -ol ol, -ol ul, -ul ol, -ul ul { - margin: 0; } - -dd { - margin: 0 0 0 40px; } - -menu, -ol, -ul { - padding: 0 0 0 40px; } +audio:not([controls]) { + display: none; + height: 0; } /** - * Add the correct margin in IE 8. + * Remove the border on images inside links in IE 10-. */ -figure { - margin: 1.5rem 40px; } +img { + border-style: none; } /** - * 1. Add the correct box sizing in Firefox. - * 2. Show the overflow in Edge and IE. + * Hide the overflow in IE. */ -hr { - box-sizing: content-box; - /* 1 */ - height: 0; - /* 1 */ - overflow: visible; - /* 2 */ } - -/** - * Set 1 unit of vertical rhythm on the top and bottom margin. - */ -p, -pre { - margin: 1.5rem 0; } - -pre { - font-family: monospace, monospace; - font-size: 1em; } +svg:not(:root) { + overflow: hidden; } /* Forms ========================================================================== */ /** - * Known issues: - * - By default, Chrome on OS X and Safari on OS X allow very limited styling of - * select, unless a border property is set. The default font weight on - * optgroup elements cannot safely be changed in Chrome on OSX and Safari on - * OS X. - * - It is recommended that you do not style checkbox and radio inputs as - * Firefox's implementation does not respect box-sizing, padding, or width. - * - Certain font size values applied to number inputs cause the cursor style of - * the decrement button to change from default to text. - * - The search input is not fully stylable by default. In Chrome and Safari on - * OSX/iOS you can't control font, padding, border, or background. In Chrome - * and Safari on Windows you can't control border properly. It will apply - * border-width but will only show a border color (which cannot be controlled) - * for the outer 1px of that border. Applying -webkit-appearance: textfield - * addresses these issues without removing the benefits of search inputs (e.g. - * showing past searches). Safari (but not Chrome) will clip the cancel button - * on when it has padding (and textfield appearance). - */ -/** - * 1. Change font properties to `inherit` in all browsers (opinionated). + * 1. Change the font styles in all browsers (opinionated). * 2. Remove the margin in Firefox and Safari. */ button, @@ -303,7 +284,11 @@ input, optgroup, select, textarea { - font: inherit; + font-family: Arial, sans-serif; + /* 1 */ + font-size: 100%; + /* 1 */ + line-height: 1.5em; /* 1 */ margin: 0; /* 2 */ } @@ -364,8 +349,8 @@ input { overflow: visible; } /** - * 1. Add the correct box sizing in IE <11. - * 2. Remove the padding in IE <11. + * 1. Add the correct box sizing in IE 10-. + * 2. Remove the padding in IE 10-. */ [type="checkbox"], [type="radio"] { @@ -391,19 +376,12 @@ input { outline-offset: -2px; /* 2 */ /** - * Remove the inner padding and cancel buttons in Chrome and Safari on OS X. + * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. */ } [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** - * Correct the text style of placeholders in Chrome, Edge, and Safari. - */ -::-webkit-input-placeholder { - color: inherit; - opacity: 0.54; } - -/** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ @@ -434,21 +412,82 @@ legend { /* 1 */ max-width: 100%; /* 1 */ - white-space: normal; - /* 1 */ + padding: 0; + /* 3 */ color: inherit; /* 2 */ - padding: 0; - /* 3 */ } + white-space: normal; + /* 1 */ } /** - * Restore the font weight unset by a previous rule. + * 1. Add the correct display in IE 9-. + * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. */ -optgroup { - font-weight: bold; } +progress { + display: inline-block; + /* 1 */ + vertical-align: baseline; + /* 2 */ } /** * Remove the default vertical scrollbar in IE. */ textarea { overflow: auto; } + +/* Interactive + ========================================================================== */ +/* + * Add the correct display in Edge, IE, and Firefox. + */ +details { + display: block; } + +/* + * Add the correct display in all browsers. + */ +summary { + display: list-item; } + +/* + * Add the correct display in IE 9-. + */ +menu { + display: block; + /* + * 1. Set 1 unit of vertical rhythm on the top and bottom margin. + * 2. Set consistent space for the list style image. + */ + margin: 1.5rem 0; + /* 1 */ + padding: 0 0 0 40px; + /* 2 */ + /** + * Turn off margins on nested lists. + */ } + menu menu, + ol menu, + ul menu { + margin: 0; } + +/* Scripting + ========================================================================== */ +/** + * Add the correct display in IE 9-. + */ +canvas { + display: inline-block; } + +/** + * Add the correct display in IE. + */ +template { + display: none; } + +/* Hidden + ========================================================================== */ +/** + * Add the correct display in IE 10-. + */ +[hidden] { + display: none; } diff --git a/test/fixtures/variables/indent-amount-and-vertical-rhythm/input.scss b/test/fixtures/variables/indent-amount-and-vertical-rhythm/input.scss new file mode 100644 index 0000000..1fa8dac --- /dev/null +++ b/test/fixtures/variables/indent-amount-and-vertical-rhythm/input.scss @@ -0,0 +1,5 @@ +$normalize-vertical-rhythm: true; +$indent-amount: 3em; + +@import 'normalize'; +@include normalize(); diff --git a/test/fixtures/variables/indent-amount-and-vertical-rhythm/output.css b/test/fixtures/variables/indent-amount-and-vertical-rhythm/output.css new file mode 100644 index 0000000..013be00 --- /dev/null +++ b/test/fixtures/variables/indent-amount-and-vertical-rhythm/output.css @@ -0,0 +1,493 @@ +/*! normalize-scss | MIT/GPLv2 License | bit.ly/normalize-scss */ +/* Document + ========================================================================== */ +/** + * 1. Change the default font family in all browsers (opinionated). + * 2. Correct the line height in all browsers. + * 3. Prevent adjustments of font size after orientation changes in + * IE on Windows Phone and in iOS. + */ +html { + font-family: sans-serif; + /* 1 */ + font-size: 100%; + line-height: 1.5em; + /* 2 */ + -ms-text-size-adjust: 100%; + /* 3 */ + -webkit-text-size-adjust: 100%; + /* 3 */ } + +/* Sections + ========================================================================== */ +/** + * Remove the margin in all browsers (opinionated). + */ +body { + margin: 0; } + +/** + * Add the correct display in IE 9-. + */ +article, +aside, +footer, +header, +nav, +section { + display: block; } + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ +h1 { + font-size: 2em; + line-height: 1.5em; + /* Set 1 unit of vertical rhythm on the top and bottom margins. */ + margin: 0.75em 0; } + +h2 { + font-size: 1.5em; + line-height: 2em; + margin: 1em 0; } + +h3 { + font-size: 1.17em; + line-height: 1.28205em; + margin: 1.28205em 0; } + +h4 { + font-size: 1em; + line-height: 1.5em; + margin: 1.5em 0; } + +h5 { + font-size: 0.83em; + line-height: 1.80723em; + margin: 1.80723em 0; } + +h6 { + font-size: 0.67em; + line-height: 2.23881em; + margin: 2.23881em 0; } + +/* Grouping content + ========================================================================== */ +/** + * Set 1 unit of vertical rhythm on the top and bottom margin. + */ +blockquote { + margin: 1.5em 3em; } + +dl, +ol, +ul { + margin: 1.5em 0; } + +/** + * Turn off margins on nested lists. + */ +ol ol, +ol ul, +ul ol, +ul ul { + margin: 0; } + +dd { + margin: 0 0 0 3em; } + +ol, +ul { + padding: 0 0 0 3em; } + +/** + * Add the correct display in IE 9-. + */ +figcaption, +figure { + display: block; } + +/** + * Add the correct margin in IE 8. + */ +figure { + margin: 1.5em 3em; } + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ +hr { + box-sizing: content-box; + /* 1 */ + height: 0; + /* 1 */ + overflow: visible; + /* 2 */ } + +/** + * Add the correct display in IE. + */ +main { + display: block; } + +/** + * Set 1 unit of vertical rhythm on the top and bottom margin. + */ +p, +pre { + margin: 1.5em 0; } + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ +pre { + font-family: monospace, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ } + +/* Links + ========================================================================== */ +/** + * 1. Remove the gray background on active links in IE 10. + * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. + */ +a { + background-color: transparent; + /* 1 */ + -webkit-text-decoration-skip: objects; + /* 2 */ } + +/** + * Remove the outline on focused links when they are also active or hovered + * in all browsers (opinionated). + */ +a:active, +a:hover { + outline-width: 0; } + +/* Text-level semantics + ========================================================================== */ +/** + * 1. Remove the bottom border in Firefox 39-. + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ +abbr[title] { + border-bottom: none; + /* 1 */ + text-decoration: underline; + /* 2 */ + text-decoration: underline dotted; + /* 2 */ } + +/** + * Prevent the duplicate application of `bolder` by the next rule in Safari 6. + */ +b, +strong { + font-weight: inherit; } + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ +b, +strong { + font-weight: bolder; } + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ +code, +kbd, +samp { + font-family: monospace, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ } + +/** + * Add the correct font style in Android 4.3-. + */ +dfn { + font-style: italic; } + +/** + * Add the correct background and color in IE 9-. + */ +mark { + background-color: #ff0; + color: #000; } + +/** + * Add the correct font size in all browsers. + */ +small { + font-size: 80%; } + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; } + +sub { + bottom: -0.25em; } + +sup { + top: -0.5em; } + +/* Embedded content + ========================================================================== */ +/** + * Add the correct display in IE 9-. + */ +audio, +video { + display: inline-block; } + +/** + * Add the correct display in iOS 4-7. + */ +audio:not([controls]) { + display: none; + height: 0; } + +/** + * Remove the border on images inside links in IE 10-. + */ +img { + border-style: none; } + +/** + * Hide the overflow in IE. + */ +svg:not(:root) { + overflow: hidden; } + +/* Forms + ========================================================================== */ +/** + * 1. Change the font styles in all browsers (opinionated). + * 2. Remove the margin in Firefox and Safari. + */ +button, +input, +optgroup, +select, +textarea { + font-family: sans-serif; + /* 1 */ + font-size: 100%; + /* 1 */ + line-height: 1.5em; + /* 1 */ + margin: 0; + /* 2 */ } + +/** + * Show the overflow in IE. + */ +button { + overflow: visible; } + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ +button, +select { + /* 1 */ + text-transform: none; } + +/** + * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` + * controls in Android 4. + * 2. Correct the inability to style clickable types in iOS and Safari. + */ +button, +html [type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; + /* 2 */ } + +button, +[type="button"], +[type="reset"], +[type="submit"] { + /** + * Remove the inner border and padding in Firefox. + */ + /** + * Restore the focus styles unset by the previous rule. + */ } + button::-moz-focus-inner, + [type="button"]::-moz-focus-inner, + [type="reset"]::-moz-focus-inner, + [type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; } + button:-moz-focusring, + [type="button"]:-moz-focusring, + [type="reset"]:-moz-focusring, + [type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; } + +/** + * Show the overflow in Edge. + */ +input { + overflow: visible; } + +/** + * 1. Add the correct box sizing in IE 10-. + * 2. Remove the padding in IE 10-. + */ +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; + /* 1 */ + padding: 0; + /* 2 */ } + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; } + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ +[type="search"] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ + /** + * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. + */ } + [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { + -webkit-appearance: none; } + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ } + +/** + * Change the border, margin, and padding in all browsers (opinionated). + */ +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; } + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ +legend { + box-sizing: border-box; + /* 1 */ + display: table; + /* 1 */ + max-width: 100%; + /* 1 */ + padding: 0; + /* 3 */ + color: inherit; + /* 2 */ + white-space: normal; + /* 1 */ } + +/** + * 1. Add the correct display in IE 9-. + * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ +progress { + display: inline-block; + /* 1 */ + vertical-align: baseline; + /* 2 */ } + +/** + * Remove the default vertical scrollbar in IE. + */ +textarea { + overflow: auto; } + +/* Interactive + ========================================================================== */ +/* + * Add the correct display in Edge, IE, and Firefox. + */ +details { + display: block; } + +/* + * Add the correct display in all browsers. + */ +summary { + display: list-item; } + +/* + * Add the correct display in IE 9-. + */ +menu { + display: block; + /* + * 1. Set 1 unit of vertical rhythm on the top and bottom margin. + * 2. Set consistent space for the list style image. + */ + margin: 1.5em 0; + /* 1 */ + padding: 0 0 0 3em; + /* 2 */ + /** + * Turn off margins on nested lists. + */ } + menu menu, + ol menu, + ul menu { + margin: 0; } + +/* Scripting + ========================================================================== */ +/** + * Add the correct display in IE 9-. + */ +canvas { + display: inline-block; } + +/** + * Add the correct display in IE. + */ +template { + display: none; } + +/* Hidden + ========================================================================== */ +/** + * Add the correct display in IE 10-. + */ +[hidden] { + display: none; } diff --git a/test/fixtures/variables/indent-amount/output.css b/test/fixtures/variables/indent-amount/output.css index 2f67b2a..be92ac7 100644 --- a/test/fixtures/variables/indent-amount/output.css +++ b/test/fixtures/variables/indent-amount/output.css @@ -1,74 +1,91 @@ /*! normalize-scss | MIT/GPLv2 License | bit.ly/normalize-scss */ +/* Document + ========================================================================== */ /** * 1. Change the default font family in all browsers (opinionated). - * 2. Prevent adjustments of font size after orientation changes in IE and iOS. + * 2. Correct the line height in all browsers. + * 3. Prevent adjustments of font size after orientation changes in + * IE on Windows Phone and in iOS. */ html { - font-size: 100%; - line-height: 1.5em; font-family: sans-serif; /* 1 */ - -ms-text-size-adjust: 100%; + line-height: 1.15; /* 2 */ + -ms-text-size-adjust: 100%; + /* 3 */ -webkit-text-size-adjust: 100%; - /* 2 */ } + /* 3 */ } +/* Sections + ========================================================================== */ /** * Remove the margin in all browsers (opinionated). */ body { margin: 0; } -/* HTML5 display definitions - ========================================================================== */ /** - * Add the correct display in IE <10. - * Add the correct display in Edge, IE, and Firefox for `details` or `summary`. - * Add the correct display in IE for `main`. + * Add the correct display in IE 9-. */ article, aside, -details, -figcaption, -figure, footer, header, -main, -menu, nav, -section, -summary { +section { display: block; } /** - * Add the correct display in IE <10. + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. */ -audio, -canvas, -progress, -video { - display: inline-block; } +h1 { + font-size: 2em; + margin: 0.67em 0; } +/* Grouping content + ========================================================================== */ /** - * Add the correct display and remove excess height in iOS 4-7. + * Add the correct display in IE 9-. */ -audio:not([controls]) { - display: none; - height: 0; } +figcaption, +figure { + display: block; } /** - * Add the correct vertical alignment in Chrome, Firefox, and Opera. + * Add the correct margin in IE 8. */ -progress { - vertical-align: baseline; } +figure { + margin: 1em 3em; } /** - * Add the correct display in IE <11, Safari <8, and Firefox <22. - * 1. Add the correct display in IE. + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. */ -template, -[hidden] { - display: none; } +hr { + box-sizing: content-box; + /* 1 */ + height: 0; + /* 1 */ + overflow: visible; + /* 2 */ } + +/** + * Add the correct display in IE. + */ +main { + display: block; } + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ +pre { + font-family: monospace, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ } /* Links ========================================================================== */ @@ -93,7 +110,7 @@ a:hover { /* Text-level semantics ========================================================================== */ /** - * 1. Remove the bottom border in Firefox <40. + * 1. Remove the bottom border in Firefox 39-. * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { @@ -126,51 +143,18 @@ code, kbd, samp { font-family: monospace, monospace; - font-size: 1em; } + /* 1 */ + font-size: 1em; + /* 2 */ } /** - * Add the correct font style in Android <4.4. + * Add the correct font style in Android 4.3-. */ dfn { font-style: italic; } /** - * Correct the font size and margin on `h1` elements within `section` and - * `article` contexts in Chrome, Firefox, and Safari. - */ -h1 { - font-size: 2em; - line-height: 1.5em; - /* Set 1 unit of vertical rhythm on the top and bottom margins. */ - margin: 0.75em 0; } - -h2 { - font-size: 1.5em; - line-height: 2em; - margin: 1em 0; } - -h3 { - font-size: 1.17em; - line-height: 1.28205em; - margin: 1.28205em 0; } - -h4 { - font-size: 1em; - line-height: 1.5em; - margin: 1.5em 0; } - -h5 { - font-size: 0.83em; - line-height: 1.80723em; - margin: 1.80723em 0; } - -h6 { - font-size: 0.67em; - line-height: 2.23881em; - margin: 2.23881em 0; } - -/** - * Add the correct background and color in IE <10. + * Add the correct background and color in IE 9-. */ mark { background-color: #ff0; @@ -202,100 +186,35 @@ sup { /* Embedded content ========================================================================== */ /** - * Remove the border on images inside links in IE <11. + * Add the correct display in IE 9-. */ -img { - border-style: none; } +audio, +video { + display: inline-block; } /** - * Hide the overflow in IE. + * Add the correct display in iOS 4-7. */ -svg:not(:root) { - overflow: hidden; } - -/* Grouping content - ========================================================================== */ -/** - * Set 1 unit of vertical rhythm on the top and bottom margin. - */ -blockquote { - margin: 1.5em 3em; } - -dl, -menu, -ol, -ul { - margin: 1.5em 0; } - -/** - * Turn off margins on nested lists. - */ -ol ol, -ol ul, -ul ol, -ul ul { - margin: 0; } - -dd { - margin: 0 0 0 3em; } - -menu, -ol, -ul { - padding: 0 0 0 3em; } +audio:not([controls]) { + display: none; + height: 0; } /** - * Add the correct margin in IE 8. + * Remove the border on images inside links in IE 10-. */ -figure { - margin: 1.5em 3em; } +img { + border-style: none; } /** - * 1. Add the correct box sizing in Firefox. - * 2. Show the overflow in Edge and IE. + * Hide the overflow in IE. */ -hr { - box-sizing: content-box; - /* 1 */ - height: 0; - /* 1 */ - overflow: visible; - /* 2 */ } - -/** - * Set 1 unit of vertical rhythm on the top and bottom margin. - */ -p, -pre { - margin: 1.5em 0; } - -pre { - font-family: monospace, monospace; - font-size: 1em; } +svg:not(:root) { + overflow: hidden; } /* Forms ========================================================================== */ /** - * Known issues: - * - By default, Chrome on OS X and Safari on OS X allow very limited styling of - * select, unless a border property is set. The default font weight on - * optgroup elements cannot safely be changed in Chrome on OSX and Safari on - * OS X. - * - It is recommended that you do not style checkbox and radio inputs as - * Firefox's implementation does not respect box-sizing, padding, or width. - * - Certain font size values applied to number inputs cause the cursor style of - * the decrement button to change from default to text. - * - The search input is not fully stylable by default. In Chrome and Safari on - * OSX/iOS you can't control font, padding, border, or background. In Chrome - * and Safari on Windows you can't control border properly. It will apply - * border-width but will only show a border color (which cannot be controlled) - * for the outer 1px of that border. Applying -webkit-appearance: textfield - * addresses these issues without removing the benefits of search inputs (e.g. - * showing past searches). Safari (but not Chrome) will clip the cancel button - * on when it has padding (and textfield appearance). - */ -/** - * 1. Change font properties to `inherit` in all browsers (opinionated). + * 1. Change the font styles in all browsers (opinionated). * 2. Remove the margin in Firefox and Safari. */ button, @@ -303,7 +222,11 @@ input, optgroup, select, textarea { - font: inherit; + font-family: sans-serif; + /* 1 */ + font-size: 100%; + /* 1 */ + line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } @@ -364,8 +287,8 @@ input { overflow: visible; } /** - * 1. Add the correct box sizing in IE <11. - * 2. Remove the padding in IE <11. + * 1. Add the correct box sizing in IE 10-. + * 2. Remove the padding in IE 10-. */ [type="checkbox"], [type="radio"] { @@ -391,19 +314,12 @@ input { outline-offset: -2px; /* 2 */ /** - * Remove the inner padding and cancel buttons in Chrome and Safari on OS X. + * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. */ } [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** - * Correct the text style of placeholders in Chrome, Edge, and Safari. - */ -::-webkit-input-placeholder { - color: inherit; - opacity: 0.54; } - -/** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ @@ -434,21 +350,67 @@ legend { /* 1 */ max-width: 100%; /* 1 */ - white-space: normal; - /* 1 */ + padding: 0; + /* 3 */ color: inherit; /* 2 */ - padding: 0; - /* 3 */ } + white-space: normal; + /* 1 */ } /** - * Restore the font weight unset by a previous rule. + * 1. Add the correct display in IE 9-. + * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. */ -optgroup { - font-weight: bold; } +progress { + display: inline-block; + /* 1 */ + vertical-align: baseline; + /* 2 */ } /** * Remove the default vertical scrollbar in IE. */ textarea { overflow: auto; } + +/* Interactive + ========================================================================== */ +/* + * Add the correct display in Edge, IE, and Firefox. + */ +details { + display: block; } + +/* + * Add the correct display in all browsers. + */ +summary { + display: list-item; } + +/* + * Add the correct display in IE 9-. + */ +menu { + display: block; } + +/* Scripting + ========================================================================== */ +/** + * Add the correct display in IE 9-. + */ +canvas { + display: inline-block; } + +/** + * Add the correct display in IE. + */ +template { + display: none; } + +/* Hidden + ========================================================================== */ +/** + * Add the correct display in IE 10-. + */ +[hidden] { + display: none; } diff --git a/test/test_variables.js b/test/test_variables.js index 7102e21..92d9439 100644 --- a/test/test_variables.js +++ b/test/test_variables.js @@ -28,4 +28,10 @@ describe('Configuration variables', function() { return sassyTest.renderFixture('variables/indent-amount'); }); }); + + describe('$indent-amount and $normalize-vertical-rhythm', function() { + it('should alter the indent amount of elements', function() { + return sassyTest.renderFixture('variables/indent-amount-and-vertical-rhythm'); + }); + }); }); |