romein/rolens
1
0
Fork 0
mirror of https://github.com/garraflavatra/rolens.git synced 2025-07-15 12:54:06 +00:00
Code Issues Releases Activity

Added horizontal/vertical view toggle to the shell (#37)

Browse Source
This commit is contained in:
Romein van Buren
2023-07-19 20:18:40 +02:00
parent 9d577ac429
commit 77747c10c2
3 changed files with 34 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
frontend/src/components/icon.svelte
View File

@ -3,6 +3,7 @@
export let name = '';
export let spin = false;
export let rotation = 0;
if (name === 'loading') {
spin = true;
@ -10,6 +11,19 @@
</script>
<style>
@keyframes spinning {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
svg {
transition: transform 0.25s;
will-change: transform;
}
svg.spinning {
animation: spinning 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
:global(.field) svg {
width: 13px;
height: 13px;
@ -21,15 +35,6 @@
width: auto;
vertical-align: bottom;
}
@keyframes spinning {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
svg.spinning {
animation: spinning 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
</style>
<svg
@ -43,6 +48,7 @@
stroke-linecap="round"
stroke-linejoin="round"
class:spinning={spin}
style:transform="rotate({rotation}deg)"
>
{@html icons[name] || ''}
</svg>