diff --git a/scss/_card.scss b/scss/_card.scss
index e3314219f6413db9d32b68185422532aa1bcd974..fe394c44822a7ee55e1ec46f642a9b2a85efd71d 100644
--- a/scss/_card.scss
+++ b/scss/_card.scss
@@ -2,6 +2,8 @@
// Base styles
//
+@use "sass:math";
+
.card {
position: relative;
display: flex;
@@ -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 d389c3042e1d2f4d3e9d30d9661551006d0d6a95..b9b760a55cf86cc3dc956c4dc0fbe59f5c97990a 100644
--- a/scss/_carousel.scss
+++ b/scss/_carousel.scss
@@ -11,6 +11,8 @@
// 5. .carousel-item-next.carousel-item-start and .carousel-item-prev.carousel-item-end
// is the upcoming slide in transition.
+@use "sass:math";
+
.carousel {
position: relative;
}
@@ -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 f92355f422327f7ad753ffc94be9d9cf510e9d6c..2f66603705b06a1a403ff2e10d528b4a9613be7a 100644
--- a/scss/_functions.scss
+++ b/scss/_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/scss/_images.scss b/scss/_images.scss
index b11b45a37bb04e620d288b2434a9b66218870966..883f62959aefc44707ad81d467a6d38f7f384abf 100644
--- a/scss/_images.scss
+++ b/scss/_images.scss
@@ -5,6 +5,8 @@
// and abandoned it in Bootstrap v3 because it breaks lots of third-party widgets (including Google Maps)
// which weren't expecting the images within themselves to be involuntarily resized.
// See also https://github.com/twbs/bootstrap/issues/18178
+@use "sass:math";
+
.img-fluid {
@include img-fluid();
}
@@ -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 4a0e3b861dcb642b6b75230b3a668b5c2d6f8324..bff1711abcffcec5800235de05fb4ff4d358e0b1 100644
--- a/scss/_modal.scss
+++ b/scss/_modal.scss
@@ -5,6 +5,8 @@
// Container that the modal scrolls within
+@use "sass:math";
+
.modal {
position: fixed;
top: 0;
@@ -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 f1d9945641bc9217564694d2adaf35089f6dfeed..41182356b50f65e96e61a049892a47e4b6238a62 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 da00f700fd56bc3aed750b50e1ec7cf40bbaa771..a32df6b658d5a62d8fd164fcaa92edd150752b73 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 5c533d7f5daa6a9d7c10dc64a15563ddbfc8f868..93122c5489a8ba47a0eed3908098ffda8b746540 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 2993bf7dedd65a6ac97441616a946f1c1f512871..1511c0090e7df9b564a0c8046d74e09ad5652b23 100644
--- a/scss/_tooltip.scss
+++ b/scss/_tooltip.scss
@@ -1,4 +1,6 @@
// Base class
+@use "sass:math";
+
.tooltip {
position: absolute;
z-index: $zindex-tooltip;
@@ -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 93ccb25a56f18ae733807394c106c76b774541fe..ef0acdc3a94c696b9ba7192a92ef88bade84d3fc 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -6,6 +6,8 @@
// Color system
// scss-docs-start gray-color-variables
+@use "sass:math";
+
$white: #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
@@ -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;
@@ -718,7 +720,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;
@@ -943,7 +945,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;
@@ -952,7 +954,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;
@@ -1002,7 +1004,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;
@@ -1014,7 +1016,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;
@@ -1083,12 +1085,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;
@@ -1096,7 +1098,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
@@ -1144,8 +1146,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;
@@ -1311,7 +1313,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;