Don't disallow calc()

mdo · mdo · commit fce5b1125a52 · 2025-06-22T09:21:34.000-07:00
diff --git a/.stylelintrc.json b/.stylelintrc.json
@@ -13,7 +13,6 @@
           "outline": "none"
         },
         "function-disallowed-list": [
-          "calc",
           "lighten",
           "darken"
         ],
diff --git a/scss/_accordion.scss b/scss/_accordion.scss
@@ -55,7 +55,7 @@
   &:not(.collapsed) {
     color: var(--#{$prefix}accordion-active-color);
     background-color: var(--#{$prefix}accordion-active-bg);
-    box-shadow: inset 0 calc(-1 * var(--#{$prefix}accordion-border-width)) 0 var(--#{$prefix}accordion-border-color); // stylelint-disable-line function-disallowed-list
+    box-shadow: inset 0 calc(-1 * var(--#{$prefix}accordion-border-width)) 0 var(--#{$prefix}accordion-border-color);
 
     &::after {
       background-image: var(--#{$prefix}accordion-btn-active-icon);
diff --git a/scss/_button-group.scss b/scss/_button-group.scss
@@ -44,7 +44,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}); // stylelint-disable-line function-disallowed-list
+    margin-left: calc(-1 * #{$btn-border-width});
   }
 
   // Reset rounded corners
@@ -131,7 +131,7 @@
 
   > .btn:not(:first-child),
   > .btn-group:not(:first-child) {
-    margin-top: calc(-1 * #{$btn-border-width}); // stylelint-disable-line function-disallowed-list
+    margin-top: calc(-1 * #{$btn-border-width});
   }
 
   // Reset rounded corners
diff --git a/scss/_card.scss b/scss/_card.scss
@@ -86,7 +86,7 @@
 }
 
 .card-subtitle {
-  margin-top: calc(-.5 * var(--#{$prefix}card-title-spacer-y)); // stylelint-disable-line function-disallowed-list
+  margin-top: calc(-.5 * var(--#{$prefix}card-title-spacer-y));
   margin-bottom: 0;
   color: var(--#{$prefix}card-subtitle-color);
 }
@@ -138,9 +138,9 @@
 //
 
 .card-header-tabs {
-  margin-right: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
-  margin-bottom: calc(-1 * var(--#{$prefix}card-cap-padding-y)); // stylelint-disable-line function-disallowed-list
-  margin-left: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
+  margin-right: 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 {
@@ -150,8 +150,8 @@
 }
 
 .card-header-pills {
-  margin-right: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
-  margin-left: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
+  margin-right: calc(-.5 * var(--#{$prefix}card-cap-padding-x));
+  margin-left: calc(-.5 * var(--#{$prefix}card-cap-padding-x));
 }
 
 // Card image
diff --git a/scss/_list-group.scss b/scss/_list-group.scss
@@ -92,7 +92,7 @@
     border-top-width: 0;
 
     &.active {
-      margin-top: calc(-1 * var(--#{$prefix}list-group-border-width)); // stylelint-disable-line function-disallowed-list
+      margin-top: calc(-1 * var(--#{$prefix}list-group-border-width));
       border-top-width: var(--#{$prefix}list-group-border-width);
     }
   }
@@ -156,7 +156,7 @@
           border-left-width: 0;
 
           &.active {
-            margin-left: calc(-1 * var(--#{$prefix}list-group-border-width)); // stylelint-disable-line function-disallowed-list
+            margin-left: 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
@@ -9,8 +9,6 @@
 @use "vendor/rfs" as *;
 @use "layout/breakpoints" as *;
 
-// stylelint-disable function-disallowed-list
-
 // .modal-open      - body class for killing the scroll
 // .modal           - container to scroll within
 // .modal-dialog    - positioning shell for the actual modal
diff --git a/scss/_nav.scss b/scss/_nav.scss
@@ -77,7 +77,7 @@
   border-bottom: var(--#{$prefix}nav-tabs-border-width) solid var(--#{$prefix}nav-tabs-border-color);
 
   .nav-link {
-    margin-bottom: calc(-1 * var(--#{$prefix}nav-tabs-border-width)); // stylelint-disable-line function-disallowed-list
+    margin-bottom: calc(-1 * var(--#{$prefix}nav-tabs-border-width));
     border: var(--#{$prefix}nav-tabs-border-width) solid transparent;
     @include border-top-radius(var(--#{$prefix}nav-tabs-border-radius));
 
@@ -98,7 +98,7 @@
 
   .dropdown-menu {
     // Make dropdown border overlap tab border
-    margin-top: calc(-1 * var(--#{$prefix}nav-tabs-border-width)); // stylelint-disable-line function-disallowed-list
+    margin-top: calc(-1 * var(--#{$prefix}nav-tabs-border-width));
     // Remove the top rounded corners here since there is a hard edge above the menu
     @include border-top-radius(0);
   }
diff --git a/scss/_offcanvas.scss b/scss/_offcanvas.scss
@@ -6,8 +6,6 @@
 @use "mixins/backdrop" as *;
 @use "layout/breakpoints" as *;
 
-// stylelint-disable function-disallowed-list
-
 %offcanvas-css-vars {
   // scss-docs-start offcanvas-css-vars
   --#{$prefix}offcanvas-zindex: #{$zindex-offcanvas};
diff --git a/scss/_popover.scss b/scss/_popover.scss
@@ -63,11 +63,11 @@
 
 .bs-popover-top {
   > .popover-arrow {
-    bottom: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
+    bottom: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width));
 
     &::before,
     &::after {
-      border-width: var(--#{$prefix}popover-arrow-height) calc(var(--#{$prefix}popover-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
+      border-width: var(--#{$prefix}popover-arrow-height) calc(var(--#{$prefix}popover-arrow-width) * .5) 0;
     }
 
     &::before {
@@ -85,13 +85,13 @@
 /* rtl:begin:ignore */
 .bs-popover-end {
   > .popover-arrow {
-    left: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
+    left: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width));
     width: var(--#{$prefix}popover-arrow-height);
     height: var(--#{$prefix}popover-arrow-width);
 
     &::before,
     &::after {
-      border-width: calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height) calc(var(--#{$prefix}popover-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
+      border-width: calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height) calc(var(--#{$prefix}popover-arrow-width) * .5) 0;
     }
 
     &::before {
@@ -110,11 +110,11 @@
 
 .bs-popover-bottom {
   > .popover-arrow {
-    top: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
+    top: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width));
 
     &::before,
     &::after {
-      border-width: 0 calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height); // stylelint-disable-line function-disallowed-list
+      border-width: 0 calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height);
     }
 
     &::before {
@@ -135,7 +135,7 @@
     left: 50%;
     display: block;
     width: var(--#{$prefix}popover-arrow-width);
-    margin-left: calc(-.5 * var(--#{$prefix}popover-arrow-width)); // stylelint-disable-line function-disallowed-list
+    margin-left: calc(-.5 * var(--#{$prefix}popover-arrow-width));
     content: "";
     border-bottom: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-header-bg);
   }
@@ -144,13 +144,13 @@
 /* rtl:begin:ignore */
 .bs-popover-start {
   > .popover-arrow {
-    right: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
+    right: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width));
     width: var(--#{$prefix}popover-arrow-height);
     height: var(--#{$prefix}popover-arrow-width);
 
     &::before,
     &::after {
-      border-width: calc(var(--#{$prefix}popover-arrow-width) * .5) 0 calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height); // stylelint-disable-line function-disallowed-list
+      border-width: calc(var(--#{$prefix}popover-arrow-width) * .5) 0 calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height);
     }
 
     &::before {
diff --git a/scss/_toasts.scss b/scss/_toasts.scss
@@ -67,7 +67,7 @@
   @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)); // stylelint-disable-line function-disallowed-list
+    margin-right: calc(-.5 * var(--#{$prefix}toast-padding-x));
     margin-left: var(--#{$prefix}toast-padding-x);
   }
 }
diff --git a/scss/_tooltip.scss b/scss/_tooltip.scss
@@ -51,49 +51,49 @@
 }
 
 .bs-tooltip-top .tooltip-arrow {
-  bottom: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
+  bottom: calc(-1 * var(--#{$prefix}tooltip-arrow-height));
 
   &::before {
     top: -1px;
-    border-width: var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
+    border-width: var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0;
     border-top-color: var(--#{$prefix}tooltip-bg);
   }
 }
 
 /* rtl:begin:ignore */
 .bs-tooltip-end .tooltip-arrow {
-  left: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
+  left: calc(-1 * var(--#{$prefix}tooltip-arrow-height));
   width: var(--#{$prefix}tooltip-arrow-height);
   height: var(--#{$prefix}tooltip-arrow-width);
 
   &::before {
     right: -1px;
-    border-width: calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
+    border-width: calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0;
     border-right-color: var(--#{$prefix}tooltip-bg);
   }
 }
 
 /* rtl:end:ignore */
 
 .bs-tooltip-bottom .tooltip-arrow {
-  top: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
+  top: calc(-1 * var(--#{$prefix}tooltip-arrow-height));
 
   &::before {
     bottom: -1px;
-    border-width: 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list
+    border-width: 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height);
     border-bottom-color: var(--#{$prefix}tooltip-bg);
   }
 }
 
 /* rtl:begin:ignore */
 .bs-tooltip-start .tooltip-arrow {
-  right: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
+  right: calc(-1 * var(--#{$prefix}tooltip-arrow-height));
   width: var(--#{$prefix}tooltip-arrow-height);
   height: var(--#{$prefix}tooltip-arrow-width);
 
   &::before {
     left: -1px;
-    border-width: calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list
+    border-width: calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height);
     border-left-color: var(--#{$prefix}tooltip-bg);
   }
 }
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -636,7 +636,7 @@ $input-focus-box-shadow:                $input-btn-focus-box-shadow !default;
 $input-placeholder-color:               var(--#{$prefix}secondary-color) !default;
 $input-plaintext-color:                 var(--#{$prefix}body-color) !default;
 
-$input-height-border:                   calc(#{$input-border-width} * 2) !default; // stylelint-disable-line function-disallowed-list
+$input-height-border:                   calc(#{$input-border-width} * 2) !default;
 
 $input-height-inner:                    add($input-line-height * 1em, $input-padding-y * 2) !default;
 $input-height-inner-half:               add($input-line-height * .5em, $input-padding-y) !default;
@@ -961,7 +961,7 @@ $dropdown-bg:                       var(--#{$prefix}body-bg) !default;
 $dropdown-border-color:             var(--#{$prefix}border-color-translucent) !default;
 $dropdown-border-radius:            var(--#{$prefix}border-radius) !default;
 $dropdown-border-width:             var(--#{$prefix}border-width) !default;
-$dropdown-inner-border-radius:      calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default; // stylelint-disable-line function-disallowed-list
+$dropdown-inner-border-radius:      calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default;
 $dropdown-divider-bg:               $dropdown-border-color !default;
 $dropdown-divider-margin-y:         $spacer * .5 !default;
 $dropdown-box-shadow:               var(--#{$prefix}box-shadow) !default;
@@ -1018,7 +1018,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(-1 * #{$pagination-border-width}) !default; // stylelint-disable-line function-disallowed-list
+$pagination-margin-start:           calc(-1 * #{$pagination-border-width}) !default;
 $pagination-border-color:           var(--#{$prefix}border-color) !default;
 
 $pagination-focus-color:            var(--#{$prefix}link-hover-color) !default;
@@ -1154,7 +1154,7 @@ $popover-max-width:                 276px !default;
 $popover-border-width:              var(--#{$prefix}border-width) !default;
 $popover-border-color:              var(--#{$prefix}border-color-translucent) !default;
 $popover-border-radius:             var(--#{$prefix}border-radius-lg) !default;
-$popover-inner-border-radius:       calc(#{$popover-border-radius} - #{$popover-border-width}) !default; // stylelint-disable-line function-disallowed-list
+$popover-inner-border-radius:       calc(#{$popover-border-radius} - #{$popover-border-width}) !default;
 $popover-box-shadow:                var(--#{$prefix}box-shadow) !default;
 
 $popover-header-font-size:          $font-size-base !default;
diff --git a/scss/content/_tables.scss b/scss/content/_tables.scss
@@ -83,7 +83,7 @@
 }
 
 .table-group-divider {
-  border-top: calc(#{$table-border-width} * 2) solid $table-group-separator-color; // stylelint-disable-line function-disallowed-list
+  border-top: calc(#{$table-border-width} * 2) solid $table-group-separator-color;
 }
 
 //
diff --git a/scss/forms/_input-group.scss b/scss/forms/_input-group.scss
@@ -127,7 +127,7 @@
   }
 
   > :not(:first-child):not(.dropdown-menu)#{$validation-messages} {
-    margin-left: calc(-1 * #{$input-border-width}); // stylelint-disable-line function-disallowed-list
+    margin-left: calc(-1 * #{$input-border-width});
     @include border-start-radius(0);
   }
 
diff --git a/scss/layout/_containers.scss b/scss/layout/_containers.scss
@@ -10,8 +10,8 @@
   --#{$prefix}gutter-x: #{$gutter};
   --#{$prefix}gutter-y: 0;
   width: 100%;
-  padding-right: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
-  padding-left: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
+  padding-right: calc(var(--#{$prefix}gutter-x) * .5);
+  padding-left: calc(var(--#{$prefix}gutter-x) * .5);
   margin-right: auto;
   margin-left: auto;
 }

Original file line number	Diff line number	Diff line change
`@@ -44,7 +44,7 @@`
`44`	`44`	`// Prevent double borders when buttons are next to each other`
`45`	`45`	`> :not(.btn-check:first-child) + .btn,`
`46`	`46`	`> .btn-group:not(:first-child) {`
`47`		`- margin-left: calc(-1 * #{$btn-border-width}); // stylelint-disable-line function-disallowed-list`
	`47`	`+ margin-left: calc(-1 * #{$btn-border-width});`
`48`	`48`	`}`
`49`	`49`
`50`	`50`	`// Reset rounded corners`
`@@ -131,7 +131,7 @@`
`131`	`131`
`132`	`132`	`> .btn:not(:first-child),`
`133`	`133`	`> .btn-group:not(:first-child) {`
`134`		`- margin-top: calc(-1 * #{$btn-border-width}); // stylelint-disable-line function-disallowed-list`
	`134`	`+ margin-top: calc(-1 * #{$btn-border-width});`
`135`	`135`	`}`
`136`	`136`
`137`	`137`	`// Reset rounded corners`
Original file line number	Diff line number	Diff line change
`@@ -92,7 +92,7 @@`
`92`	`92`	`border-top-width: 0;`
`93`	`93`
`94`	`94`	`&.active {`
`95`		`- margin-top: calc(-1 * var(--#{$prefix}list-group-border-width)); // stylelint-disable-line function-disallowed-list`
	`95`	`+ margin-top: calc(-1 * var(--#{$prefix}list-group-border-width));`
`96`	`96`	`border-top-width: var(--#{$prefix}list-group-border-width);`
`97`	`97`	`}`
`98`	`98`	`}`
`@@ -156,7 +156,7 @@`
`156`	`156`	`border-left-width: 0;`
`157`	`157`
`158`	`158`	`&.active {`
`159`		`- margin-left: calc(-1 * var(--#{$prefix}list-group-border-width)); // stylelint-disable-line function-disallowed-list`
	`159`	`+ margin-left: calc(-1 * var(--#{$prefix}list-group-border-width));`
`160`	`160`	`border-left-width: var(--#{$prefix}list-group-border-width);`
`161`	`161`	`}`
`162`	`162`	`}`
Original file line number	Diff line number	Diff line change
`@@ -67,7 +67,7 @@`
`67`	`67`	`@include border-top-radius(calc(var(--#{$prefix}toast-border-radius) - var(--#{$prefix}toast-border-width)));`
`68`	`68`
`69`	`69`	`.btn-close {`
`70`		`- margin-right: calc(-.5 * var(--#{$prefix}toast-padding-x)); // stylelint-disable-line function-disallowed-list`
	`70`	`+ margin-right: calc(-.5 * var(--#{$prefix}toast-padding-x));`
`71`	`71`	`margin-left: var(--#{$prefix}toast-padding-x);`
`72`	`72`	`}`
`73`	`73`	`}`