Skip to content

Commit 210d3d2

Browse files
adding resources
1 parent 51b417a commit 210d3d2

12 files changed

+488
-69
lines changed
Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
.cart-dropdown {
2+
position: absolute;
3+
width: 240px;
4+
height: 340px;
5+
display: flex;
6+
flex-direction: column;
7+
padding: 20px;
8+
border: 1px solid black;
9+
background-color: white;
10+
top: 90px;
11+
right: 40px;
12+
z-index: 5;
13+
14+
.cart-items {
15+
height: 240px;
16+
display: flex;
17+
flex-direction: column;
18+
overflow: scroll;
19+
}
20+
21+
button {
22+
margin-top: auto;
23+
}
24+
}
Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
.cart-icon {
2+
width: 45px;
3+
height: 45px;
4+
position: relative;
5+
display: flex;
6+
align-items: center;
7+
justify-content: center;
8+
cursor: pointer;
9+
10+
.shopping-icon {
11+
width: 24px;
12+
height: 24px;
13+
}
14+
15+
.item-count {
16+
position: absolute;
17+
font-size: 10px;
18+
font-weight: bold;
19+
bottom: 12px;
20+
}
21+
}
Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
.cart-item {
2+
width: 100%;
3+
display: flex;
4+
height: 80px;
5+
margin-bottom: 15px;
6+
7+
img {
8+
width: 30%;
9+
}
10+
11+
.item-details {
12+
width: 70%;
13+
display: flex;
14+
flex-direction: column;
15+
align-items: flex-start;
16+
justify-content: center;
17+
padding: 10px 20px;
18+
19+
.name {
20+
font-size: 16px;
21+
}
22+
}
23+
}
Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
.checkout-item {
2+
width: 100%;
3+
display: flex;
4+
min-height: 100px;
5+
border-bottom: 1px solid darkgrey;
6+
padding: 15px 0;
7+
font-size: 20px;
8+
align-items: center;
9+
10+
.image-container {
11+
width: 23%;
12+
padding-right: 15px;
13+
14+
img {
15+
width: 100%;
16+
height: 100%;
17+
}
18+
}
19+
.name,
20+
.quantity,
21+
.price {
22+
width: 23%;
23+
}
24+
25+
.quantity {
26+
padding-left: 20px;
27+
}
28+
29+
.remove-button {
30+
padding-left: 12px;
31+
cursor: pointer;
32+
}
33+
}
Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
.checkout-page {
2+
width: 55%;
3+
min-height: 90vh;
4+
display: flex;
5+
flex-direction: column;
6+
align-items: center;
7+
margin: 50px auto 0;
8+
9+
.checkout-header {
10+
width: 100%;
11+
padding: 10px 0;
12+
display: flex;
13+
justify-content: space-between;
14+
border-bottom: 1px solid darkgrey;
15+
16+
.header-block {
17+
text-transform: capitalize;
18+
width: 23%;
19+
20+
&:last-child {
21+
width: 8%;
22+
}
23+
}
24+
}
25+
26+
.total {
27+
margin-top: 30px;
28+
margin-left: auto;
29+
font-size: 36px;
30+
}
31+
}
Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
.collection-item {
2+
width: 22%;
3+
display: flex;
4+
flex-direction: column;
5+
height: 350px;
6+
align-items: center;
7+
position: relative;
8+
9+
.image {
10+
width: 100%;
11+
height: 95%;
12+
background-size: cover;
13+
background-position: center;
14+
margin-bottom: 5px;
15+
}
16+
17+
.custom-button {
18+
width: 80%;
19+
opacity: 0.7;
20+
position: absolute;
21+
top: 255px;
22+
display: none;
23+
}
24+
25+
&:hover {
26+
.image {
27+
opacity: 0.8;
28+
}
29+
30+
.custom-button {
31+
opacity: 0.85;
32+
display: flex;
33+
}
34+
}
35+
36+
.collection-footer {
37+
width: 100%;
38+
height: 5%;
39+
display: flex;
40+
justify-content: space-between;
41+
font-size: 18px;
42+
43+
.name {
44+
width: 90%;
45+
margin-bottom: 15px;
46+
}
47+
48+
.price {
49+
width: 10%;
50+
}
51+
}
52+
}

src/Pages/resources/custom-button.styles.scss

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,34 @@
1313
font-weight: bolder;
1414
border: none;
1515
cursor: pointer;
16+
display: flex;
17+
justify-content: center;
1618

1719
&:hover {
1820
background-color: white;
1921
color: black;
2022
border: 1px solid black;
2123
}
24+
25+
&.google-sign-in {
26+
background-color: #4285f4;
27+
color: white;
28+
29+
&:hover {
30+
background-color: #357ae8;
31+
border: none;
32+
}
33+
}
34+
35+
&.inverted {
36+
background-color: white;
37+
color: black;
38+
border: 1px solid black;
39+
40+
&:hover {
41+
background-color: black;
42+
color: white;
43+
border: none;
44+
}
45+
}
2246
}

src/Pages/resources/form-input.styles.scss

Lines changed: 0 additions & 54 deletions
This file was deleted.

0 commit comments

Comments
 (0)