rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-29 21:52:22 +01:00
Code Issues Actions Packages Releases 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
Show Stats 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 %}

2
scss/_breadcrumb.scss
View File

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

2
scss/_images.scss
View File

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

4
scss/_type.scss
View File

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

74
scss/_variables.scss
View File

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

2
scss/mixins/_nav-divider.scss
View File

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