Upgrade to bootstrap 4.5
[roojs1] / scss / bootstrap / mixins / _grid.scss
index 254f073..19babc0 100644 (file)
@@ -2,14 +2,20 @@
 //
 // Generate semantic grid columns with these mixins.
 
-@mixin make-container() {
+@mixin make-container($gutter: $grid-gutter-width) {
   width: 100%;
-  padding-right: ($grid-gutter-width / 2);
-  padding-left: ($grid-gutter-width / 2);
+  padding-right: $gutter / 2;
+  padding-left: $gutter / 2;
   margin-right: auto;
   margin-left: auto;
 }
 
+@mixin make-row($gutter: $grid-gutter-width) {
+  display: flex;
+  flex-wrap: wrap;
+  margin-right: -$gutter / 2;
+  margin-left: -$gutter / 2;
+}
 
 // For each breakpoint, define the maximum width of the container in a media query
 @mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
       max-width: $container-max-width;
     }
   }
+  @include deprecate("The `make-container-max-widths` mixin", "v4.5.2", "v5");
 }
 
-@mixin make-row() {
-  display: flex;
-  flex-wrap: wrap;
-  margin-right: ($grid-gutter-width / -2);
-  margin-left: ($grid-gutter-width / -2);
-}
-
-@mixin make-col-ready() {
+@mixin make-col-ready($gutter: $grid-gutter-width) {
   position: relative;
   // Prevent columns from becoming too narrow when at smaller grid tiers by
   // always setting `width: 100%;`. This works because we use `flex` values
   // later on to override this initial width.
   width: 100%;
-  padding-right: ($grid-gutter-width / 2);
-  padding-left: ($grid-gutter-width / 2);
+  padding-right: $gutter / 2;
+  padding-left: $gutter / 2;
 }
 
 @mixin make-col($size, $columns: $grid-columns) {
   max-width: percentage($size / $columns);
 }
 
+@mixin make-col-auto() {
+  flex: 0 0 auto;
+  width: auto;
+  max-width: 100%; // Reset earlier grid tiers
+}
+
 @mixin make-col-offset($size, $columns: $grid-columns) {
   $num: $size / $columns;
   margin-left: if($num == 0, 0, percentage($num));
 }
+
+// Row columns
+//
+// Specify on a parent element(e.g., .row) to force immediate children into NN
+// numberof columns. Supports wrapping to new lines, but does not do a Masonry
+// style grid.
+@mixin row-cols($count) {
+  > * {
+    flex: 0 0 100% / $count;
+    max-width: 100% / $count;
+  }
+}