mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-14 18:42:30 +03:00
Code 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
Download Patch File Download Diff File Expand all files Collapse all files
scss/_utilities.scss
+6 -6
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
), ),
site/content/docs/5.0/utilities/spacing.md
+7 -4
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 {