chore(twbs#34051): Run sass-migrator division

rohrlaf · May 26, 2021 · b70c66e · b70c66e
1 parent 544d9ac
commit b70c66e
Show file tree

Hide file tree

Showing 16 changed files with 99 additions and 67 deletions.
diff --git a/scss/_card.scss b/scss/_card.scss
@@ -1,3 +1,5 @@
+@use "sass:math";
+
 //
 // Base styles
 //
@@ -55,7 +57,7 @@
 }
 
 .card-subtitle {
-  margin-top: -$card-title-spacer-y / 2;
+  margin-top: math.div(-$card-title-spacer-y, 2);
   margin-bottom: 0;
 }
 
@@ -106,9 +108,9 @@
 //
 
 .card-header-tabs {
-  margin-right: -$card-cap-padding-x / 2;
+  margin-right: math.div(-$card-cap-padding-x, 2);
   margin-bottom: -$card-cap-padding-y;
-  margin-left: -$card-cap-padding-x / 2;
+  margin-left: math.div(-$card-cap-padding-x, 2);
   border-bottom: 0;
 
   @if $nav-tabs-link-active-bg != $card-bg {
@@ -120,8 +122,8 @@
 }
 
 .card-header-pills {
-  margin-right: -$card-cap-padding-x / 2;
-  margin-left: -$card-cap-padding-x / 2;
+  margin-right: math.div(-$card-cap-padding-x, 2);
+  margin-left: math.div(-$card-cap-padding-x, 2);
 }
 
 // Card image

diff --git a/scss/_carousel.scss b/scss/_carousel.scss
@@ -1,3 +1,5 @@
+@use "sass:math";
+
 // Notes on the classes:
 //
 // 1. .carousel.pointer-event should ideally be pan-y (to allow for users to scroll vertically)
@@ -202,9 +204,9 @@
 
 .carousel-caption {
   position: absolute;
-  right: (100% - $carousel-caption-width) / 2;
+  right: math.div(100% - $carousel-caption-width, 2);
   bottom: $carousel-caption-spacer;
-  left: (100% - $carousel-caption-width) / 2;
+  left: math.div(100% - $carousel-caption-width, 2);
   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
@@ -1,3 +1,5 @@
+@use "sass:math";
+
 // Bootstrap functions
 //
 // Utility mixins and functions for evaluating source code across our variables, maps, and mixins.
@@ -123,7 +125,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, ($l1 + .05) / ($l2 + .05), ($l2 + .05) / ($l1 + .05));
+  @return if($l1 > $l2, math.div($l1 + .05, $l2 + .05), math.div($l2 + .05, $l1 + .05));
 }
 
 // Return WCAG2.0 relative luminance
@@ -137,7 +139,7 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
   );
 
   @each $name, $value in $rgb {
-    $value: if($value / 255 < .03928, $value / 255 / 12.92, nth($_luminance-list, $value + 1));
+    $value: if(math.div($value, 255) < .03928, math.div(math.div($value, 255), 12.92), nth($_luminance-list, $value + 1));
     $rgb: map-merge($rgb, ($name: $value));
   }
 

diff --git a/scss/_images.scss b/scss/_images.scss
@@ -1,3 +1,5 @@
+@use "sass:math";
+
 // Responsive images (ensure images don't scale beyond their parents)
 //
 // This is purposefully opt-in via an explicit class rather than being the default for all `<img>`s.
@@ -32,7 +34,7 @@
 }
 
 .figure-img {
-  margin-bottom: $spacer / 2;
+  margin-bottom: math.div($spacer, 2);
   line-height: 1;
 }
 

diff --git a/scss/_modal.scss b/scss/_modal.scss
@@ -1,3 +1,5 @@
+@use "sass:math";
+
 // .modal-open      - body class for killing the scroll
 // .modal           - container to scroll within
 // .modal-dialog    - positioning shell for the actual modal
@@ -110,8 +112,8 @@
   @include border-top-radius($modal-content-inner-border-radius);
 
   .btn-close {
-    padding: ($modal-header-padding-y / 2) ($modal-header-padding-x / 2);
-    margin: ($modal-header-padding-y / -2) ($modal-header-padding-x / -2) ($modal-header-padding-y / -2) auto;
+    padding: math.div($modal-header-padding-y, 2) math.div($modal-header-padding-x, 2);
+    margin: math.div($modal-header-padding-y, -2) math.div($modal-header-padding-x, -2) math.div($modal-header-padding-y, -2) auto;
   }
 }
 
@@ -138,15 +140,15 @@
   flex-shrink: 0;
   align-items: center; // vertically center
   justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
-  padding: $modal-inner-padding - $modal-footer-margin-between / 2;
+  padding: $modal-inner-padding - math.div($modal-footer-margin-between, 2);
   border-top: $modal-footer-border-width solid $modal-footer-border-color;
   @include border-bottom-radius($modal-content-inner-border-radius);
 
   // Place margin between footer elements
   // This solution is far from ideal because of the universal selector usage,
   // but is needed to fix https://github.com/twbs/bootstrap/issues/24800
   > * {
-    margin: $modal-footer-margin-between / 2;
+    margin: math.div($modal-footer-margin-between, 2);
   }
 }
 

diff --git a/scss/_offcanvas.scss b/scss/_offcanvas.scss
@@ -1,3 +1,5 @@
+@use "sass:math";
+
 .offcanvas {
   position: fixed;
   bottom: 0;
@@ -21,8 +23,8 @@
   padding: $offcanvas-padding-y $offcanvas-padding-x;
 
   .btn-close {
-    padding: ($offcanvas-padding-y / 2) ($offcanvas-padding-x / 2);
-    margin: ($offcanvas-padding-y / -2) ($offcanvas-padding-x / -2) ($offcanvas-padding-y / -2) auto;
+    padding: math.div($offcanvas-padding-y, 2) math.div($offcanvas-padding-x, 2);
+    margin: math.div($offcanvas-padding-y, -2) math.div($offcanvas-padding-x, -2) math.div($offcanvas-padding-y, -2) auto;
   }
 }
 

diff --git a/scss/_popover.scss b/scss/_popover.scss
@@ -1,3 +1,5 @@
+@use "sass:math";
+
 .popover {
   position: absolute;
   top: 0;
@@ -40,13 +42,13 @@
 
     &::before {
       bottom: 0;
-      border-width: $popover-arrow-height ($popover-arrow-width / 2) 0;
+      border-width: $popover-arrow-height math.div($popover-arrow-width, 2) 0;
       border-top-color: $popover-arrow-outer-color;
     }
 
     &::after {
       bottom: $popover-border-width;
-      border-width: $popover-arrow-height ($popover-arrow-width / 2) 0;
+      border-width: $popover-arrow-height math.div($popover-arrow-width, 2) 0;
       border-top-color: $popover-arrow-color;
     }
   }
@@ -60,13 +62,13 @@
 
     &::before {
       left: 0;
-      border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0;
+      border-width: math.div($popover-arrow-width, 2) $popover-arrow-height math.div($popover-arrow-width, 2) 0;
       border-right-color: $popover-arrow-outer-color;
     }
 
     &::after {
       left: $popover-border-width;
-      border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0;
+      border-width: math.div($popover-arrow-width, 2) $popover-arrow-height math.div($popover-arrow-width, 2) 0;
       border-right-color: $popover-arrow-color;
     }
   }
@@ -78,13 +80,13 @@
 
     &::before {
       top: 0;
-      border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2);
+      border-width: 0 math.div($popover-arrow-width, 2) $popover-arrow-height math.div($popover-arrow-width, 2);
       border-bottom-color: $popover-arrow-outer-color;
     }
 
     &::after {
       top: $popover-border-width;
-      border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2);
+      border-width: 0 math.div($popover-arrow-width, 2) $popover-arrow-height math.div($popover-arrow-width, 2);
       border-bottom-color: $popover-arrow-color;
     }
   }
@@ -96,7 +98,7 @@
     left: 50%;
     display: block;
     width: $popover-arrow-width;
-    margin-left: -$popover-arrow-width / 2;
+    margin-left: math.div(-$popover-arrow-width, 2);
     content: "";
     border-bottom: $popover-border-width solid $popover-header-bg;
   }
@@ -110,13 +112,13 @@
 
     &::before {
       right: 0;
-      border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height;
+      border-width: math.div($popover-arrow-width, 2) 0 math.div($popover-arrow-width, 2) $popover-arrow-height;
       border-left-color: $popover-arrow-outer-color;
     }
 
     &::after {
       right: $popover-border-width;
-      border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height;
+      border-width: math.div($popover-arrow-width, 2) 0 math.div($popover-arrow-width, 2) $popover-arrow-height;
       border-left-color: $popover-arrow-color;
     }
   }

diff --git a/scss/_toasts.scss b/scss/_toasts.scss
@@ -1,3 +1,5 @@
+@use "sass:math";
+
 .toast {
   width: $toast-max-width;
   max-width: 100%;
@@ -40,7 +42,7 @@
   @include border-top-radius(subtract($toast-border-radius, $toast-border-width));
 
   .btn-close {
-    margin-right: $toast-padding-x / -2;
+    margin-right: math.div($toast-padding-x, -2);
     margin-left: $toast-padding-x;
   }
 }

diff --git a/scss/_tooltip.scss b/scss/_tooltip.scss
@@ -1,3 +1,5 @@
+@use "sass:math";
+
 // Base class
 .tooltip {
   position: absolute;
@@ -37,7 +39,7 @@
 
     &::before {
       top: -1px;
-      border-width: $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
+      border-width: $tooltip-arrow-height math.div($tooltip-arrow-width, 2) 0;
       border-top-color: $tooltip-arrow-color;
     }
   }
@@ -53,7 +55,7 @@
 
     &::before {
       right: -1px;
-      border-width: ($tooltip-arrow-width / 2) $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
+      border-width: math.div($tooltip-arrow-width, 2) $tooltip-arrow-height math.div($tooltip-arrow-width, 2) 0;
       border-right-color: $tooltip-arrow-color;
     }
   }
@@ -67,7 +69,7 @@
 
     &::before {
       bottom: -1px;
-      border-width: 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
+      border-width: 0 math.div($tooltip-arrow-width, 2) $tooltip-arrow-height;
       border-bottom-color: $tooltip-arrow-color;
     }
   }
@@ -83,7 +85,7 @@
 
     &::before {
       left: -1px;
-      border-width: ($tooltip-arrow-width / 2) 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
+      border-width: math.div($tooltip-arrow-width, 2) 0 math.div($tooltip-arrow-width, 2) $tooltip-arrow-height;
       border-left-color: $tooltip-arrow-color;
     }
   }