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

docs/assets/scss/_content.scss

@@ -9,7 +9,7 @@
     display: block;
     width: 100%;
     max-width: 100%;
-    margin-bottom: $spacer;
+    margin-bottom: 1rem;
     overflow-y: auto;
 
     // Cells

docs/getting-started/options.md

@@ -31,7 +31,7 @@ You can find and customize these variables for key global options in our `_varia
 
 | Variable                    | Values                             | Description                                                                            |
 | --------------------------- | ---------------------------------- | -------------------------------------------------------------------------------------- |
-| `$spacer`                   | `1rem` (default), or any value > 0 | Specifies the default spacer value for our spacer utilities.                           |
+| `$spacer`                   | `1rem` (default), or any value > 0 | Specifies the default spacer value to programmatically generate our [spacer utilities](/utilities/spacing/). |
 | `$enable-rounded`           | `true` (default) or `false`        | Enables predefined `border-radius` styles on various components.                       |
 | `$enable-shadows`           | `true` or `false` (default)        | Enables predefined `box-shadow` styles on various components.                          |
 | `$enable-gradients`         | `true` or `false` (default)        | Enables predefined gradients via `background-image` styles on various components.      |

docs/utilities/spacing.md

@@ -35,11 +35,11 @@ Where *sides* is one of:
 Where *size* is one of:
 
 * `0` - for classes that eliminate the `margin` or `padding` by setting it to `0`
-* `1` - (by default) for classes that set the `margin` or `padding` to `$spacer-x * .25` or `$spacer-y * .25`
-* `2` - (by default) for classes that set the `margin` or `padding` to `$spacer-x * .5` or `$spacer-y * .5`
-* `3` - (by default) for classes that set the `margin` or `padding` to `$spacer-x` or `$spacer-y`
-* `4` - (by default) for classes that set the `margin` or `padding` to `$spacer-x * 1.5` or `$spacer-y * 1.5`
-* `5` - (by default) for classes that set the `margin` or `padding` to `$spacer-x * 3` or `$spacer-y * 3`
+* `1` - (by default) for classes that set the `margin` or `padding` to `$spacer * .25` or `$spacer * .25`
+* `2` - (by default) for classes that set the `margin` or `padding` to `$spacer * .5` or `$spacer * .5`
+* `3` - (by default) for classes that set the `margin` or `padding` to `$spacer` or `$spacer`
+* `4` - (by default) for classes that set the `margin` or `padding` to `$spacer * 1.5` or `$spacer * 1.5`
+* `5` - (by default) for classes that set the `margin` or `padding` to `$spacer * 3` or `$spacer * 3`
 
 (You can add more sizes by adding entries to the `$spacers` Sass map variable.)
 
@@ -53,16 +53,16 @@ Here are some representative examples of these classes:
 }
 
 .ml-1 {
-  margin-left: ($spacer-x * .25) !important;
+  margin-left: ($spacer * .25) !important;
 }
 
 .px-2 {
-  padding-left: ($spacer-x * .5) !important;
-  padding-right: ($spacer-x * .5) !important;
+  padding-left: ($spacer * .5) !important;
+  padding-right: ($spacer * .5) !important;
 }
 
 .p-3 {
-  padding: $spacer-y $spacer-x !important;
+  padding: $spacer $spacer !important;
 }
 {% endhighlight %}
 

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

scss/_images.scss

@@ -33,7 +33,7 @@
 }
 
 .figure-img {
-  margin-bottom: ($spacer-y / 2);
+  margin-bottom: ($spacer / 2);
   line-height: 1;
 }
 

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

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;

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