Merge branch 'master' into v5-drop-media

.gitignore

@@ -1,5 +1,8 @@
 # Ignore docs files
 /_gh_pages/
+# This is the old Jekyll docs dist folder;
+# keeping it here so that when we switch branches it doesn't show up
+/site/docs/**/dist/
 /site/static/**/dist/
 /resources/
 

scss/_badge.scss

@@ -9,17 +9,11 @@
   @include font-size($badge-font-size);
   font-weight: $badge-font-weight;
   line-height: 1;
+  color: $badge-color;
   text-align: center;
   white-space: nowrap;
   vertical-align: baseline;
   @include border-radius($badge-border-radius);
-  @include transition($badge-transition);
-
-  @at-root a#{&} {
-    @include hover-focus {
-      text-decoration: none;
-    }
-  }
 
   // Empty badges collapse automatically
   &:empty {
@@ -32,23 +26,3 @@
   position: relative;
   top: -1px;
 }
-
-// Pill badges
-//
-// Make them extra rounded with a modifier to replace v3's badges.
-
-.badge-pill {
-  padding-right: $badge-pill-padding-x;
-  padding-left: $badge-pill-padding-x;
-  @include border-radius($badge-pill-border-radius);
-}
-
-// Colors
-//
-// Contextual variations (linked badges get darker on :hover).
-
-@each $color, $value in $theme-colors {
-  .badge-#{$color} {
-    @include badge-variant($value);
-  }
-}

scss/_mixins.scss

@@ -12,14 +12,11 @@
 @import "mixins/breakpoints";
 @import "mixins/hover";
 @import "mixins/image";
-@import "mixins/badge";
 @import "mixins/resize";
 @import "mixins/screen-reader";
 @import "mixins/reset-text";
 @import "mixins/text-emphasis";
-@import "mixins/text-hide";
 @import "mixins/text-truncate";
-@import "mixins/visibility";
 
 // // Components
 @import "mixins/alert";
@@ -43,4 +40,3 @@
 @import "mixins/clearfix";
 @import "mixins/grid-framework";
 @import "mixins/grid";
-@import "mixins/float";

scss/_variables.scss

@@ -911,18 +911,11 @@ $toast-header-border-color:         rgba(0, 0, 0, .05) !default;
 
 $badge-font-size:                   75% !default;
 $badge-font-weight:                 $font-weight-bold !default;
+$badge-color:                       $white !default;
 $badge-padding-y:                   .25em !default;
-$badge-padding-x:                   .4em !default;
+$badge-padding-x:                   .5em !default;
 $badge-border-radius:               $border-radius !default;
 
-$badge-transition:                  $btn-transition !default;
-$badge-focus-width:                 $input-btn-focus-width !default;
-
-$badge-pill-padding-x:              .6em !default;
-// Use a higher than normal value to ensure completely rounded edges when
-// customizing padding or font-size on labels.
-$badge-pill-border-radius:          10rem !default;
-
 
 // Modals
 

scss/mixins/_background-variant.scss

@@ -1,19 +1,5 @@
 // stylelint-disable declaration-no-important
 
-// Contextual backgrounds
-
-@mixin bg-variant($parent, $color) {
-  #{$parent} {
-    background-color: $color !important;
-  }
-  a#{$parent},
-  button#{$parent} {
-    @include hover-focus {
-      background-color: darken($color, 10%) !important;
-    }
-  }
-}
-
 @mixin bg-gradient-variant($parent, $color) {
   #{$parent} {
     background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x !important;

scss/utilities/_background.scss

@@ -1,7 +1,9 @@
 // stylelint-disable declaration-no-important
 
 @each $color, $value in $theme-colors {
-  @include bg-variant(".bg-#{$color}", $value);
+  .bg-#{$color} {
+    background-color: $value !important;
+  }
 }
 
 @if $enable-gradients {

scss/utilities/_text.scss

@@ -56,10 +56,6 @@
 
 // Misc
 
-.text-hide {
-  @include text-hide($ignore-warning: true);
-}
-
 .text-decoration-none { text-decoration: none !important; }
 
 .text-break {

site/content/docs/4.3/components/badge.md

@@ -8,22 +8,22 @@ toc: true
 
 ## Example
 
-Badges scale to match the size of the immediate parent element by using relative font sizing and `em` units.
+Badges scale to match the size of the immediate parent element by using relative font sizing and `em` units. As of v5, badges no longer have focus or hover styles for links.
 
 {{< example >}}
-<h1>Example heading <span class="badge badge-secondary">New</span></h1>
-<h2>Example heading <span class="badge badge-secondary">New</span></h2>
-<h3>Example heading <span class="badge badge-secondary">New</span></h3>
-<h4>Example heading <span class="badge badge-secondary">New</span></h4>
-<h5>Example heading <span class="badge badge-secondary">New</span></h5>
-<h6>Example heading <span class="badge badge-secondary">New</span></h6>
+<h1>Example heading <span class="badge bg-secondary">New</span></h1>
+<h2>Example heading <span class="badge bg-secondary">New</span></h2>
+<h3>Example heading <span class="badge bg-secondary">New</span></h3>
+<h4>Example heading <span class="badge bg-secondary">New</span></h4>
+<h5>Example heading <span class="badge bg-secondary">New</span></h5>
+<h6>Example heading <span class="badge bg-secondary">New</span></h6>
 {{< /example >}}
 
 Badges can be used as part of links or buttons to provide a counter.
 
 {{< example >}}
 <button type="button" class="btn btn-primary">
-  Notifications <span class="badge badge-light">4</span>
+  Notifications <span class="badge bg-secondary">4</span>
 </button>
 {{< /example >}}
 
@@ -33,19 +33,19 @@ Unless the context is clear (as with the "Notifications" example, where it is un
 
 {{< example >}}
 <button type="button" class="btn btn-primary">
-  Profile <span class="badge badge-light">9</span>
+  Profile <span class="badge bg-secondary">9</span>
   <span class="sr-only">unread messages</span>
 </button>
 {{< /example >}}
 
-## Contextual variations
+## Background colors
 
-Add any of the below mentioned modifier classes to change the appearance of a badge.
+Use our background utility classes to quickly change the appearance of a badge. Please note that when using Bootstrap's default `.bg-light`, you'll likely need a text color utility like `.text-dark` for proper styling. This is because background utilities do not set anything but `background-color`.
 
 {{< example >}}
 {{< badge.inline >}}
 {{- range (index $.Site.Data "theme-colors") }}
-<span class="badge badge-{{ .name }}">{{ .name | title }}</span>{{- end -}}
+<span class="badge bg-{{ .name }}{{ if eq .name "light" }} text-dark{{ end }}">{{ .name | title }}</span>{{- end -}}
 {{< /badge.inline >}}
 {{< /example >}}
 
@@ -55,22 +55,11 @@ Add any of the below mentioned modifier classes to change the appearance of a ba
 
 ## Pill badges
 
-Use the `.badge-pill` modifier class to make badges more rounded (with a larger `border-radius` and additional horizontal `padding`). Useful if you miss the badges from v3.
+Use the `.rounded-pill` utility class to make badges more rounded with a larger `border-radius`.
 
 {{< example >}}
 {{< badge.inline >}}
 {{- range (index $.Site.Data "theme-colors") }}
-<span class="badge badge-pill badge-{{ .name }}">{{ .name | title }}</span>{{- end -}}
-{{< /badge.inline >}}
-{{< /example >}}
-
-## Links
-
-Using the contextual `.badge-*` classes on an `<a>` element quickly provide _actionable_ badges with hover and focus states.
-
-{{< example >}}
-{{< badge.inline >}}
-{{- range (index $.Site.Data "theme-colors") }}
-<a href="#" class="badge badge-{{ .name }}">{{ .name | title }}</a>{{- end -}}
+<span class="badge rounded-pill bg-{{ .name }}{{ if eq .name "light" }} text-dark{{ end }}">{{ .name | title }}</span>{{- end -}}
 {{< /badge.inline >}}
 {{< /example >}}

site/content/docs/4.3/getting-started/browsers-devices.md

@@ -15,7 +15,7 @@ Alternative browsers which use the latest version of WebKit, Blink, or Gecko, wh
 You can find our supported range of browsers and their versions [in our `.browserslistrc file`]({{< param repo >}}/blob/v{{< param current_version >}}/.browserslistrc):
 
 ```text
-{{< rf.inline >}}{{ readFile ".browserslistrc" }}{{< /rf.inline >}}
+{{< rf.inline >}}{{ readFile ".browserslistrc" | htmlEscape }}{{< /rf.inline >}}
 ```
 
 We use [Autoprefixer](https://github.com/postcss/autoprefixer) to handle intended browser support via CSS prefixes, which uses [Browserslist](https://github.com/browserslist/browserslist) to manage these browser versions. Consult their documentation for how to integrate these tools into your projects.

site/content/docs/4.3/utilities/colors.md

@@ -35,7 +35,7 @@ Contextual text classes also work well on anchors with the provided hover and fo
 
 ## Background color
 
-Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes. Background utilities **do not set `color`**, so in some cases you'll want to use `.text-*` utilities.
+Similar to the contextual text color classes, easily set the background of an element to any contextual class. Background utilities **do not set `color`**, so in some cases you'll want to use `.text-*` utilities.
 
 {{< example >}}
 {{< colors.inline >}}

site/content/docs/4.3/utilities/float.md

@@ -10,32 +10,12 @@ toc: true
 
 These utility classes float an element to the left or right, or disable floating, based on the current viewport size using the [CSS `float` property](https://developer.mozilla.org/en-US/docs/Web/CSS/float). `!important` is included to avoid specificity issues. These use the same viewport breakpoints as our grid system. Please be aware float utilities have no affect on flex items.
 
-## Classes
-
-Toggle a float with a class:
-
 {{< example >}}
 <div class="float-left">Float left on all viewport sizes</div><br>
 <div class="float-right">Float right on all viewport sizes</div><br>
 <div class="float-none">Don't float on all viewport sizes</div>
 {{< /example >}}
 
-## Mixins
-
-Or by Sass mixin:
-
-{{< highlight scss >}}
-.element {
-  @include float-left;
-}
-.another-element {
-  @include float-right;
-}
-.one-more {
-  @include float-none;
-}
-{{< /highlight >}}
-
 ## Responsive
 
 Responsive variations also exist for each `float` value.

site/content/docs/4.3/utilities/visibility.md

@@ -22,13 +22,4 @@ Apply `.visible` or `.invisible` as needed.
 .invisible {
   visibility: hidden !important;
 }
-
-// Usage as a mixin
-// Warning: The `invisible()` mixin has been deprecated as of v4.3.0. It will be removed entirely in v5.
-.element {
-  @include invisible(visible);
-}
-.element {
-  @include invisible(hidden);
-}
 {{< /highlight >}}

site/data/nav.yml

@@ -62,7 +62,6 @@
     - title: Embed
     - title: Flex
     - title: Float
-    - title: Image replacement
     - title: Overflow
     - title: Position
     - title: Screen readers

site/layouts/partials/analytics.html

@@ -1,8 +1,6 @@
-{{- if not .Site.IsServer -}}
 <script>
   window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
   ga('create', 'UA-146052-10', 'getbootstrap.com');
   ga('send', 'pageview');
 </script>
 <script async src="https://www.google-analytics.com/analytics.js"></script>
-{{- end -}}