mirror of
https://github.com/twbs/bootstrap.git
synced 2024-12-10 22:24:19 +01:00
ea1d69c64b
This makes them keyboard-accessible. For mouse users, the only change here is that the focus outline will remain on the button once clicked (in future, this can be solved with :focus-ring, but for now this would require a polyfill). the tooltip is explicitly hidden on `mouseleave`, so even though the `<button>` retains focus after clicking, the tooltip won't stay visible once mouse user moves away. the mouse hover styles have explicitly not been make to also apply to :focus, so as to minimise the visual impact for mouse users (though the tooltip remains visible) - but due to the default outline and the custom tooltip, it should be fairly clear when keyboard users set focus to a copy button too.
40 lines
574 B
SCSS
40 lines
574 B
SCSS
// clipboard.js
|
|
//
|
|
// JS-based `Copy` buttons for code snippets.
|
|
|
|
.bd-clipboard {
|
|
position: relative;
|
|
display: none;
|
|
float: right;
|
|
|
|
+ .highlight {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
|
|
.btn-clipboard {
|
|
position: absolute;
|
|
top: .5rem;
|
|
right: .5rem;
|
|
z-index: 10;
|
|
display: block;
|
|
padding: .25rem .5rem;
|
|
font-size: 75%;
|
|
color: #818a91;
|
|
cursor: pointer;
|
|
background-color: transparent;
|
|
border: 0;
|
|
border-radius: .25rem;
|
|
|
|
&:hover {
|
|
color: #fff;
|
|
background-color: #027de7;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.bd-clipboard {
|
|
display: block;
|
|
}
|
|
}
|