diff --git a/packages/repl/src/lib/Input/ComponentSelector.svelte b/packages/repl/src/lib/Input/ComponentSelector.svelte index 812685e5a5..cc01153ecb 100644 --- a/packages/repl/src/lib/Input/ComponentSelector.svelte +++ b/packages/repl/src/lib/Input/ComponentSelector.svelte @@ -189,6 +189,19 @@ {#if download} {/if} + + @@ -360,4 +373,42 @@ stroke-linejoin: round; fill: none; } + + .copy-button { + position: relative; + + &::before, + &::after { + content: ''; + display: block; + position: absolute; + width: 100%; + height: 100%; + right: 0; + top: 0; + background: currentColor; + mask: no-repeat calc(100% - 1rem) 50% / 1.6rem 1.6rem; + transition: opacity 0.2s; + transition-delay: 0.6s; + } + + &::before { + mask-image: url(icons/copy-to-clipboard); + } + + &::after { + mask-image: url(icons/check); + opacity: 0; + } + + &:active::before { + opacity: 0; + transition: none; + } + + &:active::after { + opacity: 1; + transition: none; + } + }