v6: Switch to logical properties (#41854)

* Convert remaining utilities to all logical properties

* Move to logical properties

* Fix linter errors, bump bundlewatch

diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
index 75a0d34afabd3ada65b9d4e0ba7e265cdc3eec2e..b8e0eff1685bb6732c6a1eb59a92b6c755e69934 100644 (file)
--- 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 46c43f66f8b5e3f7599f57b9a13b5303548a8d7d..af2409c9b46ee5e01e20047dbb1665bf0cd50210 100644 (file)
--- a/scss/_accordion.scss
+++ b/scss/_accordion.scss
@@ -93,7 +93,7 @@ $accordion-button-icon:         url("data:image/svg+xml,<svg xmlns='http://www.w
       flex-shrink: 0;
       width: var(--#{$prefix}accordion-btn-icon-width);
       height: var(--#{$prefix}accordion-btn-icon-width);
-      margin-left: auto;
+      margin-inline-start: auto;
       content: "";
       background-color: var(--#{$prefix}accordion-btn-color);
       mask: var(--#{$prefix}accordion-btn-icon) no-repeat center 100%;

diff --git a/scss/_alert.scss b/scss/_alert.scss
index 58c381abdd0a99e7780ef91ac97c64ae388788ed..0809027034eb393ceb6250082f95405e49da2b3b 100644 (file)
--- a/scss/_alert.scss
+++ b/scss/_alert.scss
@@ -55,7 +55,7 @@ $alert-dismissible-padding-r:   $alert-padding-x * 3 !default; // 3x covers widt
   // Expand the right padding and account for the close button's positioning.
 
   .alert-dismissible {
-    padding-right: $alert-dismissible-padding-r;
+    padding-inline-end: $alert-dismissible-padding-r;
 
     // Adjust close link position
     .btn-close {

diff --git a/scss/_breadcrumb.scss b/scss/_breadcrumb.scss
index efbfe37e39c5891dcc692c1155fe0397fbeb5015..29dcacf9e46b01f73560f277bbd54b9b5fe812f2 100644 (file)
--- a/scss/_breadcrumb.scss
+++ b/scss/_breadcrumb.scss
@@ -46,11 +46,11 @@ $breadcrumb-border-radius:          null !default;
   .breadcrumb-item {
     // The separator between breadcrumbs (by default, a forward-slash: "/")
     + .breadcrumb-item {
-      padding-left: var(--#{$prefix}breadcrumb-item-padding-x);
+      padding-inline-start: var(--#{$prefix}breadcrumb-item-padding-x);
 
       &::before {
         float: left; // Suppress inline spacings and underlining of the separator
-        padding-right: var(--#{$prefix}breadcrumb-item-padding-x);
+        padding-inline-end: var(--#{$prefix}breadcrumb-item-padding-x);
         color: var(--#{$prefix}breadcrumb-divider-color);
         content: var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider)) #{"/* rtl:"} var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider-flipped)) #{"*/"};
       }

diff --git a/scss/_card.scss b/scss/_card.scss
index df4bcda163b0912778811cf89b7ae8006cb052be..79b4acfb435baeadf6b1f759b37c0b537fa541d7 100644 (file)
--- a/scss/_card.scss
+++ b/scss/_card.scss
@@ -64,8 +64,7 @@ $card-group-margin:                 $grid-gutter-width * .5 !default;
     @include box-shadow(var(--#{$prefix}card-box-shadow));
 
     > 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 d70c117bf689e1a7dab3b9255904b87a4382454d..4619d957b62e4f8b3aee161565c35b8849d42a62 100644 (file)
--- 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 090ba6de966a3fb87b6f1091785c00ac67c088de..ea18141c6b7e866e33aed8e22b4a2add947b5455 100644 (file)
--- 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 c5c1985ad08f8445841dcf1121c38c6a7e485e8f..d19774af2b95650512acac7198f7b6ad17b79ba1 100644 (file)
--- 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 a515e59bb973995c542e3859e4b56f31ecbc65df..bd502390e8014ea3d10aa234f03356ba45ee9b13 100644 (file)
--- 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 a13a31116efb027073672ae467c79da26ca631b4..8ddbebe61ed0c983cd9287dabec92bd74019648c 100644 (file)
--- 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 4599f782c8a05eea4a6f05c46833662bf6c077b3..ed2fb9cb6122ca81545c37fa3faa061b61fdd41f 100644 (file)
--- 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 c1da8f7ece1dfbe9188009409b7a4aa55e760e2f..e1bc9c3273af3fbb3fdf600066800a961b0c95ca 100644 (file)
--- 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 ec9b87372fcdd8200011770ecc20544f5ea56e82..7daf71ca21bb860dfa89c31b76f4e4253c59d70f 100644 (file)
--- 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 c3949b64839035573e427dd82c7ab47cc6c3a84c..12e44805229c40b87c10a0141cc1838f593c4ca3 100644 (file)
--- 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 2c4c32509c892f3a6008da8410ff22334500bf3a..c9eb2bad4e42325d0cfd0de4ec59b909ad379d25 100644 (file)
--- 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 03e3b107e582b6e330702306e61ce744927269d0..ee95eb1ae4decf65f3071873d0cbe93bbeee5c3f 100644 (file)
--- 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 df4af440a8833fd55b07d2902fd85a3105fa7721..c2dc7c3560a07a00cc4ef0f12789f5e0b3f6b7cb 100644 (file)
--- 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 bc9b40e39f7fa1f5a5d6aec0abb3fa8fe9b1383e..bf119e73e84354e6ae0bb4b16aa5cdeca45c918f 100644 (file)
--- 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 9f0cbf75ffe83f9c418ce5f5d64960ed54de77ae..8552446561a14148a330e24e25a6cfdb363399d1 100644 (file)
--- 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 f242fde73955ee3ef48bdd1a6a1ed56c81479522..5b5652ecad871a799ccb93d17d49fd6fc8d7c26f 100644 (file)
--- 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 4e8c4e939b31f38e443666893497b69e930c94b8..d08f30ff2e89a4170a6c61dde2a92703a9cc5b19 100644 (file)
--- 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 c7ff34f416592b49782244c2c5693b73e7fbcd0e..34e7da6e79773935d0edbaa7c450296b1344f2d5 100644 (file)
--- 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 99db177f5f1d2a2d1ea894f7accf9de0f0b28c7a..12a8607304bc4ec1129541f6d9996ff2944fbdde 100644 (file)
--- 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 02f564f9bd494c39e0aea40cac49f0a21f4cb419..c2d47d777ca9755f7e9b84ae8b03f7438304f0ec 100644 (file)
--- 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 8b20c3b159b959be9c3eb93c7269bc9c51f6d4ad..d19bc720adcfe446091354f4c5d9a55264d3bb76 100644 (file)
--- 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 2eacc6a7e66c977b1bc637c30702e33673549036..230c28d031d0e5bb45ada9acfa9ad1fd095c9f38 100644 (file)
--- 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 00b47641346375ed5bd8c26551358568605b71f9..beb2dfcfc0a0d9c9f73f8099a4db4e3975acbb3b 100644 (file)
--- 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 4f8da96a0d8e2dfeb7f40a4acafea9c5e863225a..988d3bbad132d7f2319ac564816dd0104f28db20 100644 (file)
--- 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 25185626698393b1365199f93aadd8d3350dc9d5..27556e6f98c20863a0f23f660a20b6ea84b58323 100644 (file)
--- 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 217a0010e15f1cde72c74ce8b684e65bdd53ba61..50b05d8c53d3d59971ebf2139bd45c525a1d6eef 100644 (file)
--- 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