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": ( "margin-x": (
responsive: true, responsive: true,
property: margin-right margin-left, property: margin-inline,
class: mx, class: mx,
values: map-merge($spacers, (auto: auto)) values: map-merge($spacers, (auto: auto))
), ),
"margin-y": ( "margin-y": (
responsive: true, responsive: true,
property: margin-top margin-bottom, property: margin-block,
class: my, class: my,
values: map-merge($spacers, (auto: auto)) values: map-merge($spacers, (auto: auto))
), ),
@ -359,13 +359,13 @@ $utilities: map-merge(
), ),
"negative-margin-x": ( "negative-margin-x": (
responsive: true, responsive: true,
property: margin-right margin-left, property: margin-inline,
class: mx, class: mx,
values: $negative-spacers values: $negative-spacers
), ),
"negative-margin-y": ( "negative-margin-y": (
responsive: true, responsive: true,
property: margin-top margin-bottom, property: margin-block,
class: my, class: my,
values: $negative-spacers values: $negative-spacers
), ),
@ -402,13 +402,13 @@ $utilities: map-merge(
), ),
"padding-x": ( "padding-x": (
responsive: true, responsive: true,
property: padding-right padding-left, property: padding-inline,
class: px, class: px,
values: $spacers values: $spacers
), ),
"padding-y": ( "padding-y": (
responsive: true, responsive: true,
property: padding-top padding-bottom, property: padding-block,
class: py, class: py,
values: $spacers 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` - `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 - `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 - `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` - `x` - for classes that set `*-inline`, the logical property equivalent of `*-left` and `*-right`
- `y` - for classes that set both `*-top` and `*-bottom` - `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 - blank - for classes that set a `margin` or `padding` on all 4 sides of the element
Where *size* is one of: Where *size* is one of:
@ -58,9 +58,12 @@ Here are some representative examples of these classes:
margin-left: ($spacer * .25) !important; margin-left: ($spacer * .25) !important;
} }
.my-2 {
margin-block: ($spacer * .5) !important;
}
.px-2 { .px-2 {
padding-left: ($spacer * .5) !important; padding-inline: ($spacer * .5) !important;
padding-right: ($spacer * .5) !important;
} }
.p-3 { .p-3 {