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

9 files changed, 22 insertions, 14 deletions

diff --git a/assets/scss/_buttons.scss b/assets/scss/_buttons.scss
index 9be5f3cfe..1e37857fd 100644
--- a/assets/scss/_buttons.scss
+++ b/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);
+  }
 }
diff --git a/docs/4.0/components/forms.md b/docs/4.0/components/forms.md
index 8bf61de35..411b1f461 100644
--- a/docs/4.0/components/forms.md
+++ b/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>
diff --git a/docs/4.0/utilities/display.md b/docs/4.0/utilities/display.md
index d7cab2175..e00d5b635 100644
--- a/docs/4.0/utilities/display.md
+++ b/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 |
 | ---                | --- |
diff --git a/js/src/dropdown.js b/js/src/dropdown.js
index b877017f2..2f6929854 100644
--- a/js/src/dropdown.js
+++ b/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')
diff --git a/js/src/modal.js b/js/src/modal.js
index 9237944df..2ca56e7e2 100644
--- a/js/src/modal.js
+++ b/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')
       }
     }
 
diff --git a/js/src/tooltip.js b/js/src/tooltip.js
index 65d9c2201..861f45a86 100644
--- a/js/src/tooltip.js
+++ b/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
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 14f5b8b01..11f325530 100644
--- a/scss/_variables.scss
+++ b/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;
diff --git a/scss/mixins/_hover.scss b/scss/mixins/_hover.scss
index 56d313b66..57823e34b 100644
--- a/scss/mixins/_hover.scss
+++ b/scss/mixins/_hover.scss
@@ -1,5 +1,3 @@
-// stylelint-disable indentation
-
 // Hover mixin and `$enable-hover-media-query` are deprecated.
 //
 // Origally added during our alphas and maintained during betas, this mixin was
diff --git a/scss/mixins/_nav-divider.scss b/scss/mixins/_nav-divider.scss
index 493de03a3..3505d412f 100644
--- a/scss/mixins/_nav-divider.scss
+++ b/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;
 }