diff --git a/assets/scss/_buttons.scss b/assets/scss/_buttons.scss index 9be5f3cfe2..1e37857fdb 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 8bf61de35d..411b1f461a 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 -
+
diff --git a/docs/4.0/utilities/display.md b/docs/4.0/utilities/display.md index d7cab21751..e00d5b6350 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 b877017f2b..2f69298540 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 9237944df6..2ca56e7e2e 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 65d9c2201c..861f45a86a 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 14f5b8b018..11f3255307 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 56d313b661..57823e34ba 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 493de03a34..3505d412f2 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; }