diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json index 089067fdad..6806b76d9f 100644 --- a/.bundlewatch.config.json +++ b/.bundlewatch.config.json @@ -10,7 +10,7 @@ }, { "path": "./dist/css/boosted-reboot.css", - "maxSize": "4.5 kB" + "maxSize": "4.75 kB" }, { "path": "./dist/css/boosted-reboot.min.css", @@ -26,7 +26,7 @@ }, { "path": "./dist/css/boosted.css", - "maxSize": "44.5 kB" + "maxSize": "44.75 kB" }, { "path": "./dist/css/boosted.min.css", diff --git a/scss/_reboot.scss b/scss/_reboot.scss index d0d1cba581..6b6f831449 100644 --- a/scss/_reboot.scss +++ b/scss/_reboot.scss @@ -35,20 +35,37 @@ scroll-behavior: smooth; } } +} - // Boosted mod: Improve focus visibility when fixed/sticky header is used - // See https://caniuse.com/?search=scroll-padding - // scss-docs-start scroll-offset - @if $enable-fixed-header { - scroll-padding-top: $scroll-offset-top * .5; - - @include media-breakpoint-up(lg) { - scroll-padding-top: $scroll-offset-top; +// Boosted mod: Improve focus visibility when fixed/sticky header is used +// See https://caniuse.com/?search=scroll-padding +// scss-docs-start scroll-offset +@if $enable-fixed-header { + main { + a, + button, + input, + select, + textarea, + h2, + h3, + h4, + [tabindex="0"] { + scroll-margin-top: calc(#{$scroll-offset-top} * .5 + 1rem); // stylelint-disable-line function-disallowed-list + scroll-margin-bottom: 100px; + + @include media-breakpoint-up(md) { + scroll-margin-top: calc(#{$scroll-offset-top} + 2rem); // stylelint-disable-line function-disallowed-list + + .header-minimized ~ & { + scroll-margin-top: $scroll-offset-top; + } + } } } - // scss-docs-end scroll-offset - // End mod } +// scss-docs-end scroll-offset +// End mod // Body diff --git a/scss/_variables.scss b/scss/_variables.scss index 09aa0961c1..2c2798d2f9 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -443,7 +443,7 @@ $enable-validation-icons: true !default; $enable-negative-margins: false !default; $enable-deprecation-messages: false !default; $enable-important-utilities: true !default; -$enable-fixed-header: true !default; // Boosted mod: used to apply scroll-padding-top +$enable-fixed-header: true !default; // Boosted mod: used to apply scroll-margin-top $enable-dark-mode: true !default; $color-mode-type: data !default; // `data` or `media-query` @@ -2274,7 +2274,7 @@ $pre-line-height: 1.25 !default; // //// Scroll margin -$scroll-offset-top: $spacer * 6 !default; // Matching .navbar computed height +$scroll-offset-top: $spacer * 5 !default; // Matching .navbar computed height //// Back to top // scss-docs-start back-to-top diff --git a/site/assets/scss/_boosted.scss b/site/assets/scss/_boosted.scss index a4798cf721..2e5e3895d2 100644 --- a/site/assets/scss/_boosted.scss +++ b/site/assets/scss/_boosted.scss @@ -1,12 +1,4 @@ // stylelint-disable selector-max-id -:root { - scroll-padding-top: $offset-top / 2; - - @include media-breakpoint-up(lg) { - scroll-padding-top: $offset-top; - } -} - html, body { min-height: 100vh; diff --git a/site/assets/scss/_scrolling.scss b/site/assets/scss/_scrolling.scss index a575b2592a..849fe0b313 100644 --- a/site/assets/scss/_scrolling.scss +++ b/site/assets/scss/_scrolling.scss @@ -10,18 +10,22 @@ main { h3, h4, [tabindex="0"] { - scroll-margin-top: 80px; + scroll-margin-top: add($offset-top, .5rem); scroll-margin-bottom: 100px; @include media-breakpoint-up(md) { + scroll-margin-top: add($offset-top, 4rem); + .header-minimized ~ .bd-gutter & { - scroll-margin-top: 8.5rem; + scroll-margin-top: add($offset-top, 1.5rem); } } @include media-breakpoint-up(lg) { + scroll-margin-top: add($offset-top, 2.5rem); + .header-minimized ~ .bd-gutter & { - scroll-margin-top: 5.5rem; + scroll-margin-top: $offset-top; } } } diff --git a/site/content/docs/5.3/getting-started/accessibility.md b/site/content/docs/5.3/getting-started/accessibility.md index f8779b835f..4a964e3a7f 100644 --- a/site/content/docs/5.3/getting-started/accessibility.md +++ b/site/content/docs/5.3/getting-started/accessibility.md @@ -78,7 +78,7 @@ Each component then specifies its own visible focus style when needed, for examp #### Under a fixed header -When using a fixed (or sticky) header, tabbing backward often hides focused element under the header. Boosted sets `scroll-padding-top` property for such case. This feature is configurable in two ways: +When using a fixed (or sticky) header, tabbing backward often hides focused element under the header. Boosted sets `scroll-margin-top` and `scroll-margin-bottom` properties for such case. This feature is configurable in two ways: 1. `$scroll-offset-top` variable defines the offset, 2. and [`$enable-fixed-header` allows to drop this rule]({{< docsref "/customize/options" >}}) if you don't use a fixed header.