Merge pull request #18185 from twbs/fix-18129

Refactor _utilities-spacing.scss

3 files changed, 100 insertions, 121 deletions

diff --git a/dist/css/bootstrap.css b/dist/css/bootstrap.css
index 93480e990..377209012 100644
--- a/dist/css/bootstrap.css
+++ b/dist/css/bootstrap.css
@@ -5864,8 +5864,13 @@ a.bg-danger:focus, a.bg-danger:hover {
   background-color: #c9302c;
 }
 
+.m-x-auto {
+  margin-right: auto !important;
+  margin-left: auto !important;
+}
+
 .m-a-0 {
-  margin: 0 !important;
+  margin: 0 0 !important;
 }
 
 .m-t-0 {
@@ -5894,103 +5899,98 @@ a.bg-danger:focus, a.bg-danger:hover {
   margin-bottom: 0 !important;
 }
 
-.m-a {
-  margin: 1rem !important;
+.m-a-1 {
+  margin: 1rem 1rem !important;
 }
 
-.m-t {
+.m-t-1 {
   margin-top: 1rem !important;
 }
 
-.m-r {
+.m-r-1 {
   margin-right: 1rem !important;
 }
 
-.m-b {
+.m-b-1 {
   margin-bottom: 1rem !important;
 }
 
-.m-l {
+.m-l-1 {
   margin-left: 1rem !important;
 }
 
-.m-x {
+.m-x-1 {
   margin-right: 1rem !important;
   margin-left: 1rem !important;
 }
 
-.m-y {
+.m-y-1 {
   margin-top: 1rem !important;
   margin-bottom: 1rem !important;
 }
 
-.m-x-auto {
-  margin-right: auto !important;
-  margin-left: auto !important;
-}
-
-.m-a-md {
-  margin: 1.5rem !important;
+.m-a-2 {
+  margin: 1.5rem 1.5rem !important;
 }
 
-.m-t-md {
+.m-t-2 {
   margin-top: 1.5rem !important;
 }
 
-.m-r-md {
+.m-r-2 {
   margin-right: 1.5rem !important;
 }
 
-.m-b-md {
+.m-b-2 {
   margin-bottom: 1.5rem !important;
 }
 
-.m-l-md {
+.m-l-2 {
   margin-left: 1.5rem !important;
 }
 
-.m-x-md {
+.m-x-2 {
   margin-right: 1.5rem !important;
   margin-left: 1.5rem !important;
 }
 
-.m-y-md {
+.m-y-2 {
   margin-top: 1.5rem !important;
   margin-bottom: 1.5rem !important;
 }
 
-.m-a-lg {
-  margin: 3rem !important;
+.m-a-3 {
+  margin: 3rem 3rem !important;
 }
 
-.m-t-lg {
+.m-t-3 {
   margin-top: 3rem !important;
 }
 
-.m-r-lg {
+.m-r-3 {
   margin-right: 3rem !important;
 }
 
-.m-b-lg {
+.m-b-3 {
   margin-bottom: 3rem !important;
 }
 
-.m-l-lg {
+.m-l-3 {
   margin-left: 3rem !important;
 }
 
-.m-x-lg {
+.m-x-3 {
   margin-right: 3rem !important;
   margin-left: 3rem !important;
 }
 
-.m-y-lg {
+.m-y-3 {
   margin-top: 3rem !important;
   margin-bottom: 3rem !important;
 }
 
 .p-a-0 {
-  padding: 0 !important;
+  padding: 0 0 !important;
 }
 
 .p-t-0 {
@@ -6019,92 +6019,92 @@ a.bg-danger:focus, a.bg-danger:hover {
   padding-bottom: 0 !important;
 }
 
-.p-a {
-  padding: 1rem !important;
+.p-a-1 {
+  padding: 1rem 1rem !important;
 }
 
-.p-t {
+.p-t-1 {
   padding-top: 1rem !important;
 }
 
-.p-r {
+.p-r-1 {
   padding-right: 1rem !important;
 }
 
-.p-b {
+.p-b-1 {
   padding-bottom: 1rem !important;
 }
 
-.p-l {
+.p-l-1 {
   padding-left: 1rem !important;
 }
 
-.p-x {
+.p-x-1 {
   padding-right: 1rem !important;
   padding-left: 1rem !important;
 }
 
-.p-y {
+.p-y-1 {
   padding-top: 1rem !important;
   padding-bottom: 1rem !important;
 }
 
-.p-a-md {
-  padding: 1.5rem !important;
+.p-a-2 {
+  padding: 1.5rem 1.5rem !important;
 }
 
-.p-t-md {
+.p-t-2 {
   padding-top: 1.5rem !important;
 }
 
-.p-r-md {
+.p-r-2 {
   padding-right: 1.5rem !important;
 }
 
-.p-b-md {
+.p-b-2 {
   padding-bottom: 1.5rem !important;
 }
 
-.p-l-md {
+.p-l-2 {
   padding-left: 1.5rem !important;
 }
 
-.p-x-md {
+.p-x-2 {
   padding-right: 1.5rem !important;
   padding-left: 1.5rem !important;
 }
 
-.p-y-md {
+.p-y-2 {
   padding-top: 1.5rem !important;
   padding-bottom: 1.5rem !important;
 }
 
-.p-a-lg {
-  padding: 3rem !important;
+.p-a-3 {
+  padding: 3rem 3rem !important;
 }
 
-.p-t-lg {
+.p-t-3 {
   padding-top: 3rem !important;
 }
 
-.p-r-lg {
+.p-r-3 {
   padding-right: 3rem !important;
 }
 
-.p-b-lg {
+.p-b-3 {
   padding-bottom: 3rem !important;
 }
 
-.p-l-lg {
+.p-l-3 {
   padding-left: 3rem !important;
 }
 
-.p-x-lg {
+.p-x-3 {
   padding-right: 3rem !important;
   padding-left: 3rem !important;
 }
 
-.p-y-lg {
+.p-y-3 {
   padding-top: 3rem !important;
   padding-bottom: 3rem !important;
 }
diff --git a/scss/_utilities-spacing.scss b/scss/_utilities-spacing.scss
index 1c2cca468..cd543c8c9 100644
--- a/scss/_utilities-spacing.scss
+++ b/scss/_utilities-spacing.scss
@@ -1,71 +1,32 @@
-// Margin
+// Margin and Padding
 
-.m-a-0 { margin:        0 !important; }
-.m-t-0 { margin-top:    0 !important; }
-.m-r-0 { margin-right:  0 !important; }
-.m-b-0 { margin-bottom: 0 !important; }
-.m-l-0 { margin-left:   0 !important; }
-.m-x-0 { margin-right:  0 !important; margin-left:   0 !important; }
-.m-y-0 { margin-top:    0 !important; margin-bottom: 0 !important; }
-
-.m-a { margin:        $spacer !important; }
-.m-t { margin-top:    $spacer-y !important; }
-.m-r { margin-right:  $spacer-x !important; }
-.m-b { margin-bottom: $spacer-y !important; }
-.m-l { margin-left:   $spacer-x !important; }
-.m-x { margin-right:  $spacer-x !important; margin-left: $spacer-x !important; }
-.m-y { margin-top:    $spacer-y !important; margin-bottom: $spacer-y !important; }
-.m-x-auto { margin-right: auto !important; margin-left: auto !important; }
-
-.m-a-md { margin:        ($spacer * 1.5) !important; }
-.m-t-md { margin-top:    ($spacer-y * 1.5) !important; }
-.m-r-md { margin-right:  ($spacer-y * 1.5) !important; }
-.m-b-md { margin-bottom: ($spacer-y * 1.5) !important; }
-.m-l-md { margin-left:   ($spacer-y * 1.5) !important; }
-.m-x-md { margin-right:  ($spacer-x * 1.5) !important; margin-left:   ($spacer-x * 1.5) !important; }
-.m-y-md { margin-top:    ($spacer-y * 1.5) !important; margin-bottom: ($spacer-y * 1.5) !important; }
-
-.m-a-lg { margin:        ($spacer * 3) !important; }
-.m-t-lg { margin-top:    ($spacer-y * 3) !important; }
-.m-r-lg { margin-right:  ($spacer-y * 3) !important; }
-.m-b-lg { margin-bottom: ($spacer-y * 3) !important; }
-.m-l-lg { margin-left:   ($spacer-y * 3) !important; }
-.m-x-lg { margin-right:  ($spacer-x * 3) !important; margin-left:   ($spacer-x * 3) !important; }
-.m-y-lg { margin-top:    ($spacer-y * 3) !important; margin-bottom: ($spacer-y * 3) !important; }
-
-// Padding
-
-.p-a-0 { padding:        0 !important; }
-.p-t-0 { padding-top:    0 !important; }
-.p-r-0 { padding-right:  0 !important; }
-.p-b-0 { padding-bottom: 0 !important; }
-.p-l-0 { padding-left:   0 !important; }
-.p-x-0 { padding-right:  0 !important; padding-left:   0 !important; }
-.p-y-0 { padding-top:    0 !important; padding-bottom: 0 !important; }
-
-.p-a { padding:        $spacer !important; }
-.p-t { padding-top:    $spacer-y !important; }
-.p-r { padding-right:  $spacer-x !important; }
-.p-b { padding-bottom: $spacer-y !important; }
-.p-l { padding-left:   $spacer-x !important; }
-.p-x { padding-right:  $spacer-x !important; padding-left:   $spacer-x !important; }
-.p-y { padding-top:    $spacer-y !important; padding-bottom: $spacer-y !important; }
-
-.p-a-md { padding:        ($spacer * 1.5) !important; }
-.p-t-md { padding-top:    ($spacer-y * 1.5) !important; }
-.p-r-md { padding-right:  ($spacer-y * 1.5) !important; }
-.p-b-md { padding-bottom: ($spacer-y * 1.5) !important; }
-.p-l-md { padding-left:   ($spacer-y * 1.5) !important; }
-.p-x-md { padding-right:  ($spacer-x * 1.5) !important; padding-left:   ($spacer-x * 1.5) !important; }
-.p-y-md { padding-top:    ($spacer-y * 1.5) !important; padding-bottom: ($spacer-y * 1.5) !important; }
+.m-x-auto {
+  margin-right: auto !important;
+  margin-left:  auto !important;
+}
 
-.p-a-lg { padding:        ($spacer * 3) !important; }
-.p-t-lg { padding-top:    ($spacer-y * 3) !important; }
-.p-r-lg { padding-right:  ($spacer-y * 3) !important; }
-.p-b-lg { padding-bottom: ($spacer-y * 3) !important; }
-.p-l-lg { padding-left:   ($spacer-y * 3) !important; }
-.p-x-lg { padding-right:  ($spacer-x * 3) !important; padding-left:   ($spacer-x * 3) !important; }
-.p-y-lg { padding-top:    ($spacer-y * 3) !important; padding-bottom: ($spacer-y * 3) !important; }
+@each $prop, $abbrev in (margin: m, padding: p) {
+  @each $size, $lengths in $spacers {
+    $length-x:   map-get($lengths, x);
+    $length-y:   map-get($lengths, y);
+
+    .#{$abbrev}-a-#{$size} { #{$prop}:        $length-y $length-x !important; } // a = All sides
+    .#{$abbrev}-t-#{$size} { #{$prop}-top:    $length-y !important; }
+    .#{$abbrev}-r-#{$size} { #{$prop}-right:  $length-x !important; }
+    .#{$abbrev}-b-#{$size} { #{$prop}-bottom: $length-y !important; }
+    .#{$abbrev}-l-#{$size} { #{$prop}-left:   $length-x !important; }
+
+    // Axes
+    .#{$abbrev}-x-#{$size} {
+      #{$prop}-right:  $length-x !important;
+      #{$prop}-left:   $length-x !important;
+    }
+    .#{$abbrev}-y-#{$size} {
+      #{$prop}-top:    $length-y !important;
+      #{$prop}-bottom: $length-y !important;
+    }
+  }
+}
 
 // Positioning
 
diff --git a/scss/_variables.scss b/scss/_variables.scss
index c63af8490..44cc3cb1b 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -60,6 +60,24 @@ $enable-grid-classes:       true !default;
 $spacer:                     1rem !default;
 $spacer-x:                   $spacer !default;
 $spacer-y:                   $spacer !default;
+$spacers: (
+  0: (
+    x:   0,
+    y:   0
+  ),
+  1: (
+    x:   $spacer-x,
+    y:   $spacer-y
+  ),
+  2: (
+    x:   ($spacer-x * 1.5),
+    y:   ($spacer-y * 1.5)
+  ),
+  3: (
+    x:   ($spacer-x * 3),
+    y:   ($spacer-y * 3)
+  )
+) !default;
 $border-width:               1px !default;