flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

[wip] Rework Shop

Browse Source 
- Change strategy for content fetching
- Add a route per page instead of using __layout for all
- Change the behaviors of the posters section (add a carousel on small screens)
- Change Poster buttons styling and make interactions only for desktop
This commit is contained in:
Félix Péault
2021-12-14 23:23:12 +01:00
parent 140e8f1fa2
commit 82f5dd4727
17 changed files with 808 additions and 364 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
src/style/pages/_shop.scss
View File

@@ -20,54 +20,53 @@
transform: translate3d(0, -88px, 0);
transition: transform 1s var(--ease-quart);
transition-delay: 100ms;
pointer-events: none;
@include bp (sm) {
--inset: 32px;
}
// Notifications
&__notifications {
position: absolute;
z-index: 100;
top: 72px;
right: 0;
opacity: 0;
transition: opacity 0.7s var(--ease-quart);
pointer-events: none;
& > * {
&:not(:last-child) {
margin-bottom: 8px;
}
}
}
// Visible state
&.is-visible {
transform: translate3d(0,0,0);
.shop-location__notifications {
opacity: 1;
pointer-events: auto;
}
}
}
// Cart
.cart {
position: fixed;
z-index: 101;
top: 72px;
right: 0;
width: 100%;
height: calc(100vh - 72px);
@include bp (sm) {
top: 24px;
right: 24px;
width: clamp(320px, 45vw, 500px);
height: calc(100vh - 48px);
max-height: 1000px;
}
}
}
// Cart
.cart {
position: fixed;
z-index: 101;
top: 72px;
right: 0;
width: 100%;
height: calc(100vh - 72px);
@include bp (sm) {
top: 24px;
right: 24px;
width: clamp(320px, 45vw, 500px);
height: calc(100vh - 48px);
max-height: 1000px;
}
}
// Notifications
.notifications {
position: fixed;
z-index: 100;
top: 104px;
right: 20px;
transition: opacity 0.7s var(--ease-quart);
pointer-events: none;
@include bp (sm) {
right: 32px;
}
& > * {
&:not(:last-child) {
margin-bottom: 8px;
}
}
}