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";