diff --git a/assets/scss/_buttons.scss b/assets/scss/_buttons.scss
index 9be5f3cfe28a02448589c17341cd7244b132e192..1e37857fdb59d66085490a81355c7a32cf5e2051 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 8bf61de35d049afa6a819b72001285733deb4ace..411b1f461a250f787841138787323542fe51977f 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 d7cab217517a6d329a7a5165ae0347a20145b1b6..e00d5b6350a09aadc1ada9342a300b6de00c0e56 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 b877017f2bd5b3af676a8350ac2e7533f824897b..2f69298540b304d8be433738bc7931f1e985bff3 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 9237944df621c193d104947668d5ef967ea3a258..2ca56e7e2e921ce3c551e5a6ebc316cd666c1755 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 65d9c2201c023256d9716a4ad5278f0fb1d2e99a..861f45a86a3984a3ca30bb8d1b13b3a50f466b6e 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 14f5b8b018d799c04bdcbe62b59bf431900fe2c5..11f32553071998feda96e4de061df6a1bdb002fd 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 56d313b661cadc95cb213b42026ba880d85e0d96..57823e34baa74c0c5d83741be7e30202dbd91165 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 493de03a34adf63455121e5b6418c1ea93e0eb48..3505d412f2b751c2aa9d8c2d7d824b208493fe14 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;
}