mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-10-04 17:21:38 +02:00
Code Issues Releases Wiki Activity

Update spacer utilities (#22123)

Browse Source 
* 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
This commit is contained in:
Mark Otto
2017-03-05 12:20:44 -08:00
committed by GitHub
parent 192a8af0df
commit ed1de86794
8 changed files with 53 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/assets/scss/_content.scss
View File

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

2
docs/getting-started/options.md
View File

@@ -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. |

18
docs/utilities/spacing.md
View File

@@ -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 %}