refactor(Modal, Offcanvas): split .btn-close CSS properties here to avoid a bug where 0-ing the padding values causes invalid calc() functions

mrholek · mrholek · commit f519a9d6f3a8 · 2025-04-09T10:25:55.000+02:00
diff --git a/scss/_modal.scss b/scss/_modal.scss
@@ -139,7 +139,8 @@
 
   .btn-close {
     padding: calc(var(--#{$prefix}modal-header-padding-y) * .5) calc(var(--#{$prefix}modal-header-padding-x) * .5);
-    margin-inline: auto calc(-.5 * var(--#{$prefix}modal-header-padding-x));
+    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-bottom: calc(-.5 * var(--#{$prefix}modal-header-padding-y));
   }
diff --git a/scss/_offcanvas.scss b/scss/_offcanvas.scss
@@ -134,7 +134,8 @@
 
   .btn-close {
     padding: calc(var(--#{$prefix}offcanvas-padding-y) * .5) calc(var(--#{$prefix}offcanvas-padding-x) * .5);
-    margin-inline: auto calc(-.5 * var(--#{$prefix}offcanvas-padding-x));
+    margin-inline-start: auto;
+    margin-inline-end: calc(-.5 * var(--#{$prefix}offcanvas-padding-x));
     margin-top: calc(-.5 * var(--#{$prefix}offcanvas-padding-y));
     margin-bottom: calc(-.5 * var(--#{$prefix}offcanvas-padding-y));
   }

Original file line number	Diff line number	Diff line change
`@@ -139,7 +139,8 @@`
`139`	`139`
`140`	`140`	`.btn-close {`
`141`	`141`	`padding: calc(var(--#{$prefix}modal-header-padding-y) * .5) calc(var(--#{$prefix}modal-header-padding-x) * .5);`
`142`		`- margin-inline: auto calc(-.5 * var(--#{$prefix}modal-header-padding-x));`
	`142`	`+ margin-inline-start: auto;`
	`143`	`+ margin-inline-end: calc(-.5 * var(--#{$prefix}modal-header-padding-x));`
`143`	`144`	`margin-top: calc(-.5 * var(--#{$prefix}modal-header-padding-y));`
`144`	`145`	`margin-bottom: calc(-.5 * var(--#{$prefix}modal-header-padding-y));`
`145`	`146`	`}`
Original file line number	Diff line number	Diff line change
`@@ -134,7 +134,8 @@`
`134`	`134`
`135`	`135`	`.btn-close {`
`136`	`136`	`padding: calc(var(--#{$prefix}offcanvas-padding-y) * .5) calc(var(--#{$prefix}offcanvas-padding-x) * .5);`
`137`		`- margin-inline: auto calc(-.5 * var(--#{$prefix}offcanvas-padding-x));`
	`137`	`+ margin-inline-start: auto;`
	`138`	`+ margin-inline-end: calc(-.5 * var(--#{$prefix}offcanvas-padding-x));`
`138`	`139`	`margin-top: calc(-.5 * var(--#{$prefix}offcanvas-padding-y));`
`139`	`140`	`margin-bottom: calc(-.5 * var(--#{$prefix}offcanvas-padding-y));`
`140`	`141`	`}`