From dd000e0b0dbd9bc53baeb6bcf1fff6271a7f93de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Charles=20He=CC=81on?= <charles.heon@nventive.com>
Date: Wed, 7 Aug 2024 14:06:51 -0400
Subject: [PATCH] feat: adding media-queries mixins

---
 frontend/src/styles/index.scss                |  2 +
 .../src/styles/mixins/_media-queries.scss     | 42 +++++++++++++++++++
 frontend/vite.config.ts                       |  2 +-
 3 files changed, 45 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/styles/mixins/_media-queries.scss

diff --git a/frontend/src/styles/index.scss b/frontend/src/styles/index.scss
index d86adff..4500c0d 100755
--- a/frontend/src/styles/index.scss
+++ b/frontend/src/styles/index.scss
@@ -1,5 +1,7 @@
 @import "mixins/normalize";
 
+@import "mixins/media-queries";
+
 @import "vendors/toastify.css";
 
 @import "animations";
diff --git a/frontend/src/styles/mixins/_media-queries.scss b/frontend/src/styles/mixins/_media-queries.scss
new file mode 100644
index 0000000..4ee4916
--- /dev/null
+++ b/frontend/src/styles/mixins/_media-queries.scss
@@ -0,0 +1,42 @@
+/* ============================================
+=                  Media queries              =
+Use these mixins like this:
+.example-class{
+  display: flex;
+  flex-direction: row;
+
+  @include xs{
+    flex-direction: column;
+  }
+}
+============================================ */
+
+@mixin xs {
+  @media (min-width: map-get($media, xs)) {
+    @content;
+  }
+}
+
+@mixin sm {
+  @media (min-width: map-get($media, sm)) {
+    @content;
+  }
+}
+
+@mixin md {
+  @media (min-width: map-get($media, md)) {
+    @content;
+  }
+}
+
+@mixin lg {
+  @media (min-width: map-get($media, lg)) {
+    @content;
+  }
+}
+
+@mixin xl {
+  @media (min-width: map-get($media, xl)) {
+    @content;
+  }
+}
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 4f38d21..d66a727 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -10,7 +10,7 @@ export default ({ mode }: { mode: string }) => {
     css: {
       preprocessorOptions: {
         scss: {
-          additionalData: `@import "./src/styles/_variables.scss";`,
+          additionalData: `@import "./src/styles/_variables.scss"; @import "./src/styles/mixins/_media-queries.scss";`,
         },
       },
     },