diff options
| author | Patrick H. Lauke <[email protected]> | 2023-03-04 20:05:54 +0000 |
|---|---|---|
| committer | GitHub <[email protected]> | 2023-03-04 12:05:54 -0800 |
| commit | d5f4532b3eb0c1ae2c904bb58c488bc3da44b8f3 (patch) | |
| tree | bc560fac3591ae0dc2bdff876de22d68cdfe7c9b /site | |
| parent | ea19c3da8ac33c7676debfc2ac91c196e861f358 (diff) | |
| download | bootstrap-d5f4532b3eb0c1ae2c904bb58c488bc3da44b8f3.tar.xz bootstrap-d5f4532b3eb0c1ae2c904bb58c488bc3da44b8f3.zip | |
Docs: fix overflow:auto horizontal scrollbars covering last line of code blocks (#37694)
* Add dirty hack for Firefox
* Disable stylelint check for function-url-quotes
to make the hack go through unchallenged
* Make the fix across all browsers
It's not just Firefox - same issue can be seen (though slightly less horrible looking) on macOS / Chrome etc
* Tweak padding, move clipboard button down slightly
* Further CSS tweaks
Forcing `overflow: overlay` should normalise behaviour between Chrome/Win and other implementations. While visually the Chrome/Win scrollbar still looks big and ugly, its height/spacing is now taken into account as being part of the content, so styles can be applied consistently with extra padding at the bottom
* Linting fixes
* Linting fixes
* Apply suggestions from code review
---------
Co-authored-by: Mark Otto <[email protected]>
Diffstat (limited to 'site')
| -rw-r--r-- | site/assets/scss/_clipboard-js.scss | 2 | ||||
| -rw-r--r-- | site/assets/scss/_component-examples.scss | 7 | ||||
| -rw-r--r-- | site/assets/scss/_masthead.scss | 10 |
3 files changed, 14 insertions, 5 deletions
diff --git a/site/assets/scss/_clipboard-js.scss b/site/assets/scss/_clipboard-js.scss index 97b454e03..de709d09b 100644 --- a/site/assets/scss/_clipboard-js.scss +++ b/site/assets/scss/_clipboard-js.scss @@ -39,6 +39,6 @@ .btn-clipboard { position: relative; z-index: 2; - margin-top: .75rem; + margin-top: 1.25rem; margin-right: .75rem; } diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss index bc75559aa..14adbe94d 100644 --- a/site/assets/scss/_component-examples.scss +++ b/site/assets/scss/_component-examples.scss @@ -359,10 +359,11 @@ } pre { - padding: 0; - margin-top: .625rem; + padding: .25rem 0 .875rem; + margin-top: .8125rem; margin-right: 1.875rem; - margin-bottom: .625rem; + margin-bottom: 0; + overflow: overlay; white-space: pre; background-color: transparent; border: 0; diff --git a/site/assets/scss/_masthead.scss b/site/assets/scss/_masthead.scss index d39f640ae..4ca5068bc 100644 --- a/site/assets/scss/_masthead.scss +++ b/site/assets/scss/_masthead.scss @@ -36,10 +36,18 @@ @include media-breakpoint-up(lg) { padding-right: 4rem; } + + pre { + padding: 0; + margin-top: .625rem; + margin-right: 1.875rem; + margin-bottom: .625rem; + overflow: hidden; + } } .btn-clipboard { position: absolute; - top: -.125rem; + top: -.625rem; right: 0; background-color: transparent; } |