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

[wip] 🔥 Integrate Swell into the shop

Browse Source 
Create a custom and internal API for fetching and updating content to Swell Admin API (using swell-node)
This commit is contained in:
Félix Péault
2021-11-07 11:51:01 +01:00
parent 2f043af38e
commit bd74f5612c
14 changed files with 543 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/style/molecules/_cart-item.scss Normal file
View File

@@ -0,0 +1,58 @@
// Cart item
.cart-item {
display: flex;
background-color: #fff;
color: $color-gray;
margin-bottom: 24px;
border-radius: 6px;
align-items: center;
&:last-child {
margin-bottom: 0;
}
// Left Image
&__left {
margin-right: 20px;
width: 100px;
height: 150px;
@include bp (sm) {
margin-right: 32px;
width: 124px;
height: 180px;
}
img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 6px 0 0 6px;
}
}
&__right {
// Poster Title
h3 {
font-family: $font-serif;
color: $color-secondary;
font-size: rem(20px);
@include bp (sm) {
font-size: rem(28px);
}
}
// Text
p {
font-size: rem(12px);
line-height: 1.4;
max-width: 124px;
margin: 8px 0 20px;
@include bp (sm) {
font-size: rem(13px);
}
}
}
}

104
src/style/organisms/_cart.scss
View File

@@ -33,90 +33,60 @@
font-size: rem(48px);
}
}
// Close
a {
// Close button
button {
display: block;
padding: 8px 12px;
margin-top: 8px;
margin-right: -12px;
color: $color-gray;
text-decoration: none;
transition: color 0.4s;
&:hover {
color: $color-secondary-bright;
}
}
}
// Poster Cart
.poster-cart {
// Content
&__content {
flex: 1;
}
// Message
&__message {
display: flex;
background-color: #fff;
color: $color-gray;
margin-bottom: 24px;
border-radius: 6px;
align-items: center;
&:last-child {
margin-bottom: 0;
}
// Left Image
&__left {
margin-right: 20px;
width: 100px;
height: 150px;
@include bp (sm) {
margin-right: 32px;
width: 124px;
height: 180px;
}
img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 6px 0 0 6px;
}
}
&__right {
// Poster Title
h3 {
font-family: $font-serif;
color: $color-secondary;
font-size: rem(20px);
@include bp (sm) {
font-size: rem(28px);
}
}
// Text
p {
font-size: rem(12px);
line-height: 1.4;
max-width: 124px;
margin: 8px 0 20px;
@include bp (sm) {
font-size: rem(13px);
}
}
}
justify-content: center;
height: 100%;
padding: 24px;
background: #fff;
color: $color-gray;
border-radius: 6px;
}
// Total
&__total {
color: $color-gray;
margin-bottom: 10px;
margin-top: auto;
padding-top: 20px;
margin: 24px 0;
color: $color-gray;
@include bp (md) {
margin: 32px 0;
}
// Sum
&--sum {
display: flex;
align-items: baseline;
margin-bottom: 16px;
padding-bottom: 10px;
margin-bottom: 17px;
border-bottom: 1px solid #E1D0C0;
@include bp (sm) {
padding-bottom: 12px;
margin-bottom: 32px;
padding-bottom: 12px;
}
h3 {
@@ -129,18 +99,18 @@
}
}
span {
font-size: rem(12px);
margin-left: 20px;
font-size: rem(12px);
@include bp (sm) {
font-size: rem(13px);
}
}
p {
margin-left: auto;
color: $color-secondary;
font-family: $font-serif;
font-size: rem(26px);
margin-left: auto;
@include bp (sm) {
font-size: rem(32px);
@@ -153,16 +123,16 @@
display: flex;
p {
max-width: 180px;
margin-right: auto;
font-size: rem(11px);
line-height: 1.5;
color: $color-gray;
max-width: 180px;
margin-right: auto;
@include bp (sm) {
max-width: 304px;
font-size: rem(12px);
line-height: 1.6;
max-width: 190px;
}
}
}

1
src/style/style.scss
View File

@@ -53,6 +53,7 @@
@import "molecules/issue";
@import "molecules/newsletter-form";
@import "molecules/poster";
@import "molecules/cart-item";
// Organisms
@import "organisms/locations";