Use with-unit() instead of add()/subtract()

twbs · Jan 25, 2024 · be707d1 · be707d1
1 parent 34043af
commit be707d1
Show file tree

Hide file tree

Showing 32 changed files with 134 additions and 141 deletions.
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
@@ -47,7 +47,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/_alert.scss b/scss/_alert.scss
@@ -49,8 +49,8 @@
  position: absolute;
  top: 0;
  right: 0;
- z-index: calc($stretched-link-z-index + 1); // stylelint-disable-line function-disallowed-list
- padding: calc($alert-padding-y * 1.25) $alert-padding-x; // stylelint-disable-line function-disallowed-list
+ z-index: calc($stretched-link-z-index + 1);
+ padding: calc($alert-padding-y * 1.25) $alert-padding-x;
  }
 }
 

diff --git 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($btn-border-width * -1);
  }
 
  // Reset rounded corners
@@ -73,8 +73,8 @@
 //
 
 .dropdown-toggle-split {
- padding-right: calc($btn-padding-x * .75); // stylelint-disable-line function-disallowed-list
- padding-left: calc($btn-padding-x * .75); // stylelint-disable-line function-disallowed-list
+ padding-right: calc($btn-padding-x * .75);
+ padding-left: calc($btn-padding-x * .75);
 
  &::after,
  .dropup &::after,
@@ -88,13 +88,13 @@
 }
 
 .btn-sm + .dropdown-toggle-split {
- padding-right: calc($btn-padding-x-sm * .75); // stylelint-disable-line function-disallowed-list
- padding-left: calc($btn-padding-x-sm * .75); // stylelint-disable-line function-disallowed-list
+ padding-right: calc($btn-padding-x-sm * .75);
+ padding-left: calc($btn-padding-x-sm * .75);
 }
 
 .btn-lg + .dropdown-toggle-split {
- padding-right: calc($btn-padding-x-lg * .75); // stylelint-disable-line function-disallowed-list
- padding-left: calc($btn-padding-x-lg * .75); // stylelint-disable-line function-disallowed-list
+ padding-right: calc($btn-padding-x-lg * .75);
+ padding-left: calc($btn-padding-x-lg * .75);
 }
 
 
@@ -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($btn-border-width * -1);
  }
 
  // Reset rounded corners

diff --git a/scss/_card.scss b/scss/_card.scss
@@ -80,7 +80,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);
 }
@@ -132,9 +132,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 {
@@ -144,8 +144,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/_carousel.scss b/scss/_carousel.scss
@@ -198,9 +198,9 @@
 
 .carousel-caption {
  position: absolute;
- right: calc(subtract(100%, $carousel-caption-width) * .5); // stylelint-disable-line function-disallowed-list
+ right: calc((100% - with-unit($carousel-caption-width)) * .5);
  bottom: $carousel-caption-spacer;
- left: calc(subtract(100%, $carousel-caption-width) * .5); // stylelint-disable-line function-disallowed-list
+ left: calc((100% - with-unit($carousel-caption-width)) * .5);
  padding-top: $carousel-caption-padding-y;
  padding-bottom: $carousel-caption-padding-y;
  color: $carousel-caption-color;

diff --git a/scss/_functions.scss b/scss/_functions.scss
@@ -218,6 +218,18 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
 }
 // scss-docs-end color-functions
 
+// Ensure that the value has a unit
+// Useful for `calc()` with addition or subtraction with potentially `null` or unitless values
+@function with-unit($value, $fallback: 1px) {
+ @if $value == null {
+ $value: 0;
+ }
+ @if type-of($value) == number and unitless($value) {
+ $value: calc($value * $fallback);
+ }
+ @return $value;
+}
+
 // Return valid calc
 @function add($value1, $value2, $return-calc: true) {
  @if $value1 == null {

diff --git a/scss/_images.scss b/scss/_images.scss
@@ -32,7 +32,7 @@
 }
 
 .figure-img {
- margin-bottom: calc($spacer * .5); // stylelint-disable-line function-disallowed-list
+ margin-bottom: calc($spacer * .5);
  line-height: 1;
 }
 

diff --git a/scss/_list-group.scss b/scss/_list-group.scss
@@ -109,7 +109,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);
  }
  }
@@ -146,7 +146,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
@@ -1,5 +1,3 @@
-// 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
@@ -70,7 +70,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));
 
@@ -91,7 +91,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
@@ -1,5 +1,3 @@
-// stylelint-disable function-disallowed-list
-
 %offcanvas-css-vars {
  // scss-docs-start offcanvas-css-vars
  --#{$prefix}offcanvas-zindex: #{$zindex-offcanvas};

diff --git a/scss/_placeholders.scss b/scss/_placeholders.scss
@@ -39,7 +39,7 @@
 }
 
 .placeholder-wave {
- mask-image: linear-gradient(130deg, $black 55%, rgba(0, 0, 0, subtract(1, $placeholder-opacity-min)) 75%, $black 95%);
+ mask-image: linear-gradient(130deg, $black 55%, rgba(0, 0, 0, calc(1 - $placeholder-opacity-min)) 75%, $black 95%);
  mask-size: 200% 100%;
  animation: placeholder-wave 2s linear infinite;
 }

diff --git a/scss/_popover.scss b/scss/_popover.scss
@@ -56,11 +56,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 {
@@ -78,13 +78,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 {
@@ -103,11 +103,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 {
@@ -128,7 +128,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);
  }
@@ -137,13 +137,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/_tables.scss b/scss/_tables.scss
@@ -49,7 +49,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/_toasts.scss b/scss/_toasts.scss
@@ -62,7 +62,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
@@ -44,49 +44,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/_type.scss b/scss/_type.scss
@@ -95,7 +95,7 @@
 }
 
 .blockquote-footer {
- margin-top: calc(-1 * $blockquote-margin-y); // stylelint-disable-line function-disallowed-list
+ margin-top: calc(-1 * $blockquote-margin-y);
  margin-bottom: $blockquote-margin-y;
  @include font-size($blockquote-footer-font-size);
  color: $blockquote-footer-color;