rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-26 23:54:23 +01:00
Code Issues Actions Packages Releases Activity

Use logical property values for mx, my, px, and py utilities

Browse Source
This commit is contained in:
Mark Otto 2021-07-28 09:43:43 -07:00
parent 4bfd8a2cbc
commit 6d998a4b8d
2 changed files with 13 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
scss/_utilities.scss
View File

@ -316,13 +316,13 @@ $utilities: map-merge(
),
"margin-x": (
responsive: true,
property: margin-right margin-left,
property: margin-inline,
class: mx,
values: map-merge($spacers, (auto: auto))
),
"margin-y": (
responsive: true,
property: margin-top margin-bottom,
property: margin-block,
class: my,
values: map-merge($spacers, (auto: auto))
),
@ -359,13 +359,13 @@ $utilities: map-merge(
),
"negative-margin-x": (
responsive: true,
property: margin-right margin-left,
property: margin-inline,
class: mx,
values: $negative-spacers
),
"negative-margin-y": (
responsive: true,
property: margin-top margin-bottom,
property: margin-block,
class: my,
values: $negative-spacers
),
@ -402,13 +402,13 @@ $utilities: map-merge(
),
"padding-x": (
responsive: true,
property: padding-right padding-left,
property: padding-inline,
class: px,
values: $spacers
),
"padding-y": (
responsive: true,
property: padding-top padding-bottom,
property: padding-block,
class: py,
values: $spacers
),

11
site/content/docs/5.0/utilities/spacing.md
View File

@ -29,8 +29,8 @@ Where *sides* is one of:
- `b` - for classes that set `margin-bottom` or `padding-bottom`
- `s` - (start) for classes that set `margin-left` or `padding-left` in LTR, `margin-right` or `padding-right` in RTL
- `e` - (end) for classes that set `margin-right` or `padding-right` in LTR, `margin-left` or `padding-left` in RTL
- `x` - for classes that set both `*-left` and `*-right`
- `y` - for classes that set both `*-top` and `*-bottom`
- `x` - for classes that set `*-inline`, the logical property equivalent of `*-left` and `*-right`
- `y` - for classes that set `*-block`, the logical property equivalent of `*-top` and `*-bottom`
- blank - for classes that set a `margin` or `padding` on all 4 sides of the element
Where *size* is one of:
@ -58,9 +58,12 @@ Here are some representative examples of these classes:
margin-left: ($spacer * .25) !important;
}
.my-2 {
margin-block: ($spacer * .5) !important;
}
.px-2 {
padding-left: ($spacer * .5) !important;
padding-right: ($spacer * .5) !important;
padding-inline: ($spacer * .5) !important;
}
.p-3 {