Disable negative margins by default (#30585)

* Disable negative margins by default * Use shorter enable variable Co-authored-by: XhmikosR <xhmikosr@gmail.com>

Disable negative margins by default (#30585)
* Disable negative margins by default * Use shorter enable variable Co-authored-by: XhmikosR <xhmikosr@gmail.com>
5c2a50fb · Martijn Cuppens · GitHub · fea6f698 · 5c2a50fb · 5c2a50fb
Unverified Commit 5c2a50fb authored 4 years ago by Martijn Cuppens Committed by GitHub 4 years ago
Hide whitespace changes
Inline Side-by-side

Showing

with 6 additions and 12 deletions
+6 -12
--- 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
 //

--- 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. |


--- 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


--- 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 >}}