From ed1de86794cc0911dc7a3dbbf3bb9dfe421ef4b6 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 5 Mar 2017 12:20:44 -0800 Subject: 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 | 2 +- docs/getting-started/options.md | 2 +- docs/utilities/spacing.md | 18 +++++++++--------- 3 files changed, 11 insertions(+), 11 deletions(-) (limited to 'docs') diff --git a/docs/assets/scss/_content.scss b/docs/assets/scss/_content.scss index 28f4cd442..3374aa633 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 a1491252e..9638cd4ae 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 0a5132941..0978e195d 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 %} -- cgit v1.2.3