show copy code button only on hover of container (#751)

shuding · Aug 29, 2022 · 71528f1 · 71528f1
1 parent 5d852b6
commit 71528f1
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 1 deletion.
diff --git a/.changeset/strong-toes-decide.md b/.changeset/strong-toes-decide.md
@@ -0,0 +1,7 @@
+---
+'nextra': patch
+'nextra-theme-blog': patch
+'nextra-theme-docs': patch
+---
+
+show copy code button only on hover of container
diff --git a/packages/nextra/src/components/pre.tsx b/packages/nextra/src/components/pre.tsx
@@ -32,7 +32,7 @@ export const Pre = ({
       {hasCopy && (
         <CopyToClipboard
           value={children}
-          className={'absolute m-2 right-0 ' + (filename ? 'top-8' : 'top-0')}
+          className={'opacity-0 transition-opacity absolute m-2 right-0 ' + (filename ? 'top-8' : 'top-0')}
         />
       )}
     </>

diff --git a/packages/nextra/styles/code-block.css b/packages/nextra/styles/code-block.css
@@ -46,6 +46,10 @@ pre {
 
 [data-rehype-pretty-code-fragment] {
   @apply relative;
+
+  &:hover > .nextra-copy-button {
+    @apply opacity-100;
+  }
 }
 
 @supports (