diff --git a/src/components/molecules/NotificationCart.svelte b/src/components/molecules/NotificationCart.svelte
new file mode 100644
index 0000000..b2ff7dc
--- /dev/null
+++ b/src/components/molecules/NotificationCart.svelte
@@ -0,0 +1,19 @@
+
+
+
\ No newline at end of file
diff --git a/src/routes/shop/__layout.svelte b/src/routes/shop/__layout.svelte
index 0a876bc..ccecddb 100644
--- a/src/routes/shop/__layout.svelte
+++ b/src/routes/shop/__layout.svelte
@@ -7,6 +7,7 @@
import ButtonCart from '$components/atoms/ButtonCart.svelte'
import PosterLayout from '$components/layouts/PosterLayout.svelte'
import Poster from '$components/molecules/Poster.svelte'
+ import NotificationCart from '$components/molecules/NotificationCart.svelte'
import EmailForm from '$components/molecules/EmailForm.svelte'
import Cart from '$components/organisms/Cart.svelte'
@@ -102,6 +103,10 @@
+
+
+
+
@@ -221,4 +226,4 @@
}
}
}
-
\ No newline at end of file
+
diff --git a/src/style/atoms/_button-circle.scss b/src/style/atoms/_button-circle.scss
index d5b3271..944283d 100644
--- a/src/style/atoms/_button-circle.scss
+++ b/src/style/atoms/_button-circle.scss
@@ -68,6 +68,18 @@
/*
** Variants
*/
+ // Tiny size
+ &--tiny {
+ height: 24px;
+ width: 24px;
+
+ img, svg {
+ width: 8px;
+ height: 8px;
+ object-fit: contain;
+ }
+ }
+
// Small size
&--small {
height: 32px;
@@ -97,4 +109,13 @@
background-color: $color-lightpurple;
}
}
-}
\ No newline at end of file
+
+ // Gray color
+ &--gray {
+ background-color: #F2F2F2;
+
+ &:hover {
+ background-color: #D2D2D2;
+ }
+ }
+}
diff --git a/src/style/molecules/_notification-cart.scss b/src/style/molecules/_notification-cart.scss
new file mode 100644
index 0000000..f960639
--- /dev/null
+++ b/src/style/molecules/_notification-cart.scss
@@ -0,0 +1,60 @@
+.notification-cart {
+ display: flex;
+ background-color: #fff;
+ color: $color-gray;
+ border-radius: 6px;
+ align-items: center;
+ overflow: hidden;
+ cursor: pointer;
+
+ // Left Image
+ &__left {
+ margin-right: 20px;
+ width: 100px;
+ height: 150px;
+
+ @include bp (sm) {
+ margin-right: 24px;
+ width: 58px;
+ height: 88px;
+ }
+
+ img {
+ display: block;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
+ }
+
+ // Details
+ &__right {
+ display: flex;
+ flex-direction: column;
+ margin-right: 24px;
+ justify-content: center;
+
+ // Poster Title
+ h3 {
+ font-family: $font-serif;
+ color: $color-secondary;
+ font-size: rem(20px);
+
+ @include bp (sm) {
+ font-size: rem(18px);
+ }
+ }
+ // Text
+ p {
+ font-size: rem(12px);
+ line-height: 1.4;
+ max-width: 124px;
+ margin: 4px 0;
+
+ @include bp (sm) {
+ font-size: rem(13px);
+ max-width: none;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/style/organisms/_cart.scss b/src/style/organisms/_cart.scss
index fb647fa..a2b9ac3 100644
--- a/src/style/organisms/_cart.scss
+++ b/src/style/organisms/_cart.scss
@@ -6,7 +6,7 @@
padding: 20px 20px 24px;
@include bp (sm) {
- padding: 24px 32px 0 32px;
+ padding: 24px 32px;
}
// Heading
@@ -148,4 +148,4 @@
height: 100%;
background: rgba($color-primary, 0.9);
}
-}
\ No newline at end of file
+}
diff --git a/src/style/pages/_shop.scss b/src/style/pages/_shop.scss
index ffa8845..83378a0 100644
--- a/src/style/pages/_shop.scss
+++ b/src/style/pages/_shop.scss
@@ -3,7 +3,8 @@
// Cart
.cart {
- display: flex;
+ // display: flex;
+ // display: none;
position: fixed;
z-index: 100;
top: 72px;
@@ -14,7 +15,7 @@
@include bp (sm) {
top: 24px;
right: 24px;
- width: clamp(320px, 35vw, 500px);
+ width: clamp(320px, 45vw, 500px);
height: calc(100vh - 48px);
max-height: 1000px;
}
@@ -85,6 +86,20 @@
}
}
}
+
+ // Notifications
+ &__notifications {
+ position: absolute;
+ z-index: 100;
+ top: 72px;
+ right: 0;
+
+ & > * {
+ &:not(:last-child) {
+ margin-bottom: 8px;
+ }
+ }
+ }
}
// Intro
@@ -275,7 +290,7 @@
// Posters
&__posters {
background-color: $color-primary-darker;
- padding: 56px 20px 72px;
+ padding: 0 20px 72px;
border-bottom: solid 1px $color-primary-tertiary20 ;
@include bp (sm) {
@@ -407,4 +422,4 @@
}
}
}
-}
\ No newline at end of file
+}
diff --git a/src/style/style.scss b/src/style/style.scss
index cc17d6d..4f94903 100644
--- a/src/style/style.scss
+++ b/src/style/style.scss
@@ -53,6 +53,7 @@
@import "molecules/issue";
@import "molecules/newsletter-form";
@import "molecules/poster";
+@import "molecules/notification-cart";
@import "molecules/cart-item";
// Organisms
@@ -72,4 +73,4 @@
@import "pages/viewer-photo";
// Misc
-@import "animations";
\ No newline at end of file
+@import "animations";