From af559e4297cb7aa94229036d1bb0630c7e16eb7b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 6 Nov 2025 21:39:23 -0800 Subject: [PATCH] v6: Switch to logical properties (#41854) * Convert remaining utilities to all logical properties * Move to logical properties * Fix linter errors, bump bundlewatch --- .bundlewatch.config.json | 8 ++-- scss/_accordion.scss | 2 +- scss/_alert.scss | 2 +- scss/_breadcrumb.scss | 4 +- scss/_card.scss | 13 +++--- scss/_carousel.scss | 8 ++-- scss/_dropdown.scss | 4 +- scss/_list-group.scss | 4 +- scss/_modal.scss | 7 ++-- scss/_nav.scss | 5 +-- scss/_navbar.scss | 7 ++-- scss/_offcanvas.scss | 4 +- scss/_pagination.scss | 2 +- scss/_popover.scss | 2 +- scss/_toasts.scss | 4 +- scss/_utilities.scss | 44 ++++++++++----------- scss/buttons/_button-group.scss | 15 +++---- scss/content/_prose.scss | 2 +- scss/content/_reboot.scss | 4 +- scss/content/_type.scss | 2 +- scss/forms/_floating-labels.scss | 2 +- scss/forms/_form-control.scss | 7 ++-- scss/forms/_input-group.scss | 2 +- scss/forms/_validation.scss | 6 +-- scss/layout/_containers.scss | 6 +-- scss/mixins/_caret.scss | 6 +-- scss/mixins/_forms.scss | 8 ++-- scss/mixins/_grid.scss | 8 ++-- scss/mixins/_lists.scss | 2 +- site/src/content/docs/layout/containers.mdx | 6 +-- 30 files changed, 89 insertions(+), 107 deletions(-) diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json index 75a0d34afa..b8e0eff168 100644 --- a/.bundlewatch.config.json +++ b/.bundlewatch.config.json @@ -2,11 +2,11 @@ "files": [ { "path": "./dist/css/bootstrap-grid.css", - "maxSize": "9.5 kB" + "maxSize": "10.0 kB" }, { "path": "./dist/css/bootstrap-grid.min.css", - "maxSize": "8.5 kB" + "maxSize": "9.0 kB" }, { "path": "./dist/css/bootstrap-reboot.css", @@ -18,11 +18,11 @@ }, { "path": "./dist/css/bootstrap-utilities.css", - "maxSize": "15.0 kB" + "maxSize": "15.25 kB" }, { "path": "./dist/css/bootstrap-utilities.min.css", - "maxSize": "13.25 kB" + "maxSize": "13.5 kB" }, { "path": "./dist/css/bootstrap.css", diff --git a/scss/_accordion.scss b/scss/_accordion.scss index 46c43f66f8..af2409c9b4 100644 --- a/scss/_accordion.scss +++ b/scss/_accordion.scss @@ -93,7 +93,7 @@ $accordion-button-icon: url("data:image/svg+xml, hr { - margin-right: 0; - margin-left: 0; + margin-inline: 0; } > .list-group { @@ -120,7 +119,7 @@ $card-group-margin: $grid-gutter-width * .5 !default; } + .card-link { - margin-left: var(--#{$prefix}card-spacer-x); + margin-inline-start: var(--#{$prefix}card-spacer-x); } } @@ -157,9 +156,8 @@ $card-group-margin: $grid-gutter-width * .5 !default; // .card-header-tabs { - margin-right: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); + margin-inline: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); margin-bottom: calc(-1 * var(--#{$prefix}card-cap-padding-y)); - margin-left: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); border-bottom: 0; .nav-link.active { @@ -169,8 +167,7 @@ $card-group-margin: $grid-gutter-width * .5 !default; } .card-header-pills { - margin-right: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); - margin-left: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); + margin-inline: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); } // Card image @@ -222,7 +219,7 @@ $card-group-margin: $grid-gutter-width * .5 !default; margin-bottom: 0; + .card { - margin-left: 0; + margin-inline-start: 0; border-left: 0; } diff --git a/scss/_carousel.scss b/scss/_carousel.scss index d70c117bf6..4619d957b6 100644 --- a/scss/_carousel.scss +++ b/scss/_carousel.scss @@ -77,7 +77,7 @@ $carousel-control-icon-filter-dark: invert(1) grayscale(100) !default; display: none; float: left; width: 100%; - margin-right: -100%; + margin-inline-end: -100%; backface-visibility: hidden; @include transition($carousel-transition); } @@ -201,9 +201,8 @@ $carousel-control-icon-filter-dark: invert(1) grayscale(100) !default; justify-content: center; padding: 0; // Use the .carousel-control's width as margin so we don't overlay those - margin-right: $carousel-control-width; + margin-inline: $carousel-control-width; margin-bottom: 1rem; - margin-left: $carousel-control-width; [data-bs-target] { box-sizing: content-box; @@ -211,8 +210,7 @@ $carousel-control-icon-filter-dark: invert(1) grayscale(100) !default; width: $carousel-indicator-width; height: $carousel-indicator-height; padding: 0; - margin-right: $carousel-indicator-spacer; - margin-left: $carousel-indicator-spacer; + margin-inline: $carousel-indicator-spacer; text-indent: -999px; cursor: pointer; background-color: var(--#{$prefix}carousel-indicator-active-bg); diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss index 090ba6de96..ea18141c6b 100644 --- a/scss/_dropdown.scss +++ b/scss/_dropdown.scss @@ -191,8 +191,8 @@ $dropdown-dark-header-color: var(--#{$prefix}gray-500) !default; top: 0; right: auto; left: 100%; + margin-inline-start: var(--#{$prefix}dropdown-spacer); margin-top: 0; - margin-left: var(--#{$prefix}dropdown-spacer); } .dropdown-toggle { @@ -208,8 +208,8 @@ $dropdown-dark-header-color: var(--#{$prefix}gray-500) !default; top: 0; right: 100%; left: auto; + margin-inline-end: var(--#{$prefix}dropdown-spacer); margin-top: 0; - margin-right: var(--#{$prefix}dropdown-spacer); } .dropdown-toggle { diff --git a/scss/_list-group.scss b/scss/_list-group.scss index c5c1985ad0..d19774af2b 100644 --- a/scss/_list-group.scss +++ b/scss/_list-group.scss @@ -58,7 +58,7 @@ $list-group-action-active-bg: var(--#{$prefix}secondary-bg) !default; flex-direction: column; // No need to set list-style: none; since .list-group-item is block level - padding-left: 0; // reset padding because ul and ol + padding-inline-start: 0; // reset padding because ul and ol margin-bottom: 0; @include border-radius(var(--#{$prefix}list-group-border-radius)); } @@ -179,7 +179,7 @@ $list-group-action-active-bg: var(--#{$prefix}secondary-bg) !default; border-left-width: 0; &.active { - margin-left: calc(-1 * var(--#{$prefix}list-group-border-width)); + margin-inline-start: calc(-1 * var(--#{$prefix}list-group-border-width)); border-left-width: var(--#{$prefix}list-group-border-width); } } diff --git a/scss/_modal.scss b/scss/_modal.scss index a515e59bb9..bd502390e8 100644 --- a/scss/_modal.scss +++ b/scss/_modal.scss @@ -142,10 +142,10 @@ .btn-close { padding: calc(var(--#{$prefix}modal-header-padding-y) * .5) calc(var(--#{$prefix}modal-header-padding-x) * .5); // Split properties to avoid invalid calc() function if value is 0 + margin-inline-start: auto; + margin-inline-end: calc(-.5 * var(--#{$prefix}modal-header-padding-x)); margin-top: calc(-.5 * var(--#{$prefix}modal-header-padding-y)); - margin-right: calc(-.5 * var(--#{$prefix}modal-header-padding-x)); margin-bottom: calc(-.5 * var(--#{$prefix}modal-header-padding-y)); - margin-left: auto; } } @@ -195,8 +195,7 @@ // Automatically set modal's width for larger viewports .modal-dialog { max-width: var(--#{$prefix}modal-width); - margin-right: auto; - margin-left: auto; + margin-inline: auto; } .modal-sm { diff --git a/scss/_nav.scss b/scss/_nav.scss index a13a31116e..8ddbebe61e 100644 --- a/scss/_nav.scss +++ b/scss/_nav.scss @@ -52,7 +52,7 @@ $nav-underline-link-active-color: var(--#{$prefix}emphasis-color) !default; display: flex; flex-wrap: wrap; - padding-left: 0; + padding-inline-start: 0; margin-bottom: 0; list-style: none; } @@ -170,8 +170,7 @@ $nav-underline-link-active-color: var(--#{$prefix}emphasis-color) !default; gap: var(--#{$prefix}nav-underline-gap); .nav-link { - padding-right: 0; - padding-left: 0; + padding-inline: 0; border-bottom: var(--#{$prefix}nav-underline-border-width) solid transparent; &:hover, diff --git a/scss/_navbar.scss b/scss/_navbar.scss index 4599f782c8..ed2fb9cb61 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -120,7 +120,7 @@ $navbar-dark-brand-hover-color: $navbar-dark-active-color !default; .navbar-brand { padding-top: var(--#{$prefix}navbar-brand-padding-y); padding-bottom: var(--#{$prefix}navbar-brand-padding-y); - margin-right: var(--#{$prefix}navbar-brand-margin-end); + margin-inline-end: var(--#{$prefix}navbar-brand-margin-end); @include font-size(var(--#{$prefix}navbar-brand-font-size)); color: var(--#{$prefix}navbar-brand-color); text-decoration: none; @@ -151,7 +151,7 @@ $navbar-dark-brand-hover-color: $navbar-dark-active-color !default; display: flex; flex-direction: column; // cannot use `inherit` to get the `.navbar`s value - padding-left: 0; + padding-inline-start: 0; margin-bottom: 0; list-style: none; @@ -264,8 +264,7 @@ $navbar-dark-brand-hover-color: $navbar-dark-active-color !default; } .nav-link { - padding-right: var(--#{$prefix}navbar-nav-link-padding-x); - padding-left: var(--#{$prefix}navbar-nav-link-padding-x); + padding-inline: var(--#{$prefix}navbar-nav-link-padding-x); } } diff --git a/scss/_offcanvas.scss b/scss/_offcanvas.scss index c1da8f7ece..e1bc9c3273 100644 --- a/scss/_offcanvas.scss +++ b/scss/_offcanvas.scss @@ -135,10 +135,10 @@ .btn-close { padding: calc(var(--#{$prefix}offcanvas-padding-y) * .5) calc(var(--#{$prefix}offcanvas-padding-x) * .5); // Split properties to avoid invalid calc() function if value is 0 + margin-inline-start: auto; + margin-inline-end: calc(-.5 * var(--#{$prefix}offcanvas-padding-x)); margin-top: calc(-.5 * var(--#{$prefix}offcanvas-padding-y)); - margin-right: calc(-.5 * var(--#{$prefix}offcanvas-padding-x)); margin-bottom: calc(-.5 * var(--#{$prefix}offcanvas-padding-y)); - margin-left: auto; } } diff --git a/scss/_pagination.scss b/scss/_pagination.scss index ec9b87372f..7daf71ca21 100644 --- a/scss/_pagination.scss +++ b/scss/_pagination.scss @@ -130,7 +130,7 @@ $pagination-border-radius-lg: var(--#{$prefix}border-radius-lg) !default; .page-item { &:not(:first-child) .page-link { - margin-left: $pagination-margin-start; + margin-inline-start: $pagination-margin-start; } @if $pagination-margin-start == calc(-1 * #{$pagination-border-width}) { diff --git a/scss/_popover.scss b/scss/_popover.scss index c3949b6483..12e4480522 100644 --- a/scss/_popover.scss +++ b/scss/_popover.scss @@ -160,7 +160,7 @@ $popover-arrow-height: .5rem !default; left: 50%; display: block; width: var(--#{$prefix}popover-arrow-width); - margin-left: calc(-.5 * var(--#{$prefix}popover-arrow-width)); + margin-inline-start: calc(-.5 * var(--#{$prefix}popover-arrow-width)); content: ""; border-bottom: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-header-bg); } diff --git a/scss/_toasts.scss b/scss/_toasts.scss index 2c4c32509c..c9eb2bad4e 100644 --- a/scss/_toasts.scss +++ b/scss/_toasts.scss @@ -86,8 +86,8 @@ $toast-header-border-color: $toast-border-color !default; @include border-top-radius(calc(var(--#{$prefix}toast-border-radius) - var(--#{$prefix}toast-border-width))); .btn-close { - margin-right: calc(-.5 * var(--#{$prefix}toast-padding-x)); - margin-left: var(--#{$prefix}toast-padding-x); + margin-inline-start: var(--#{$prefix}toast-padding-x); + margin-inline-end: calc(-.5 * var(--#{$prefix}toast-padding-x)); } } diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 03e3b107e5..ee95eb1ae4 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -476,37 +476,37 @@ $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)) ), "margin-top": ( responsive: true, - property: margin-top, + property: margin-block-start, class: mt, values: map.merge($spacers, (auto: auto)) ), "margin-end": ( responsive: true, - property: margin-right, + property: margin-inline-end, class: me, values: map.merge($spacers, (auto: auto)) ), "margin-bottom": ( responsive: true, - property: margin-bottom, + property: margin-block-end, class: mb, values: map.merge($spacers, (auto: auto)) ), "margin-start": ( responsive: true, - property: margin-left, + property: margin-inline-start, class: ms, values: map.merge($spacers, (auto: auto)) ), @@ -519,37 +519,37 @@ $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 // ), // "negative-margin-top": ( // responsive: true, - // property: margin-top, + // property: margin-block-start, // class: mt, // values: $negative-spacers // ), // "negative-margin-end": ( // responsive: true, - // property: margin-right, + // property: margin-inline-end, // class: me, // values: $negative-spacers // ), // "negative-margin-bottom": ( // responsive: true, - // property: margin-bottom, + // property: margin-block-end, // class: mb, // values: $negative-spacers // ), // "negative-margin-start": ( // responsive: true, - // property: margin-left, + // property: margin-inline-start, // class: ms, // values: $negative-spacers // ), @@ -562,37 +562,37 @@ $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 ), "padding-top": ( responsive: true, - property: padding-top, + property: padding-block-start, class: pt, values: $spacers ), "padding-end": ( responsive: true, - property: padding-right, + property: padding-inline-end, class: pe, values: $spacers ), "padding-bottom": ( responsive: true, - property: padding-bottom, + property: padding-block-end, class: pb, values: $spacers ), "padding-start": ( responsive: true, - property: padding-left, + property: padding-inline-start, class: ps, values: $spacers ), @@ -858,7 +858,7 @@ $utilities: map.merge( ) ), "rounded-top": ( - property: border-top-left-radius border-top-right-radius, + property: border-start-start-radius border-start-end-radius, class: rounded-top, values: ( null: var(--#{$prefix}border-radius), @@ -873,7 +873,7 @@ $utilities: map.merge( ) ), "rounded-end": ( - property: border-top-right-radius border-bottom-right-radius, + property: border-end-end-radius border-end-start-radius, class: rounded-end, values: ( null: var(--#{$prefix}border-radius), @@ -888,7 +888,7 @@ $utilities: map.merge( ) ), "rounded-bottom": ( - property: border-bottom-right-radius border-bottom-left-radius, + property: border-end-end-radius border-end-start-radius, class: rounded-bottom, values: ( null: var(--#{$prefix}border-radius), @@ -903,7 +903,7 @@ $utilities: map.merge( ) ), "rounded-start": ( - property: border-bottom-left-radius border-top-left-radius, + property: border-start-start-radius border-start-end-radius, class: rounded-start, values: ( null: var(--#{$prefix}border-radius), diff --git a/scss/buttons/_button-group.scss b/scss/buttons/_button-group.scss index df4af440a8..c2dc7c3560 100644 --- a/scss/buttons/_button-group.scss +++ b/scss/buttons/_button-group.scss @@ -46,7 +46,7 @@ // Prevent double borders when buttons are next to each other > :not(.btn-check:first-child) + .btn, > .btn-group:not(:first-child) { - margin-left: calc(-1 * #{$btn-border-width}); + margin-inline-start: calc(-1 * #{$btn-border-width}); } // Reset rounded corners @@ -80,28 +80,25 @@ // .dropdown-toggle-split { - padding-right: $btn-padding-x * .75; - padding-left: $btn-padding-x * .75; + padding-inline: $btn-padding-x * .75; &::after, .dropup &::after, .dropend &::after { - margin-left: 0; + margin-inline-start: 0; } .dropstart &::before { - margin-right: 0; + margin-inline-end: 0; } } .btn-sm + .dropdown-toggle-split { - padding-right: $btn-padding-x-sm * .75; - padding-left: $btn-padding-x-sm * .75; + padding-inline: $btn-padding-x-sm * .75; } .btn-lg + .dropdown-toggle-split { - padding-right: $btn-padding-x-lg * .75; - padding-left: $btn-padding-x-lg * .75; + padding-inline: $btn-padding-x-lg * .75; } diff --git a/scss/content/_prose.scss b/scss/content/_prose.scss index bc9b40e39f..bf119e73e8 100644 --- a/scss/content/_prose.scss +++ b/scss/content/_prose.scss @@ -106,7 +106,7 @@ } blockquote { - padding-left: calc(var(--#{$prefix}content-gap) / 2); + padding-inline-start: calc(var(--#{$prefix}content-gap) / 2); margin: 0; border-left: 4px solid var(--#{$prefix}border-color); } diff --git a/scss/content/_reboot.scss b/scss/content/_reboot.scss index 9f0cbf75ff..8552446561 100644 --- a/scss/content/_reboot.scss +++ b/scss/content/_reboot.scss @@ -171,7 +171,7 @@ ol, ul { - padding-left: 2rem; + padding-inline-start: 2rem; } ol, @@ -195,8 +195,8 @@ // 1. Undo browser default dd { + margin-inline-start: 0; // 1 margin-bottom: .5rem; - margin-left: 0; // 1 } diff --git a/scss/content/_type.scss b/scss/content/_type.scss index f242fde739..5b5652ecad 100644 --- a/scss/content/_type.scss +++ b/scss/content/_type.scss @@ -20,7 +20,7 @@ display: inline-block; &:not(:last-child) { - margin-right: $list-inline-padding; + margin-inline-end: $list-inline-padding; } } diff --git a/scss/forms/_floating-labels.scss b/scss/forms/_floating-labels.scss index 4e8c4e939b..d08f30ff2e 100644 --- a/scss/forms/_floating-labels.scss +++ b/scss/forms/_floating-labels.scss @@ -71,9 +71,9 @@ $form-floating-transition: opacity .1s ease-in-out, transform .1s e } > .form-select { + padding-inline-start: $form-floating-padding-x; padding-top: $form-floating-input-padding-t; padding-bottom: $form-floating-input-padding-b; - padding-left: $form-floating-padding-x; } > .form-control:focus, diff --git a/scss/forms/_form-control.scss b/scss/forms/_form-control.scss index c7ff34f416..34e7da6e79 100644 --- a/scss/forms/_form-control.scss +++ b/scss/forms/_form-control.scss @@ -150,14 +150,13 @@ &.form-control-sm, &.form-control-lg { - padding-right: 0; - padding-left: 0; + padding-inline: 0; } } // stylelint-disable selector-no-qualifying-type select.form-control { - padding-right: calc(var(--#{$prefix}control-padding-x) * 3); + padding-inline-end: calc(var(--#{$prefix}control-padding-x) * 3); background-image: var(--#{$prefix}control-select-bg); background-repeat: no-repeat; background-position: var(--#{$prefix}control-select-bg-position); @@ -165,7 +164,7 @@ &[multiple], &[size]:not([size="1"]) { - padding-right: var(--#{$prefix}control-padding-x); + padding-inline-end: var(--#{$prefix}control-padding-x); background-image: none; } diff --git a/scss/forms/_input-group.scss b/scss/forms/_input-group.scss index 99db177f5f..12a8607304 100644 --- a/scss/forms/_input-group.scss +++ b/scss/forms/_input-group.scss @@ -137,7 +137,7 @@ $input-group-addon-border-color: $input-border-color !default; } > :not(:first-child):not(.dropdown-menu)#{$validation-messages} { - margin-left: calc(-1 * #{$input-border-width}); + margin-inline-start: calc(-1 * #{$input-border-width}); @include border-start-radius(0); } diff --git a/scss/forms/_validation.scss b/scss/forms/_validation.scss index 02f564f9bd..c2d47d777c 100644 --- a/scss/forms/_validation.scss +++ b/scss/forms/_validation.scss @@ -76,7 +76,7 @@ border-color: $border-color; @if $enable-validation-icons { - padding-right: $input-height-inner; + padding-inline-end: $input-height-inner; background-image: escape-svg($icon); background-repeat: no-repeat; background-position: right $input-height-inner-quarter center; @@ -99,7 +99,7 @@ textarea.form-control { @include form-validation-state-selector($state) { @if $enable-validation-icons { - padding-right: $input-height-inner; + padding-inline-end: $input-height-inner; background-position: top $input-height-inner-quarter right $input-height-inner-quarter; } } @@ -158,7 +158,7 @@ } .form-check-inline .form-check-input { ~ .#{$state}-feedback { - margin-left: .5em; + margin-inline-start: .5em; } } diff --git a/scss/layout/_containers.scss b/scss/layout/_containers.scss index 8b20c3b159..d19bc720ad 100644 --- a/scss/layout/_containers.scss +++ b/scss/layout/_containers.scss @@ -10,10 +10,8 @@ --#{$prefix}gutter-x: #{$gutter}; --#{$prefix}gutter-y: 0; width: 100%; - padding-right: calc(var(--#{$prefix}gutter-x) * .5); - padding-left: calc(var(--#{$prefix}gutter-x) * .5); - margin-right: auto; - margin-left: auto; + padding-inline: calc(var(--#{$prefix}gutter-x) * .5); + margin-inline: auto; } @layer layout { diff --git a/scss/mixins/_caret.scss b/scss/mixins/_caret.scss index 2eacc6a7e6..230c28d031 100644 --- a/scss/mixins/_caret.scss +++ b/scss/mixins/_caret.scss @@ -44,7 +44,7 @@ $caret-spacing: $caret-width * .85 !default; @if $enable-caret { &::after { display: inline-block; - margin-left: $spacing; + margin-inline-start: $spacing; vertical-align: $vertical-align; content: ""; @if $direction == down { @@ -63,7 +63,7 @@ $caret-spacing: $caret-width * .85 !default; &::before { display: inline-block; - margin-right: $spacing; + margin-inline-end: $spacing; vertical-align: $vertical-align; content: ""; @include caret-start($width); @@ -71,7 +71,7 @@ $caret-spacing: $caret-width * .85 !default; } &:empty::after { - margin-left: 0; + margin-inline-start: 0; } } } diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss index 00b4764134..beb2dfcfc0 100644 --- a/scss/mixins/_forms.scss +++ b/scss/mixins/_forms.scss @@ -60,7 +60,7 @@ border-color: $border-color; @if $enable-validation-icons { - padding-right: $input-height-inner; + padding-inline-end: $input-height-inner; background-image: escape-svg($icon); background-repeat: no-repeat; background-position: right $input-height-inner-quarter center; @@ -83,7 +83,7 @@ textarea.form-control { @include form-validation-state-selector($state) { @if $enable-validation-icons { - padding-right: $input-height-inner; + padding-inline-end: $input-height-inner; background-position: top $input-height-inner-quarter right $input-height-inner-quarter; } } @@ -97,7 +97,7 @@ &:not([multiple]):not([size]), &:not([multiple])[size="1"] { --#{$prefix}form-select-bg-icon: #{escape-svg($icon)}; - padding-right: $form-select-feedback-icon-padding-end; + padding-inline-end: $form-select-feedback-icon-padding-end; background-position: $form-select-bg-position, $form-select-feedback-icon-position; background-size: $form-select-bg-size, $form-select-feedback-icon-size; } @@ -142,7 +142,7 @@ } .form-check-inline .form-check-input { ~ .#{$state}-feedback { - margin-left: .5em; + margin-inline-start: .5em; } } diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss index 4f8da96a0d..988d3bbad1 100644 --- a/scss/mixins/_grid.scss +++ b/scss/mixins/_grid.scss @@ -14,9 +14,8 @@ display: flex; flex-wrap: wrap; // TODO: Revisit calc order after https://github.com/react-bootstrap/react-bootstrap/issues/6039 is fixed + margin-inline: calc(-.5 * var(--#{$prefix}gutter-x)); margin-top: calc(-1 * var(--#{$prefix}gutter-y)); - margin-right: calc(-.5 * var(--#{$prefix}gutter-x)); - margin-left: calc(-.5 * var(--#{$prefix}gutter-x)); } @mixin make-col-ready() { @@ -28,8 +27,7 @@ flex-shrink: 0; width: 100%; max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid - padding-right: calc(var(--#{$prefix}gutter-x) * .5); - padding-left: calc(var(--#{$prefix}gutter-x) * .5); + padding-inline: calc(var(--#{$prefix}gutter-x) * .5); margin-top: var(--#{$prefix}gutter-y); } @@ -51,7 +49,7 @@ @mixin make-col-offset($size, $columns: $grid-columns) { $num: math.div($size, $columns); - margin-left: if($num == 0, 0, math.percentage($num)); + margin-inline-start: if($num == 0, 0, math.percentage($num)); } // Row columns diff --git a/scss/mixins/_lists.scss b/scss/mixins/_lists.scss index 2518562669..27556e6f98 100644 --- a/scss/mixins/_lists.scss +++ b/scss/mixins/_lists.scss @@ -2,6 +2,6 @@ // Unstyled keeps list items block level, just removes default browser padding and list-style @mixin list-unstyled { - padding-left: 0; + padding-inline-start: 0; list-style: none; } diff --git a/site/src/content/docs/layout/containers.mdx b/site/src/content/docs/layout/containers.mdx index 217a0010e1..50b05d8c53 100644 --- a/site/src/content/docs/layout/containers.mdx +++ b/site/src/content/docs/layout/containers.mdx @@ -80,10 +80,8 @@ In addition to customizing the Sass, you can also create your own containers wit // Source mixin @mixin make-container($padding-x: $container-padding-x) { width: 100%; - padding-right: $padding-x; - padding-left: $padding-x; - margin-right: auto; - margin-left: auto; + padding-inline: $padding-x; + margin-inline: auto; } // Usage -- 2.47.3