avoid double margins

Orange-OpenSource · Oct 1, 2024 · 63bc2ec · 63bc2ec
1 parent 2d26495
commit 63bc2ec
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 23 deletions.
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -572,14 +572,14 @@ $grid-breakpoints: (
 
 // scss-docs-start container-max-widths
 $container-max-widths: (
-  2xs: subtract($ouds-grid-2xs-width, (2 * $ouds-grid-2xs-margin)), // 328
-  xs: subtract($ouds-grid-xs-width, (2 * $ouds-grid-xs-margin)), // 342
-  sm: subtract($ouds-grid-sm-width, (2 * $ouds-grid-sm-margin)), // 424
-  md: subtract($ouds-grid-md-width, (2 * $ouds-grid-md-margin)), // 704
-  lg: subtract($ouds-grid-lg-width, (2 * $ouds-grid-lg-margin)), // 944
-  xl: subtract($ouds-grid-xl-width, (2 * $ouds-grid-xl-margin)), // 1328
-  2xl: subtract($ouds-grid-2xl-width, (2 * $ouds-grid-2xl-margin)), // 1520
-  3xl: subtract($ouds-grid-3xl-width, (2 * $ouds-grid-3xl-margin)), // 1696
+  2xs: $ouds-grid-2xs-width, // 328
+  xs: $ouds-grid-xs-width, // 342
+  sm: $ouds-grid-sm-width, // 424
+  md: $ouds-grid-md-width, // 704
+  lg: $ouds-grid-lg-width, // 944
+  xl: $ouds-grid-xl-width, // 1328
+  2xl: $ouds-grid-2xl-width, // 1520
+  3xl: $ouds-grid-3xl-width, // 1696
 ) !default;
 
 $container-fluid-margin: (

diff --git a/scss/mixins/_container.scss b/scss/mixins/_container.scss
@@ -4,15 +4,15 @@
 @mixin make-container($gutter: $container-padding-x) {
   --#{$prefix}gutter-y: 0;
   width: 100%;
-  padding-right: var(--#{$prefix}gutter-x);
-  padding-left: var(--#{$prefix}gutter-x);
+  padding-right: var(--#{$prefix}margin-x);
+  padding-left: var(--#{$prefix}margin-x);
   margin-right: auto;
   margin-left: auto;
 
   // OUDS mod: gutter depends on breakpoints
   @each $breakpoint, $container-fluid-marg in $container-fluid-margin {
     @include media-breakpoint-up($breakpoint) {
-      --#{$prefix}gutter-x: #{$container-fluid-marg};
+      --#{$prefix}margin-x: #{$container-fluid-marg};
     }
   }
   // End mod
@@ -22,7 +22,7 @@
 @mixin make-container-fluid-margin() {
   @each $breakpoint, $container-margin in $container-fluid-margin {
     @include media-breakpoint-up($breakpoint) {
-      max-width: subtract(100vw, $container-margin * 2);
+      max-width: 100vw;
     }
   }
 }

diff --git a/site/content/docs/0.0/examples/grid-system/index.html b/site/content/docs/0.0/examples/grid-system/index.html
@@ -9,8 +9,7 @@
 ---
 
 <main style="background-color: #ff9f9f">
-  <!-- style="background-color: #ff9f9f" -->
-  <div class="container">
+  <div class="container mb-3">
     <div class="row" style="min-height: 150px">
       <div class="col padding-color"></div>
       <div class="col padding-color"></div>
@@ -27,7 +26,7 @@
     </div>
   </div>
 
-  <div class="container-2xs">
+  <div class="container-xs mb-3">
     <div class="row" style="min-height: 150px">
       <div class="col padding-color"></div>
       <div class="col padding-color"></div>
@@ -44,7 +43,7 @@
     </div>
   </div>
 
-  <div class="container-xs">
+  <div class="container-sm mb-3">
     <div class="row" style="min-height: 150px">
       <div class="col padding-color"></div>
       <div class="col padding-color"></div>
@@ -61,7 +60,7 @@
     </div>
   </div>
 
-  <div class="container-sm">
+  <div class="container-md mb-3">
     <div class="row" style="min-height: 150px">
       <div class="col padding-color"></div>
       <div class="col padding-color"></div>
@@ -78,7 +77,7 @@
     </div>
   </div>
 
-  <div class="container-md">
+  <div class="container-lg mb-3">
     <div class="row" style="min-height: 150px">
       <div class="col padding-color"></div>
       <div class="col padding-color"></div>
@@ -95,7 +94,7 @@
     </div>
   </div>
 
-  <div class="container-lg">
+  <div class="container-xl mb-3">
     <div class="row" style="min-height: 150px">
       <div class="col padding-color"></div>
       <div class="col padding-color"></div>
@@ -112,7 +111,7 @@
     </div>
   </div>
 
-  <div class="container-xl">
+  <div class="container-2xl mb-3">
     <div class="row" style="min-height: 150px">
       <div class="col padding-color"></div>
       <div class="col padding-color"></div>
@@ -129,7 +128,7 @@
     </div>
   </div>
 
-  <div class="container-2xl">
+  <div class="container-3xl mb-3">
     <div class="row" style="min-height: 150px">
       <div class="col padding-color"></div>
       <div class="col padding-color"></div>
@@ -146,7 +145,7 @@
     </div>
   </div>
 
-  <div class="container-3xl">
+  <div class="container-fluid mb-3">
     <div class="row" style="min-height: 150px">
       <div class="col padding-color"></div>
       <div class="col padding-color"></div>

diff --git a/site/content/docs/0.0/layout/containers.md b/site/content/docs/0.0/layout/containers.md
@@ -54,7 +54,6 @@ Our default `.container` class is a responsive, fixed-width container, meaning i
 Responsive containers allow you to specify a class that follows the `.container-fluid` behavior until the specified breakpoint is reached, after which we apply `max-width`s for each of the higher breakpoints. For example, `.container-sm` behaves like the `.container-fluid` to start until the `sm` breakpoint is reached, where it will scale up with `md`, `lg`, `xl`, and `xxl`.
 
 ```html
-<div class="container-2xs">100% wide until extra extra breakpoint</div>
 <div class="container-xs">100% wide until extra breakpoint</div>
 <div class="container-sm">100% wide until small breakpoint</div>
 <div class="container-md">100% wide until medium breakpoint</div>