David BakerandGitHub
d0a70fb1da
* Make the text copy button use IconButton This obviously should be a shared component, but design is looking at what it will actually look like long term, so until then, let's at least make it use compound's IconButton so it gets the hover background state, and sort out the padding & margins. Requires https://github.com/element-hq/compound-web/pull/528 * snapshots & add aria-label * more snapshots * Remove unnecessary width & height update other screenshots with expected changes * One more screenshot * This really shouldn't be necessary: see what test fails * Fix test to look in screen for the labels Because the labels from the tooltip don't go in the container, they get added to the dom at the top level in a floaty bit. * update snapshots again * Fix button size and also add comment to the other place where we fudge the padding * Update snapshots * Align to center * Screenshots
39 lines
1004 B
Plaintext
39 lines
1004 B
Plaintext
/*
|
|
Copyright 2024 New Vector Ltd.
|
|
Copyright 2022 Šimon Brandner <simon.bra.ag@gmail.com>
|
|
Copyright 2019 New Vector Ltd
|
|
|
|
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
|
|
Please see LICENSE files in the repository root for full details.
|
|
*/
|
|
|
|
.mx_CopyableText {
|
|
align-items: center;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: max-content;
|
|
max-width: 100%;
|
|
|
|
&.mx_CopyableText_border {
|
|
overflow: auto;
|
|
border-radius: 5px;
|
|
border: solid 1px $light-fg-color;
|
|
margin-bottom: 10px;
|
|
margin-top: 10px;
|
|
padding: 10px;
|
|
}
|
|
|
|
.mx_CopyableText_copyButton {
|
|
flex-shrink: 0;
|
|
display: block;
|
|
/* If the copy button is used within a scrollable div, make it stick to the right while scrolling */
|
|
position: sticky;
|
|
margin-left: var(--cpd-space-1x);
|
|
|
|
svg {
|
|
color: $message-action-bar-fg-color;
|
|
display: block;
|
|
}
|
|
}
|
|
}
|