Split CSS properties here to avoid a bug where 0-ing the padding values causes invalid calc() functions

mdo · mdo · commit 5f6085a3a08f · 2025-04-02T22:45:00.000-07:00
Fixes #39798, fixes #39370, closes #39873, undoes changes in #39373
diff --git a/scss/_modal.scss b/scss/_modal.scss
@@ -132,7 +132,11 @@
 
   .btn-close {
     padding: calc(var(--#{$prefix}modal-header-padding-y) * .5) calc(var(--#{$prefix}modal-header-padding-x) * .5);
-    margin: calc(-.5 * var(--#{$prefix}modal-header-padding-y)) calc(-.5 * var(--#{$prefix}modal-header-padding-x)) calc(-.5 * var(--#{$prefix}modal-header-padding-y)) auto;
+    // Split properties to avoid invalid calc() function if value is 0
+    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;
   }
 }
 
diff --git a/scss/_offcanvas.scss b/scss/_offcanvas.scss
@@ -127,7 +127,11 @@
 
   .btn-close {
     padding: calc(var(--#{$prefix}offcanvas-padding-y) * .5) calc(var(--#{$prefix}offcanvas-padding-x) * .5);
-    margin: calc(-.5 * var(--#{$prefix}offcanvas-padding-y)) calc(-.5 * var(--#{$prefix}offcanvas-padding-x)) calc(-.5 * var(--#{$prefix}offcanvas-padding-y)) auto;
+    // Split properties to avoid invalid calc() function if value is 0
+    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;
   }
 }
 

Original file line number	Diff line number	Diff line change
`@@ -132,7 +132,11 @@`
`132`	`132`
`133`	`133`	`.btn-close {`
`134`	`134`	`padding: calc(var(--#{$prefix}modal-header-padding-y) * .5) calc(var(--#{$prefix}modal-header-padding-x) * .5);`
`135`		`- margin: calc(-.5 * var(--#{$prefix}modal-header-padding-y)) calc(-.5 * var(--#{$prefix}modal-header-padding-x)) calc(-.5 * var(--#{$prefix}modal-header-padding-y)) auto;`
	`135`	`+ // Split properties to avoid invalid calc() function if value is 0`
	`136`	`+ margin-top: calc(-.5 * var(--#{$prefix}modal-header-padding-y));`
	`137`	`+ margin-right: calc(-.5 * var(--#{$prefix}modal-header-padding-x));`
	`138`	`+ margin-bottom: calc(-.5 * var(--#{$prefix}modal-header-padding-y));`
	`139`	`+ margin-left: auto;`
`136`	`140`	`}`
`137`	`141`	`}`
`138`	`142`
Original file line number	Diff line number	Diff line change
`@@ -127,7 +127,11 @@`
`127`	`127`
`128`	`128`	`.btn-close {`
`129`	`129`	`padding: calc(var(--#{$prefix}offcanvas-padding-y) * .5) calc(var(--#{$prefix}offcanvas-padding-x) * .5);`
`130`		`- margin: calc(-.5 * var(--#{$prefix}offcanvas-padding-y)) calc(-.5 * var(--#{$prefix}offcanvas-padding-x)) calc(-.5 * var(--#{$prefix}offcanvas-padding-y)) auto;`
	`130`	`+ // Split properties to avoid invalid calc() function if value is 0`
	`131`	`+ margin-top: calc(-.5 * var(--#{$prefix}offcanvas-padding-y));`
	`132`	`+ margin-right: calc(-.5 * var(--#{$prefix}offcanvas-padding-x));`
	`133`	`+ margin-bottom: calc(-.5 * var(--#{$prefix}offcanvas-padding-y));`
	`134`	`+ margin-left: auto;`
`131`	`135`	`}`
`132`	`136`	`}`
`133`	`137`