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

Create Aside for Cart

Browse Source 
With Poster Cart component
This commit is contained in:
Shelby Kay
2021-11-04 16:04:18 +01:00
parent 439cdaee98
commit 50835fa6f6
6 changed files with 351 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,115 @@
.shop-page {
position: relative;
// Cart
.cart {
display: flex;
position: fixed;
z-index: 100;
top: 72px;
right: 0;
width: 100%;
height: calc(100vh - 72px);
@include bp (sm) {
top: 24px;
right: 24px;
width: clamp(320px, 35vw, 500px);
height: calc(100vh - 48px);
max-height: 1000px;
}
}
// Nav
.shop-location {
display: flex;
position: fixed;
z-index: 20;
top: 18px;
left: 20px;
right: 20px;
width: calc(100% - 80px);
justify-content: space-between;
@include bp (sm) {
top: 32px;
left: 40px;
right: 40px;
}
// 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);
}
}
}
}
// Cart
&__cart {
display: none;
position: relative;
@include bp (sm) {
display: flex;
}
.quantity {
position: absolute;
top: 50%;
left: -12px;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
font-size: rem(11px);
font-weight: 600;
color: #fff;
background-color: $color-secondary;
border-radius: 100vh;
}
}
}
// Intro
&__intro {
position: relative;
z-index: 30;
height: 100vh;
min-height: 800px;
overflow: hidden;