From b70c66e70f61d42b88cc78a93f05993153f4059c Mon Sep 17 00:00:00 2001 From: rohrlaf Date: Wed, 26 May 2021 08:18:19 +0200 Subject: [PATCH] chore(#34051): Run sass-migrator division --- scss/_card.scss | 12 +++++---- scss/_carousel.scss | 6 +++-- scss/_functions.scss | 6 +++-- scss/_images.scss | 4 ++- scss/_modal.scss | 10 ++++--- scss/_offcanvas.scss | 6 +++-- scss/_popover.scss | 20 +++++++------- scss/_toasts.scss | 4 ++- scss/_tooltip.scss | 10 ++++--- scss/_variables.scss | 32 ++++++++++++----------- scss/forms/_form-check.scss | 4 ++- scss/forms/_form-range.scss | 4 ++- scss/mixins/_grid.scss | 8 +++--- scss/vendor/_rfs.scss | 26 +++++++++--------- site/assets/scss/_component-examples.scss | 8 +++--- site/assets/scss/_navbar.scss | 6 +++-- 16 files changed, 99 insertions(+), 67 deletions(-) diff --git a/scss/_card.scss b/scss/_card.scss index e3314219f641..2d79a76a5709 100644 --- 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 index d389c3042e1d..13bbe46b6cec 100644 --- 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 index f92355f42232..7151a875f546 100644 --- 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 index b11b45a37bb0..946e3e21f903 100644 --- 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 ``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 index 4a0e3b861dcb..672468d633ee 100644 --- 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,7 +140,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 - 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); @@ -146,7 +148,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: math.div($modal-footer-margin-between, 2); } } diff --git a/scss/_offcanvas.scss b/scss/_offcanvas.scss index f1d9945641bc..41182356b50f 100644 --- 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 index a55555e2e921..40b20ad73163 100644 --- 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 index 5c533d7f5daa..93122c5489a8 100644 --- 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 index 2993bf7dedd6..8f3e7a36381d 100644 --- 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; } } diff --git a/scss/_variables.scss b/scss/_variables.scss index 15343e435fbe..3f5721e8305b 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1,3 +1,5 @@ +@use "sass:math"; + // Variables // // Variables should follow the `$component-state-property-size` formula for @@ -250,8 +252,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: math.div($spacer, 4), + 2: math.div($spacer, 2), 3: $spacer, 4: $spacer * 1.5, 5: $spacer * 3, @@ -350,7 +352,7 @@ $gutters: $spacers !default; // Container padding -$container-padding-x: $grid-gutter-width / 2 !default; +$container-padding-x: math.div($grid-gutter-width, 2) !default; // Components @@ -461,7 +463,7 @@ $font-sizes: ( // scss-docs-end font-sizes // scss-docs-start headings-variables -$headings-margin-bottom: $spacer / 2 !default; +$headings-margin-bottom: math.div($spacer, 2) !default; $headings-font-family: null !default; $headings-font-style: null !default; $headings-font-weight: 500 !default; @@ -717,7 +719,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, math.div($input-padding-y, 2)) !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; @@ -939,7 +941,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: math.div($spacer, 2) !default; $navbar-padding-x: null !default; $navbar-nav-link-padding-x: .5rem !default; @@ -948,7 +950,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: math.div($nav-link-height - $navbar-brand-height, 2) !default; $navbar-brand-margin-end: 1rem !default; $navbar-toggler-padding-y: .25rem !default; @@ -998,7 +1000,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: math.div($spacer, 2) !default; $dropdown-box-shadow: $box-shadow !default; $dropdown-link-color: $gray-900 !default; @@ -1010,7 +1012,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: math.div($spacer, 4) !default; $dropdown-item-padding-x: $spacer !default; $dropdown-header-color: $gray-600 !default; @@ -1079,12 +1081,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: math.div($spacer, 2) !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: math.div($card-spacer-y, 2) !default; $card-cap-padding-x: $card-spacer-x !default; $card-cap-bg: rgba($black, .03) !default; $card-cap-color: null !default; @@ -1092,7 +1094,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: math.div($grid-gutter-width, 2) !default; // scss-docs-end card-variables // Accordion @@ -1140,8 +1142,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: math.div($spacer, 4) !default; +$tooltip-padding-x: math.div($spacer, 2) !default; $tooltip-margin: 0 !default; $tooltip-arrow-width: .8rem !default; @@ -1307,7 +1309,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: math.div($spacer, 2) !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/scss/forms/_form-check.scss b/scss/forms/_form-check.scss index b34250a71000..b2b72b303bfe 100644 --- a/scss/forms/_form-check.scss +++ b/scss/forms/_form-check.scss @@ -1,3 +1,5 @@ +@use "sass:math"; + // // Check/radio // @@ -17,7 +19,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: math.div($line-height-base - $form-check-input-width, 2); // line-height minus check height vertical-align: top; background-color: $form-check-input-bg; background-repeat: no-repeat; diff --git a/scss/forms/_form-range.scss b/scss/forms/_form-range.scss index ae1d841d551e..b59f408e09ca 100644 --- a/scss/forms/_form-range.scss +++ b/scss/forms/_form-range.scss @@ -1,3 +1,5 @@ +@use "sass:math"; + // Range // // Style range inputs the same across browsers. Vendor-specific rules for pseudo @@ -27,7 +29,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: math.div($form-range-track-height - $form-range-thumb-height, 2); // 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/scss/mixins/_grid.scss b/scss/mixins/_grid.scss index d757eac7404a..9a8e3a350060 100644 --- a/scss/mixins/_grid.scss +++ b/scss/mixins/_grid.scss @@ -1,3 +1,5 @@ +@use "sass:math"; + /// Grid system // // Generate semantic grid columns with these mixins. @@ -29,7 +31,7 @@ @mixin make-col($size: false, $columns: $grid-columns) { @if $size { flex: 0 0 auto; - width: percentage($size / $columns); + width: percentage(math.div($size, $columns)); } @else { flex: 1 1 0; max-width: 100%; @@ -42,7 +44,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)); } @@ -54,7 +56,7 @@ @mixin row-cols($count) { > * { flex: 0 0 auto; - width: 100% / $count; + width: math.div(100%, $count); } } diff --git a/scss/vendor/_rfs.scss b/scss/vendor/_rfs.scss index 798753ecba27..76d3c6b611e5 100644 --- a/scss/vendor/_rfs.scss +++ b/scss/vendor/_rfs.scss @@ -1,3 +1,5 @@ +@use "sass:math"; + // stylelint-disable property-blacklist, scss/dollar-variable-default // SCSS RFS mixin @@ -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 + 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 + 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, 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/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss index 005515922df9..43b18b910615 100644 --- a/site/assets/scss/_component-examples.scss +++ b/site/assets/scss/_component-examples.scss @@ -1,3 +1,5 @@ +@use "sass:math"; + // // Grid examples // @@ -70,7 +72,7 @@ .bd-example { position: relative; padding: 1rem; - margin: 1rem (-$grid-gutter-width / 2) 0; + margin: 1rem math.div(-$grid-gutter-width, 2) 0; border: solid $gray-300; border-width: 1px 0 0; @include clearfix(); @@ -312,8 +314,8 @@ } .bd-content .highlight { - margin-right: (-$grid-gutter-width / 2); - margin-left: (-$grid-gutter-width / 2); + margin-right: math.div(-$grid-gutter-width, 2); + margin-left: math.div(-$grid-gutter-width, 2); @include media-breakpoint-up(sm) { margin-right: 0; diff --git a/site/assets/scss/_navbar.scss b/site/assets/scss/_navbar.scss index 4a9b08b36994..b85ca0e3041d 100644 --- a/site/assets/scss/_navbar.scss +++ b/site/assets/scss/_navbar.scss @@ -1,3 +1,5 @@ +@use "sass:math"; + .bd-navbar { padding: .75rem 0; background-color: $bd-purple-bright; @@ -9,8 +11,8 @@ .navbar-nav { .nav-link { - padding-right: $spacer / 4; - padding-left: $spacer / 4; + padding-right: math.div($spacer, 4); + padding-left: math.div($spacer, 4); color: rgba($white, .85); &:hover,