Fix/divide (#3362)

* Use custom divide function

* Add docs spacing table styles

* Update changelog

6 files changed, 51 insertions, 30 deletions

diff --git a/sass/components/level.sass b/sass/components/level.sass
index 0133ebf7..6793ae06 100644
--- a/sass/components/level.sass
+++ b/sass/components/level.sass
@@ -1,6 +1,6 @@
 @import "../utilities/mixins"
 
-$level-item-spacing: ($block-spacing / 2) !default
+$level-item-spacing: ($block-spacing * 0.5) !default
 
 .level
   @extend %block
diff --git a/sass/elements/button.sass b/sass/elements/button.sass
index ca3bc3dc..63f822bc 100644
--- a/sass/elements/button.sass
+++ b/sass/elements/button.sass
@@ -84,14 +84,14 @@ $button-colors: $colors !default
       height: 1.5em
       width: 1.5em
     &:first-child:not(:last-child)
-      +ltr-property("margin", calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width}), false)
-      +ltr-property("margin", $button-padding-horizontal / 4)
+      +ltr-property("margin", calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width}), false)
+      +ltr-property("margin", $button-padding-horizontal * 0.25)
     &:last-child:not(:first-child)
-      +ltr-property("margin", $button-padding-horizontal / 4, false)
-      +ltr-property("margin", calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width}))
+      +ltr-property("margin", $button-padding-horizontal * 0.25, false)
+      +ltr-property("margin", calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width}))
     &:first-child:last-child
-      margin-left: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width})
-      margin-right: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width})
+      margin-left: calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width})
+      margin-right: calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width})
   // States
   &:hover,
   &.is-hovered
diff --git a/sass/grid/columns.sass b/sass/grid/columns.sass
index 2c6c47c5..e66112b5 100644
--- a/sass/grid/columns.sass
+++ b/sass/grid/columns.sass
@@ -62,9 +62,9 @@ $column-gap: 0.75rem !default
   @for $i from 0 through 12
     .columns.is-mobile > &.is-#{$i}
       flex: none
-      width: percentage($i / 12)
+      width: percentage(divide($i, 12))
     .columns.is-mobile > &.is-offset-#{$i}
-      +ltr-property("margin", percentage($i / 12), false)
+      +ltr-property("margin", percentage(divide($i, 12)), false)
   +mobile
     &.is-narrow-mobile
       flex: none
@@ -120,9 +120,9 @@ $column-gap: 0.75rem !default
     @for $i from 0 through 12
       &.is-#{$i}-mobile
         flex: none
-        width: percentage($i / 12)
+        width: percentage(divide($i, 12))
       &.is-offset-#{$i}-mobile
-        +ltr-property("margin", percentage($i / 12), false)
+        +ltr-property("margin", percentage(divide($i, 12)), false)
   +tablet
     &.is-narrow,
     &.is-narrow-tablet
@@ -199,10 +199,10 @@ $column-gap: 0.75rem !default
       &.is-#{$i},
       &.is-#{$i}-tablet
         flex: none
-        width: percentage($i / 12)
+        width: percentage(divide($i, 12))
       &.is-offset-#{$i},
       &.is-offset-#{$i}-tablet
-        +ltr-property("margin", percentage($i / 12), false)
+        +ltr-property("margin", percentage(divide($i, 12)), false)
   +touch
     &.is-narrow-touch
       flex: none
@@ -258,9 +258,9 @@ $column-gap: 0.75rem !default
     @for $i from 0 through 12
       &.is-#{$i}-touch
         flex: none
-        width: percentage($i / 12)
+        width: percentage(divide($i, 12))
       &.is-offset-#{$i}-touch
-        +ltr-property("margin", percentage($i / 12), false)
+        +ltr-property("margin", percentage(divide($i, 12)), false)
   +desktop
     &.is-narrow-desktop
       flex: none
@@ -316,9 +316,9 @@ $column-gap: 0.75rem !default
     @for $i from 0 through 12
       &.is-#{$i}-desktop
         flex: none
-        width: percentage($i / 12)
+        width: percentage(divide($i, 12))
       &.is-offset-#{$i}-desktop
-        +ltr-property("margin", percentage($i / 12), false)
+        +ltr-property("margin", percentage(divide($i, 12)), false)
   +widescreen
     &.is-narrow-widescreen
       flex: none
@@ -374,9 +374,9 @@ $column-gap: 0.75rem !default
     @for $i from 0 through 12
       &.is-#{$i}-widescreen
         flex: none
-        width: percentage($i / 12)
+        width: percentage(divide($i, 12))
       &.is-offset-#{$i}-widescreen
-        +ltr-property("margin", percentage($i / 12), false)
+        +ltr-property("margin", percentage(divide($i, 12)), false)
   +fullhd
     &.is-narrow-fullhd
       flex: none
@@ -432,9 +432,9 @@ $column-gap: 0.75rem !default
     @for $i from 0 through 12
       &.is-#{$i}-fullhd
         flex: none
-        width: percentage($i / 12)
+        width: percentage(divide($i, 12))
       &.is-offset-#{$i}-fullhd
-        +ltr-property("margin", percentage($i / 12), false)
+        +ltr-property("margin", percentage(divide($i, 12)), false)
 
 .columns
   +ltr-property("margin", (-$column-gap), false)
diff --git a/sass/grid/tiles.sass b/sass/grid/tiles.sass
index ebd136f6..d22d738d 100644
--- a/sass/grid/tiles.sass
+++ b/sass/grid/tiles.sass
@@ -33,4 +33,4 @@ $tile-spacing: 0.75rem !default
     @for $i from 1 through 12
       &.is-#{$i}
         flex: none
-        width: ($i / 12) * 100%
+        width: (divide($i, 12)) * 100%
diff --git a/sass/utilities/functions.sass b/sass/utilities/functions.sass
index 270121f6..c039b45e 100644
--- a/sass/utilities/functions.sass
+++ b/sass/utilities/functions.sass
@@ -58,7 +58,7 @@
       $value: $value * $number
   @else if $exp < 0
     @for $i from 1 through -$exp
-      $value: $value / $number
+      $value: divide($value, $number)
   @return $value
 
 @function colorLuminance($color)
@@ -67,11 +67,11 @@
   $color-rgb: ('red': red($color),'green': green($color),'blue': blue($color))
   @each $name, $value in $color-rgb
     $adjusted: 0
-    $value: $value / 255
+    $value: divide($value, 255)
     @if $value < 0.03928
-      $value: $value / 12.92
+      $value: divide($value, 12.92)
     @else
-      $value: ($value + .055) / 1.055
+      $value: divide(($value + .055), 1.055)
       $value: powerNumber($value, 2)
     $color-rgb: map-merge($color-rgb, ($name: $value))
   @return (map-get($color-rgb, 'red') * .2126) + (map-get($color-rgb, 'green') * .7152) + (map-get($color-rgb, 'blue') * .0722)
@@ -113,3 +113,24 @@
   @if type-of($color) != 'color'
     @return $color
   @return lighten($color, $amount)
+
+// Custom divide function by @mdo from https://github.com/twbs/bootstrap/pull/34245
+// Replaces old slash division deprecated in Dart Sass
+@function divide($dividend, $divisor, $precision: 10)
+  $sign: if($dividend > 0 and $divisor > 0, 1, -1)
+  $dividend: abs($dividend)
+  $divisor: abs($divisor)
+  $quotient: 0
+  $remainder: $dividend
+  @if $dividend == 0
+    @return 0
+  @if $divisor == 0
+    @error "Cannot divide by 0"
+  @if $divisor == 1
+    @return $dividend
+  @while $remainder >= $divisor
+    $quotient: $quotient + 1
+    $remainder: $remainder - $divisor
+  @if $remainder > 0 and $precision > 0
+    $remainder: divide($remainder * 10, $divisor, $precision - 1) * .1
+  @return ($quotient + $remainder) * $sign
diff --git a/sass/utilities/mixins.sass b/sass/utilities/mixins.sass
index 4a3ecc42..e525438b 100644
--- a/sass/utilities/mixins.sass
+++ b/sass/utilities/mixins.sass
@@ -9,11 +9,11 @@
 =center($width, $height: 0)
   position: absolute
   @if $height != 0
-    left: calc(50% - (#{$width} / 2))
-    top: calc(50% - (#{$height} / 2))
+    left: calc(50% - (#{$width} * 0.5))
+    top: calc(50% - (#{$height} * 0.5))
   @else
-    left: calc(50% - (#{$width} / 2))
-    top: calc(50% - (#{$width} / 2))
+    left: calc(50% - (#{$width} * 0.5))
+    top: calc(50% - (#{$width} * 0.5))
 
 =fa($size, $dimensions)
   display: inline-block