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