]> git.ipfire.org Git - thirdparty/bootstrap.git/commitdiff
Drop Normalize, port relevant parts to Reboot (#21741)
authorMark Otto <markd.otto@gmail.com>
Sat, 21 Jan 2017 22:14:25 +0000 (14:14 -0800)
committerGitHub <noreply@github.com>
Sat, 21 Jan 2017 22:14:25 +0000 (14:14 -0800)
* Get this party started by removing mention of Normalize.css

* Nuke the old comment, consolidate to a single line and number as appropriate

* Bring over styles for HTML element from Normalize to Reboot

* Move margin override for body element from Normalize to Reboot

* Drop the block reset for HTML5 elements in IE9- from Normalize given we dropped IE9 support

* Building on previous commit, do the same thing for figure, figcaption, and main

* Remove IE9- display from Normalize given our browser support

* Drop IE8 figure margin because we're IE10+

* No need for the h1 overrides because we reset these font and margin styles anyway in _type.scss already

* Drop Safari 6 b and strong normalization because we're Safari 8+

* Remove mark styles for IE9- from Normalize

* Remove old iOS audio fixes from Normalize

* Remove IE9- display for progress from Normalize

* Remove more IE9- rules from Normalize

* One more IE9- display removal for canvas element

* Move pre overrides from Normalize to Reboot

* Move over some link resets to Reboot, drop others

- Move over background-color and text-decoration
- Drop focus outline change given it affects the offset on hover of
focused links

* Move over more code element resets, consolidate with pre overrides, too

* Move over sub and sup wholesale

* Move over img normalization to Reboot

* Move over SVG override too

* - Drop dupe hidden, but add comment for it
- Move over template
- Move over summary

* Remove bulk of @viewport comment

* edit down that code comment

* consolidate html-based normalizations

* update comments

* Consolidate abbr styles

* move over more type elements

* move over hr changes

* move over form controls and more

* move over button resets

* move over firefox button changes

* move over search changes and more

* we nuke all these styles for fieldsets anyway, so outright remove them

* no need for those, we override them

* move over legend, fieldset, progress

* line break

* delete normalize file

* linting

* update comment

* clarify docs mentions of normalize and reboot

* remove normalize excludes from linter

* remove normalize excludes from cli task

* linting

* callout license since we forked part of normalize

* Improve comments, move table background reset to .table class instead of in reboot

* trailing space

docs/content/reboot.md
docs/content/typography.md
docs/getting-started/introduction.md
package.json
scss/.scss-lint.yml
scss/_normalize.scss [deleted file]
scss/_reboot.scss
scss/_tables.scss
scss/bootstrap-reboot.scss
scss/bootstrap.scss

index 08ad15a6aceb64e7195bd7649a98f8398d2784e2..ff4f0dc72b479b75b966b7d992a94e3089f1ce75 100644 (file)
@@ -1,7 +1,7 @@
 ---
 layout: docs
 title: Reboot
-description: Documentation and examples for Reboot, Bootstrap's collection of element-specific CSS that builds on Normalize.css.
+description: Documentation and examples for Reboot, Bootstrap's collection of element-specific CSS that heavily builds on Normalize.css.
 group: content
 redirect_from: "/content/"
 ---
index 7e3fbe7268333b6d5cb9ae9fef48b50418e87a06..4fe5bbe021bbecd0a6afe2e13a575598eb1900f4 100644 (file)
@@ -155,7 +155,7 @@ Change text alignment, transform, style, weight, and color with our [text utilit
 
 ## Abbreviations
 
-Stylized implementation of HTML's `<abbr>` element for abbreviations and acronyms to show the expanded version on hover. Abbreviations have a default underline from Normalize.css and gain a help cursor to provide additional context on hover and to users of assistive technologies.
+Stylized implementation of HTML's `<abbr>` element for abbreviations and acronyms to show the expanded version on hover. Abbreviations have a default underline and gain a help cursor to provide additional context on hover and to users of assistive technologies.
 
 Add `.initialism` to an abbreviation for a slightly smaller font-size.
 
index 9d6fa2ce4d1816525548a10dbf6f019647253f7a..d70a42627c99fa5bb0fbc3d5d61dbffd519d109f 100644 (file)
@@ -106,9 +106,9 @@ With the above snippet, nested elements—including generated content via `:befo
 
 Learn more about [box model and sizing at CSS Tricks](https://css-tricks.com/box-sizing/).
 
-### Normalize.css
+### Reboot
 
-For improved cross-browser rendering, we use [Normalize.css](https://necolas.github.io/normalize.css/) to correct small inconsistencies across browsers and devices. We further build on this with our own, slightly more opinionated styles with [Reboot]({{ site.baseurl }}/content/reboot/).
+For improved cross-browser rendering, we use [Reboot]({{ site.baseurl }}/content/reboot/) to correct inconsistencies across browsers and devices while providing slightly more opinionated resets to common HTML elements.
 
 ## Community
 
index 69c7f622355dfd6e32bde3b87a743d99637c5c83..ae913bbc1db60a908b94dccb667e943cdb9cdcc8 100644 (file)
@@ -26,7 +26,7 @@
     "postcss-docs": "postcss --config grunt/postcss.js --no-map --replace docs/assets/css/docs.min.css && postcss --config grunt/postcss.js --no-map --replace docs/examples/**/*.css",
     "sass": "node-sass --output-style expanded --source-map true --precision 6 scss/bootstrap.scss dist/css/bootstrap.css && node-sass --output-style expanded --source-map true --precision 6 scss/bootstrap-grid.scss dist/css/bootstrap-grid.css && node-sass --output-style expanded --source-map true --precision 6 scss/bootstrap-reboot.scss dist/css/bootstrap-reboot.css",
     "sass-docs": "node-sass --output-style expanded --source-map true --precision 6 docs/assets/scss/docs.scss docs/assets/css/docs.min.css",
-    "scss-lint": "bundle exec scss-lint --config scss/.scss-lint.yml --exclude scss/_normalize.scss scss/*.scss",
+    "scss-lint": "bundle exec scss-lint --config scss/.scss-lint.yml scss/*.scss",
     "scss-lint-docs": "bundle exec scss-lint --config scss/.scss-lint.yml --exclude docs/assets/scss/docs.scss docs/assets/scss/*.scss",
     "uglify": "uglifyjs --compress warnings=false --mangle --comments '/^!/' --output dist/js/bootstrap.min.js dist/js/bootstrap.js",
     "uglify-docs": "uglifyjs --compress warnings=false --mangle --comments '/^!/' --output docs/assets/js/docs.min.js docs/assets/js/vendor/anchor.min.js docs/assets/js/vendor/clipboard.min.js docs/assets/js/vendor/holder.min.js docs/assets/js/src/application.js",
index 9d6e7ec4e8c7e373e9706a01e86187b3f8c02ead..845001ef4239f9dddb12c3ded379f504daa29128 100644 (file)
@@ -3,9 +3,6 @@ scss_files:
   - "**/*.scss"
   - "docs/assets/scss/**/*.scss"
 
-exclude:
-  - "scss/_normalize.scss"
-
 plugin_directories: ['.scss-linters']
 
 # List of gem names to load custom linters from (make sure they are already
@@ -28,8 +25,6 @@ linters:
   BorderZero:
     enabled: true
     convention: zero # or `none`
-    exclude:
-      - _normalize.scss
 
   ChainedClasses:
     enabled: false
@@ -43,7 +38,6 @@ linters:
   Comment:
     enabled: true
     exclude:
-      - _normalize.scss
       - bootstrap.scss
     style: silent
 
@@ -108,8 +102,6 @@ linters:
   LeadingZero:
     enabled: true
     style: exclude_zero # or 'include_zero'
-    exclude:
-      - _normalize.scss
 
   MergeableSelector:
     enabled: false
@@ -138,8 +130,6 @@ linters:
     ignore_unspecified: false
     min_properties: 2
     separate_groups: false
-    exclude:
-      - _normalize.scss
     order:
       - position
       - top
@@ -538,8 +528,6 @@ linters:
     identifier_list: base
     additional_identifiers: []
     excluded_identifiers: []
-    exclude:
-      - _normalize.scss
 
   ZeroUnit:
     enabled: true
diff --git a/scss/_normalize.scss b/scss/_normalize.scss
deleted file mode 100644 (file)
index 6bafd53..0000000
+++ /dev/null
@@ -1,461 +0,0 @@
-/*! 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 on Windows Phone and in iOS.
-//
-
-// Document
-// ==========================================================================
-
-html {
-  font-family: sans-serif; // 1
-  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).
-//
-
-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;
-  margin: 0.67em 0;
-}
-
-// Grouping content
-// ==========================================================================
-
-//
-// Add the correct display in IE 9-.
-// 1. Add the correct display in IE.
-//
-
-figcaption,
-figure,
-main { // 1
-  display: block;
-}
-
-//
-// 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
-// ==========================================================================
-
-//
-// 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;
-}
-
-//
-// 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.15; // 1
-  margin: 0; // 2
-}
-
-//
-// Show the overflow in IE.
-// 1. Show the overflow in Edge.
-//
-
-button,
-input { // 1
-  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"], // 1
-[type="reset"],
-[type="submit"] {
-  -webkit-appearance: button; // 2
-}
-
-//
-// Remove the inner border and padding in Firefox.
-//
-
-button::-moz-focus-inner,
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-
-//
-// Restore the focus styles unset by the previous rule.
-//
-
-button:-moz-focusring,
-[type="button"]:-moz-focusring,
-[type="reset"]:-moz-focusring,
-[type="submit"]:-moz-focusring {
-  outline: 1px dotted ButtonText;
-}
-
-//
-// 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
-  color: inherit; // 2
-  display: table; // 1
-  max-width: 100%; // 1
-  padding: 0; // 3
-  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;
-}
-
-//
-// 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
-}
-
-// 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;
-}
index 266ed78194d4b72ee90a32571c172af85b235934..30a5728f27a1d437a2d41a2ecb2559fc6363d5bb 100644 (file)
@@ -1,86 +1,58 @@
-// scss-lint:disable QualifyingElement, DuplicateProperty
+// scss-lint:disable QualifyingElement, DuplicateProperty, VendorPrefix
 
 // Reboot
 //
-// Global resets to common HTML elements and more for easier usage by Bootstrap.
-// Adds additional rules on top of Normalize.css, including several overrides.
+// Normalization of HTML elements, manually forked from Normalize.css to remove
+// styles targeting irrelevant browsers while applying new styles.
+//
+// Normalize is licensed MIT. https://github.com/necolas/normalize.css
 
 
-// Reset the box-sizing
-//
-// Change from `box-sizing: content-box` to `border-box` so that when you add
-// `padding` or `border`s to an element, the overall declared `width` does not
-// change. For example, `width: 100px;` will always be `100px` despite the
-// `border: 10px solid red;` and `padding: 20px;`.
-//
-// Heads up! This reset may cause conflicts with some third-party widgets. For
-// recommendations on resolving such conflicts, see
-// https://getbootstrap.com/getting-started/#third-box-sizing.
+// Document
 //
-// Credit: https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
+// 1. Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.
+// 2. Change the default font family in all browsers.
+// 3. Correct the line height in all browsers.
+// 4. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS.
+// 5. Setting @viewport causes scrollbars to overlap content in IE11 and Edge, so
+//    we force a non-overlapping, non-auto-hiding scrollbar to counteract.
+// 6. Change the default tap highlight to be completely transparent in iOS.
 
 html {
-  box-sizing: border-box;
+  box-sizing: border-box; // 1
+  font-family: sans-serif; // 2
+  line-height: 1.15; // 3
+  -ms-text-size-adjust: 100%; // 4
+  -webkit-text-size-adjust: 100%; // 4
+  -ms-overflow-style: scrollbar; // 5
+  -webkit-tap-highlight-color: rgba(0,0,0,0); // 6
 }
 
 *,
 *::before,
 *::after {
-  box-sizing: inherit;
+  box-sizing: inherit; // 1
 }
 
-
-// Make viewport responsive
-//
-// @viewport is needed because IE 10+ doesn't honor <meta name="viewport"> in
-// some cases. See https://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/.
-// Eventually @viewport will replace <meta name="viewport">.
-//
-// However, `device-width` is broken on IE 10 on Windows (Phone) 8,
-// (see https://timkadlec.com/2013/01/windows-phone-8-and-device-width/ and https://github.com/twbs/bootstrap/issues/10497)
-// and the fix for that involves a snippet of JavaScript to sniff the user agent
-// and apply some conditional CSS.
-//
-// See https://getbootstrap.com/getting-started/#support-ie10-width for the relevant hack.
-//
-// Wrap `@viewport` with `@at-root` for when folks do a nested import (e.g.,
-// `.class-name { @import "bootstrap"; }`).
+// IE10+ doesn't honor `<meta name="viewport">` in some cases.
 @at-root {
   @-ms-viewport { width: device-width; }
 }
 
 
+// Body
 //
-// Reset HTML, body, and more
-//
-
-html {
-  // We assume no initial pixel `font-size` for accessibility reasons. This
-  // allows web visitors to customize their browser default font-size, making
-  // your project more inclusive and accessible to everyone.
-
-  // As a side-effect of setting the @viewport above,
-  // IE11 & Edge make the scrollbar overlap the content and automatically hide itself when not in use.
-  // Unfortunately, the auto-showing of the scrollbar is sometimes too sensitive,
-  // thus making it hard to click on stuff near the right edge of the page.
-  // So we add this style to force IE11 & Edge to use a "normal", non-overlapping, non-auto-hiding scrollbar.
-  // See https://github.com/twbs/bootstrap/issues/18543
-  // and https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7165383/
-  -ms-overflow-style: scrollbar;
-
-  // Changes the default tap highlight to be completely transparent in iOS.
-  -webkit-tap-highlight-color: rgba(0,0,0,0);
-}
+// 1. Remove the margin in all browsers.
+// 2. As a best practice, apply a default `background-color`.
 
 body {
+  margin: 0; // 1
   font-family: $font-family-base;
   font-size: $font-size-base;
   font-weight: $font-weight-base;
   line-height: $line-height-base;
-  // Go easy on the eyes and use something other than `#000` for text
   color: $body-color;
-  // By default, `<body>` has no `background-color` so we set one as a best practice.
-  background-color: $body-bg;
+  background-color: $body-bg; // 2
 }
 
 // Suppress the focus outline on elements that cannot be accessed via keyboard.
@@ -93,6 +65,18 @@ body {
 }
 
 
+// Content grouping
+//
+// 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
+}
+
+
 //
 // Typography
 //
@@ -116,10 +100,18 @@ p {
 }
 
 // Abbreviations
+//
+// 1. Remove the bottom border in Firefox 39-.
+// 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+// 3. Add explicit cursor to indicate changed behavior.
+// 4. Duplicate behavior to the data-* attribute for our tooltip plugin
+
 abbr[title],
-// Add data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257
-abbr[data-original-title] {
-  cursor: help;
+abbr[data-original-title] { // 4
+  text-decoration: underline; // 2
+  text-decoration: underline dotted; // 2
+  cursor: help; // 3
+  border-bottom: 0; // 1
 }
 
 address {
@@ -155,6 +147,35 @@ blockquote {
   margin: 0 0 1rem;
 }
 
+dfn {
+  font-style: italic; // Add the correct font style in Android 4.3-
+}
+
+b,
+strong {
+  font-weight: bolder; // Add the correct font weight in Chrome, Edge, and Safari
+}
+
+small {
+  font-size: 80%; // Add the correct font size in all browsers
+}
+
+//
+// Prevent `sub` and `sup` elements from affecting the line height in
+// all browsers.
+//
+
+sub,
+sup {
+  position: relative;
+  font-size: 75%;
+  line-height: 0;
+  vertical-align: baseline;
+}
+
+sub { bottom: -.25em; }
+sup { top: -.5em; }
+
 
 //
 // Links
@@ -163,6 +184,8 @@ blockquote {
 a {
   color: $link-color;
   text-decoration: $link-decoration;
+  background-color: transparent; // Remove the gray background on active links in IE 10.
+  -webkit-text-decoration-skip: objects; // Remove gaps in links underline in iOS 8+ and Safari 8+.
 
   @include hover {
     color: $link-hover-color;
@@ -195,12 +218,20 @@ a:not([href]):not([tabindex]) {
 // Code
 //
 
+pre,
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; // Correct the inheritance and scaling of font size in all browsers.
+  font-size: 1em; // Correct the odd `em` font sizing in all browsers.
+}
+
 pre {
   // Remove browser default top margin
   margin-top: 0;
   // Reset browser default of `1em` to use `rem`s
   margin-bottom: 1rem;
-  // Normalize v4 removed this property, causing `<pre>` content to break out of wrapping code snippets
+  // Don't allow content to break outside
   overflow: auto;
 }
 
@@ -210,22 +241,22 @@ pre {
 //
 
 figure {
-  // Normalize adds `margin` to `figure`s as browsers apply it inconsistently.
-  // We reset that to create a better flow in-page.
+  // Apply a consistent margin strategy (matches our type styles).
   margin: 0 0 1rem;
 }
 
 
 //
-// Images
+// Images and content
 //
 
 img {
-  // By default, `<img>`s are `inline-block`. This assumes that, and vertically
-  // centers them. This won't apply should you reset them to `block` level.
   vertical-align: middle;
-  // Note: `<img>`s are deliberately not made responsive by default.
-  // For the rationale behind this, see the comments on the `.img-fluid` class.
+  border-style: none; // Remove the border on images inside links in IE 10-.
+}
+
+svg:not(:root) {
+  overflow: hidden; // Hide the overflow in IE
 }
 
 
@@ -268,10 +299,7 @@ textarea {
 //
 
 table {
-  // No longer part of Normalize since v4
-  border-collapse: collapse;
-  // Reset for nesting within parents with `background-color`.
-  background-color: $table-bg;
+  border-collapse: collapse; // Prevent double borders
 }
 
 caption {
@@ -283,7 +311,7 @@ caption {
 }
 
 th {
-  // Centered by default, but left-align-ed to match the `td`s below.
+  // Matches default `<td>` alignment
   text-align: left;
 }
 
@@ -310,14 +338,48 @@ button:focus {
 input,
 button,
 select,
+optgroup,
 textarea {
-  // Normalize includes `font: inherit;`, so `font-family`. `font-size`, etc are
-  // properly inherited. However, `line-height` isn't inherited there.
+  margin: 0; // Remove the margin in Firefox and Safari
+  font-family: inherit;
+  font-size: inherit;
   line-height: inherit;
 }
 
+button,
+input {
+  overflow: visible; // Show the overflow in Edge
+}
+
+button,
+select {
+  text-transform: none; // Remove the inheritance of text transform in Firefox
+}
+
+// 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"], // 1
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button; // 2
+}
+
+// Remove inner border and padding from Firefox, but don't restore the outline like Normalize.
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  padding: 0;
+  border-style: none;
+}
+
 input[type="radio"],
 input[type="checkbox"] {
+  box-sizing: border-box; // 1. Add the correct box sizing in IE 10-
+  padding: 0; // 2. Remove the padding in IE 10-
+
   // Apply a disabled cursor for radios and checkboxes.
   //
   // Note: Neither radios nor checkboxes can be readonly.
@@ -340,6 +402,7 @@ input[type="month"] {
 }
 
 textarea {
+  overflow: auto; // Remove the default vertical scrollbar in IE.
   // Textareas should really only resize vertically so they don't break their (horizontal) containers.
   resize: vertical;
 }
@@ -357,33 +420,76 @@ fieldset {
   border: 0;
 }
 
+// 1. Correct the text wrapping in Edge and IE.
+// 2. Correct the color inheritance from `fieldset` elements in IE.
 legend {
-  // Reset the entire legend element to match the `fieldset`
   display: block;
   width: 100%;
+  max-width: 100%; // 1
   padding: 0;
   margin-bottom: .5rem;
   font-size: 1.5rem;
   line-height: inherit;
+  color: inherit; // 2
+  white-space: normal; // 1
+}
+
+progress {
+  vertical-align: baseline; // Add the correct vertical alignment in Chrome, Firefox, and Opera.
+}
+
+// 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;
 }
 
-input[type="search"] {
+[type="search"] {
   // This overrides the extra rounded corners on search inputs in iOS so that our
   // `.form-control` class can properly style them. Note that this cannot simply
   // be added to `.form-control` as it's not specific enough. For details, see
   // https://github.com/twbs/bootstrap/issues/11586.
+  outline-offset: -2px; // 2. Correct the outline style in Safari.
   -webkit-appearance: none;
 }
 
-// todo: needed?
+//
+// 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 {
+  font: inherit; // 2
+  -webkit-appearance: button; // 1
+}
+
+//
+// Correct element displays
+//
+
 output {
   display: inline-block;
-//  font-size: $font-size-base;
-//  line-height: $line-height;
-//  color: $input-color;
+}
+
+summary {
+  display: list-item; // Add the correct display in all browsers
+}
+
+template {
+  display: none; // Add the correct display in IE
 }
 
 // Always hide an element with the `hidden` HTML attribute (from PureCSS).
+// Needed for proper display in IE 10-.
 [hidden] {
   display: none !important;
 }
index 47be2c508474848260aea0850105898310db31e0..47c3ac2979f14627e8f731db2b90df6d6e5610fa 100644 (file)
@@ -6,6 +6,7 @@
   width: 100%;
   max-width: 100%;
   margin-bottom: $spacer;
+  background-color: $table-bg; // Reset for nesting within parents with `background-color`.
 
   th,
   td {
index 978b086a1a28d9ed2a6241e57349f3ba5a9dde45..fd5ba0ca05697ea772ed12d2dc1f12b553020942 100644 (file)
@@ -6,5 +6,4 @@
 @import "mixins";
 @import "custom";
 
-@import "normalize";
 @import "reboot";
index e47021ce9deba65eea171e5a49522036f28c2ae4..f7577f5c793b6ddb5c2333a135d47cd1bb8f3752 100644 (file)
@@ -10,8 +10,6 @@
 @import "variables";
 @import "mixins";
 
-// Reset and dependencies
-@import "normalize";
 @import "print";
 
 // Core CSS