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

Make Shop location switcher a component using a global store

Browse Source 
Using two switchers (one in the shop nav and the other in the cart) makes possible to have the switcher over the Cart overlay (over intro)
This commit is contained in:
Félix Péault
2021-11-07 22:40:52 +01:00
parent 3198fd8545
commit 5923afed3b
7 changed files with 140 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -21,73 +21,20 @@
// Nav
.shop-location {
--inset: 20px;
display: flex;
position: fixed;
z-index: 100;
top: 18px;
left: 20px;
right: 20px;
z-index: 20;
top: var(--inset);
left: var(--inset);
right: var(--inset);
justify-content: space-between;
transform: translate3d(0, -96px, 0);
transform: translate3d(0, -88px, 0);
transition: transform 1s var(--ease-quart);
transition-delay: 100ms;
@include bp (sm) {
top: 32px;
left: 32px;
right: 32px;
}
// Visible state
&.is-visible {
transform: translate3d(0,0,0);
.shop-location__notifications {
opacity: 1;
pointer-events: auto;
}
}
// Left
&__left {
dt {
color: $color-primary;
font-weight: 400;
line-height: 1;
font-size: rem(12px);
color: #fff;
}
dd {
img {
display: none;
@include bp (sm) {
display: inline-block;
width: 14px;
height: 14px;
margin-right: 8px;
}
}
select {
background: none;
border: none;
font-size: rem(18px);
color: $color-secondary;
font-family: $font-serif;
appearance: none;
line-height: 1;
@include bp (sm) {
font-size: rem(24px);
}
option {
font-size: rem(16px);
}
}
}
--inset: 32px;
}
// Notifications
@@ -106,6 +53,16 @@
}
}
}
// Visible state
&.is-visible {
transform: translate3d(0,0,0);
.shop-location__notifications {
opacity: 1;
pointer-events: auto;
}
}
}
// Intro