From 6a8f38a1821706821161fe3ef84b3e5cd509e262 Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Mon, 31 Mar 2025 22:11:06 +0200
Subject: [PATCH] Better screen breakpoint mixins and classes
---
frontend/src/styles/layout.scss | 44 +++++++++++++++++++++++++++++++--
1 file changed, 42 insertions(+), 2 deletions(-)
diff --git a/frontend/src/styles/layout.scss b/frontend/src/styles/layout.scss
index a9505f0..6b2f213 100644
--- a/frontend/src/styles/layout.scss
+++ b/frontend/src/styles/layout.scss
@@ -8,10 +8,50 @@ $breakpoints: (
);
// Mixin to print out media queries (based on map keys passed)
-@mixin media($keys...){
+@mixin media($keys...) {
@each $key in $keys {
- @media (min-width: map.get($breakpoints, $key)){
+ @media (min-width: map.get($breakpoints, $key)) {
@content
}
}
}
+
+.hidden {
+ display: none !important;
+}
+
+@mixin from($key) {
+ @media (min-width: map.get($breakpoints, $key)) {
+ @content;
+ }
+}
+
+@mixin until($key) {
+ @media (max-width: #{map.get($breakpoints, $key) - 1}) {
+ @content;
+ }
+}
+
+.from.desktop {
+ @include until(desktop) {
+ display: none !important;
+ }
+}
+
+.from.tablet {
+ @include until(tablet) {
+ display: none !important;
+ }
+}
+
+.until.tablet {
+ @include from(tablet) {
+ display: none !important;
+ }
+}
+
+.until.desktop {
+ @include from(desktop) {
+ display: none !important;
+ }
+}