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

170
src/style/organisms/_cart.scss Normal file
View File

@@ -0,0 +1,170 @@
.cart {
display: flex;
flex-direction: column;
background-color: $color-cream;
border-radius: 8px;
padding: 20px 20px 24px;
@include bp (sm) {
padding: 24px 32px 0 32px;
}
// Heading
&__heading {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 8px;
margin-bottom: 24px;
border-bottom: 1px solid #E1D0C0;
@include bp (sm) {
padding-bottom: 12px;
margin-bottom: 32px;
}
// Title
h2 {
font-size: rem(32px);
font-family: $font-serif;
color: $color-secondary;
@include bp (sm) {
font-size: rem(48px);
}
}
// Close
a {
color: $color-gray;
text-decoration: none;
}
}
// Poster Cart
.poster-cart {
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);
}
}
}
}
// Total
&__total {
color: $color-gray;
margin-bottom: 10px;
margin-top: auto;
padding-top: 20px;
// Sum
&--sum {
display: flex;
align-items: baseline;
padding-bottom: 10px;
margin-bottom: 17px;
border-bottom: 1px solid #E1D0C0;
@include bp (sm) {
padding-bottom: 12px;
margin-bottom: 32px;
}
h3 {
color: $color-text;
font-size: rem(26px);
font-family: $font-serif;
@include bp (sm) {
font-size: rem(32px);
}
}
span {
font-size: rem(12px);
margin-left: 20px;
@include bp (sm) {
font-size: rem(13px);
}
}
p {
color: $color-secondary;
font-family: $font-serif;
font-size: rem(26px);
margin-left: auto;
@include bp (sm) {
font-size: rem(32px);
}
}
}
// Checkout
&--checkout {
display: flex;
p {
font-size: rem(11px);
line-height: 1.5;
color: $color-gray;
max-width: 180px;
margin-right: auto;
@include bp (sm) {
font-size: rem(12px);
line-height: 1.6;
max-width: 190px;
}
}
}
}
}