From 03cc79da69d5fbf43fc6d7bf22ee552af2c6c782 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Sun, 7 Nov 2021 20:08:45 +0100
Subject: [PATCH] Add transition to ButtonCart quantity label

---
 src/components/atoms/ButtonCart.svelte | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/atoms/ButtonCart.svelte b/src/components/atoms/ButtonCart.svelte
index 611535e..230300f 100644
--- a/src/components/atoms/ButtonCart.svelte
+++ b/src/components/atoms/ButtonCart.svelte
@@ -1,6 +1,9 @@
 <script lang="ts">
+    import { scale } from 'svelte/transition'
+    import { quartOut } from 'svelte/easing'
     import { cartOpen, cartAmount } from '$utils/store'
-    import ButtonCircle from './ButtonCircle.svelte'
+    // Components
+    import ButtonCircle from '$components/atoms/ButtonCircle.svelte'
 
     const openCart = () => {
         $cartOpen = true
@@ -13,6 +16,6 @@
     </ButtonCircle>
 
     {#if $cartAmount > 0}
-        <span class="quantity">{$cartAmount}</span>
+        <span class="quantity" transition:scale={{ start: 0.6, duration: 400, easing: quartOut }}>{$cartAmount}</span>
     {/if}
 </div>
\ No newline at end of file