From 5c2a50fb9e3fe208a788b36624544a6803cd20ec Mon Sep 17 00:00:00 2001
From: Martijn Cuppens <martijn.cuppens@gmail.com>
Date: Wed, 15 Apr 2020 06:36:35 +0200
Subject: [PATCH] Disable negative margins by default (#30585)
* Disable negative margins by default
* Use shorter enable variable
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
---
scss/_variables.scss | 3 ++-
site/content/docs/4.3/getting-started/theming.md | 3 ++-
site/content/docs/4.3/migration.md | 1 +
site/content/docs/4.3/utilities/spacing.md | 11 +----------
4 files changed, 6 insertions(+), 12 deletions(-)
diff --git a/scss/_variables.scss b/scss/_variables.scss
index f562e724c3..04cf989924 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -214,6 +214,7 @@ $enable-grid-classes: true !default;
$enable-pointer-cursor-for-buttons: true !default;
$enable-rfs: true !default;
$enable-validation-icons: true !default;
+$enable-negative-margins: false !default;
$enable-deprecation-messages: true !default;
$enable-important-utilities: true !default;
@@ -234,7 +235,7 @@ $spacers: (
5: $spacer * 3,
) !default;
-$negative-spacers: negativify-map($spacers) !default;
+$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
// Body
//
diff --git a/site/content/docs/4.3/getting-started/theming.md b/site/content/docs/4.3/getting-started/theming.md
index ff50369f25..73d5b0f780 100644
--- a/site/content/docs/4.3/getting-started/theming.md
+++ b/site/content/docs/4.3/getting-started/theming.md
@@ -277,8 +277,9 @@ You can find and customize these variables for key global options in Bootstrap's
| `$enable-grid-classes` | `true` (default) or `false` | Enables the generation of CSS classes for the grid system (e.g. `.row`, `.col-md-1`, etc.). |
| `$enable-caret` | `true` (default) or `false` | Enables pseudo element caret on `.dropdown-toggle`. |
| `$enable-pointer-cursor-for-buttons` | `true` (default) or `false` | Add "hand" cursor to non-disabled button elements. |
-| `$enable-rfs` | `true` (default) or `false` | Globally enables [RFS]({{< docsref "/getting-started/rfs" >}}). |
+| `$enable-rfs` | `true` (default) or `false` | Globally enables [RFS]({{< docsref "/getting-started/rfs" >}}). |
| `$enable-validation-icons` | `true` (default) or `false` | Enables `background-image` icons within textual inputs and some custom forms for validation states. |
+| `$enable-negative-margins` | `true` or `false` (default) | Enables the generation of [negative margin utilities]({{< docsref "/utilities/spacing#negative-margin" >}}). |
| `$enable-deprecation-messages` | `true` or `false` (default) | Set to `true` to show warnings when using any of the deprecated mixins and functions that are planned to be removed in `v5`. |
| `$enable-important-utilities` | `true` (default) or `false` | Enables the `!important` suffix in utility classes. |
diff --git a/site/content/docs/4.3/migration.md b/site/content/docs/4.3/migration.md
index fecf23d79b..34f8dc9f0f 100644
--- a/site/content/docs/4.3/migration.md
+++ b/site/content/docs/4.3/migration.md
@@ -166,6 +166,7 @@ Badges were overhauled to better differentiate themselves from buttons and to be
- Added `.bg-body` for quickly setting the `<body>`'s background to additional elements.
- **Todo:** Drop `.text-hide` as it's an antiquated method for hiding text that shouldn't be used anymore
- **Todo:** Split utilities into property-value utility classes and helpers
+- Negative margin utilities are disabled by default. You can re-enable them by setting `$enable-negative-margins: true`, but keep in mind this can increase the file size quite a lot.
## Docs
diff --git a/site/content/docs/4.3/utilities/spacing.md b/site/content/docs/4.3/utilities/spacing.md
index 58e16ec68b..ce32ad499f 100644
--- a/site/content/docs/4.3/utilities/spacing.md
+++ b/site/content/docs/4.3/utilities/spacing.md
@@ -84,7 +84,7 @@ Additionally, Bootstrap also includes an `.mx-auto` class for horizontally cente
### Negative margin
-In CSS, `margin` properties can utilize negative values (`padding` cannot). As of 4.2, we've added negative margin utilities for every non-zero integer size listed above (e.g., `1`, `2`, `3`, `4`, `5`). These utilities are ideal for customizing grid column gutters across breakpoints.
+In CSS, `margin` properties can utilize negative values (`padding` cannot). These negative margins are **disabled by default**, but can be enabled in Sass by setting `$enable-negative-margins: true`.
The syntax is nearly the same as the default, positive margin utilities, but with the addition of `n` before the requested size. Here's an example class that's the opposite of `.mt-1`:
@@ -93,12 +93,3 @@ The syntax is nearly the same as the default, positive margin utilities, but wit
margin-top: -0.25rem !important;
}
{{< /highlight >}}
-
-Here's an example of customizing the Bootstrap grid at the medium (`md`) breakpoint and above. We've increased the `.col` padding with `.px-md-5` and then counteracted that with `.mx-md-n5` on the parent `.row`.
-
-{{< example >}}
-<div class="row mx-md-n5">
- <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
- <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
-</div>
-{{< /example >}}
--
GitLab