rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-30 22:52:24 +01:00
Code Issues Actions Packages Releases Activity

Docs: fix overflow:auto horizontal scrollbars covering last line of code blocks (#37694)

Browse Source 
* 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 <markd.otto@gmail.com>
This commit is contained in:
Patrick H. Lauke 2023-03-04 20:05:54 +00:00 committed by GitHub
parent ea19c3da8a
commit d5f4532b3e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 14 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
site/assets/scss/_clipboard-js.scss
View File

@ -39,6 +39,6 @@
.btn-clipboard {
position: relative;
z-index: 2;
margin-top: .75rem;
margin-top: 1.25rem;
margin-right: .75rem;
}

7
site/assets/scss/_component-examples.scss
View File

@ -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;

10
site/assets/scss/_masthead.scss
View File

@ -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;
}