Match container gutters with row gutters

- Replaces make-container mixin's padding-x param with gutter to match naming
- Changes value of container padding variable to match grid gutter width variable
- Uses local CSS variable for container padding

Fixes #31642

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 6950af95c89a630571dfbb948265e6c9fc6e66b6..dbf4c5275054c7688a1382bb1c25310dddd0a945 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -336,7 +336,7 @@ $gutters: $spacers !default;
 
 // Container padding
 
-$container-padding-x: 1rem !default;
+$container-padding-x: $grid-gutter-width !default;
 
 
 // Components

diff --git a/scss/mixins/_container.scss b/scss/mixins/_container.scss
index 435d0034107dd34c2acc15b82897fb4beb093f5e..3680b3098d5b032b84d2032463e44d8ae262fa90 100644 (file)
--- a/scss/mixins/_container.scss
+++ b/scss/mixins/_container.scss
@@ -1,9 +1,11 @@
 // Container mixins
 
-@mixin make-container($padding-x: $container-padding-x) {
+@mixin make-container($gutter: $container-padding-x) {
+  --bs-gutter-x: #{$gutter};
+
   width: 100%;
-  padding-right: $padding-x;
-  padding-left: $padding-x;
+  padding-right: var(--bs-gutter-x);
+  padding-left: var(--bs-gutter-x);
   margin-right: auto;
   margin-left: auto;
 }