diff options
| author | Martijn Cuppens <[email protected]> | 2020-04-15 06:36:35 +0200 |
|---|---|---|
| committer | GitHub <[email protected]> | 2020-04-15 07:36:35 +0300 |
| commit | 5c2a50fb9e3fe208a788b36624544a6803cd20ec (patch) | |
| tree | dd61b636ded2b895d4c46aa76fb2b3730e7b9de4 | |
| parent | fea6f6987de58dddbbf8583a5ba1112ed73dddf0 (diff) | |
| download | bootstrap-5c2a50fb9e3fe208a788b36624544a6803cd20ec.tar.xz bootstrap-5c2a50fb9e3fe208a788b36624544a6803cd20ec.zip | |
Disable negative margins by default (#30585)
* Disable negative margins by default
* Use shorter enable variable
Co-authored-by: XhmikosR <[email protected]>
| -rw-r--r-- | scss/_variables.scss | 3 | ||||
| -rw-r--r-- | site/content/docs/4.3/getting-started/theming.md | 3 | ||||
| -rw-r--r-- | site/content/docs/4.3/migration.md | 1 | ||||
| -rw-r--r-- | 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 f562e724c..04cf98992 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 ff50369f2..73d5b0f78 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 fecf23d79..34f8dc9f0 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 58e16ec68..ce32ad499 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 >}} |