From 850124125ff0c4663efa2fbd2021f47b1dfe92e9 Mon Sep 17 00:00:00 2001 From: Facchinetti Stefano <34067164+Gorlenah@users.noreply.github.com> Date: Tue, 24 Jan 2023 17:07:44 +0100 Subject: [PATCH] fix division warning Fix deprecation warning: Using / for division outside of calc() is deprecated --- assets/vendor/bootstrap/scss/_card.scss | 10 ++++---- assets/vendor/bootstrap/scss/_carousel.scss | 4 ++-- .../vendor/bootstrap/scss/_custom-forms.scss | 16 +++++++------ assets/vendor/bootstrap/scss/_forms.scss | 8 +++---- assets/vendor/bootstrap/scss/_functions.scss | 2 +- assets/vendor/bootstrap/scss/_images.scss | 2 +- assets/vendor/bootstrap/scss/_jumbotron.scss | 2 +- assets/vendor/bootstrap/scss/_modal.scss | 4 ++-- assets/vendor/bootstrap/scss/_popover.scss | 18 +++++++------- assets/vendor/bootstrap/scss/_tooltip.scss | 8 +++---- assets/vendor/bootstrap/scss/_variables.scss | 14 +++++------ .../vendor/bootstrap/scss/mixins/_forms.scss | 7 ++++-- .../scss/mixins/_grid-framework.scss | 4 ++-- .../vendor/bootstrap/scss/mixins/_grid.scss | 24 ++++++++++--------- .../bootstrap/scss/utilities/_embed.scss | 4 +++- assets/vendor/bootstrap/scss/vendor/_rfs.scss | 24 ++++++++++--------- 16 files changed, 81 insertions(+), 70 deletions(-) diff --git a/assets/vendor/bootstrap/scss/_card.scss b/assets/vendor/bootstrap/scss/_card.scss index faaa75ef7f..2fc0b9cc7b 100644 --- a/assets/vendor/bootstrap/scss/_card.scss +++ b/assets/vendor/bootstrap/scss/_card.scss @@ -58,7 +58,7 @@ } .card-subtitle { - margin-top: -$card-spacer-y / 2; + margin-top: -$card-spacer-y * 0.5; margin-bottom: 0; } @@ -109,15 +109,15 @@ // .card-header-tabs { - margin-right: -$card-spacer-x / 2; + margin-right: -$card-spacer-x * 0.5; margin-bottom: -$card-spacer-y; - margin-left: -$card-spacer-x / 2; + margin-left: -$card-spacer-x * 0.5; border-bottom: 0; } .card-header-pills { - margin-right: -$card-spacer-x / 2; - margin-left: -$card-spacer-x / 2; + margin-right: -$card-spacer-x * 0.5; + margin-left: -$card-spacer-x * 0.5; } // Card image diff --git a/assets/vendor/bootstrap/scss/_carousel.scss b/assets/vendor/bootstrap/scss/_carousel.scss index db30bed8b9..73ad279d29 100644 --- a/assets/vendor/bootstrap/scss/_carousel.scss +++ b/assets/vendor/bootstrap/scss/_carousel.scss @@ -186,9 +186,9 @@ .carousel-caption { position: absolute; - right: (100% - $carousel-caption-width) / 2; + right: (100% - $carousel-caption-width) * 0.5; bottom: 20px; - left: (100% - $carousel-caption-width) / 2; + left: (100% - $carousel-caption-width) * 0.5; z-index: 10; padding-top: 20px; padding-bottom: 20px; diff --git a/assets/vendor/bootstrap/scss/_custom-forms.scss b/assets/vendor/bootstrap/scss/_custom-forms.scss index 06725ff364..c2c7b4ad1c 100644 --- a/assets/vendor/bootstrap/scss/_custom-forms.scss +++ b/assets/vendor/bootstrap/scss/_custom-forms.scss @@ -7,6 +7,8 @@ // // Base class takes care of all the key behavioral aspects. +@use "sass:list"; + .custom-control { position: relative; z-index: 1; @@ -26,7 +28,7 @@ left: 0; z-index: -1; // Put the input behind the label so it doesn't overlay text width: $custom-control-indicator-size; - height: ($font-size-base * $line-height-base + $custom-control-indicator-size) / 2; + height: ($font-size-base * $line-height-base + $custom-control-indicator-size) * 0.5; opacity: 0; &:checked ~ .custom-control-label::before { @@ -83,7 +85,7 @@ // Background-color and (when enabled) gradient &::before { position: absolute; - top: ($font-size-base * $line-height-base - $custom-control-indicator-size) / 2; + top: ($font-size-base * $line-height-base - $custom-control-indicator-size) * 0.5; left: -($custom-control-gutter + $custom-control-indicator-size); display: block; width: $custom-control-indicator-size; @@ -98,13 +100,13 @@ // Foreground (icon) &::after { position: absolute; - top: ($font-size-base * $line-height-base - $custom-control-indicator-size) / 2; + top: ($font-size-base * $line-height-base - $custom-control-indicator-size) * 0.5; left: -($custom-control-gutter + $custom-control-indicator-size); display: block; width: $custom-control-indicator-size; height: $custom-control-indicator-size; content: ""; - background: 50% / #{$custom-control-indicator-bg-size} no-repeat; + background: list.slash(50%, $custom-control-indicator-bg-size) no-repeat; } } @@ -186,7 +188,7 @@ } &::after { - top: add(($font-size-base * $line-height-base - $custom-control-indicator-size) / 2, $custom-control-indicator-border-width * 2); + top: add(($font-size-base * $line-height-base - $custom-control-indicator-size) * 0.5, $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; @@ -406,7 +408,7 @@ &::-webkit-slider-thumb { width: $custom-range-thumb-width; height: $custom-range-thumb-height; - margin-top: ($custom-range-track-height - $custom-range-thumb-height) / 2; // Webkit specific + margin-top: ($custom-range-track-height - $custom-range-thumb-height) * 0.5; // Webkit specific @include gradient-bg($custom-range-thumb-bg); border: $custom-range-thumb-border; @include border-radius($custom-range-thumb-border-radius); @@ -481,7 +483,7 @@ cursor: $custom-range-track-cursor; background-color: transparent; border-color: transparent; - border-width: $custom-range-thumb-height / 2; + border-width: $custom-range-thumb-height * 0.5; @include box-shadow($custom-range-track-box-shadow); } diff --git a/assets/vendor/bootstrap/scss/_forms.scss b/assets/vendor/bootstrap/scss/_forms.scss index 66a4efe1d4..a8cc69c028 100644 --- a/assets/vendor/bootstrap/scss/_forms.scss +++ b/assets/vendor/bootstrap/scss/_forms.scss @@ -199,13 +199,13 @@ textarea.form-control { .form-row { display: flex; flex-wrap: wrap; - margin-right: -$form-grid-gutter-width / 2; - margin-left: -$form-grid-gutter-width / 2; + margin-right: -$form-grid-gutter-width * 0.5; + margin-left: -$form-grid-gutter-width * 0.5; > .col, > [class*="col-"] { - padding-right: $form-grid-gutter-width / 2; - padding-left: $form-grid-gutter-width / 2; + padding-right: $form-grid-gutter-width * 0.5; + padding-left: $form-grid-gutter-width * 0.5; } } diff --git a/assets/vendor/bootstrap/scss/_functions.scss b/assets/vendor/bootstrap/scss/_functions.scss index 9c06603150..f3c3b4d4ce 100644 --- a/assets/vendor/bootstrap/scss/_functions.scss +++ b/assets/vendor/bootstrap/scss/_functions.scss @@ -75,7 +75,7 @@ $g: green($color); $b: blue($color); - $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000; + $yiq: (($r * 299) + ($g * 587) + ($b * 114)) * 0.001; @if ($yiq >= $yiq-contrasted-threshold) { @return $dark; diff --git a/assets/vendor/bootstrap/scss/_images.scss b/assets/vendor/bootstrap/scss/_images.scss index b11b45a37b..02ad4c36f4 100644 --- a/assets/vendor/bootstrap/scss/_images.scss +++ b/assets/vendor/bootstrap/scss/_images.scss @@ -32,7 +32,7 @@ } .figure-img { - margin-bottom: $spacer / 2; + margin-bottom: $spacer * 0.5; line-height: 1; } diff --git a/assets/vendor/bootstrap/scss/_jumbotron.scss b/assets/vendor/bootstrap/scss/_jumbotron.scss index bcd7dcad99..8dc680fb11 100644 --- a/assets/vendor/bootstrap/scss/_jumbotron.scss +++ b/assets/vendor/bootstrap/scss/_jumbotron.scss @@ -1,5 +1,5 @@ .jumbotron { - padding: $jumbotron-padding ($jumbotron-padding / 2); + padding: $jumbotron-padding ($jumbotron-padding * 0.5); margin-bottom: $jumbotron-padding; color: $jumbotron-color; background-color: $jumbotron-bg; diff --git a/assets/vendor/bootstrap/scss/_modal.scss b/assets/vendor/bootstrap/scss/_modal.scss index e43c70fbb4..f36dd2fcd3 100644 --- a/assets/vendor/bootstrap/scss/_modal.scss +++ b/assets/vendor/bootstrap/scss/_modal.scss @@ -175,7 +175,7 @@ flex-wrap: wrap; 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 - $modal-footer-margin-between * 0.5; border-top: $modal-footer-border-width solid $modal-footer-border-color; @include border-bottom-radius($modal-content-inner-border-radius); @@ -183,7 +183,7 @@ // 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: $modal-footer-margin-between * 0.5; } } diff --git a/assets/vendor/bootstrap/scss/_popover.scss b/assets/vendor/bootstrap/scss/_popover.scss index 0ad76af3ee..0f4d3f7365 100644 --- a/assets/vendor/bootstrap/scss/_popover.scss +++ b/assets/vendor/bootstrap/scss/_popover.scss @@ -43,13 +43,13 @@ &::before { bottom: 0; - border-width: $popover-arrow-height ($popover-arrow-width / 2) 0; + border-width: $popover-arrow-height ($popover-arrow-width * 0.5) 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 ($popover-arrow-width * 0.5) 0; border-top-color: $popover-arrow-color; } } @@ -66,13 +66,13 @@ &::before { left: 0; - border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0; + border-width: ($popover-arrow-width * 0.5) $popover-arrow-height ($popover-arrow-width * 0.5) 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: ($popover-arrow-width * 0.5) $popover-arrow-height ($popover-arrow-width * 0.5) 0; border-right-color: $popover-arrow-color; } } @@ -86,13 +86,13 @@ &::before { top: 0; - border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2); + border-width: 0 ($popover-arrow-width * 0.5) $popover-arrow-height ($popover-arrow-width * 0.5); 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 ($popover-arrow-width * 0.5) $popover-arrow-height ($popover-arrow-width * 0.5); border-bottom-color: $popover-arrow-color; } } @@ -104,7 +104,7 @@ left: 50%; display: block; width: $popover-arrow-width; - margin-left: -$popover-arrow-width / 2; + margin-left: -$popover-arrow-width * 0.5; content: ""; border-bottom: $popover-border-width solid $popover-header-bg; } @@ -121,13 +121,13 @@ &::before { right: 0; - border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height; + border-width: ($popover-arrow-width * 0.5) 0 ($popover-arrow-width * 0.5) $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: ($popover-arrow-width * 0.5) 0 ($popover-arrow-width * 0.5) $popover-arrow-height; border-left-color: $popover-arrow-color; } } diff --git a/assets/vendor/bootstrap/scss/_tooltip.scss b/assets/vendor/bootstrap/scss/_tooltip.scss index 6b3aa62dd6..7ac8fafdb6 100644 --- a/assets/vendor/bootstrap/scss/_tooltip.scss +++ b/assets/vendor/bootstrap/scss/_tooltip.scss @@ -37,7 +37,7 @@ &::before { top: 0; - border-width: $tooltip-arrow-height ($tooltip-arrow-width / 2) 0; + border-width: $tooltip-arrow-height ($tooltip-arrow-width * 0.5) 0; border-top-color: $tooltip-arrow-color; } } @@ -53,7 +53,7 @@ &::before { right: 0; - border-width: ($tooltip-arrow-width / 2) $tooltip-arrow-height ($tooltip-arrow-width / 2) 0; + border-width: ($tooltip-arrow-width * 0.5) $tooltip-arrow-height ($tooltip-arrow-width * 0.5) 0; border-right-color: $tooltip-arrow-color; } } @@ -67,7 +67,7 @@ &::before { bottom: 0; - border-width: 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height; + border-width: 0 ($tooltip-arrow-width * 0.5) $tooltip-arrow-height; border-bottom-color: $tooltip-arrow-color; } } @@ -83,7 +83,7 @@ &::before { left: 0; - border-width: ($tooltip-arrow-width / 2) 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height; + border-width: ($tooltip-arrow-width * 0.5) 0 ($tooltip-arrow-width * 0.5) $tooltip-arrow-height; border-left-color: $tooltip-arrow-color; } } diff --git a/assets/vendor/bootstrap/scss/_variables.scss b/assets/vendor/bootstrap/scss/_variables.scss index 0a260b96fb..e0e64d3b29 100644 --- a/assets/vendor/bootstrap/scss/_variables.scss +++ b/assets/vendor/bootstrap/scss/_variables.scss @@ -299,7 +299,7 @@ $h4-font-size: $font-size-base * 1.5 !default; $h5-font-size: $font-size-base * 1.25 !default; $h6-font-size: $font-size-base !default; -$headings-margin-bottom: $spacer / 2 !default; +$headings-margin-bottom: $spacer * 0.5 !default; $headings-font-family: null !default; $headings-font-weight: 500 !default; $headings-line-height: 1.2 !default; @@ -495,7 +495,7 @@ $input-height-border: $input-border-width * 2 !default; $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 / 2) !default; +$input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y * 0.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-sm * 1em, add($input-padding-y-sm * 2, $input-height-border, false)) !default; @@ -565,7 +565,7 @@ $custom-radio-indicator-border-radius: 50% !default; $custom-radio-indicator-icon-checked: url("data:image/svg+xml,") !default; $custom-switch-width: $custom-control-indicator-size * 1.75 !default; -$custom-switch-indicator-border-radius: $custom-control-indicator-size / 2 !default; +$custom-switch-indicator-border-radius: $custom-control-indicator-size * 0.5 !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; @@ -710,12 +710,12 @@ $nav-pills-link-active-color: $component-active-color !default; $nav-pills-link-active-bg: $component-active-bg !default; $nav-divider-color: $gray-200 !default; -$nav-divider-margin-y: $spacer / 2 !default; +$nav-divider-margin-y: $spacer * 0.5 !default; // Navbar -$navbar-padding-y: $spacer / 2 !default; +$navbar-padding-y: $spacer * 0.5 !default; $navbar-padding-x: $spacer !default; $navbar-nav-link-padding-x: .5rem !default; @@ -724,7 +724,7 @@ $navbar-brand-font-size: $font-size-lg !default; // Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link $nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default; $navbar-brand-height: $navbar-brand-font-size * $line-height-base !default; -$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) / 2 !default; +$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) * 0.5 !default; $navbar-toggler-padding-y: .25rem !default; $navbar-toggler-padding-x: .75rem !default; @@ -844,7 +844,7 @@ $card-bg: $white !default; $card-img-overlay-padding: 1.25rem !default; -$card-group-margin: $grid-gutter-width / 2 !default; +$card-group-margin: $grid-gutter-width * 0.5 !default; $card-deck-margin: $card-group-margin !default; $card-columns-count: 3 !default; diff --git a/assets/vendor/bootstrap/scss/mixins/_forms.scss b/assets/vendor/bootstrap/scss/mixins/_forms.scss index a32163049c..1770ac5bcb 100644 --- a/assets/vendor/bootstrap/scss/mixins/_forms.scss +++ b/assets/vendor/bootstrap/scss/mixins/_forms.scss @@ -10,6 +10,9 @@ // // Example usage: change the default blue border and shadow to white for better // contrast against a dark gray background. +@use "sass:math"; +@use "sass:list"; + @mixin form-control-focus($ignore-warning: false) { &:focus { color: $input-focus-color; @@ -69,7 +72,7 @@ // Align tooltip to form elements .form-row > .col > &, .form-row > [class*="col-"] > & { - left: $form-grid-gutter-width / 2; + left: $form-grid-gutter-width * 0.5; } } @@ -115,7 +118,7 @@ @if $enable-validation-icons { padding-right: $custom-select-feedback-icon-padding-right; - background: $custom-select-background, $custom-select-bg escape-svg($icon) $custom-select-feedback-icon-position / $custom-select-feedback-icon-size no-repeat; + background: $custom-select-background, $custom-select-bg escape-svg($icon) list.slash($custom-select-feedback-icon-position, $custom-select-feedback-icon-size) no-repeat; } &:focus { diff --git a/assets/vendor/bootstrap/scss/mixins/_grid-framework.scss b/assets/vendor/bootstrap/scss/mixins/_grid-framework.scss index 6fc8e85612..a4b9765b08 100644 --- a/assets/vendor/bootstrap/scss/mixins/_grid-framework.scss +++ b/assets/vendor/bootstrap/scss/mixins/_grid-framework.scss @@ -8,8 +8,8 @@ %grid-column { position: relative; width: 100%; - padding-right: $gutter / 2; - padding-left: $gutter / 2; + padding-right: $gutter * 0.5; + padding-left: $gutter * 0.5; } @each $breakpoint in map-keys($breakpoints) { diff --git a/assets/vendor/bootstrap/scss/mixins/_grid.scss b/assets/vendor/bootstrap/scss/mixins/_grid.scss index 19babc09fb..0c5ca80753 100644 --- a/assets/vendor/bootstrap/scss/mixins/_grid.scss +++ b/assets/vendor/bootstrap/scss/mixins/_grid.scss @@ -2,10 +2,12 @@ // // Generate semantic grid columns with these mixins. +@use "sass:math"; + @mixin make-container($gutter: $grid-gutter-width) { width: 100%; - padding-right: $gutter / 2; - padding-left: $gutter / 2; + padding-right: $gutter * 0.5; + padding-left: $gutter * 0.5; margin-right: auto; margin-left: auto; } @@ -13,8 +15,8 @@ @mixin make-row($gutter: $grid-gutter-width) { display: flex; flex-wrap: wrap; - margin-right: -$gutter / 2; - margin-left: -$gutter / 2; + margin-right: -$gutter * 0.5; + margin-left: -$gutter * 0.5; } // For each breakpoint, define the maximum width of the container in a media query @@ -33,16 +35,16 @@ // always setting `width: 100%;`. This works because we use `flex` values // later on to override this initial width. width: 100%; - padding-right: $gutter / 2; - padding-left: $gutter / 2; + padding-right: $gutter * 0.5; + padding-left: $gutter * 0.5; } @mixin make-col($size, $columns: $grid-columns) { - flex: 0 0 percentage($size / $columns); + flex: 0 0 percentage(math.div($size, $columns)); // Add a `max-width` to ensure content within each column does not blow out // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari // do not appear to require this. - max-width: percentage($size / $columns); + max-width: percentage(math.div($size, $columns)); } @mixin make-col-auto() { @@ -52,7 +54,7 @@ } @mixin make-col-offset($size, $columns: $grid-columns) { - $num: $size / $columns; + $num: math.div($size, $columns); margin-left: if($num == 0, 0, percentage($num)); } @@ -63,7 +65,7 @@ // style grid. @mixin row-cols($count) { > * { - flex: 0 0 100% / $count; - max-width: 100% / $count; + flex: 0 0 math.div(100%, $count); + max-width: math.div(100%, $count); } } diff --git a/assets/vendor/bootstrap/scss/utilities/_embed.scss b/assets/vendor/bootstrap/scss/utilities/_embed.scss index 4497ac0400..2f6ba13a76 100644 --- a/assets/vendor/bootstrap/scss/utilities/_embed.scss +++ b/assets/vendor/bootstrap/scss/utilities/_embed.scss @@ -1,5 +1,7 @@ // Credit: Nicolas Gallagher and SUIT CSS. +@use "sass:math"; + .embed-responsive { position: relative; display: block; @@ -33,7 +35,7 @@ .embed-responsive-#{$embed-responsive-aspect-ratio-x}by#{$embed-responsive-aspect-ratio-y} { &::before { - padding-top: percentage($embed-responsive-aspect-ratio-y / $embed-responsive-aspect-ratio-x); + padding-top: percentage(math.div($embed-responsive-aspect-ratio-y, $embed-responsive-aspect-ratio-x)); } } } diff --git a/assets/vendor/bootstrap/scss/vendor/_rfs.scss b/assets/vendor/bootstrap/scss/vendor/_rfs.scss index 497e07eda9..1e3307ea8b 100644 --- a/assets/vendor/bootstrap/scss/vendor/_rfs.scss +++ b/assets/vendor/bootstrap/scss/vendor/_rfs.scss @@ -9,6 +9,8 @@ // Configuration // Base font size +@use "sass:math"; + $rfs-base-font-size: 1.25rem !default; $rfs-font-size-unit: rem !default; @@ -43,10 +45,10 @@ $rfs-base-font-size-unit: unit($rfs-base-font-size); // Remove px-unit from $rfs-base-font-size for calculations @if $rfs-base-font-size-unit == "px" { - $rfs-base-font-size: $rfs-base-font-size / ($rfs-base-font-size * 0 + 1); + $rfs-base-font-size: math.div($rfs-base-font-size, $rfs-base-font-size * 0 + 1); } @else if $rfs-base-font-size-unit == "rem" { - $rfs-base-font-size: $rfs-base-font-size / ($rfs-base-font-size * 0 + 1 / $rfs-rem-value); + $rfs-base-font-size: math.div($rfs-base-font-size, $rfs-base-font-size * 0 + math.div(1, $rfs-rem-value)); } // Cache $rfs-breakpoint unit to prevent multiple calls @@ -54,10 +56,10 @@ $rfs-breakpoint-unit-cache: unit($rfs-breakpoint); // Remove unit from $rfs-breakpoint for calculations @if $rfs-breakpoint-unit-cache == "px" { - $rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1); + $rfs-breakpoint: math.div($rfs-breakpoint, $rfs-breakpoint * 0 + 1); } @else if $rfs-breakpoint-unit-cache == "rem" or $rfs-breakpoint-unit-cache == "em" { - $rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1 / $rfs-rem-value); + $rfs-breakpoint: math.div($rfs-breakpoint, $rfs-breakpoint * 0 + math.div(1, $rfs-rem-value)); } // Responsive font-size mixin @@ -79,15 +81,15 @@ $rfs-breakpoint-unit-cache: unit($rfs-breakpoint); // Remove px-unit from $fs for calculations @if $fs-unit == "px" { - $fs: $fs / ($fs * 0 + 1); + $fs: math.div($fs, $fs * 0 + 1); } @else if $fs-unit == "rem" { - $fs: $fs / ($fs * 0 + 1 / $rfs-rem-value); + $fs: math.div($fs, $fs * 0 + math.div(1, $rfs-rem-value)); } // Set default font-size @if $rfs-font-size-unit == rem { - $rfs-static: #{$fs / $rfs-rem-value}rem#{$rfs-suffix}; + $rfs-static: #{math.div($fs, $rfs-rem-value)}rem#{$rfs-suffix}; } @else if $rfs-font-size-unit == px { $rfs-static: #{$fs}px#{$rfs-suffix}; @@ -103,20 +105,20 @@ $rfs-breakpoint-unit-cache: unit($rfs-breakpoint); $variable-unit: null; // Calculate minimum font-size for given font-size - $fs-min: $rfs-base-font-size + ($fs - $rfs-base-font-size) / $rfs-factor; + $fs-min: $rfs-base-font-size + math.div($fs - $rfs-base-font-size, $rfs-factor); // Calculate difference between given font-size and minimum font-size for given font-size $fs-diff: $fs - $fs-min; // Base font-size formatting // No need to check if the unit is valid, because we did that before - $min-width: if($rfs-font-size-unit == rem, #{$fs-min / $rfs-rem-value}rem, #{$fs-min}px); + $min-width: if($rfs-font-size-unit == rem, #{math.div($fs-min, $rfs-rem-value)}rem, #{$fs-min}px); // If two-dimensional, use smallest of screen width and height $variable-unit: if($rfs-two-dimensional, vmin, vw); // Calculate the variable width between 0 and $rfs-breakpoint - $variable-width: #{$fs-diff * 100 / $rfs-breakpoint}#{$variable-unit}; + $variable-width: #{math.div($fs-diff * 100, $rfs-breakpoint)}#{$variable-unit}; // Set the calculated font-size. $rfs-fluid: calc(#{$min-width} + #{$variable-width}) #{$rfs-suffix}; @@ -132,7 +134,7 @@ $rfs-breakpoint-unit-cache: unit($rfs-breakpoint); // RFS breakpoint formatting @if $rfs-breakpoint-unit == em or $rfs-breakpoint-unit == rem { - $mq-value: #{$rfs-breakpoint / $rfs-rem-value}#{$rfs-breakpoint-unit}; + $mq-value: #{math.div($rfs-breakpoint, $rfs-rem-value)}#{$rfs-breakpoint-unit}; } @else if $rfs-breakpoint-unit == px { $mq-value: #{$rfs-breakpoint}px;