Update spacer utilities (#22123)

* Drop -x and -y as they're all the same
- Also move -width to elsewhere in the vars because it makes no sense by spacers.
- Update values of -x and -y across main Sass and docs Sass.
* Update docs to reflect changes; link to spacing utils from options page

5 files changed, 42 insertions, 42 deletions

diff --git a/scss/_breadcrumb.scss b/scss/_breadcrumb.scss
index 1a09bba20..2bc0e2086 100644
--- a/scss/_breadcrumb.scss
+++ b/scss/_breadcrumb.scss
@@ -1,6 +1,6 @@
 .breadcrumb {
   padding: $breadcrumb-padding-y $breadcrumb-padding-x;
-  margin-bottom: $spacer-y;
+  margin-bottom: 1rem;
   list-style: none;
   background-color: $breadcrumb-bg;
   @include border-radius($border-radius);
diff --git a/scss/_images.scss b/scss/_images.scss
index a8135a6c3..50c56108a 100644
--- a/scss/_images.scss
+++ b/scss/_images.scss
@@ -33,7 +33,7 @@
 }
 
 .figure-img {
-  margin-bottom: ($spacer-y / 2);
+  margin-bottom: ($spacer / 2);
   line-height: 1;
 }
 
diff --git a/scss/_type.scss b/scss/_type.scss
index 13a64b06f..fc9c791c4 100644
--- a/scss/_type.scss
+++ b/scss/_type.scss
@@ -51,8 +51,8 @@ h6, .h6 { font-size: $font-size-h6; }
 //
 
 hr {
-  margin-top: $spacer-y;
-  margin-bottom: $spacer-y;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
   border: 0;
   border-top: $hr-border-width solid $hr-border-color;
 }
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 09ac11a9d..9a95602b7 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -138,36 +138,33 @@ $enable-print-styles:       true !default;
 // variables. Mostly focused on spacing.
 // You can add more entries to the $spacers map, should you need more variation.
 
-$spacer:   1rem !default;
-$spacer-x: $spacer !default;
-$spacer-y: $spacer !default;
+$spacer: 1rem !default;
 $spacers: (
   0: (
     x: 0,
     y: 0
   ),
   1: (
-    x: ($spacer-x * .25),
-    y: ($spacer-y * .25)
+    x: ($spacer * .25),
+    y: ($spacer * .25)
   ),
   2: (
-    x: ($spacer-x * .5),
-    y: ($spacer-y * .5)
+    x: ($spacer * .5),
+    y: ($spacer * .5)
   ),
   3: (
-    x: $spacer-x,
-    y: $spacer-y
+    x: $spacer,
+    y: $spacer
   ),
   4: (
-    x: ($spacer-x * 1.5),
-    y: ($spacer-y * 1.5)
+    x: ($spacer * 1.5),
+    y: ($spacer * 1.5)
   ),
   5: (
-    x: ($spacer-x * 3),
-    y: ($spacer-y * 3)
+    x: ($spacer * 3),
+    y: ($spacer * 3)
   )
 ) !default;
-$border-width: 1px !default;
 
 // This variable affects the `.h-*` and `.w-*` classes.
 $sizes: (
@@ -237,6 +234,30 @@ $grid-gutter-widths: (
   xl: $grid-gutter-width-base
 ) !default;
 
+
+// Components
+//
+// Define common padding and border radius sizes and more.
+
+$line-height-lg:         (4 / 3) !default;
+$line-height-sm:         1.5 !default;
+
+$border-width: 1px !default;
+
+$border-radius:          .25rem !default;
+$border-radius-lg:       .3rem !default;
+$border-radius-sm:       .2rem !default;
+
+$component-active-color: $white !default;
+$component-active-bg:    $brand-primary !default;
+
+$caret-width:            .3em !default;
+
+$transition-base:        all .2s ease-in-out !default;
+$transition-fade:        opacity .15s linear !default;
+$transition-collapse:    height .35s ease !default;
+
+
 // Fonts
 //
 // Font, line-height, and color for body text, headings, and more.
@@ -305,27 +326,6 @@ $nested-kbd-font-weight: $font-weight-bold !default;
 $list-inline-padding: 5px !default;
 
 
-// Components
-//
-// Define common padding and border radius sizes and more.
-
-$line-height-lg:         (4 / 3) !default;
-$line-height-sm:         1.5 !default;
-
-$border-radius:          .25rem !default;
-$border-radius-lg:       .3rem !default;
-$border-radius-sm:       .2rem !default;
-
-$component-active-color: $white !default;
-$component-active-bg:    $brand-primary !default;
-
-$caret-width:            .3em !default;
-
-$transition-base:        all .2s ease-in-out !default;
-$transition-fade:        opacity .15s linear !default;
-$transition-collapse:    height .35s ease !default;
-
-
 // Tables
 //
 // Customizes the `.table` component with basic values, each used across all table variations.
@@ -450,7 +450,7 @@ $form-check-input-margin-x: .25rem !default;
 
 $form-check-inline-margin-x: .75rem !default;
 
-$form-group-margin-bottom:       $spacer-y !default;
+$form-group-margin-bottom:       1rem !default;
 
 $input-group-addon-bg:           $gray-lighter !default;
 $input-group-addon-border-color: $input-border-color !default;
@@ -804,7 +804,7 @@ $modal-transition:            transform .3s ease-out !default;
 
 $alert-padding-x:             1.25rem !default;
 $alert-padding-y:             .75rem !default;
-$alert-margin-bottom:         $spacer-y !default;
+$alert-margin-bottom:         1rem !default;
 $alert-border-radius:         $border-radius !default;
 $alert-link-font-weight:      $font-weight-bold !default;
 $alert-border-width:          $border-width !default;
diff --git a/scss/mixins/_nav-divider.scss b/scss/mixins/_nav-divider.scss
index fb3d12e9f..557673ccd 100644
--- a/scss/mixins/_nav-divider.scss
+++ b/scss/mixins/_nav-divider.scss
@@ -4,7 +4,7 @@
 
 @mixin nav-divider($color: #e5e5e5) {
   height: 1px;
-  margin: ($spacer-y / 2) 0;
+  margin: ($spacer / 2) 0;
   overflow: hidden;
   background-color: $color;
 }