From f82505a54edda71b5242a6b183b1c43fa3bf9246 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Fri, 5 Nov 2021 17:43:29 +0100
Subject: [PATCH] Use an atom for the Cart button

---
 src/components/atoms/CartButton.svelte |  2 +-
 src/style/atoms/_cart-button.scss      | 27 ++++++++++++++++++++++++++
 src/style/pages/_shop.scss             |  2 +-
 src/style/style.scss                   |  1 +
 4 files changed, 30 insertions(+), 2 deletions(-)
 create mode 100644 src/style/atoms/_cart-button.scss

diff --git a/src/components/atoms/CartButton.svelte b/src/components/atoms/CartButton.svelte
index 8238a8a..c4f7566 100644
--- a/src/components/atoms/CartButton.svelte
+++ b/src/components/atoms/CartButton.svelte
@@ -8,7 +8,7 @@
     }
 </script>
 
-<div class="shop-location__cart">
+<div class="cart-button">
     <ButtonCircle color="purple" on:click={handleCartOpening}>
         <img src="/images/icons/pin.svg" alt="">
     </ButtonCircle>
diff --git a/src/style/atoms/_cart-button.scss b/src/style/atoms/_cart-button.scss
new file mode 100644
index 0000000..d22aadb
--- /dev/null
+++ b/src/style/atoms/_cart-button.scss
@@ -0,0 +1,27 @@
+// Cart
+.cart-button {
+    display: none;
+    position: relative;
+
+    @include bp (sm) {
+        display: flex;
+        margin-left: auto;
+    }
+
+    .quantity {
+        position: absolute;
+        top: 50%;
+        left: -12px;
+        transform: translateY(-50%);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 22px;
+        height: 22px;
+        font-size: rem(11px);
+        font-weight: 600;
+        color: #fff;
+        background-color: $color-secondary;
+        border-radius: 100%;
+    }
+}
\ No newline at end of file
diff --git a/src/style/pages/_shop.scss b/src/style/pages/_shop.scss
index ad6abdc..1a39a72 100644
--- a/src/style/pages/_shop.scss
+++ b/src/style/pages/_shop.scss
@@ -440,4 +440,4 @@
             }
         }
     }
-}
\ No newline at end of file
+}
diff --git a/src/style/style.scss b/src/style/style.scss
index d1d74b7..bf4446a 100644
--- a/src/style/style.scss
+++ b/src/style/style.scss
@@ -43,6 +43,7 @@
 @import "atoms/box-cta";
 @import "atoms/site-title";
 @import "atoms/photo";
+@import "atoms/cart-button";
 
 // Molecules
 @import "molecules/photo-card";