From 60ea785dfd434f67112e785b8a4bcb4e7705ee03 Mon Sep 17 00:00:00 2001
From: prssanna <prssud@gmail.com>
Date: Tue, 18 May 2021 15:42:13 +0530
Subject: [PATCH 1/2] fix: ensure website theme is applied correctly

---
 erpnext/public/scss/shopping_cart.scss | 18 +++++++++---------
 erpnext/public/scss/website.scss       |  9 ++++-----
 2 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/erpnext/public/scss/shopping_cart.scss b/erpnext/public/scss/shopping_cart.scss
index 159a8a47cd..92e5d32219 100644
--- a/erpnext/public/scss/shopping_cart.scss
+++ b/erpnext/public/scss/shopping_cart.scss
@@ -1,4 +1,3 @@
-@import "frappe/public/scss/desk/variables";
 @import "frappe/public/scss/common/mixins";
 
 body.product-page {
@@ -217,12 +216,12 @@ body.product-page {
 		border-color: var(--table-border-color) !important;
 		padding: 15px;
 
-		@include media-breakpoint-between(xs, md) {
+		@media (max-width: 840px) {
 			height: 300px;
 			width: 300px;
 		}
 
-		@include media-breakpoint-up(lg) {
+		@media (min-width: 1090px) {
 			height: 350px;
 			width: 350px;
 		}
@@ -233,11 +232,12 @@ body.product-page {
 	}
 
 	.item-slideshow {
-		@include media-breakpoint-between(xs, md) {
+
+		@media (max-width: 840px) {
 			max-height: 320px;
 		}
 
-		@include media-breakpoint-up(lg) {
+		@media (min-width: 1090px) {
 			max-height: 430px;
 		}
 
@@ -254,7 +254,7 @@ body.product-page {
 		cursor: pointer;
 
 		&:hover, &.active {
-			border-color: $primary;
+			border-color: var(--primary);
 		}
 	}
 
@@ -316,12 +316,12 @@ body.product-page {
 }
 
 .item-group-slideshow {
-	.item-group-description {
+	// .item-group-description {
 		// max-width: 900px;
-	}
+	// }
 
 	.carousel-inner.rounded-carousel {
-		border-radius: $card-border-radius;
+		border-radius: var(--card-border-radius);
 	}
 }
 
diff --git a/erpnext/public/scss/website.scss b/erpnext/public/scss/website.scss
index 56b717c424..f4325c03f5 100644
--- a/erpnext/public/scss/website.scss
+++ b/erpnext/public/scss/website.scss
@@ -1,4 +1,3 @@
-@import "frappe/public/scss/website/variables";
 
 .filter-options {
 	max-height: 300px;
@@ -14,7 +13,7 @@
 	}
 
 	&.active {
-		border-color: $primary;
+		border-color: var(--primary);
 
 		.check {
 			display: inline-flex;
@@ -25,7 +24,7 @@
 .check {
 	display: inline-flex;
 	padding: 0.25rem;
-	background: $primary;
+	background: var(--primary);
 	color: white;
 	border-radius: 50%;
 	font-size: 12px;
@@ -38,12 +37,12 @@
 }
 
 .result {
-	border-bottom: 1px solid $border-color;
+	border-bottom: 1px solid var(--border-color);
 }
 
 .transaction-list-item {
 	padding: 1rem 0;
-	border-top: 1px solid $border-color;
+	border-top: 1px solid var(--border-color);
 	position: relative;
 
 	a.transaction-item-link {

From 5f4527a6a19c504d1d0d637e8038ba5464b2dab4 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Fri, 28 May 2021 08:55:38 +0530
Subject: [PATCH 2/2] refactor: Use css variables for breakpoint value

---
 erpnext/public/scss/shopping_cart.scss | 20 ++++----------------
 1 file changed, 4 insertions(+), 16 deletions(-)

diff --git a/erpnext/public/scss/shopping_cart.scss b/erpnext/public/scss/shopping_cart.scss
index 92e5d32219..9402cf9ea4 100644
--- a/erpnext/public/scss/shopping_cart.scss
+++ b/erpnext/public/scss/shopping_cart.scss
@@ -73,15 +73,6 @@ body.product-page {
 		}
 	}
 
-	// .card-body {
-	// 	text-align: center;
-	// }
-
-	// .featured-item {
-	// 	.card-body {
-	// 		text-align: left;
-	// 	}
-	// }
 	.card-img-container {
 		height: 210px;
 		width: 100%;
@@ -216,12 +207,12 @@ body.product-page {
 		border-color: var(--table-border-color) !important;
 		padding: 15px;
 
-		@media (max-width: 840px) {
+		@media (max-width: var(--md-width)) {
 			height: 300px;
 			width: 300px;
 		}
 
-		@media (min-width: 1090px) {
+		@media (min-width: var(--lg-width)) {
 			height: 350px;
 			width: 350px;
 		}
@@ -233,11 +224,11 @@ body.product-page {
 
 	.item-slideshow {
 
-		@media (max-width: 840px) {
+		@media (max-width: var(--md-width)) {
 			max-height: 320px;
 		}
 
-		@media (min-width: 1090px) {
+		@media (min-width: var(--lg-width)) {
 			max-height: 430px;
 		}
 
@@ -316,9 +307,6 @@ body.product-page {
 }
 
 .item-group-slideshow {
-	// .item-group-description {
-		// max-width: 900px;
-	// }
 
 	.carousel-inner.rounded-carousel {
 		border-radius: var(--card-border-radius);