From 968b5fb91794128561fd413f5ea10b468e687f68 Mon Sep 17 00:00:00 2001 From: Bill Date: Sun, 5 Sep 2021 19:04:03 -0400 Subject: [PATCH] Fix scss division --- src/assets/styles/bootstrap/_card.scss | 10 +++--- src/assets/styles/bootstrap/_carousel.scss | 4 +-- src/assets/styles/bootstrap/_functions.scss | 6 ++-- src/assets/styles/bootstrap/_images.scss | 2 +- src/assets/styles/bootstrap/_modal.scss | 10 +++--- src/assets/styles/bootstrap/_offcanvas.scss | 6 ++-- src/assets/styles/bootstrap/_popover.scss | 18 +++++----- src/assets/styles/bootstrap/_toasts.scss | 4 ++- src/assets/styles/bootstrap/_tooltip.scss | 8 ++--- src/assets/styles/bootstrap/_variables.scss | 34 +++++++++---------- .../styles/bootstrap/forms/_form-check.scss | 2 +- .../styles/bootstrap/forms/_form-range.scss | 2 +- src/assets/styles/bootstrap/mixins/_grid.scss | 8 +++-- src/assets/styles/bootstrap/vendor/_rfs.scss | 26 +++++++------- src/assets/styles/fontawesome/_larger.scss | 6 ++-- src/assets/styles/fontawesome/_list.scss | 2 +- src/assets/styles/fontawesome/_variables.scss | 4 ++- 17 files changed, 84 insertions(+), 68 deletions(-) diff --git a/src/assets/styles/bootstrap/_card.scss b/src/assets/styles/bootstrap/_card.scss index e3314219..b9a0a81f 100644 --- a/src/assets/styles/bootstrap/_card.scss +++ b/src/assets/styles/bootstrap/_card.scss @@ -55,7 +55,7 @@ } .card-subtitle { - margin-top: -$card-title-spacer-y / 2; + margin-top: -$card-title-spacer-y * 0.5; margin-bottom: 0; } @@ -106,9 +106,9 @@ // .card-header-tabs { - margin-right: -$card-cap-padding-x / 2; + margin-right: -$card-cap-padding-x * 0.5; margin-bottom: -$card-cap-padding-y; - margin-left: -$card-cap-padding-x / 2; + margin-left: -$card-cap-padding-x * 0.5; border-bottom: 0; @if $nav-tabs-link-active-bg != $card-bg { @@ -120,8 +120,8 @@ } .card-header-pills { - margin-right: -$card-cap-padding-x / 2; - margin-left: -$card-cap-padding-x / 2; + margin-right: -$card-cap-padding-x * 0.5; + margin-left: -$card-cap-padding-x * 0.5; } // Card image diff --git a/src/assets/styles/bootstrap/_carousel.scss b/src/assets/styles/bootstrap/_carousel.scss index d389c304..52aefb4e 100644 --- a/src/assets/styles/bootstrap/_carousel.scss +++ b/src/assets/styles/bootstrap/_carousel.scss @@ -202,9 +202,9 @@ .carousel-caption { position: absolute; - right: (100% - $carousel-caption-width) / 2; + right: (100% - $carousel-caption-width) * 0.5; bottom: $carousel-caption-spacer; - left: (100% - $carousel-caption-width) / 2; + left: (100% - $carousel-caption-width) * 0.5; padding-top: $carousel-caption-padding-y; padding-bottom: $carousel-caption-padding-y; color: $carousel-caption-color; diff --git a/src/assets/styles/bootstrap/_functions.scss b/src/assets/styles/bootstrap/_functions.scss index 29114fc8..bd31abe9 100644 --- a/src/assets/styles/bootstrap/_functions.scss +++ b/src/assets/styles/bootstrap/_functions.scss @@ -4,6 +4,8 @@ // Ascending // Used to evaluate Sass maps like our grid breakpoints. +@use "sass:math"; + @mixin _assert-ascending($map, $map-name) { $prev-key: null; $prev-num: null; @@ -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/src/assets/styles/bootstrap/_images.scss b/src/assets/styles/bootstrap/_images.scss index b11b45a3..02ad4c36 100644 --- a/src/assets/styles/bootstrap/_images.scss +++ b/src/assets/styles/bootstrap/_images.scss @@ -32,7 +32,7 @@ } .figure-img { - margin-bottom: $spacer / 2; + margin-bottom: $spacer * 0.5; line-height: 1; } diff --git a/src/assets/styles/bootstrap/_modal.scss b/src/assets/styles/bootstrap/_modal.scss index 6dd4dd32..2958e571 100644 --- a/src/assets/styles/bootstrap/_modal.scss +++ b/src/assets/styles/bootstrap/_modal.scss @@ -4,6 +4,8 @@ // .modal-content - actual modal w/ bg and corners and stuff +@use "sass:math"; + .modal-open { // Kill the scroll on the body overflow: hidden; @@ -119,8 +121,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: ($modal-header-padding-y * 0.5) ($modal-header-padding-x * 0.5); + margin: math.div($modal-header-padding-y, -2) math.div($modal-header-padding-x, -2) math.div($modal-header-padding-y, -2) auto; } } @@ -147,7 +149,7 @@ 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 - $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); @@ -155,7 +157,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/src/assets/styles/bootstrap/_offcanvas.scss b/src/assets/styles/bootstrap/_offcanvas.scss index 1eeb9896..00a60528 100644 --- a/src/assets/styles/bootstrap/_offcanvas.scss +++ b/src/assets/styles/bootstrap/_offcanvas.scss @@ -1,3 +1,5 @@ +@use "sass:math"; + .offcanvas { position: fixed; bottom: 0; @@ -20,8 +22,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: ($offcanvas-padding-y * 0.5) ($offcanvas-padding-x * 0.5); + margin: math.div($offcanvas-padding-y, -2) math.div($offcanvas-padding-x, -2) math.div($offcanvas-padding-y, -2) auto; } } diff --git a/src/assets/styles/bootstrap/_popover.scss b/src/assets/styles/bootstrap/_popover.scss index a55555e2..12f1a943 100644 --- a/src/assets/styles/bootstrap/_popover.scss +++ b/src/assets/styles/bootstrap/_popover.scss @@ -40,13 +40,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; } } @@ -60,13 +60,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; } } @@ -78,13 +78,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; } } @@ -96,7 +96,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; } @@ -110,13 +110,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/src/assets/styles/bootstrap/_toasts.scss b/src/assets/styles/bootstrap/_toasts.scss index 5c533d7f..93122c54 100644 --- a/src/assets/styles/bootstrap/_toasts.scss +++ b/src/assets/styles/bootstrap/_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/src/assets/styles/bootstrap/_tooltip.scss b/src/assets/styles/bootstrap/_tooltip.scss index 2993bf7d..a175e707 100644 --- a/src/assets/styles/bootstrap/_tooltip.scss +++ b/src/assets/styles/bootstrap/_tooltip.scss @@ -37,7 +37,7 @@ &::before { top: -1px; - 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: -1px; - 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: -1px; - 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: -1px; - 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/src/assets/styles/bootstrap/_variables.scss b/src/assets/styles/bootstrap/_variables.scss index a53ad2b2..51f8ef36 100644 --- a/src/assets/styles/bootstrap/_variables.scss +++ b/src/assets/styles/bootstrap/_variables.scss @@ -291,8 +291,8 @@ $gradient: linear-gradient(180deg, rgba($white, .15), rgba($white, 0)) !default; $spacer: 1rem !default; $spacers: ( 0: 0, - 1: $spacer / 4, - 2: $spacer / 2, + 1: $spacer * 0.25, + 2: $spacer * 0.5, 3: $spacer, 4: $spacer * 1.5, 5: $spacer * 3, @@ -308,8 +308,8 @@ $negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) // scss-docs-start position-map $position-values: ( 0: 0, - 1: $spacer / 4, - 2: $spacer / 2, + 1: $spacer * 0.25, + 2: $spacer * 0.5, 3: $spacer, 4: $spacer * 1.5, 5: $spacer * 3, @@ -396,7 +396,7 @@ $gutters: $spacers !default; // Container padding -$container-padding-x: $grid-gutter-width / 2 !default; +$container-padding-x: $grid-gutter-width * 0.5 !default; // Components @@ -512,7 +512,7 @@ $font-sizes: ( // scss-docs-end font-sizes // scss-docs-start headings-variables -$headings-margin-bottom: $spacer / 2 !default; +$headings-margin-bottom: $spacer * 0.5 !default; $headings-font-family: null !default; $headings-font-style: null !default; $headings-font-weight: 500 !default; @@ -769,7 +769,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 * 1em, add($input-padding-y-sm * 2, $input-height-border, false)) !default; @@ -993,7 +993,7 @@ $nav-pills-link-active-bg: $component-active-bg !default; // Navbar // scss-docs-start navbar-variables -$navbar-padding-y: $spacer / 2 !default; +$navbar-padding-y: $spacer * 0.5 !default; $navbar-padding-x: null !default; $navbar-nav-link-padding-x: .5rem !default; @@ -1002,7 +1002,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-brand-margin-end: 1rem !default; $navbar-toggler-padding-y: .25rem !default; @@ -1052,7 +1052,7 @@ $dropdown-border-radius: $border-radius !default; $dropdown-border-width: $border-width !default; $dropdown-inner-border-radius: subtract($dropdown-border-radius, $dropdown-border-width) !default; $dropdown-divider-bg: $dropdown-border-color !default; -$dropdown-divider-margin-y: $spacer / 2 !default; +$dropdown-divider-margin-y: $spacer * 0.5 !default; $dropdown-box-shadow: $box-shadow !default; $dropdown-link-color: $gray-900 !default; @@ -1064,7 +1064,7 @@ $dropdown-link-active-bg: $component-active-bg !default; $dropdown-link-disabled-color: $gray-500 !default; -$dropdown-item-padding-y: $spacer / 4 !default; +$dropdown-item-padding-y: $spacer * 0.25 !default; $dropdown-item-padding-x: $spacer !default; $dropdown-header-color: $gray-600 !default; @@ -1133,12 +1133,12 @@ $pagination-border-radius-lg: $border-radius-lg !default; // scss-docs-start card-variables $card-spacer-y: $spacer !default; $card-spacer-x: $spacer !default; -$card-title-spacer-y: $spacer / 2 !default; +$card-title-spacer-y: $spacer * 0.5 !default; $card-border-width: $border-width !default; $card-border-radius: $border-radius !default; $card-border-color: rgba($black, .125) !default; $card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default; -$card-cap-padding-y: $card-spacer-y / 2 !default; +$card-cap-padding-y: $card-spacer-y * 0.5 !default; $card-cap-padding-x: $card-spacer-x !default; $card-cap-bg: rgba($black, .03) !default; $card-cap-color: null !default; @@ -1146,7 +1146,7 @@ $card-height: null !default; $card-color: null !default; $card-bg: $white !default; $card-img-overlay-padding: $spacer !default; -$card-group-margin: $grid-gutter-width / 2 !default; +$card-group-margin: $grid-gutter-width * 0.5 !default; // scss-docs-end card-variables // Accordion @@ -1194,8 +1194,8 @@ $tooltip-color: $white !default; $tooltip-bg: $black !default; $tooltip-border-radius: $border-radius !default; $tooltip-opacity: .9 !default; -$tooltip-padding-y: $spacer / 4 !default; -$tooltip-padding-x: $spacer / 2 !default; +$tooltip-padding-y: $spacer * 0.25 !default; +$tooltip-padding-x: $spacer * 0.5 !default; $tooltip-margin: 0 !default; $tooltip-arrow-width: .8rem !default; @@ -1361,7 +1361,7 @@ $list-group-border-color: rgba($black, .125) !default; $list-group-border-width: $border-width !default; $list-group-border-radius: $border-radius !default; -$list-group-item-padding-y: $spacer / 2 !default; +$list-group-item-padding-y: $spacer * 0.5 !default; $list-group-item-padding-x: $spacer !default; $list-group-item-bg-scale: -80% !default; $list-group-item-color-scale: 40% !default; diff --git a/src/assets/styles/bootstrap/forms/_form-check.scss b/src/assets/styles/bootstrap/forms/_form-check.scss index b34250a7..501e8bb4 100644 --- a/src/assets/styles/bootstrap/forms/_form-check.scss +++ b/src/assets/styles/bootstrap/forms/_form-check.scss @@ -17,7 +17,7 @@ .form-check-input { width: $form-check-input-width; height: $form-check-input-width; - margin-top: ($line-height-base - $form-check-input-width) / 2; // line-height minus check height + margin-top: ($line-height-base - $form-check-input-width) * 0.5; // line-height minus check height vertical-align: top; background-color: $form-check-input-bg; background-repeat: no-repeat; diff --git a/src/assets/styles/bootstrap/forms/_form-range.scss b/src/assets/styles/bootstrap/forms/_form-range.scss index ae1d841d..2a0f6571 100644 --- a/src/assets/styles/bootstrap/forms/_form-range.scss +++ b/src/assets/styles/bootstrap/forms/_form-range.scss @@ -27,7 +27,7 @@ &::-webkit-slider-thumb { width: $form-range-thumb-width; height: $form-range-thumb-height; - margin-top: ($form-range-track-height - $form-range-thumb-height) / 2; // Webkit specific + margin-top: ($form-range-track-height - $form-range-thumb-height) * 0.5; // Webkit specific @include gradient-bg($form-range-thumb-bg); border: $form-range-thumb-border; @include border-radius($form-range-thumb-border-radius); diff --git a/src/assets/styles/bootstrap/mixins/_grid.scss b/src/assets/styles/bootstrap/mixins/_grid.scss index 92bb88ad..1672bdd6 100644 --- a/src/assets/styles/bootstrap/mixins/_grid.scss +++ b/src/assets/styles/bootstrap/mixins/_grid.scss @@ -2,6 +2,8 @@ // // Generate semantic grid columns with these mixins. +@use "sass:math"; + @mixin make-row($gutter: $grid-gutter-width) { --#{$variable-prefix}gutter-x: #{$gutter}; --#{$variable-prefix}gutter-y: 0; @@ -28,7 +30,7 @@ @mixin make-col($size, $columns: $grid-columns) { flex: 0 0 auto; - width: percentage($size / $columns); + width: percentage(math.div($size, $columns)); } @mixin make-col-auto() { @@ -37,7 +39,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)); } @@ -49,7 +51,7 @@ @mixin row-cols($count) { > * { flex: 0 0 auto; - width: 100% / $count; + width: math.div(100%, $count); } } diff --git a/src/assets/styles/bootstrap/vendor/_rfs.scss b/src/assets/styles/bootstrap/vendor/_rfs.scss index 798753ec..02fe6bf6 100644 --- a/src/assets/styles/bootstrap/vendor/_rfs.scss +++ b/src/assets/styles/bootstrap/vendor/_rfs.scss @@ -9,6 +9,8 @@ // Configuration // Base value +@use "sass:math"; + $rfs-base-value: 1.25rem !default; $rfs-unit: rem !default; @@ -54,10 +56,10 @@ $rfs-base-value-unit: unit($rfs-base-value); // Remove px-unit from $rfs-base-value for calculations @if $rfs-base-value-unit == px { - $rfs-base-value: $rfs-base-value / ($rfs-base-value * 0 + 1); + $rfs-base-value: math.div($rfs-base-value, $rfs-base-value * 0 + 1); } @else if $rfs-base-value-unit == rem { - $rfs-base-value: $rfs-base-value / ($rfs-base-value * 0 + 1 / $rfs-rem-value); + $rfs-base-value: math.div($rfs-base-value, $rfs-base-value * 0 + math.div(1, $rfs-rem-value)); } // Cache $rfs-breakpoint unit to prevent multiple calls @@ -65,14 +67,14 @@ $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)); } // Calculate the media query value -$rfs-mq-value: if($rfs-breakpoint-unit == px, #{$rfs-breakpoint}px, #{$rfs-breakpoint / $rfs-rem-value}#{$rfs-breakpoint-unit}); +$rfs-mq-value: if($rfs-breakpoint-unit == px, #{$rfs-breakpoint}px, #{math.div($rfs-breakpoint, $rfs-rem-value)}#{$rfs-breakpoint-unit}); $rfs-mq-property-width: if($rfs-mode == max-media-query, max-width, min-width); $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height); @@ -164,11 +166,11 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height @if $unit == px { // Convert to rem if needed - $val: $val + ' ' + if($rfs-unit == rem, #{$value / ($value * 0 + $rfs-rem-value)}rem, $value); + $val: $val + ' ' + if($rfs-unit == rem, #{math.div($value, $value * 0 + $rfs-rem-value)}rem, $value); } @else if $unit == rem { // Convert to px if needed - $val: $val + ' ' + if($rfs-unit == px, #{$value / ($value * 0 + 1) * $rfs-rem-value}px, $value); + $val: $val + ' ' + if($rfs-unit == px, #{math.div($value, $value * 0 + 1) * $rfs-rem-value}px, $value); } @else { // If $value isn't a number (like inherit) or $value has a unit (not px or rem, like 1.5em) or $ is 0, just print the value @@ -205,21 +207,21 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height @else { // Remove unit from $value for calculations - $value: $value / ($value * 0 + if($unit == px, 1, 1 / $rfs-rem-value)); + $value: math.div($value, $value * 0 + if($unit == px, 1, math.div(1, $rfs-rem-value))); // Only add the media query if the value is greater than the minimum value @if abs($value) <= $rfs-base-value or not $enable-rfs { - $val: $val + ' ' + if($rfs-unit == rem, #{$value / $rfs-rem-value}rem, #{$value}px); + $val: $val + ' ' + if($rfs-unit == rem, #{math.div($value, $rfs-rem-value)}rem, #{$value}px); } @else { // Calculate the minimum value - $value-min: $rfs-base-value + (abs($value) - $rfs-base-value) / $rfs-factor; + $value-min: $rfs-base-value + math.div(abs($value) - $rfs-base-value, $rfs-factor); // Calculate difference between $value and the minimum value $value-diff: abs($value) - $value-min; // Base value formatting - $min-width: if($rfs-unit == rem, #{$value-min / $rfs-rem-value}rem, #{$value-min}px); + $min-width: if($rfs-unit == rem, #{math.div($value-min, $rfs-rem-value)}rem, #{$value-min}px); // Use negative value if needed $min-width: if($value < 0, -$min-width, $min-width); @@ -228,7 +230,7 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height $variable-unit: if($rfs-two-dimensional, vmin, vw); // Calculate the variable width between 0 and $rfs-breakpoint - $variable-width: #{$value-diff * 100 / $rfs-breakpoint}#{$variable-unit}; + $variable-width: #{math.div($value-diff * 100, $rfs-breakpoint)}#{$variable-unit}; // Return the calculated value $val: $val + ' calc(' + $min-width + if($value < 0, ' - ', ' + ') + $variable-width + ')'; diff --git a/src/assets/styles/fontawesome/_larger.scss b/src/assets/styles/fontawesome/_larger.scss index 27c2ad5f..ae643dd4 100644 --- a/src/assets/styles/fontawesome/_larger.scss +++ b/src/assets/styles/fontawesome/_larger.scss @@ -2,9 +2,11 @@ // ------------------------- // makes the font 33% larger relative to the icon container +@use "sass:math"; + .#{$fa-css-prefix}-lg { - font-size: (4em / 3); - line-height: (3em / 4); + font-size: math.div(4em, 3); + line-height: (3em * 0.25); vertical-align: -.0667em; } diff --git a/src/assets/styles/fontawesome/_list.scss b/src/assets/styles/fontawesome/_list.scss index 8ebf3333..df6d4a23 100644 --- a/src/assets/styles/fontawesome/_list.scss +++ b/src/assets/styles/fontawesome/_list.scss @@ -3,7 +3,7 @@ .#{$fa-css-prefix}-ul { list-style-type: none; - margin-left: $fa-li-width * 5/4; + margin-left: $fa-li-width * 5*0.25; padding-left: 0; > li { position: relative; } diff --git a/src/assets/styles/fontawesome/_variables.scss b/src/assets/styles/fontawesome/_variables.scss index 7c0e2caf..d3a44abc 100644 --- a/src/assets/styles/fontawesome/_variables.scss +++ b/src/assets/styles/fontawesome/_variables.scss @@ -1,6 +1,8 @@ // Variables // -------------------------- +@use "sass:math"; + $fa-font-path: "../../webfonts" !default; $fa-font-size-base: 16px !default; $fa-font-display: block !default; @@ -9,7 +11,7 @@ $fa-version: "5.14.0" !default; $fa-border-color: #eee !default; $fa-inverse: #fff !default; $fa-li-width: 2em !default; -$fa-fw-width: (20em / 16); +$fa-fw-width: math.div(20em, 16); $fa-primary-opacity: 1 !default; $fa-secondary-opacity: .4 !default;