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 7255664..f5bd29f 100644 --- a/src/routes/shop/__layout.svelte +++ b/src/routes/shop/__layout.svelte @@ -7,6 +7,7 @@ import CartButton from '$components/atoms/CartButton.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' @@ -79,6 +80,9 @@ +
+ +
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/pages/_shop.scss b/src/style/pages/_shop.scss index 46dfffc..c82864d 100644 --- a/src/style/pages/_shop.scss +++ b/src/style/pages/_shop.scss @@ -105,6 +105,19 @@ border-radius: 100%; } } + + .notifications { + position: absolute; + z-index: 100; + top: 72px; + right: 0; + + & > * { + &:not(:last-child) { + margin-bottom: 8px; + } + } + } } // Intro diff --git a/src/style/style.scss b/src/style/style.scss index 04bfc64..d1d74b7 100644 --- a/src/style/style.scss +++ b/src/style/style.scss @@ -52,6 +52,7 @@ @import "molecules/issue"; @import "molecules/newsletter-form"; @import "molecules/poster"; +@import "molecules/notification-cart"; // Organisms @import "organisms/locations";