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

diff --git a/docs/assets/scss/_content.scss b/docs/assets/scss/_content.scss
index 28f4cd442258779e679063e04d4cd1734bb75a40..3374aa633ed735d64e41bf96af1049cf99e80413 100644 (file)
--- a/docs/assets/scss/_content.scss
+++ b/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

diff --git a/docs/getting-started/options.md b/docs/getting-started/options.md
index a1491252e583be6dd9f9f0a161da3ebc7c94a84c..9638cd4ae3f89b00b1d2fe582f1fb73100019499 100644 (file)
--- a/docs/getting-started/options.md
+++ b/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.      |

diff --git a/docs/utilities/spacing.md b/docs/utilities/spacing.md
index 0a513294146c7e0dc825c4a47d8827f465b1d977..0978e195da1441bacbf6757f6775542457dbf0d3 100644 (file)
--- a/docs/utilities/spacing.md
+++ b/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 %}
 

diff --git a/scss/_breadcrumb.scss b/scss/_breadcrumb.scss
index 1a09bba20a993cdb339d9329e21b83353ee9144b..2bc0e2086edca6fce1aba649c90bde578398d1b7 100644 (file)
--- 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 a8135a6c35d4f4ec2e6a951ab0a35b56e0bcc30c..50c56108a9174734a38ae9142dedb378d3739a56 100644 (file)
--- 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 13a64b06f38a14123822fb4fae7cc128680dd8f7..fc9c791c4daa4d4ad352a659aa19d76b2a78da9f 100644 (file)
--- 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 09ac11a9dc1b2d14488abe1baf7135620a1ee652..9a95602b73f860259d6cdde2c9f9f850a3290176 100644 (file)
--- 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 fb3d12e9f69253bb53e35d69688c6cbf6cc153ac..557673ccd347dfc14d6be5e51c728c3cbf5a7608 100644 (file)
--- 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;
 }