From b9e16f5fed6d8548522a65e6f3961e27a8d7ae3d Mon Sep 17 00:00:00 2001
From: Corentin Forler <10946971+cogk@users.noreply.github.com>
Date: Fri, 29 Sep 2023 16:22:45 +0200
Subject: [PATCH] fix: Fix breakpoints CSS variables using map-get
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

“Sass parses custom property declarations differently than other property declarations. All tokens are passed through to CSS as-is.”
https://sass-lang.com/documentation/style-rules/declarations/#custom-properties
---
 frappe/public/scss/desk/css_variables.scss | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/frappe/public/scss/desk/css_variables.scss b/frappe/public/scss/desk/css_variables.scss
index dc24570ab9..75c46baa7d 100644
--- a/frappe/public/scss/desk/css_variables.scss
+++ b/frappe/public/scss/desk/css_variables.scss
@@ -3,12 +3,12 @@
 :root,
 [data-theme="light"] {
 	// breakpoints
-	--xxl-width: map-get($grid-breakpoints, '2xl');
-	--xl-width: map-get($grid-breakpoints, 'xl');
-	--lg-width: map-get($grid-breakpoints, 'lg');
-	--md-width: map-get($grid-breakpoints, 'md');
-	--sm-width: map-get($grid-breakpoints, 'sm');
-	--xs-width: map-get($grid-breakpoints, 'xs');
+	--xxl-width: #{map-get($grid-breakpoints, '2xl')};
+	--xl-width: #{map-get($grid-breakpoints, 'xl')};
+	--lg-width: #{map-get($grid-breakpoints, 'lg')};
+	--md-width: #{map-get($grid-breakpoints, 'md')};
+	--sm-width: #{map-get($grid-breakpoints, 'sm')};
+	--xs-width: #{map-get($grid-breakpoints, 'xs')};
 
 	--navbar-height: 48px;