Merge branch 'v4-dev' of https://github.com/twbs/bootstrap into v4-dev

assets/scss/_buttons.scss

@@ -13,6 +13,10 @@
     background-color: $bd-purple-bright;
     border-color: $bd-purple-bright;
   }
+
+  &:focus {
+    box-shadow: 0 0 0 3px rgba($bd-purple-bright, .25);
+  }
 }
 
 .btn-bd-download {
@@ -26,4 +30,8 @@
     background-color: $bd-download;
     border-color: $bd-download;
   }
+
+  &:focus {
+    box-shadow: 0 0 0 3px rgba($bd-download, .25);
+  }
 }

docs/4.0/components/forms.md

@@ -25,7 +25,7 @@ Here's a quick example to demonstrate Bootstrap's form styles. Keep reading for
     <label for="exampleInputPassword1">Password</label>
     <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
   </div>
-  <div class="form-check">
+  <div class="form-group form-check">
     <input type="checkbox" class="form-check-input" id="exampleCheck1">
     <label class="form-check-label" for="exampleCheck1">Check me out</label>
   </div>

docs/4.0/utilities/display.md

@@ -51,7 +51,7 @@ For faster mobile-friendly development, use responsive display classes for showi
 
 To hide elements simply use the `.d-none` class or one of the `.d-{sm,md,lg,xl}-none` classes for any responsive screen variation.
 
-To show an element only on a given interval of screen sizes you can combine one `.d-*-none` class with a `.d-*-*` class, for example `.d-none .d-md-block .d-xl-none` will hide the element for all screen sizes except on medium and large devices.
+To show an element only on a given interval of screen sizes you can combine one `.d-*-none` class with a `.d-*-*` class, for example `.d-none .d-md-block .d-xl-block` will hide the element for all screen sizes except on medium and large devices.
 
 | Screen Size        | Class |
 | ---                | --- |

js/src/dropdown.js

@@ -183,7 +183,7 @@ const Dropdown = (($) => {
       // https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html
       if ('ontouchstart' in document.documentElement &&
          $(parent).closest(Selector.NAVBAR_NAV).length === 0) {
-        $('body').children().on('mouseover', null, $.noop)
+        $(document.body).children().on('mouseover', null, $.noop)
       }
 
       this._element.focus()
@@ -365,7 +365,7 @@ const Dropdown = (($) => {
         // If this is a touch-enabled device we remove the extra
         // empty mouseover listeners we added for iOS support
         if ('ontouchstart' in document.documentElement) {
-          $('body').children().off('mouseover', null, $.noop)
+          $(document.body).children().off('mouseover', null, $.noop)
         }
 
         toggles[i].setAttribute('aria-expanded', 'false')

js/src/modal.js

@@ -453,8 +453,8 @@ const Modal = (($) => {
 
         // Adjust body padding
         const actualPadding = document.body.style.paddingRight
-        const calculatedPadding = $('body').css('padding-right')
-        $('body').data('padding-right', actualPadding).css('padding-right', `${parseFloat(calculatedPadding) + this._scrollbarWidth}px`)
+        const calculatedPadding = $(document.body).css('padding-right')
+        $(document.body).data('padding-right', actualPadding).css('padding-right', `${parseFloat(calculatedPadding) + this._scrollbarWidth}px`)
       }
     }
 
@@ -476,9 +476,9 @@ const Modal = (($) => {
       })
 
       // Restore body padding
-      const padding = $('body').data('padding-right')
+      const padding = $(document.body).data('padding-right')
       if (typeof padding !== 'undefined') {
-        $('body').css('padding-right', padding).removeData('padding-right')
+        $(document.body).css('padding-right', padding).removeData('padding-right')
       }
     }
 

js/src/tooltip.js

@@ -317,7 +317,7 @@ const Tooltip = (($) => {
         // only needed because of broken event delegation on iOS
         // https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html
         if ('ontouchstart' in document.documentElement) {
-          $('body').children().on('mouseover', null, $.noop)
+          $(document.body).children().on('mouseover', null, $.noop)
         }
 
         const complete = () => {
@@ -375,7 +375,7 @@ const Tooltip = (($) => {
       // If this is a touch-enabled device we remove the extra
       // empty mouseover listeners we added for iOS support
       if ('ontouchstart' in document.documentElement) {
-        $('body').children().off('mouseover', null, $.noop)
+        $(document.body).children().off('mouseover', null, $.noop)
       }
 
       this._activeTrigger[Trigger.CLICK] = false

scss/_variables.scss

@@ -608,6 +608,8 @@ $nav-pills-border-radius:           $border-radius !default;
 $nav-pills-link-active-color:       $component-active-color !default;
 $nav-pills-link-active-bg:          $component-active-bg !default;
 
+$nav-divider-margin-y:              ($spacer / 2) !default;
+
 // Navbar
 
 $navbar-padding-y:                  ($spacer / 2) !default;

scss/mixins/_hover.scss

-// stylelint-disable indentation
-
 // Hover mixin and `$enable-hover-media-query` are deprecated.
 //
 // Origally added during our alphas and maintained during betas, this mixin was

scss/mixins/_nav-divider.scss

@@ -2,9 +2,9 @@
 //
 // Dividers (basically an hr) within dropdowns and nav lists
 
-@mixin nav-divider($color: #e5e5e5) {
+@mixin nav-divider($color: #e5e5e5, $margin-y: $nav-divider-margin-y) {
   height: 0;
-  margin: ($spacer / 2) 0;
+  margin: $margin-y 0;
   overflow: hidden;
   border-top: 1px solid $color;
 }