clones/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-09-21 10:37:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Replace / division with multiplication and custom divide() function (#34245)

Browse Source 
* 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
This commit is contained in:
Mark Otto 2021-06-14 09:35:30 -07:00 committed by GitHub
parent e9da490e51
commit be17444756
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 86 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
scss/_card.scss
View File

@ -55,7 +55,7 @@
} }
.card-subtitle { .card-subtitle {
margin-top: -$card-title-spacer-y / 2; margin-top: -$card-title-spacer-y * .5;
margin-bottom: 0; margin-bottom: 0;
} }
@ -106,9 +106,9 @@
// //
.card-header-tabs { .card-header-tabs {
margin-right: -$card-cap-padding-x / 2; margin-right: -$card-cap-padding-x * .5;
margin-bottom: -$card-cap-padding-y; margin-bottom: -$card-cap-padding-y;
margin-left: -$card-cap-padding-x / 2; margin-left: -$card-cap-padding-x * .5;
border-bottom: 0; border-bottom: 0;
@if $nav-tabs-link-active-bg != $card-bg { @if $nav-tabs-link-active-bg != $card-bg {
@ -120,8 +120,8 @@
} }
.card-header-pills { .card-header-pills {
margin-right: -$card-cap-padding-x / 2; margin-right: -$card-cap-padding-x * .5;
margin-left: -$card-cap-padding-x / 2; margin-left: -$card-cap-padding-x * .5;
} }
// Card image // Card image

4
scss/_carousel.scss
View File

@ -202,9 +202,9 @@
.carousel-caption { .carousel-caption {
position: absolute; position: absolute;
right: (100% - $carousel-caption-width) / 2; right: (100% - $carousel-caption-width) * .5;
bottom: $carousel-caption-spacer; bottom: $carousel-caption-spacer;
left: (100% - $carousel-caption-width) / 2; left: (100% - $carousel-caption-width) * .5;
padding-top: $carousel-caption-padding-y; padding-top: $carousel-caption-padding-y;
padding-bottom: $carousel-caption-padding-y; padding-bottom: $carousel-caption-padding-y;
color: $carousel-caption-color; color: $carousel-caption-color;

31
scss/_functions.scss
View File

@ -95,7 +95,7 @@
// Color contrast // Color contrast
// See https://github.com/twbs/bootstrap/pull/30168 // 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 // 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; $_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); $l1: luminance($background);
$l2: luminance(opaque($background, $foreground)); $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 // 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 { @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)); $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); @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;
}

2
scss/_images.scss
View File

@ -32,7 +32,7 @@
} }
.figure-img { .figure-img {
margin-bottom: $spacer / 2; margin-bottom: $spacer * .5;
line-height: 1; line-height: 1;
} }

8
scss/_modal.scss
View File

@ -110,8 +110,8 @@
@include border-top-radius($modal-content-inner-border-radius); @include border-top-radius($modal-content-inner-border-radius);
.btn-close { .btn-close {
padding: ($modal-header-padding-y / 2) ($modal-header-padding-x / 2); padding: ($modal-header-padding-y * .5) ($modal-header-padding-x * .5);
margin: ($modal-header-padding-y / -2) ($modal-header-padding-x / -2) ($modal-header-padding-y / -2) auto; margin: ($modal-header-padding-y * -.5) ($modal-header-padding-x * -.5) ($modal-header-padding-y * -.5) auto;
} }
} }
@ -138,7 +138,7 @@
flex-shrink: 0; flex-shrink: 0;
align-items: center; // vertically center align-items: center; // vertically center
justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items 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; border-top: $modal-footer-border-width solid $modal-footer-border-color;
@include border-bottom-radius($modal-content-inner-border-radius); @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, // This solution is far from ideal because of the universal selector usage,
// but is needed to fix https://github.com/twbs/bootstrap/issues/24800 // but is needed to fix https://github.com/twbs/bootstrap/issues/24800
> * { > * {
margin: $modal-footer-margin-between / 2; margin: $modal-footer-margin-between * .5;
} }
} }

4
scss/_offcanvas.scss
View File

@ -21,8 +21,8 @@
padding: $offcanvas-padding-y $offcanvas-padding-x; padding: $offcanvas-padding-y $offcanvas-padding-x;
.btn-close { .btn-close {
padding: ($offcanvas-padding-y / 2) ($offcanvas-padding-x / 2); padding: ($offcanvas-padding-y * .5) ($offcanvas-padding-x * .5);
margin: ($offcanvas-padding-y / -2) ($offcanvas-padding-x / -2) ($offcanvas-padding-y / -2) auto; margin: ($offcanvas-padding-y * -.5) ($offcanvas-padding-x * -.5) ($offcanvas-padding-y * -.5) auto;
} }
} }

18
scss/_popover.scss
View File

@ -40,13 +40,13 @@
&::before { &::before {
bottom: 0; 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; border-top-color: $popover-arrow-outer-color;
} }
&::after { &::after {
bottom: $popover-border-width; 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; border-top-color: $popover-arrow-color;
} }
} }
@ -60,13 +60,13 @@
&::before { &::before {
left: 0; 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; border-right-color: $popover-arrow-outer-color;
} }
&::after { &::after {
left: $popover-border-width; 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; border-right-color: $popover-arrow-color;
} }
} }
@ -78,13 +78,13 @@
&::before { &::before {
top: 0; 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; border-bottom-color: $popover-arrow-outer-color;
} }
&::after { &::after {
top: $popover-border-width; 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; border-bottom-color: $popover-arrow-color;
} }
} }
@ -96,7 +96,7 @@
left: 50%; left: 50%;
display: block; display: block;
width: $popover-arrow-width; width: $popover-arrow-width;
margin-left: -$popover-arrow-width / 2; margin-left: -$popover-arrow-width * .5;
content: ""; content: "";
border-bottom: $popover-border-width solid $popover-header-bg; border-bottom: $popover-border-width solid $popover-header-bg;
} }
@ -110,13 +110,13 @@
&::before { &::before {
right: 0; 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; border-left-color: $popover-arrow-outer-color;
} }
&::after { &::after {
right: $popover-border-width; 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; border-left-color: $popover-arrow-color;
} }
} }

2
scss/_toasts.scss
View File

@ -40,7 +40,7 @@
@include border-top-radius(subtract($toast-border-radius, $toast-border-width)); @include border-top-radius(subtract($toast-border-radius, $toast-border-width));
.btn-close { .btn-close {
margin-right: $toast-padding-x / -2; margin-right: $toast-padding-x * -.5;
margin-left: $toast-padding-x; margin-left: $toast-padding-x;
} }
} }

8
scss/_tooltip.scss
View File

@ -37,7 +37,7 @@
&::before { &::before {
top: -1px; 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; border-top-color: $tooltip-arrow-color;
} }
} }
@ -53,7 +53,7 @@
&::before { &::before {
right: -1px; 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; border-right-color: $tooltip-arrow-color;
} }
} }
@ -67,7 +67,7 @@
&::before { &::before {
bottom: -1px; 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; border-bottom-color: $tooltip-arrow-color;
} }
} }
@ -83,7 +83,7 @@
&::before { &::before {
left: -1px; 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; border-left-color: $tooltip-arrow-color;
} }
} }

30
scss/_variables.scss
View File

@ -250,8 +250,8 @@ $gradient: linear-gradient(180deg, rgba($white, .15), rgba($white, 0)) !default;
$spacer: 1rem !default; $spacer: 1rem !default;
$spacers: ( $spacers: (
0: 0, 0: 0,
1: $spacer / 4, 1: $spacer * .25,
2: $spacer / 2, 2: $spacer * .5,
3: $spacer, 3: $spacer,
4: $spacer * 1.5, 4: $spacer * 1.5,
5: $spacer * 3, 5: $spacer * 3,
@ -350,7 +350,7 @@ $gutters: $spacers !default;
// Container padding // Container padding
$container-padding-x: $grid-gutter-width / 2 !default; $container-padding-x: $grid-gutter-width * .5 !default;
// Components // Components
@ -461,7 +461,7 @@ $font-sizes: (
// scss-docs-end font-sizes // scss-docs-end font-sizes
// scss-docs-start headings-variables // scss-docs-start headings-variables
$headings-margin-bottom: $spacer / 2 !default; $headings-margin-bottom: $spacer * .5 !default;
$headings-font-family: null !default; $headings-font-family: null !default;
$headings-font-style: null !default; $headings-font-style: null !default;
$headings-font-weight: 500 !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: 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-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: 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; $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 // Navbar
// scss-docs-start navbar-variables // scss-docs-start navbar-variables
$navbar-padding-y: $spacer / 2 !default; $navbar-padding-y: $spacer * .5 !default;
$navbar-padding-x: null !default; $navbar-padding-x: null !default;
$navbar-nav-link-padding-x: .5rem !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 // 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; $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-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-brand-margin-end: 1rem !default;
$navbar-toggler-padding-y: .25rem !default; $navbar-toggler-padding-y: .25rem !default;
@ -1002,7 +1002,7 @@ $dropdown-border-radius: $border-radius !default;
$dropdown-border-width: $border-width !default; $dropdown-border-width: $border-width !default;
$dropdown-inner-border-radius: subtract($dropdown-border-radius, $dropdown-border-width) !default; $dropdown-inner-border-radius: subtract($dropdown-border-radius, $dropdown-border-width) !default;
$dropdown-divider-bg: $dropdown-border-color !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-box-shadow: $box-shadow !default;
$dropdown-link-color: $gray-900 !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-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-item-padding-x: $spacer !default;
$dropdown-header-color: $gray-600 !default; $dropdown-header-color: $gray-600 !default;
@ -1083,12 +1083,12 @@ $pagination-border-radius-lg: $border-radius-lg !default;
// scss-docs-start card-variables // scss-docs-start card-variables
$card-spacer-y: $spacer !default; $card-spacer-y: $spacer !default;
$card-spacer-x: $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-width: $border-width !default;
$card-border-radius: $border-radius !default; $card-border-radius: $border-radius !default;
$card-border-color: rgba($black, .125) !default; $card-border-color: rgba($black, .125) !default;
$card-inner-border-radius: subtract($card-border-radius, $card-border-width) !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-padding-x: $card-spacer-x !default;
$card-cap-bg: rgba($black, .03) !default; $card-cap-bg: rgba($black, .03) !default;
$card-cap-color: null !default; $card-cap-color: null !default;
@ -1096,7 +1096,7 @@ $card-height: null !default;
$card-color: null !default; $card-color: null !default;
$card-bg: $white !default; $card-bg: $white !default;
$card-img-overlay-padding: $spacer !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 // scss-docs-end card-variables
// Accordion // Accordion
@ -1144,8 +1144,8 @@ $tooltip-color: $white !default;
$tooltip-bg: $black !default; $tooltip-bg: $black !default;
$tooltip-border-radius: $border-radius !default; $tooltip-border-radius: $border-radius !default;
$tooltip-opacity: .9 !default; $tooltip-opacity: .9 !default;
$tooltip-padding-y: $spacer / 4 !default; $tooltip-padding-y: $spacer * .25 !default;
$tooltip-padding-x: $spacer / 2 !default; $tooltip-padding-x: $spacer * .5 !default;
$tooltip-margin: 0 !default; $tooltip-margin: 0 !default;
$tooltip-arrow-width: .8rem !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-width: $border-width !default;
$list-group-border-radius: $border-radius !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-padding-x: $spacer !default;
$list-group-item-bg-scale: -80% !default; $list-group-item-bg-scale: -80% !default;
$list-group-item-color-scale: 40% !default; $list-group-item-color-scale: 40% !default;

2
scss/forms/_form-check.scss
View File

@ -17,7 +17,7 @@
.form-check-input { .form-check-input {
width: $form-check-input-width; width: $form-check-input-width;
height: $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; vertical-align: top;
background-color: $form-check-input-bg; background-color: $form-check-input-bg;
background-repeat: no-repeat; background-repeat: no-repeat;

2
scss/forms/_form-range.scss
View File

@ -27,7 +27,7 @@
&::-webkit-slider-thumb { &::-webkit-slider-thumb {
width: $form-range-thumb-width; width: $form-range-thumb-width;
height: $form-range-thumb-height; 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); @include gradient-bg($form-range-thumb-bg);
border: $form-range-thumb-border; border: $form-range-thumb-border;
@include border-radius($form-range-thumb-border-radius); @include border-radius($form-range-thumb-border-radius);

13
scss/mixins/_grid.scss
View File

@ -1,3 +1,5 @@
@use "sass:math";
/// Grid system /// Grid system
// //
// Generate semantic grid columns with these mixins. // Generate semantic grid columns with these mixins.
@ -8,8 +10,8 @@
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-top: calc(var(--#{$variable-prefix}gutter-y) * -1); // stylelint-disable-line function-disallowed-list 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-right: calc(var(--#{$variable-prefix}gutter-x) * -.5); // stylelint-disable-line function-disallowed-list
margin-left: calc(var(--#{$variable-prefix}gutter-x) / -2); // 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) { @mixin make-col-ready($gutter: $grid-gutter-width) {
@ -21,15 +23,16 @@
flex-shrink: 0; flex-shrink: 0;
width: 100%; width: 100%;
max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid 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-right: calc(var(--#{$variable-prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
padding-left: calc(var(--#{$variable-prefix}gutter-x) / 2); // 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); margin-top: var(--#{$variable-prefix}gutter-y);
} }
@mixin make-col($size: false, $columns: $grid-columns) { @mixin make-col($size: false, $columns: $grid-columns) {
@if $size { @if $size {
flex: 0 0 auto; flex: 0 0 auto;
width: percentage($size / $columns); width: percentage(divide($size, $columns));
} @else { } @else {
flex: 1 1 0; flex: 1 1 0;
max-width: 100%; max-width: 100%;

6
site/assets/scss/_component-examples.scss
View File

@ -70,7 +70,7 @@
.bd-example { .bd-example {
position: relative; position: relative;
padding: 1rem; padding: 1rem;
margin: 1rem (-$grid-gutter-width / 2) 0; margin: 1rem (-$grid-gutter-width * .5) 0;
border: solid $gray-300; border: solid $gray-300;
border-width: 1px 0 0; border-width: 1px 0 0;
@include clearfix(); @include clearfix();
@ -312,8 +312,8 @@
} }
.bd-content .highlight { .bd-content .highlight {
margin-right: (-$grid-gutter-width / 2); margin-right: (-$grid-gutter-width * .5);
margin-left: (-$grid-gutter-width / 2); margin-left: (-$grid-gutter-width * .5);
@include media-breakpoint-up(sm) { @include media-breakpoint-up(sm) {
margin-right: 0; margin-right: 0;

4
site/assets/scss/_navbar.scss
View File

@ -9,8 +9,8 @@
.navbar-nav { .navbar-nav {
.nav-link { .nav-link {
padding-right: $spacer / 4; padding-right: $spacer * .25;
padding-left: $spacer / 4; padding-left: $spacer * .25;
color: rgba($white, .85); color: rgba($white, .85);
&:hover, &:hover,