Welcome to mirror list, hosted at ThFree Co, Russian Federation.

github.com/twbs/bootstrap.git - Unnamed repository; edit this file 'description' to name the repository.
summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--scss/_card.scss10
-rw-r--r--scss/_carousel.scss4
-rw-r--r--scss/_functions.scss31
-rw-r--r--scss/_images.scss2
-rw-r--r--scss/_modal.scss8
-rw-r--r--scss/_offcanvas.scss4
-rw-r--r--scss/_popover.scss18
-rw-r--r--scss/_toasts.scss2
-rw-r--r--scss/_tooltip.scss8
-rw-r--r--scss/_variables.scss30
-rw-r--r--scss/forms/_form-check.scss2
-rw-r--r--scss/forms/_form-range.scss2
-rw-r--r--scss/mixins/_grid.scss13
-rw-r--r--site/assets/scss/_component-examples.scss6
-rw-r--r--site/assets/scss/_navbar.scss4
15 files changed, 86 insertions, 58 deletions
diff --git a/scss/_card.scss b/scss/_card.scss
index e3314219f6..b077858c47 100644
--- a/scss/_card.scss
+++ b/scss/_card.scss
@@ -55,7 +55,7 @@
}
.card-subtitle {
- margin-top: -$card-title-spacer-y / 2;
+ margin-top: -$card-title-spacer-y * .5;
margin-bottom: 0;
}
@@ -106,9 +106,9 @@
//
.card-header-tabs {
- margin-right: -$card-cap-padding-x / 2;
+ margin-right: -$card-cap-padding-x * .5;
margin-bottom: -$card-cap-padding-y;
- margin-left: -$card-cap-padding-x / 2;
+ margin-left: -$card-cap-padding-x * .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 * .5;
+ margin-left: -$card-cap-padding-x * .5;
}
// Card image
diff --git a/scss/_carousel.scss b/scss/_carousel.scss
index d389c3042e..3d8fb15a06 100644
--- a/scss/_carousel.scss
+++ b/scss/_carousel.scss
@@ -202,9 +202,9 @@
.carousel-caption {
position: absolute;
- right: (100% - $carousel-caption-width) / 2;
+ right: (100% - $carousel-caption-width) * .5;
bottom: $carousel-caption-spacer;
- left: (100% - $carousel-caption-width) / 2;
+ left: (100% - $carousel-caption-width) * .5;
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 f92355f422..2d3478bfad 100644
--- a/scss/_functions.scss
+++ b/scss/_functions.scss
@@ -95,7 +95,7 @@
// Color contrast
// See https://github.com/twbs/bootstrap/pull/30168
-// A list of pre-calculated numbers of pow(($value / 255 + .055) / 1.055, 2.4). (from 0 to 255)
+// A list of pre-calculated numbers of pow(divide((divide($value, 255) + .055), 1.055), 2.4). (from 0 to 255)
// stylelint-disable-next-line scss/dollar-variable-default, scss/dollar-variable-pattern
$_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003 .0033 .0037 .004 .0044 .0048 .0052 .0056 .006 .0065 .007 .0075 .008 .0086 .0091 .0097 .0103 .011 .0116 .0123 .013 .0137 .0144 .0152 .016 .0168 .0176 .0185 .0194 .0203 .0212 .0222 .0232 .0242 .0252 .0262 .0273 .0284 .0296 .0307 .0319 .0331 .0343 .0356 .0369 .0382 .0395 .0409 .0423 .0437 .0452 .0467 .0482 .0497 .0513 .0529 .0545 .0561 .0578 .0595 .0612 .063 .0648 .0666 .0685 .0704 .0723 .0742 .0762 .0782 .0802 .0823 .0844 .0865 .0887 .0908 .0931 .0953 .0976 .0999 .1022 .1046 .107 .1095 .1119 .1144 .117 .1195 .1221 .1248 .1274 .1301 .1329 .1356 .1384 .1413 .1441 .147 .15 .1529 .1559 .159 .162 .1651 .1683 .1714 .1746 .1779 .1812 .1845 .1878 .1912 .1946 .1981 .2016 .2051 .2086 .2122 .2159 .2195 .2232 .227 .2307 .2346 .2384 .2423 .2462 .2502 .2542 .2582 .2623 .2664 .2705 .2747 .2789 .2831 .2874 .2918 .2961 .3005 .305 .3095 .314 .3185 .3231 .3278 .3325 .3372 .3419 .3467 .3515 .3564 .3613 .3663 .3712 .3763 .3813 .3864 .3916 .3968 .402 .4072 .4125 .4179 .4233 .4287 .4342 .4397 .4452 .4508 .4564 .4621 .4678 .4735 .4793 .4851 .491 .4969 .5029 .5089 .5149 .521 .5271 .5333 .5395 .5457 .552 .5583 .5647 .5711 .5776 .5841 .5906 .5972 .6038 .6105 .6172 .624 .6308 .6376 .6445 .6514 .6584 .6654 .6724 .6795 .6867 .6939 .7011 .7084 .7157 .7231 .7305 .7379 .7454 .7529 .7605 .7682 .7758 .7835 .7913 .7991 .807 .8148 .8228 .8308 .8388 .8469 .855 .8632 .8714 .8796 .8879 .8963 .9047 .9131 .9216 .9301 .9387 .9473 .956 .9647 .9734 .9823 .9911 1;
@@ -123,7 +123,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, divide($l1 + .05, $l2 + .05), divide($l2 + .05, $l1 + .05));
}
// Return WCAG2.0 relative luminance
@@ -137,7 +137,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(divide($value, 255) < .03928, divide(divide($value, 255), 12.92), nth($_luminance-list, $value + 1));
$rgb: map-merge($rgb, ($name: $value));
}
@@ -219,3 +219,28 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
@return if($return-calc == true, calc(#{$value1} - #{$value2}), $value1 + unquote(" - ") + $value2);
}
+
+@function divide($dividend, $divisor, $precision: 10) {
+ $sign: if($dividend > 0 and $divisor > 0, 1, -1);
+ $dividend: abs($dividend);
+ $divisor: abs($divisor);
+ $quotient: 0;
+ $remainder: $dividend;
+ @if $dividend == 0 {
+ @return 0;
+ }
+ @if $divisor == 0 {
+ @error "Cannot divide by 0";
+ }
+ @if $divisor == 1 {
+ @return $dividend;
+ }
+ @while $remainder >= $divisor {
+ $quotient: $quotient + 1;
+ $remainder: $remainder - $divisor;
+ }
+ @if $remainder > 0 and $precision > 0 {
+ $remainder: divide($remainder * 10, $divisor, $precision - 1) * .1;
+ }
+ @return ($quotient + $remainder) * $sign;
+}
diff --git a/scss/_images.scss b/scss/_images.scss
index b11b45a37b..3d6a1014c4 100644
--- a/scss/_images.scss
+++ b/scss/_images.scss
@@ -32,7 +32,7 @@
}
.figure-img {
- margin-bottom: $spacer / 2;
+ margin-bottom: $spacer * .5;
line-height: 1;
}
diff --git a/scss/_modal.scss b/scss/_modal.scss
index 4a0e3b861d..77473085ce 100644
--- a/scss/_modal.scss
+++ b/scss/_modal.scss
@@ -110,8 +110,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 * .5) ($modal-header-padding-x * .5);
+ margin: ($modal-header-padding-y * -.5) ($modal-header-padding-x * -.5) ($modal-header-padding-y * -.5) auto;
}
}
@@ -138,7 +138,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 * .5;
border-top: $modal-footer-border-width solid $modal-footer-border-color;
@include border-bottom-radius($modal-content-inner-border-radius);
@@ -146,7 +146,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 * .5;
}
}
diff --git a/scss/_offcanvas.scss b/scss/_offcanvas.scss
index f1d9945641..1dbe6cdc4b 100644
--- a/scss/_offcanvas.scss
+++ b/scss/_offcanvas.scss
@@ -21,8 +21,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 * .5) ($offcanvas-padding-x * .5);
+ margin: ($offcanvas-padding-y * -.5) ($offcanvas-padding-x * -.5) ($offcanvas-padding-y * -.5) auto;
}
}
diff --git a/scss/_popover.scss b/scss/_popover.scss
index da00f700fd..3b8208e160 100644
--- a/scss/_popover.scss
+++ b/scss/_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 * .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 * .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 * .5) $popover-arrow-height ($popover-arrow-width * .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 * .5) $popover-arrow-height ($popover-arrow-width * .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 * .5) $popover-arrow-height ($popover-arrow-width * .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 * .5) $popover-arrow-height ($popover-arrow-width * .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 * .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 * .5) 0 ($popover-arrow-width * .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 * .5) 0 ($popover-arrow-width * .5) $popover-arrow-height;
border-left-color: $popover-arrow-color;
}
}
diff --git a/scss/_toasts.scss b/scss/_toasts.scss
index 5c533d7f5d..717aae576e 100644
--- a/scss/_toasts.scss
+++ b/scss/_toasts.scss
@@ -40,7 +40,7 @@
@include border-top-radius(subtract($toast-border-radius, $toast-border-width));
.btn-close {
- margin-right: $toast-padding-x / -2;
+ margin-right: $toast-padding-x * -.5;
margin-left: $toast-padding-x;
}
}
diff --git a/scss/_tooltip.scss b/scss/_tooltip.scss
index 2993bf7ded..75ff078383 100644
--- a/scss/_tooltip.scss
+++ b/scss/_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 * .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 * .5) $tooltip-arrow-height ($tooltip-arrow-width * .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 * .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 * .5) 0 ($tooltip-arrow-width * .5) $tooltip-arrow-height;
border-left-color: $tooltip-arrow-color;
}
}
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 93ccb25a56..75d126d7ba 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -250,8 +250,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 * .25,
+ 2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
@@ -350,7 +350,7 @@ $gutters: $spacers !default;
// Container padding
-$container-padding-x: $grid-gutter-width / 2 !default;
+$container-padding-x: $grid-gutter-width * .5 !default;
// Components
@@ -461,7 +461,7 @@ $font-sizes: (
// scss-docs-end font-sizes
// scss-docs-start headings-variables
-$headings-margin-bottom: $spacer / 2 !default;
+$headings-margin-bottom: $spacer * .5 !default;
$headings-font-family: null !default;
$headings-font-style: null !default;
$headings-font-weight: 500 !default;
@@ -718,7 +718,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 * .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;
@@ -943,7 +943,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 * .5 !default;
$navbar-padding-x: null !default;
$navbar-nav-link-padding-x: .5rem !default;
@@ -952,7 +952,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) * .5 !default;
$navbar-brand-margin-end: 1rem !default;
$navbar-toggler-padding-y: .25rem !default;
@@ -1002,7 +1002,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 * .5 !default;
$dropdown-box-shadow: $box-shadow !default;
$dropdown-link-color: $gray-900 !default;
@@ -1014,7 +1014,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 * .25 !default;
$dropdown-item-padding-x: $spacer !default;
$dropdown-header-color: $gray-600 !default;
@@ -1083,12 +1083,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 * .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 * .5 !default;
$card-cap-padding-x: $card-spacer-x !default;
$card-cap-bg: rgba($black, .03) !default;
$card-cap-color: null !default;
@@ -1096,7 +1096,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 * .5 !default;
// scss-docs-end card-variables
// Accordion
@@ -1144,8 +1144,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 * .25 !default;
+$tooltip-padding-x: $spacer * .5 !default;
$tooltip-margin: 0 !default;
$tooltip-arrow-width: .8rem !default;
@@ -1311,7 +1311,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 * .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/scss/forms/_form-check.scss b/scss/forms/_form-check.scss
index b34250a710..6321b41002 100644
--- a/scss/forms/_form-check.scss
+++ b/scss/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) * .5; // 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 ae1d841d55..6de42132ea 100644
--- a/scss/forms/_form-range.scss
+++ b/scss/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) * .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/scss/mixins/_grid.scss b/scss/mixins/_grid.scss
index 36031df796..f108b447b3 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.
@@ -8,8 +10,8 @@
display: flex;
flex-wrap: wrap;
margin-top: calc(var(--#{$variable-prefix}gutter-y) * -1); // stylelint-disable-line function-disallowed-list
- margin-right: calc(var(--#{$variable-prefix}gutter-x) / -2); // stylelint-disable-line function-disallowed-list
- margin-left: calc(var(--#{$variable-prefix}gutter-x) / -2); // stylelint-disable-line function-disallowed-list
+ margin-right: calc(var(--#{$variable-prefix}gutter-x) * -.5); // stylelint-disable-line function-disallowed-list
+ margin-left: calc(var(--#{$variable-prefix}gutter-x) * -.5); // stylelint-disable-line function-disallowed-list
}
@mixin make-col-ready($gutter: $grid-gutter-width) {
@@ -21,15 +23,16 @@
flex-shrink: 0;
width: 100%;
max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid
- padding-right: calc(var(--#{$variable-prefix}gutter-x) / 2); // stylelint-disable-line function-disallowed-list
- padding-left: calc(var(--#{$variable-prefix}gutter-x) / 2); // stylelint-disable-line function-disallowed-list
+ padding-right: calc(var(--#{$variable-prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
+ padding-left: calc(var(--#{$variable-prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
margin-top: var(--#{$variable-prefix}gutter-y);
}
@mixin make-col($size: false, $columns: $grid-columns) {
@if $size {
flex: 0 0 auto;
- width: percentage($size / $columns);
+ width: percentage(divide($size, $columns));
+
} @else {
flex: 1 1 0;
max-width: 100%;
diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
index 005515922d..e831b16095 100644
--- a/site/assets/scss/_component-examples.scss
+++ b/site/assets/scss/_component-examples.scss
@@ -70,7 +70,7 @@
.bd-example {
position: relative;
padding: 1rem;
- margin: 1rem (-$grid-gutter-width / 2) 0;
+ margin: 1rem (-$grid-gutter-width * .5) 0;
border: solid $gray-300;
border-width: 1px 0 0;
@include clearfix();
@@ -312,8 +312,8 @@
}
.bd-content .highlight {
- margin-right: (-$grid-gutter-width / 2);
- margin-left: (-$grid-gutter-width / 2);
+ margin-right: (-$grid-gutter-width * .5);
+ margin-left: (-$grid-gutter-width * .5);
@include media-breakpoint-up(sm) {
margin-right: 0;
diff --git a/site/assets/scss/_navbar.scss b/site/assets/scss/_navbar.scss
index 4a9b08b369..053cadf2ee 100644
--- a/site/assets/scss/_navbar.scss
+++ b/site/assets/scss/_navbar.scss
@@ -9,8 +9,8 @@
.navbar-nav {
.nav-link {
- padding-right: $spacer / 4;
- padding-left: $spacer / 4;
+ padding-right: $spacer * .25;
+ padding-left: $spacer * .25;
color: rgba($white, .85);
&:hover,