mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 12:09:26 +00:00
d6a91919e0
- Add ids, use ids to link copy button. No need for client-side script or updating the copy button manually for dynamic code snippets. - Add button to link to code block - Slight refactor on copy plugin to use the 11ty API properly
46 lines
855 B
CSS
46 lines
855 B
CSS
wa-copy-button.copy-button {
|
|
--background-color: var(--wa-color-gray-20);
|
|
--background-color-hover: color-mix(in oklab, var(--background-color), white 5%);
|
|
position: absolute;
|
|
top: 0.25rem;
|
|
right: 0.25rem;
|
|
font-family: var(--wa-font-family-body);
|
|
color: var(--wa-color-gray-80);
|
|
border-radius: var(--wa-border-radius-m);
|
|
padding: 0.25rem;
|
|
|
|
&:hover {
|
|
color: white;
|
|
}
|
|
|
|
&:focus-visible {
|
|
outline: var(--wa-focus-ring);
|
|
}
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
.copy-button:not(:focus-within) {
|
|
opacity: 0;
|
|
}
|
|
|
|
pre:hover > .copy-button {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.block-link-icon {
|
|
position: absolute;
|
|
inset-block-start: 0;
|
|
inset-inline-end: calc(100% + var(--wa-space-s));
|
|
|
|
transition: var(--wa-transition-slow);
|
|
|
|
&:not(:hover, :focus) {
|
|
opacity: 50%;
|
|
}
|
|
|
|
:not(:hover, :focus-within) > & {
|
|
opacity: 0;
|
|
}
|
|
}
|