fix(sass): update depreciated division on dart sass

Author: theo-stocchetti

package-lock.json

@@ -1,4 +1,5 @@
-$level-item-spacing: ($block-spacing / 2) !default
+@use "sass:math"
+$level-item-spacing: math.div($block-spacing, 2) !default
 
 .level
   @extend %block

src/sass/sass/components/level.sass

@@ -1,3 +1,4 @@
+@use "sass:math"
 $button-color: $text-strong !default
 $button-background-color: $scheme-main !default
 $button-family: false !default
@@ -73,14 +74,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(#{math.div(1, 2) * $button-padding-horizontal} - #{$button-border-width}), false)
+      +ltr-property("margin", math.div($button-padding-horizontal, 4))
     &: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", math.div($button-padding-horizontal, 4), false)
+      +ltr-property("margin", calc(#{math.div(1, 2) * $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(#{math.div(1, 2) * $button-padding-horizontal} - #{$button-border-width})
+      margin-right: calc(#{math.div(1, 2) * $button-padding-horizontal} - #{$button-border-width})
   // States
   &:hover,
   &.is-hovered

src/sass/sass/elements/button.sass

@@ -1,3 +1,4 @@
+@use "sass:math"
 $column-gap: 0.75rem !default
 
 .column
@@ -59,9 +60,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(math.div($i, 12))
     .columns.is-mobile > &.is-offset-#{$i}
-      margin-left: percentage($i / 12)
+      margin-left: percentage(math.div($i, 12))
   +mobile
     &.is-narrow-mobile
       flex: none
@@ -116,9 +117,9 @@ $column-gap: 0.75rem !default
     @for $i from 0 through 12
       &.is-#{$i}-mobile
         flex: none
-        width: percentage($i / 12)
+        width: percentage(math.div($i, 12))
       &.is-offset-#{$i}-mobile
-        margin-left: percentage($i / 12)
+        margin-left: percentage(math.div($i, 12))
   +tablet
     &.is-narrow,
     &.is-narrow-tablet
@@ -194,10 +195,10 @@ $column-gap: 0.75rem !default
       &.is-#{$i},
       &.is-#{$i}-tablet
         flex: none
-        width: percentage($i / 12)
+        width: percentage(math.div($i, 12))
       &.is-offset-#{$i},
       &.is-offset-#{$i}-tablet
-        margin-left: percentage($i / 12)
+        margin-left: percentage(math.div($i, 12))
   +touch
     &.is-narrow-touch
       flex: none
@@ -252,9 +253,9 @@ $column-gap: 0.75rem !default
     @for $i from 0 through 12
       &.is-#{$i}-touch
         flex: none
-        width: percentage($i / 12)
+        width: percentage(math.div($i, 12))
       &.is-offset-#{$i}-touch
-        margin-left: percentage($i / 12)
+        margin-left: percentage(math.div($i, 12))
   +desktop
     &.is-narrow-desktop
       flex: none
@@ -309,9 +310,9 @@ $column-gap: 0.75rem !default
     @for $i from 0 through 12
       &.is-#{$i}-desktop
         flex: none
-        width: percentage($i / 12)
+        width: percentage(math.div($i, 12))
       &.is-offset-#{$i}-desktop
-        margin-left: percentage($i / 12)
+        margin-left: percentage(math.div($i, 12))
   +widescreen
     &.is-narrow-widescreen
       flex: none
@@ -366,9 +367,9 @@ $column-gap: 0.75rem !default
     @for $i from 0 through 12
       &.is-#{$i}-widescreen
         flex: none
-        width: percentage($i / 12)
+        width: percentage(math.div($i, 12))
       &.is-offset-#{$i}-widescreen
-        margin-left: percentage($i / 12)
+        margin-left: percentage(math.div($i, 12))
   +fullhd
     &.is-narrow-fullhd
       flex: none
@@ -423,9 +424,9 @@ $column-gap: 0.75rem !default
     @for $i from 0 through 12
       &.is-#{$i}-fullhd
         flex: none
-        width: percentage($i / 12)
+        width: percentage(math.div($i, 12))
       &.is-offset-#{$i}-fullhd
-        margin-left: percentage($i / 12)
+        margin-left: percentage(math.div($i, 12))
 
 .columns
   margin-left: (-$column-gap)

src/sass/sass/grid/columns.sass

@@ -1,3 +1,4 @@
+@use "sass:math"
 $tile-spacing: 0.75rem !default
 
 .tile
@@ -31,4 +32,4 @@ $tile-spacing: 0.75rem !default
     @for $i from 1 through 12
       &.is-#{$i}
         flex: none
-        width: ($i / 12) * 100%
+        width: math.div($i, 12) * 100%

src/sass/sass/grid/tiles.sass

@@ -1,3 +1,4 @@
+@use "sass:math"
 @function mergeColorMaps($bulma-colors, $custom-colors)
   // We return at least Bulma's hard-coded colors
   $merged-colors: $bulma-colors
@@ -67,11 +68,11 @@
   $color-rgb: ('red': red($color),'green': green($color),'blue': blue($color))
   @each $name, $value in $color-rgb
     $adjusted: 0
-    $value: $value / 255
+    $value: math.div($value, 255)
     @if $value < 0.03928
-      $value: $value / 12.92
+      $value: math.div($value, 12.92)
     @else
-      $value: ($value + .055) / 1.055
+      $value: math.div(($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)