fix: use min-width in custom-media breakpoint definitions (#2098)

openedx · Feb 26, 2023 · 3cccdeb · 3cccdeb
1 parent 6d096dd
commit 3cccdeb
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 10 deletions.
diff --git a/scss/core/css/custom-media-breakpoints.css b/scss/core/css/custom-media-breakpoints.css
@@ -1,12 +1,12 @@
 /**
  * IMPORTANT: This file is the result of assembling design tokens
  * Do not edit directly
- * Generated on Fri, 24 Feb 2023 11:38:50 GMT
+ * Generated on Sun, 26 Feb 2023 16:21:31 GMT
  */
 
-@custom-media --pgn-size-breakpoint-xs (max-width: 0); 
-@custom-media --pgn-size-breakpoint-sm (max-width: 576px); 
-@custom-media --pgn-size-breakpoint-md (max-width: 768px); 
-@custom-media --pgn-size-breakpoint-lg (max-width: 992px); 
-@custom-media --pgn-size-breakpoint-xl (max-width: 1200px); 
-@custom-media --pgn-size-breakpoint-xxl (max-width: 1400px); 
+@custom-media --pgn-size-breakpoint-xs (min-width: 0);
+@custom-media --pgn-size-breakpoint-sm (min-width: 576px);
+@custom-media --pgn-size-breakpoint-md (min-width: 768px);
+@custom-media --pgn-size-breakpoint-lg (min-width: 992px);
+@custom-media --pgn-size-breakpoint-xl (min-width: 1200px);
+@custom-media --pgn-size-breakpoint-xxl (min-width: 1400px);
diff --git a/scss/core/css/utility-classes.css b/scss/core/css/utility-classes.css
@@ -1,7 +1,7 @@
 /**
  * IMPORTANT: This file is the result of assembling design tokens
  * Do not edit directly
- * Generated on Fri, 24 Feb 2023 12:30:21 GMT
+ * Generated on Sun, 26 Feb 2023 16:21:31 GMT
  */
 
 .bg-dark {

diff --git a/scss/core/css/variables.css b/scss/core/css/variables.css
@@ -1,7 +1,7 @@
 /**
  * IMPORTANT: This file is the result of assembling design tokens
  * Do not edit directly
- * Generated on Fri, 24 Feb 2023 12:30:21 GMT
+ * Generated on Sun, 26 Feb 2023 16:21:31 GMT
  */
 
 :root {

diff --git a/tokens/style-dictionary.js b/tokens/style-dictionary.js
@@ -174,7 +174,7 @@ StyleDictionary.registerFormat({
     let customMediaVariables = '';
 
     Object.values(breakpoint).forEach(item => {
-      customMediaVariables += `@custom-media --${item.name} (max-width: ${item.value}); \n`;
+      customMediaVariables += `@custom-media --${item.name} (min-width: ${item.value});\n`;
     });
 
     return fileHeader({ file }) + customMediaVariables;