Mirrors/cobalt
1
0
Fork 0
mirror of https://github.com/wukko/cobalt.git synced 2025-06-12 13:17:45 +02:00
Code Issues Packages Projects Releases Wiki Activity

web/SavingDialog: show that link was copied, better accessibility

Browse Source
This commit is contained in:
wukko
2024-07-28 23:29:32 +06:00
parent 3aeebcc911
commit 48d24ee1ea
4 changed files with 89 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
web/src/components/misc/CopyIcon.svelte Normal file
View File

@ -0,0 +1,54 @@
<script lang="ts">
import IconCopy from "@tabler/icons-svelte/IconCopy.svelte";
import IconCheck from "@tabler/icons-svelte/IconCheck.svelte";
export let check = false;
</script>
<div id="copy-animation" class:check>
<div class="icon-copy">
<IconCopy />
</div>
<div class="icon-check">
<IconCheck />
</div>
</div>
<style>
#copy-animation {
position: relative;
height: 24px;
width: 24px;
}
#copy-animation :global(svg) {
will-change: transform;
}
.icon-copy,
.icon-check {
display: flex;
position: absolute;
transition: transform 0.25s, opacity 0.25s;
}
.icon-copy {
transform: none;
opacity: 1;
}
.icon-check {
transform: scale(0.4);
opacity: 0;
}
.check .icon-copy {
transform: scale(0.4);
opacity: 0;
}
.check .icon-check {
transform: none;
opacity: 1;
}
</style>