Negative Margins classes for custom col gutters

Feature request #26681

1 files changed, 25 insertions, 0 deletions

diff --git a/scss/utilities/_spacing.scss b/scss/utilities/_spacing.scss
index b2e2354b1..6191b9b96 100644
--- a/scss/utilities/_spacing.scss
+++ b/scss/utilities/_spacing.scss
@@ -30,6 +30,31 @@
     }
 
     // Some special margin utils
+
+    // Negative margins i.e. mb-n1 is the inverse or negative of mb-1
+    @each $prop, $abbrev in (margin: m) {
+      @each $size, $length in $spacers {
+
+        .#{$abbrev}#{$infix}-n#{$size} { #{$prop}: -$length !important; }
+        .#{$abbrev}t#{$infix}-n#{$size},
+        .#{$abbrev}y#{$infix}-n#{$size} {
+          #{$prop}-top: -$length !important;
+        }
+        .#{$abbrev}r#{$infix}-n#{$size},
+        .#{$abbrev}x#{$infix}-n#{$size} {
+          #{$prop}-right: -$length !important;
+        }
+        .#{$abbrev}b#{$infix}-n#{$size},
+        .#{$abbrev}y#{$infix}-n#{$size} {
+          #{$prop}-bottom: -$length !important;
+        }
+        .#{$abbrev}l#{$infix}-n#{$size},
+        .#{$abbrev}x#{$infix}-n#{$size} {
+          #{$prop}-left: -$length !important;
+        }
+      }
+    }
+
     .m#{$infix}-auto { margin: auto !important; }
     .mt#{$infix}-auto,
     .my#{$infix}-auto {