From be17444756c48e3a892c36507f859cd841bd8c1f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 14 Jun 2021 09:35:30 -0700 Subject: Replace `/` division with multiplication and custom `divide()` function (#34245) * Convert bulk of division to multiplication * Use custom divide() function instead of Dart Sass math module for greater compatibility * Apply suggestions from code review * Fix functions --- scss/_card.scss | 10 +++++----- scss/_carousel.scss | 4 ++-- scss/_functions.scss | 31 ++++++++++++++++++++++++++++--- scss/_images.scss | 2 +- scss/_modal.scss | 8 ++++---- scss/_offcanvas.scss | 4 ++-- scss/_popover.scss | 18 +++++++++--------- scss/_toasts.scss | 2 +- scss/_tooltip.scss | 8 ++++---- scss/_variables.scss | 30 +++++++++++++++--------------- scss/forms/_form-check.scss | 2 +- scss/forms/_form-range.scss | 2 +- scss/mixins/_grid.scss | 13 ++++++++----- site/assets/scss/_component-examples.scss | 6 +++--- site/assets/scss/_navbar.scss | 4 ++-- 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, -- cgit v1.2.3