Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit be17444

Browse files
mdomdo
authored
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
1 parent e9da490 commit be17444

15 files changed

+86
-58
lines changed

‎scss/_card.scss‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@
5555
}
5656

5757
.card-subtitle {
58-
margin-top: -$card-title-spacer-y / 2;
58+
margin-top: -$card-title-spacer-y * .5;
5959
margin-bottom: 0;
6060
}
6161

@@ -106,9 +106,9 @@
106106
//
107107

108108
.card-header-tabs {
109-
margin-right: -$card-cap-padding-x / 2;
109+
margin-right: -$card-cap-padding-x * .5;
110110
margin-bottom: -$card-cap-padding-y;
111-
margin-left: -$card-cap-padding-x / 2;
111+
margin-left: -$card-cap-padding-x * .5;
112112
border-bottom: 0;
113113

114114
@if $nav-tabs-link-active-bg != $card-bg {
@@ -120,8 +120,8 @@
120120
}
121121

122122
.card-header-pills {
123-
margin-right: -$card-cap-padding-x / 2;
124-
margin-left: -$card-cap-padding-x / 2;
123+
margin-right: -$card-cap-padding-x * .5;
124+
margin-left: -$card-cap-padding-x * .5;
125125
}
126126

127127
// Card image

‎scss/_carousel.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -202,9 +202,9 @@
202202

203203
.carousel-caption {
204204
position: absolute;
205-
right: (100% - $carousel-caption-width) / 2;
205+
right: (100% - $carousel-caption-width) * .5;
206206
bottom: $carousel-caption-spacer;
207-
left: (100% - $carousel-caption-width) / 2;
207+
left: (100% - $carousel-caption-width) * .5;
208208
padding-top: $carousel-caption-padding-y;
209209
padding-bottom: $carousel-caption-padding-y;
210210
color: $carousel-caption-color;

‎scss/_functions.scss‎

Lines changed: 28 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@
9595
// Color contrast
9696
// See https://github.com/twbs/bootstrap/pull/30168
9797

98-
// A list of pre-calculated numbers of pow(($value / 255 + .055) / 1.055, 2.4). (from 0 to 255)
98+
// A list of pre-calculated numbers of pow(divide((divide($value, 255) + .055), 1.055), 2.4). (from 0 to 255)
9999
// stylelint-disable-next-line scss/dollar-variable-default, scss/dollar-variable-pattern
100100
$_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;
101101

@@ -123,7 +123,7 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
123123
$l1: luminance($background);
124124
$l2: luminance(opaque($background, $foreground));
125125

126-
@return if($l1 > $l2, ($l1 + .05) / ($l2 + .05), ($l2 + .05) / ($l1 + .05));
126+
@return if($l1 > $l2, divide($l1 + .05, $l2 + .05), divide($l2 + .05, $l1 + .05));
127127
}
128128

129129
// Return WCAG2.0 relative luminance
@@ -137,7 +137,7 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
137137
);
138138

139139
@each $name, $value in $rgb {
140-
$value: if($value / 255 < .03928, $value / 255 / 12.92, nth($_luminance-list, $value + 1));
140+
$value: if(divide($value, 255) < .03928, divide(divide($value, 255), 12.92), nth($_luminance-list, $value + 1));
141141
$rgb: map-merge($rgb, ($name: $value));
142142
}
143143

@@ -219,3 +219,28 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
219219

220220
@return if($return-calc == true, calc(#{$value1} - #{$value2}), $value1 + unquote(" - ") + $value2);
221221
}
222+
223+
@function divide($dividend, $divisor, $precision: 10) {
224+
$sign: if($dividend > 0 and $divisor > 0, 1, -1);
225+
$dividend: abs($dividend);
226+
$divisor: abs($divisor);
227+
$quotient: 0;
228+
$remainder: $dividend;
229+
@if $dividend == 0 {
230+
@return 0;
231+
}
232+
@if $divisor == 0 {
233+
@error "Cannot divide by 0";
234+
}
235+
@if $divisor == 1 {
236+
@return $dividend;
237+
}
238+
@while $remainder >= $divisor {
239+
$quotient: $quotient + 1;
240+
$remainder: $remainder - $divisor;
241+
}
242+
@if $remainder > 0 and $precision > 0 {
243+
$remainder: divide($remainder * 10, $divisor, $precision - 1) * .1;
244+
}
245+
@return ($quotient + $remainder) * $sign;
246+
}

‎scss/_images.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
}
3333

3434
.figure-img {
35-
margin-bottom: $spacer / 2;
35+
margin-bottom: $spacer * .5;
3636
line-height: 1;
3737
}
3838

‎scss/_modal.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -110,8 +110,8 @@
110110
@include border-top-radius($modal-content-inner-border-radius);
111111

112112
.btn-close {
113-
padding: ($modal-header-padding-y / 2) ($modal-header-padding-x / 2);
114-
margin: ($modal-header-padding-y / -2) ($modal-header-padding-x / -2) ($modal-header-padding-y / -2) auto;
113+
padding: ($modal-header-padding-y * .5) ($modal-header-padding-x * .5);
114+
margin: ($modal-header-padding-y * -.5) ($modal-header-padding-x * -.5) ($modal-header-padding-y * -.5) auto;
115115
}
116116
}
117117

@@ -138,15 +138,15 @@
138138
flex-shrink: 0;
139139
align-items: center; // vertically center
140140
justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
141-
padding: $modal-inner-padding - $modal-footer-margin-between / 2;
141+
padding: $modal-inner-padding - $modal-footer-margin-between * .5;
142142
border-top: $modal-footer-border-width solid $modal-footer-border-color;
143143
@include border-bottom-radius($modal-content-inner-border-radius);
144144

145145
// Place margin between footer elements
146146
// This solution is far from ideal because of the universal selector usage,
147147
// but is needed to fix https://github.com/twbs/bootstrap/issues/24800
148148
> * {
149-
margin: $modal-footer-margin-between / 2;
149+
margin: $modal-footer-margin-between * .5;
150150
}
151151
}
152152

‎scss/_offcanvas.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,8 @@
2121
padding: $offcanvas-padding-y $offcanvas-padding-x;
2222

2323
.btn-close {
24-
padding: ($offcanvas-padding-y / 2) ($offcanvas-padding-x / 2);
25-
margin: ($offcanvas-padding-y / -2) ($offcanvas-padding-x / -2) ($offcanvas-padding-y / -2) auto;
24+
padding: ($offcanvas-padding-y * .5) ($offcanvas-padding-x * .5);
25+
margin: ($offcanvas-padding-y * -.5) ($offcanvas-padding-x * -.5) ($offcanvas-padding-y * -.5) auto;
2626
}
2727
}
2828

‎scss/_popover.scss‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -40,13 +40,13 @@
4040

4141
&::before {
4242
bottom: 0;
43-
border-width: $popover-arrow-height ($popover-arrow-width / 2) 0;
43+
border-width: $popover-arrow-height ($popover-arrow-width * .5) 0;
4444
border-top-color: $popover-arrow-outer-color;
4545
}
4646

4747
&::after {
4848
bottom: $popover-border-width;
49-
border-width: $popover-arrow-height ($popover-arrow-width / 2) 0;
49+
border-width: $popover-arrow-height ($popover-arrow-width * .5) 0;
5050
border-top-color: $popover-arrow-color;
5151
}
5252
}
@@ -60,13 +60,13 @@
6060

6161
&::before {
6262
left: 0;
63-
border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0;
63+
border-width: ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5) 0;
6464
border-right-color: $popover-arrow-outer-color;
6565
}
6666

6767
&::after {
6868
left: $popover-border-width;
69-
border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0;
69+
border-width: ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5) 0;
7070
border-right-color: $popover-arrow-color;
7171
}
7272
}
@@ -78,13 +78,13 @@
7878

7979
&::before {
8080
top: 0;
81-
border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2);
81+
border-width: 0 ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5);
8282
border-bottom-color: $popover-arrow-outer-color;
8383
}
8484

8585
&::after {
8686
top: $popover-border-width;
87-
border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2);
87+
border-width: 0 ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5);
8888
border-bottom-color: $popover-arrow-color;
8989
}
9090
}
@@ -96,7 +96,7 @@
9696
left: 50%;
9797
display: block;
9898
width: $popover-arrow-width;
99-
margin-left: -$popover-arrow-width / 2;
99+
margin-left: -$popover-arrow-width * .5;
100100
content: "";
101101
border-bottom: $popover-border-width solid $popover-header-bg;
102102
}
@@ -110,13 +110,13 @@
110110

111111
&::before {
112112
right: 0;
113-
border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height;
113+
border-width: ($popover-arrow-width * .5) 0 ($popover-arrow-width * .5) $popover-arrow-height;
114114
border-left-color: $popover-arrow-outer-color;
115115
}
116116

117117
&::after {
118118
right: $popover-border-width;
119-
border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height;
119+
border-width: ($popover-arrow-width * .5) 0 ($popover-arrow-width * .5) $popover-arrow-height;
120120
border-left-color: $popover-arrow-color;
121121
}
122122
}

‎scss/_toasts.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@
4040
@include border-top-radius(subtract($toast-border-radius, $toast-border-width));
4141

4242
.btn-close {
43-
margin-right: $toast-padding-x / -2;
43+
margin-right: $toast-padding-x * -.5;
4444
margin-left: $toast-padding-x;
4545
}
4646
}

‎scss/_tooltip.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@
3737

3838
&::before {
3939
top: -1px;
40-
border-width: $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
40+
border-width: $tooltip-arrow-height ($tooltip-arrow-width * .5) 0;
4141
border-top-color: $tooltip-arrow-color;
4242
}
4343
}
@@ -53,7 +53,7 @@
5353

5454
&::before {
5555
right: -1px;
56-
border-width: ($tooltip-arrow-width / 2) $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
56+
border-width: ($tooltip-arrow-width * .5) $tooltip-arrow-height ($tooltip-arrow-width * .5) 0;
5757
border-right-color: $tooltip-arrow-color;
5858
}
5959
}
@@ -67,7 +67,7 @@
6767

6868
&::before {
6969
bottom: -1px;
70-
border-width: 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
70+
border-width: 0 ($tooltip-arrow-width * .5) $tooltip-arrow-height;
7171
border-bottom-color: $tooltip-arrow-color;
7272
}
7373
}
@@ -83,7 +83,7 @@
8383

8484
&::before {
8585
left: -1px;
86-
border-width: ($tooltip-arrow-width / 2) 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
86+
border-width: ($tooltip-arrow-width * .5) 0 ($tooltip-arrow-width * .5) $tooltip-arrow-height;
8787
border-left-color: $tooltip-arrow-color;
8888
}
8989
}

‎scss/_variables.scss‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -250,8 +250,8 @@ $gradient: linear-gradient(180deg, rgba($white, .15), rgba($white, 0)) !default;
250250
$spacer: 1rem !default;
251251
$spacers: (
252252
0: 0,
253-
1: $spacer / 4,
254-
2: $spacer / 2,
253+
1: $spacer * .25,
254+
2: $spacer * .5,
255255
3: $spacer,
256256
4: $spacer * 1.5,
257257
5: $spacer * 3,
@@ -350,7 +350,7 @@ $gutters: $spacers !default;
350350

351351
// Container padding
352352

353-
$container-padding-x: $grid-gutter-width / 2 !default;
353+
$container-padding-x: $grid-gutter-width * .5 !default;
354354

355355

356356
// Components
@@ -461,7 +461,7 @@ $font-sizes: (
461461
// scss-docs-end font-sizes
462462

463463
// scss-docs-start headings-variables
464-
$headings-margin-bottom: $spacer / 2 !default;
464+
$headings-margin-bottom: $spacer * .5 !default;
465465
$headings-font-family: null !default;
466466
$headings-font-style: null !default;
467467
$headings-font-weight: 500 !default;
@@ -718,7 +718,7 @@ $input-height-border: $input-border-width * 2 !default;
718718

719719
$input-height-inner: add($input-line-height * 1em, $input-padding-y * 2) !default;
720720
$input-height-inner-half: add($input-line-height * .5em, $input-padding-y) !default;
721-
$input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y / 2) !default;
721+
$input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y * .5) !default;
722722

723723
$input-height: add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false)) !default;
724724
$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;
943943
// Navbar
944944

945945
// scss-docs-start navbar-variables
946-
$navbar-padding-y: $spacer / 2 !default;
946+
$navbar-padding-y: $spacer * .5 !default;
947947
$navbar-padding-x: null !default;
948948

949949
$navbar-nav-link-padding-x: .5rem !default;
@@ -952,7 +952,7 @@ $navbar-brand-font-size: $font-size-lg !default;
952952
// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
953953
$nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
954954
$navbar-brand-height: $navbar-brand-font-size * $line-height-base !default;
955-
$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) / 2 !default;
955+
$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) * .5 !default;
956956
$navbar-brand-margin-end: 1rem !default;
957957

958958
$navbar-toggler-padding-y: .25rem !default;
@@ -1002,7 +1002,7 @@ $dropdown-border-radius: $border-radius !default;
10021002
$dropdown-border-width: $border-width !default;
10031003
$dropdown-inner-border-radius: subtract($dropdown-border-radius, $dropdown-border-width) !default;
10041004
$dropdown-divider-bg: $dropdown-border-color !default;
1005-
$dropdown-divider-margin-y: $spacer / 2 !default;
1005+
$dropdown-divider-margin-y: $spacer * .5 !default;
10061006
$dropdown-box-shadow: $box-shadow !default;
10071007

10081008
$dropdown-link-color: $gray-900 !default;
@@ -1014,7 +1014,7 @@ $dropdown-link-active-bg: $component-active-bg !default;
10141014

10151015
$dropdown-link-disabled-color: $gray-500 !default;
10161016

1017-
$dropdown-item-padding-y: $spacer / 4 !default;
1017+
$dropdown-item-padding-y: $spacer * .25 !default;
10181018
$dropdown-item-padding-x: $spacer !default;
10191019

10201020
$dropdown-header-color: $gray-600 !default;
@@ -1083,20 +1083,20 @@ $pagination-border-radius-lg: $border-radius-lg !default;
10831083
// scss-docs-start card-variables
10841084
$card-spacer-y: $spacer !default;
10851085
$card-spacer-x: $spacer !default;
1086-
$card-title-spacer-y: $spacer / 2 !default;
1086+
$card-title-spacer-y: $spacer * .5 !default;
10871087
$card-border-width: $border-width !default;
10881088
$card-border-radius: $border-radius !default;
10891089
$card-border-color: rgba($black, .125) !default;
10901090
$card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default;
1091-
$card-cap-padding-y: $card-spacer-y / 2 !default;
1091+
$card-cap-padding-y: $card-spacer-y * .5 !default;
10921092
$card-cap-padding-x: $card-spacer-x !default;
10931093
$card-cap-bg: rgba($black, .03) !default;
10941094
$card-cap-color: null !default;
10951095
$card-height: null !default;
10961096
$card-color: null !default;
10971097
$card-bg: $white !default;
10981098
$card-img-overlay-padding: $spacer !default;
1099-
$card-group-margin: $grid-gutter-width / 2 !default;
1099+
$card-group-margin: $grid-gutter-width * .5 !default;
11001100
// scss-docs-end card-variables
11011101

11021102
// Accordion
@@ -1144,8 +1144,8 @@ $tooltip-color: $white !default;
11441144
$tooltip-bg: $black !default;
11451145
$tooltip-border-radius: $border-radius !default;
11461146
$tooltip-opacity: .9 !default;
1147-
$tooltip-padding-y: $spacer / 4 !default;
1148-
$tooltip-padding-x: $spacer / 2 !default;
1147+
$tooltip-padding-y: $spacer * .25 !default;
1148+
$tooltip-padding-x: $spacer * .5 !default;
11491149
$tooltip-margin: 0 !default;
11501150

11511151
$tooltip-arrow-width: .8rem !default;
@@ -1311,7 +1311,7 @@ $list-group-border-color: rgba($black, .125) !default;
13111311
$list-group-border-width: $border-width !default;
13121312
$list-group-border-radius: $border-radius !default;
13131313

1314-
$list-group-item-padding-y: $spacer / 2 !default;
1314+
$list-group-item-padding-y: $spacer * .5 !default;
13151315
$list-group-item-padding-x: $spacer !default;
13161316
$list-group-item-bg-scale: -80% !default;
13171317
$list-group-item-color-scale: 40% !default;

0 commit comments

Comments
 (0)