✨(react) add responsive helper

This helper provides handy functions to make components responsive.
openfun · Dec 12, 2023 · 6dcafa9 · 6dcafa9
1 parent 7b0686d
commit 6dcafa9
Showing 1 changed file with 13 additions and 0 deletions.
diff --git a/packages/react/src/utils/_responsive.scss b/packages/react/src/utils/_responsive.scss
@@ -0,0 +1,13 @@
+@use "sass:map";
+@use "../cunningham-tokens" as *;
+
+@function breakpoint($name, $tokens: $themes) {
+  @return map.get($tokens, 'default', 'theme', 'breakpoints', $name);
+}
+
+@mixin container($name, $tokens: $themes) {
+  $breakpoint: breakpoint($name, $tokens);
+  @container (max-width: #{$breakpoint}) {
+    @content;
+  }
+}