scss: semantic grid: add make-container-breakpoint

Signed-off-by: O'meid <public@omeid.me>

diff --git a/scss/_grid.scss b/scss/_grid.scss
index b71d5b03df203936a9f4a4a5b6581e6c0f8461a7..1841b7faa7ee4a8ae3acc5129fb4883857d21a80 100644 (file)
--- a/scss/_grid.scss
+++ b/scss/_grid.scss
@@ -4,13 +4,8 @@
 
 .container {
   @include make-container();
+  @include make-container-max-widths();
 
-  // For each breakpoint, define the maximum width of the container in a media query
-  @each $breakpoint, $container-max-width in $container-max-widths {
-    @include media-breakpoint-up($breakpoint) {
-      max-width: $container-max-width;
-    }
-  }
 }
 
 

diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss
index 56b8c6f203c881547b836f5a1f20bc071dc9c841..87b4ac94a6342fc6d05ac825ce67baa0a0ba4a72 100644 (file)
--- a/scss/mixins/_grid.scss
+++ b/scss/mixins/_grid.scss
@@ -10,6 +10,16 @@
   @include clearfix();
 }
 
+
+// For each breakpoint, define the maximum width of the container in a media query
+@mixin make-container-max-widths($max-widths: $container-max-widths) {
+  @each $breakpoint, $container-max-width in $max-widths {
+    @include media-breakpoint-up($breakpoint) {
+      max-width: $container-max-width;
+    }
+  }
+}
+
 @mixin make-row($gutter: $grid-gutter-width) {
   @if $enable-flex {
     display: flex;