68 lines
1.7 KiB
Svelte
68 lines
1.7 KiB
Svelte
<script>
|
|
import { onMount } from 'svelte';
|
|
import { slide } from 'svelte/transition';
|
|
|
|
let extraClasses;
|
|
export {extraClasses as class};
|
|
export let slideDuration = 150;
|
|
let animationClass = "";
|
|
|
|
export function shake() {
|
|
animationClass = 'shake';
|
|
window.setTimeout(() => animationClass = "", 400);
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
<style>
|
|
/* animation from https://svelte.dev/repl/e606c27c864045e5a9700691a7417f99?version=3.58.0 */
|
|
@keyframes shake {
|
|
0% {
|
|
transform: translateX(0px);
|
|
}
|
|
20% {
|
|
transform: translateX(10px);
|
|
}
|
|
40% {
|
|
transform: translateX(-10px);
|
|
}
|
|
60% {
|
|
transform: translateX(5px);
|
|
}
|
|
80% {
|
|
transform: translateX(-5px);
|
|
}
|
|
90% {
|
|
transform: translateX(2px);
|
|
}
|
|
95% {
|
|
transform: translateX(-2px);
|
|
}
|
|
100% {
|
|
transform: translateX(0px);
|
|
}
|
|
}
|
|
.shake {
|
|
animation-name: shake;
|
|
animation-play-state: running;
|
|
animation-duration: 0.4s;
|
|
}
|
|
</style>
|
|
|
|
|
|
<div in:slide="{{duration: slideDuration}}" class="alert alert-error shadow-lg {animationClass} {extraClasses}">
|
|
<div>
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current flex-shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
|
|
<span>
|
|
<slot></slot>
|
|
</span>
|
|
</div>
|
|
|
|
{#if $$slots.buttons}
|
|
<div>
|
|
<slot name="buttons"></slot>
|
|
</div>
|
|
{/if}
|
|
</div>
|