Remove add(), subtract(), and divide() functions for calc() and Sass math.div()

diff --git a/scss/_functions.scss b/scss/_functions.scss
index fab566906de834e789f6cbe5222cad0726ef4f36..dc3d6a19b42a9bb603b4e5446b30a279287af50d 100644 (file)
--- a/scss/_functions.scss
+++ b/scss/_functions.scss
@@ -1,3 +1,4 @@
+@use "sass:math";
 @use "config" as *;
 
 // Bootstrap functions
@@ -176,7 +177,7 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
   $l1: luminance($background);
   $l2: luminance(opaque($background, $foreground));
 
-  @return if($l1 > $l2, divide($l1 + .05, $l2 + .05), divide($l2 + .05, $l1 + .05));
+  @return if($l1 > $l2, math.div($l1 + .05, $l2 + .05), math.div($l2 + .05, $l1 + .05));
 }
 
 // Return WCAG2.2 relative luminance
@@ -190,7 +191,7 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
   );
 
   @each $name, $value in $rgb {
-    $value: if(divide($value, 255) < .04045, divide(divide($value, 255), 12.92), nth($_luminance-list, $value + 1));
+    $value: if(math.div($value, 255) < .04045, math.div(math.div($value, 255), 12.92), nth($_luminance-list, $value + 1));
     $rgb: map-merge($rgb, ($name: $value));
   }
 
@@ -219,86 +220,3 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
   @return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
 }
 // scss-docs-end color-functions
-
-// Return valid calc
-@function add($value1, $value2, $return-calc: true) {
-  @if $value1 == null {
-    @return $value2;
-  }
-
-  @if $value2 == null {
-    @return $value1;
-  }
-
-  @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
-    @return $value1 + $value2;
-  }
-
-  @return if($return-calc == true, calc(#{$value1} + #{$value2}), $value1 + unquote(" + ") + $value2);
-}
-
-@function subtract($value1, $value2, $return-calc: true) {
-  @if $value1 == null and $value2 == null {
-    @return null;
-  }
-
-  @if $value1 == null {
-    @return -$value2;
-  }
-
-  @if $value2 == null {
-    @return $value1;
-  }
-
-  @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
-    @return $value1 - $value2;
-  }
-
-  @if type-of($value2) != number {
-    $value2: unquote("(") + $value2 + unquote(")");
-  }
-
-  @return if($return-calc == true, calc(#{$value1} - #{$value2}), $value1 + unquote(" - ") + $value2);
-}
-
-@function divide($dividend, $divisor, $precision: 10) {
-  $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
-  $dividend: abs($dividend);
-  $divisor: abs($divisor);
-  @if $dividend == 0 {
-    @return 0;
-  }
-  @if $divisor == 0 {
-    @error "Cannot divide by 0";
-  }
-  $remainder: $dividend;
-  $result: 0;
-  $factor: 10;
-  @while ($remainder > 0 and $precision >= 0) {
-    $quotient: 0;
-    @while ($remainder >= $divisor) {
-      $remainder: $remainder - $divisor;
-      $quotient: $quotient + 1;
-    }
-    $result: $result * 10 + $quotient;
-    $factor: $factor * .1;
-    $remainder: $remainder * 10;
-    $precision: $precision - 1;
-    @if ($precision < 0 and $remainder >= $divisor * 5) {
-      $result: $result + 1;
-    }
-  }
-  $result: $result * $factor * $sign;
-  $dividend-unit: unit($dividend);
-  $divisor-unit: unit($divisor);
-  $unit-map: (
-    "px": 1px,
-    "rem": 1rem,
-    "em": 1em,
-    "%": 1%
-  );
-  @if ($dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)) {
-    $result: $result * map-get($unit-map, $dividend-unit);
-  }
-  @return $result;
-}

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 4b9f203f8834193b6ef87959efd6de6f0193dd2e..5c1bb61ef54a7eed7595096c515ad9b711d031fc 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -631,13 +631,13 @@ $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-inner:                    add($input-line-height * 1em, $input-padding-y * 2) !default;
-$input-height-inner-half:               add($input-line-height * .5em, $input-padding-y) !default;
-$input-height-inner-quarter:            add($input-line-height * .25em, $input-padding-y * .5) !default;
+$input-height-inner:                    calc($input-line-height * 1em + ($input-padding-y * 2)) !default;
+$input-height-inner-half:               calc($input-line-height * .5em + ($input-padding-y)) !default;
+$input-height-inner-quarter:            calc($input-line-height * .25em + ($input-padding-y * .5)) !default;
 
-$input-height:                          add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false)) !default;
-$input-height-sm:                       add($input-line-height * 1em, add($input-padding-y-sm * 2, $input-height-border, false)) !default;
-$input-height-lg:                       add($input-line-height * 1em, add($input-padding-y-lg * 2, $input-height-border, false)) !default;
+$input-height:                          calc($input-line-height * 1em + (($input-padding-y * 2) + $input-height-border)) !default;
+$input-height-sm:                       calc($input-line-height * 1em + (($input-padding-y-sm * 2) + $input-height-border)) !default;
+$input-height-lg:                       calc($input-line-height * 1em + (($input-padding-y-lg * 2) + $input-height-border)) !default;
 
 $input-transition:                      border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
 
@@ -777,7 +777,7 @@ $form-file-button-hover-bg:       var(--#{$prefix}secondary-bg) !default;
 // scss-docs-end form-file-variables
 
 // scss-docs-start form-floating-variables
-$form-floating-height:                  add(3.5rem, $input-height-border) !default;
+$form-floating-height:                  calc(3.5rem + #{$input-height-border}) !default;
 $form-floating-line-height:             1.25 !default;
 $form-floating-padding-x:               $input-padding-x !default;
 $form-floating-padding-y:               1rem !default;
@@ -1057,7 +1057,7 @@ $card-border-width:                 var(--#{$prefix}border-width) !default;
 $card-border-color:                 var(--#{$prefix}border-color-translucent) !default;
 $card-border-radius:                var(--#{$prefix}border-radius) !default;
 $card-box-shadow:                   null !default;
-$card-inner-border-radius:          subtract($card-border-radius, $card-border-width) !default;
+$card-inner-border-radius:          calc($card-border-radius - $card-border-width) !default;
 $card-cap-padding-y:                $card-spacer-y * .5 !default;
 $card-cap-padding-x:                $card-spacer-x !default;
 $card-cap-bg:                       rgba(var(--#{$prefix}body-color-rgb), .03) !default;
@@ -1079,7 +1079,7 @@ $accordion-bg:                            var(--#{$prefix}body-bg) !default;
 $accordion-border-width:                  var(--#{$prefix}border-width) !default;
 $accordion-border-color:                  var(--#{$prefix}border-color) !default;
 $accordion-border-radius:                 var(--#{$prefix}border-radius) !default;
-$accordion-inner-border-radius:           subtract($accordion-border-radius, $accordion-border-width) !default;
+$accordion-inner-border-radius:           calc($accordion-border-radius - $accordion-border-width) !default;
 
 $accordion-body-padding-y:                $accordion-padding-y !default;
 $accordion-body-padding-x:                $accordion-padding-x !default;
@@ -1221,7 +1221,7 @@ $modal-content-bg:                  var(--#{$prefix}body-bg) !default;
 $modal-content-border-color:        var(--#{$prefix}border-color-translucent) !default;
 $modal-content-border-width:        var(--#{$prefix}border-width) !default;
 $modal-content-border-radius:       var(--#{$prefix}border-radius-lg) !default;
-$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;
+$modal-content-inner-border-radius: calc($modal-content-border-radius - $modal-content-border-width) !default;
 $modal-content-box-shadow-xs:       var(--#{$prefix}box-shadow-sm) !default;
 $modal-content-box-shadow-sm-up:    var(--#{$prefix}box-shadow) !default;
 

diff --git a/scss/forms/_form-range.scss b/scss/forms/_form-range.scss
index 9e69a9ddacf650726ded62cf2ace21ce3c2e12a0..0a480c6e3088e68d669a1576ca8dd86f009afb19 100644 (file)
--- a/scss/forms/_form-range.scss
+++ b/scss/forms/_form-range.scss
@@ -14,7 +14,7 @@
 @layer forms {
   .form-range {
     width: 100%;
-    height: add($form-range-thumb-height, $form-range-thumb-focus-box-shadow-width * 2);
+    height: calc($form-range-thumb-height + ($form-range-thumb-focus-box-shadow-width * 2));
     padding: 0; // Need to reset padding
     appearance: none;
     background-color: transparent;

diff --git a/scss/forms/_labels.scss b/scss/forms/_labels.scss
index 376781331032416a1056a136d84e29ea68f44929..8cd9bad61278351bb20173d6bca8c813aff54b09 100644 (file)
--- a/scss/forms/_labels.scss
+++ b/scss/forms/_labels.scss
@@ -17,8 +17,8 @@
   // For use with horizontal and inline forms, when you need the label (or legend)
   // text to align with the form controls.
   .col-form-label {
-    padding-top: add($input-padding-y, $input-border-width);
-    padding-bottom: add($input-padding-y, $input-border-width);
+    padding-top: calc($input-padding-y + $input-border-width);
+    padding-bottom: calc($input-padding-y + $input-border-width);
     margin-bottom: 0; // Override the `<legend>` default
     @include font-size(inherit); // Override the `<legend>` default
     font-style: $form-label-font-style;
@@ -28,14 +28,14 @@
   }
 
   .col-form-label-lg {
-    padding-top: add($input-padding-y-lg, $input-border-width);
-    padding-bottom: add($input-padding-y-lg, $input-border-width);
+    padding-top: calc($input-padding-y-lg + $input-border-width);
+    padding-bottom: calc($input-padding-y-lg + $input-border-width);
     @include font-size($input-font-size-lg);
   }
 
   .col-form-label-sm {
-    padding-top: add($input-padding-y-sm, $input-border-width);
-    padding-bottom: add($input-padding-y-sm, $input-border-width);
+    padding-top: calc($input-padding-y-sm + $input-border-width);
+    padding-bottom: calc($input-padding-y-sm + $input-border-width);
     @include font-size($input-font-size-sm);
   }
 }

diff --git a/scss/forms/_validation.scss b/scss/forms/_validation.scss
index e8e7b6c802d44e0ee7011abf002719d749453a59..eff2f8c35a5e7507c27e3a869167521422727d36 100644 (file)
--- a/scss/forms/_validation.scss
+++ b/scss/forms/_validation.scss
@@ -132,7 +132,7 @@
     .form-control-color {
       @include form-validation-state-selector($state) {
         @if $enable-validation-icons {
-          width: add($form-color-width, $input-height-inner);
+          width: calc($form-color-width + $input-height-inner);
         }
       }
     }

diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
index 00b47641346375ed5bd8c26551358568605b71f9..56840af897043308e6819571d7ad2913d4f8660a 100644 (file)
--- a/scss/mixins/_forms.scss
+++ b/scss/mixins/_forms.scss
@@ -118,7 +118,7 @@
   .form-control-color {
     @include form-validation-state-selector($state) {
       @if $enable-validation-icons {
-        width: add($form-color-width, $input-height-inner);
+        width: calc($form-color-width + $input-height-inner);
       }
     }
   }

diff --git a/site/src/scss/_sidebar.scss b/site/src/scss/_sidebar.scss
index 598da3d5b23866343017030f896fbc2b9a20d3e6..fe445565343e98ca56e512a9f781f8316ae61bcc 100644 (file)
--- a/site/src/scss/_sidebar.scss
+++ b/site/src/scss/_sidebar.scss
@@ -5,7 +5,7 @@
     // Override collapse behaviors
     // stylelint-disable-next-line declaration-no-important
     display: block !important;
-    height: subtract(100vh, 6rem);
+    height: calc(100vh - 6rem);
     // Prevent focus styles to be cut off:
     padding-left: .25rem;
     margin-left: -.25rem;

diff --git a/site/src/scss/_toc.scss b/site/src/scss/_toc.scss
index 7b840ab7437b2b822e72b6d7db2be5d697a295ca..f9bb8a3e4015db808eb2d41ba4b3122f550beee4 100644 (file)
--- a/site/src/scss/_toc.scss
+++ b/site/src/scss/_toc.scss
@@ -9,7 +9,7 @@
     top: 5rem;
     right: 0;
     z-index: 2;
-    height: subtract(100vh, 7rem);
+    height: calc(100vh - 7rem);
     overflow-y: auto;
   }