71c43693ac
Adds a copy-to-clipboard button for each annotation so that text can be copied easily. This re-uses the existing `CopyToClipboard` component and adds a `small` variant that can be used inline. The icon size and colour have been chosen to avoid being overwhelming when used inline. Related to #30141 I opted not to introduce the hover behaviour from #30749 as it's less discoverable, but can understand why that might be favourable. Certainly open to suggestions 😄 <img width="379" alt="Screenshot 2024-07-22 at 3 23 53 PM" src="https://github.com/user-attachments/assets/3b9998cf-2e8d-40c9-9c8a-64eab3a9ed2e">
51 lines
1.2 KiB
CSS
51 lines
1.2 KiB
CSS
/*
|
|
Copyright (c) Microsoft Corporation.
|
|
|
|
Licensed under the Apache License, Version 2.0 (the "License");
|
|
you may not use this file except in compliance with the License.
|
|
You may obtain a copy of the License at
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
Unless required by applicable law or agreed to in writing, software
|
|
distributed under the License is distributed on an "AS IS" BASIS,
|
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
See the License for the specific language governing permissions and
|
|
limitations under the License.
|
|
*/
|
|
|
|
.copy-icon {
|
|
flex: none;
|
|
height: 24px;
|
|
width: 24px;
|
|
border: none;
|
|
outline: none;
|
|
color: var(--color-fg-muted);
|
|
background: transparent;
|
|
padding: 4px;
|
|
cursor: pointer;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.copy-icon svg {
|
|
margin: 0;
|
|
}
|
|
|
|
.copy-icon:not(:disabled):hover {
|
|
background-color: var(--color-border-default);
|
|
}
|
|
|
|
.copy-button-container {
|
|
visibility: hidden;
|
|
display: inline-flex;
|
|
margin-left: 8px;
|
|
vertical-align: bottom;
|
|
}
|
|
|
|
.copy-value-container:hover .copy-button-container {
|
|
visibility: visible;
|
|
}
|