diff --git a/scss/_normalize.scss b/scss/_normalize.scss index c4df66618b..6bafd53f63 100644 --- a/scss/_normalize.scss +++ b/scss/_normalize.scss @@ -1,11 +1,15 @@ -/*! normalize.css v4.2.0 | MIT License | github.com/necolas/normalize.css */ +/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */ // // 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 and iOS. +// 3. Prevent adjustments of font size after orientation changes in +// IE on Windows Phone and in iOS. // +// Document +// ========================================================================== + html { font-family: sans-serif; // 1 line-height: 1.15; // 2 @@ -13,6 +17,9 @@ html { -webkit-text-size-adjust: 100%; // 3 } +// Sections +// ========================================================================== + // // Remove the margin in all browsers (opinionated). // @@ -21,69 +28,73 @@ body { margin: 0; } -// HTML5 display definitions -// ========================================================================== - // // Add the correct display in IE 9-. -// 1. Add the correct display in Edge, IE, and Firefox. -// 2. Add the correct display in IE. // article, aside, -details, // 1 -figcaption, -figure, footer, header, -main, // 2 -menu, nav, -section, -summary { // 1 +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; + margin: 0.67em 0; +} + +// Grouping content +// ========================================================================== + // // Add the correct display in IE 9-. -// - -audio, -canvas, -progress, -video { - display: inline-block; -} - -// -// Add the correct display 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 10-. // 1. Add the correct display in IE. // -template, // 1 -[hidden] { - display: none; +figcaption, +figure, +main { // 1 + display: block; } -// Links +// +// Add the correct margin in IE 8. +// + +figure { + margin: 1em 40px; +} + +// +// 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 +} + +// +// 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 +} + +// Text-level semantics // ========================================================================== // @@ -106,9 +117,6 @@ 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. @@ -138,6 +146,18 @@ 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-. // @@ -146,16 +166,6 @@ 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; - margin: 0.67em 0; -} - // // Add the correct background and color in IE 9-. // @@ -197,6 +207,24 @@ sup { // 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-. // @@ -213,46 +241,11 @@ svg:not(:root) { overflow: hidden; } -// Grouping content -// ========================================================================== - -// -// 1. Correct the inheritance and scaling of font size in all browsers. -// 2. Correct the odd `em` font sizing in all browsers. -// - -code, -kbd, -pre, -samp { - font-family: monospace, monospace; // 1 - font-size: 1em; // 2 -} - -// -// Add the correct margin in IE 8. -// - -figure { - margin: 1em 40px; -} - -// -// 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 -} - // Forms // ========================================================================== // -// 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. // @@ -261,18 +254,12 @@ input, optgroup, select, textarea { - font: inherit; // 1 + font-family: sans-serif; // 1 + font-size: 100%; // 1 + line-height: 1.15; // 1 margin: 0; // 2 } -// -// Restore the font weight unset by the previous rule. -// - -optgroup { - font-weight: $font-weight-bold; -} - // // Show the overflow in IE. // 1. Show the overflow in Edge. @@ -355,6 +342,16 @@ legend { 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. // @@ -394,7 +391,7 @@ textarea { } // -// 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, @@ -402,15 +399,6 @@ textarea { -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. @@ -420,3 +408,54 @@ textarea { -webkit-appearance: button; // 1 font: inherit; // 2 } + +// Interactive +// ========================================================================== + +// +// Add the correct display in IE 9-. +// 1. Add the correct display in Edge, IE, and Firefox. +// + +details, // 1 +menu { + display: block; +} + +// +// Add the correct display in all browsers. +// + +summary { + display: list-item; +} + +// 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; +}