Convert v4-dev calc() left overs to add/subtract functions

diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss
index 8b3a74bc0b6027d3a82c20f33d36d7ff15ef75d2..7df1688fec9c2c29f6e2223e14583e82fecc0bc3 100644 (file)
--- a/scss/_custom-forms.scss
+++ b/scss/_custom-forms.scss
@@ -183,8 +183,8 @@
     }
 
     &::after {
-      top: calc(#{(($font-size-base * $line-height-base - $custom-control-indicator-size) / 2)} + #{$custom-control-indicator-border-width * 2});
-      left: calc(#{-($custom-switch-width + $custom-control-gutter)} + #{$custom-control-indicator-border-width * 2});
+      top: add(($font-size-base * $line-height-base - $custom-control-indicator-size) / 2, $custom-control-indicator-border-width * 2);
+      left: add(-($custom-switch-width + $custom-control-gutter), $custom-control-indicator-border-width * 2);
       width: $custom-switch-indicator-size;
       height: $custom-switch-indicator-size;
       background-color: $custom-control-indicator-border-color;
@@ -378,7 +378,7 @@
 
 .custom-range {
   width: 100%;
-  height: calc(#{$custom-range-thumb-height} + #{$custom-range-thumb-focus-box-shadow-width * 2});
+  height: add($custom-range-thumb-height, $custom-range-thumb-focus-box-shadow-width * 2);
   padding: 0; // Need to reset padding
   background-color: transparent;
   appearance: none;

diff --git a/scss/_forms.scss b/scss/_forms.scss
index 7a9a653e4553fae1924cb22006631c392fbc85f6..f91789d656289bb8fcefac54ad6446e7a7e7e7f7 100644 (file)
--- a/scss/_forms.scss
+++ b/scss/_forms.scss
@@ -86,23 +86,23 @@ select.form-control {
 // 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: calc(#{$input-padding-y} + #{$input-border-width});
-  padding-bottom: calc(#{$input-padding-y} + #{$input-border-width});
+  padding-top: add($input-padding-y, $input-border-width);
+  padding-bottom: add($input-padding-y, $input-border-width);
   margin-bottom: 0; // Override the `<label>/<legend>` default
   @include font-size(inherit); // Override the `<legend>` default
   line-height: $input-line-height;
 }
 
 .col-form-label-lg {
-  padding-top: calc(#{$input-padding-y-lg} + #{$input-border-width});
-  padding-bottom: calc(#{$input-padding-y-lg} + #{$input-border-width});
+  padding-top: add($input-padding-y-lg, $input-border-width);
+  padding-bottom: add($input-padding-y-lg, $input-border-width);
   @include font-size($input-font-size-lg);
   line-height: $input-line-height-lg;
 }
 
 .col-form-label-sm {
-  padding-top: calc(#{$input-padding-y-sm} + #{$input-border-width});
-  padding-bottom: calc(#{$input-padding-y-sm} + #{$input-border-width});
+  padding-top: add($input-padding-y-sm, $input-border-width);
+  padding-bottom: add($input-padding-y-sm, $input-border-width);
   @include font-size($input-font-size-sm);
   line-height: $input-line-height-sm;
 }

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 8be63c673391a50b4ad906824e9bd26dc82bba1f..eabe960df895c106dcdf0a3394bc80f8624e24a7 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -567,7 +567,7 @@ $custom-radio-indicator-icon-checked:           url("data:image/svg+xml,<svg xml
 
 $custom-switch-width:                           $custom-control-indicator-size * 1.75 !default;
 $custom-switch-indicator-border-radius:         $custom-control-indicator-size / 2 !default;
-$custom-switch-indicator-size:                  calc(#{$custom-control-indicator-size} - #{$custom-control-indicator-border-width * 4}) !default;
+$custom-switch-indicator-size:                  subtract($custom-control-indicator-size, $custom-control-indicator-border-width * 4) !default;
 
 $custom-select-padding-y:           $input-padding-y !default;
 $custom-select-padding-x:           $input-padding-x !default;
@@ -586,7 +586,7 @@ $custom-select-indicator-color:     $gray-800 !default;
 $custom-select-indicator:           url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'><path fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>") !default;
 $custom-select-background:          escape-svg($custom-select-indicator) no-repeat right $custom-select-padding-x center / $custom-select-bg-size !default; // Used so we can have multiple background elements (e.g., arrow and feedback icon)
 
-$custom-select-feedback-icon-padding-right: calc((1em + #{2 * $custom-select-padding-y}) * 3 / 4 + #{$custom-select-padding-x + $custom-select-indicator-padding}) !default;
+$custom-select-feedback-icon-padding-right: add(1em * .75, (2 * $custom-select-padding-y * .75) + $custom-select-padding-x + $custom-select-indicator-padding) !default;
 $custom-select-feedback-icon-position:      center right ($custom-select-padding-x + $custom-select-indicator-padding) !default;
 $custom-select-feedback-icon-size:          $input-height-inner-half $input-height-inner-half !default;
 

diff --git a/site/docs/4.3/assets/scss/_sidebar.scss b/site/docs/4.3/assets/scss/_sidebar.scss
index b302b22fea5cc69a436123c38a7bd5ba5fc13cbb..e5e04be746349f4c4b6375bf0ba70c37866da712 100644 (file)
--- a/site/docs/4.3/assets/scss/_sidebar.scss
+++ b/site/docs/4.3/assets/scss/_sidebar.scss
@@ -8,7 +8,7 @@
   @supports (position: sticky) {
     position: sticky;
     top: 4rem;
-    height: calc(100vh - 4rem);
+    height: subtract(100vh, 4rem);
     overflow-y: auto;
   }
   order: 2;
@@ -55,7 +55,7 @@
       position: sticky;
       top: 4rem;
       z-index: 1000;
-      height: calc(100vh - 4rem);
+      height: subtract(100vh, 4rem);
     }
     border-right: 1px solid rgba(0, 0, 0, .1);
   }
@@ -73,7 +73,7 @@
 
   @include media-breakpoint-up(md) {
     @supports (position: sticky) {
-      max-height: calc(100vh - 9rem);
+      max-height: subtract(100vh, 9rem);
       overflow-y: auto;
     }
   }