From 63bc2ec0637f7a3a4476d36db37d93d7b91d4aad Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Tue, 1 Oct 2024 17:17:20 +0200 Subject: [PATCH] avoid double margins --- scss/_variables.scss | 16 ++++++++-------- scss/mixins/_container.scss | 8 ++++---- .../docs/0.0/examples/grid-system/index.html | 19 +++++++++---------- site/content/docs/0.0/layout/containers.md | 1 - 4 files changed, 21 insertions(+), 23 deletions(-) diff --git a/scss/_variables.scss b/scss/_variables.scss index 5e08b3e8a1..19f4eaf7b2 100644 --- 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 index c3449096f7..f585a68b2e 100644 --- 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 index 340eb44c5f..26f18c9cad 100644 --- 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 @@ ---
- -
+
@@ -27,7 +26,7 @@
-
+
@@ -44,7 +43,7 @@
-
+
@@ -61,7 +60,7 @@
-
+
@@ -78,7 +77,7 @@
-
+
@@ -95,7 +94,7 @@
-
+
@@ -112,7 +111,7 @@
-
+
@@ -129,7 +128,7 @@
-
+
@@ -146,7 +145,7 @@
-
+
diff --git a/site/content/docs/0.0/layout/containers.md b/site/content/docs/0.0/layout/containers.md index bcfa2af76a..96e2940bc2 100644 --- 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 -
100% wide until extra extra breakpoint
100% wide until extra breakpoint
100% wide until small breakpoint
100% wide until medium breakpoint