CSS: consistent approach for `calc` with negative values (#41004)

Co-authored-by: Louis-Maxime Piton <louismaxime.piton@orange.com>
Co-authored-by: Julien Déramond <juderamond@gmail.com>

diff --git a/scss/_button-group.scss b/scss/_button-group.scss
index dcd2a858ed93990d59b6c1a8cfb267489725c83a..78e125224f9303ee45fcf1d252458f12f0355e9c 100644 (file)
--- a/scss/_button-group.scss
+++ b/scss/_button-group.scss
@@ -39,7 +39,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(#{$btn-border-width} * -1); // stylelint-disable-line function-disallowed-list
+    margin-left: calc(-1 * #{$btn-border-width}); // stylelint-disable-line function-disallowed-list
   }
 
   // Reset rounded corners
@@ -126,7 +126,7 @@
 
   > .btn:not(:first-child),
   > .btn-group:not(:first-child) {
-    margin-top: calc(#{$btn-border-width} * -1); // stylelint-disable-line function-disallowed-list
+    margin-top: calc(-1 * #{$btn-border-width}); // stylelint-disable-line function-disallowed-list
   }
 
   // Reset rounded corners

diff --git a/scss/_pagination.scss b/scss/_pagination.scss
index f275a62eb4dd1941be72b4ecbb868efd77c3d717..9f09694c30ece170d0abd97a8555a5f8358231b1 100644 (file)
--- a/scss/_pagination.scss
+++ b/scss/_pagination.scss
@@ -75,7 +75,7 @@
     margin-left: $pagination-margin-start;
   }
 
-  @if $pagination-margin-start == calc(#{$pagination-border-width} * -1) {
+  @if $pagination-margin-start == calc(-1 * #{$pagination-border-width}) {
     &:first-child {
       .page-link {
         @include border-start-radius(var(--#{$prefix}pagination-border-radius));

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 9db91c73a159786649c1386fa77665d5bdf82161..176e63513297ae7e2c0379629b7a8dd97b7e4095 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -1302,7 +1302,7 @@ $pagination-color:                  var(--#{$prefix}link-color) !default;
 $pagination-bg:                     var(--#{$prefix}body-bg) !default;
 $pagination-border-radius:          var(--#{$prefix}border-radius) !default;
 $pagination-border-width:           var(--#{$prefix}border-width) !default;
-$pagination-margin-start:           calc(#{$pagination-border-width} * -1) !default; // stylelint-disable-line function-disallowed-list
+$pagination-margin-start:           calc(-1 * #{$pagination-border-width}) !default; // stylelint-disable-line function-disallowed-list
 $pagination-border-color:           var(--#{$prefix}border-color) !default;
 
 $pagination-focus-color:            var(--#{$prefix}link-hover-color) !default;

diff --git a/scss/forms/_input-group.scss b/scss/forms/_input-group.scss
index 58e4d409c0272d451ee9b7c17a20a409b1c62af1..8078ebb151abd07e9edb22a9b3253de62eff897b 100644 (file)
--- a/scss/forms/_input-group.scss
+++ b/scss/forms/_input-group.scss
@@ -121,7 +121,7 @@
   }
 
   > :not(:first-child):not(.dropdown-menu)#{$validation-messages} {
-    margin-left: calc(#{$input-border-width} * -1); // stylelint-disable-line function-disallowed-list
+    margin-left: calc(-1 * #{$input-border-width}); // stylelint-disable-line function-disallowed-list
     @include border-start-radius(0);
   }
 

diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
index fde8b7f4164ac89a988c6d56bce0b27d968a9572..177836fcd8b93cb92d13246369914fe86fad3c6b 100644 (file)
--- a/site/assets/scss/_component-examples.scss
+++ b/site/assets/scss/_component-examples.scss
@@ -93,13 +93,13 @@
   .fixed-top,
   .sticky-top {
     position: static;
-    margin: calc(var(--bd-example-padding) * -1) calc(var(--bd-example-padding) * -1) var(--bd-example-padding); // stylelint-disable-line function-disallowed-list
+    margin: calc(-1 * var(--bd-example-padding)) calc(-1 * var(--bd-example-padding)) var(--bd-example-padding); // stylelint-disable-line function-disallowed-list
   }
 
   .fixed-bottom,
   .sticky-bottom {
     position: static;
-    margin: var(--bd-example-padding) calc(var(--bd-example-padding) * -1) calc(var(--bd-example-padding) * -1); // stylelint-disable-line function-disallowed-list
+    margin: var(--bd-example-padding) calc(-1 * var(--bd-example-padding)) calc(-1 * var(--bd-example-padding)); // stylelint-disable-line function-disallowed-list
 
   }