0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-04 16:24:22 +01:00
Bootstrap/site/assets/scss/_clipboard-js.scss
Patrick H. Lauke d5f4532b3e
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 <markd.otto@gmail.com>
2023-03-04 12:05:54 -08:00

45 lines
644 B
SCSS

// clipboard.js
//
// JS-based `Copy` buttons for code snippets.
.bd-clipboard,
.bd-edit {
position: relative;
display: none;
float: right;
+ .highlight {
margin-top: 0;
}
@include media-breakpoint-up(md) {
display: block;
}
}
.btn-clipboard,
.btn-edit {
display: block;
padding: .5em;
line-height: 1;
color: var(--bs-body-color);
background-color: var(--bd-pre-bg);
border: 0;
@include border-radius(.25rem);
&:hover {
color: var(--bs-link-hover-color);
}
&:focus {
z-index: 3;
}
}
.btn-clipboard {
position: relative;
z-index: 2;
margin-top: 1.25rem;
margin-right: .75rem;
}