Skip to content

Commit 791af53

Browse files
adam3smithadam3smith
committed
Fix SCSS
1 parent 7d7c06e commit 791af53

20 files changed

+108
-79
lines changed

‎_sass/bootstrap/_card.scss‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
//
22
// Base styles
33
//
4+
@use "sass:math";
45

56
.card {
67
position: relative;
@@ -58,7 +59,7 @@
5859
}
5960

6061
.card-subtitle {
61-
margin-top: -$card-spacer-y / 2;
62+
margin-top: - (math.div($card-spacer-y, 2));
6263
margin-bottom: 0;
6364
}
6465

@@ -109,15 +110,15 @@
109110
//
110111

111112
.card-header-tabs {
112-
margin-right: -$card-spacer-x / 2;
113+
margin-right: - (math.div($card-spacer-x, 2));
113114
margin-bottom: -$card-spacer-y;
114-
margin-left: -$card-spacer-x / 2;
115+
margin-left: - (math.div($card-spacer-x, 2));
115116
border-bottom: 0;
116117
}
117118

118119
.card-header-pills {
119-
margin-right: -$card-spacer-x / 2;
120-
margin-left: -$card-spacer-x / 2;
120+
margin-right: - (math.div($card-spacer-x, 2));
121+
margin-left: - (math.div($card-spacer-x, 2));
121122
}
122123

123124
// Card image

‎_sass/bootstrap/_carousel.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
// slide in its in-transition state. Only one of these occurs at a time.
1111
// 5. .carousel-item-next.carousel-item-left and .carousel-item-prev.carousel-item-right
1212
// is the upcoming slide in transition.
13+
@use "sass:math";
1314

1415
.carousel {
1516
position: relative;

‎_sass/bootstrap/_custom-forms.scss‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
// Checkboxes and radios
77
//
88
// Base class takes care of all the key behavioral aspects.
9+
@use "sass:math";
910

1011
.custom-control {
1112
position: relative;
@@ -26,13 +27,13 @@
2627
left: 0;
2728
z-index: -1; // Put the input behind the label so it doesn't overlay text
2829
width: $custom-control-indicator-size;
29-
height: ($font-size-base * $line-height-base + $custom-control-indicator-size) / 2;
30+
height: math.div(($font-size-base * $line-height-base + $custom-control-indicator-size), 2);
3031
opacity: 0;
3132

3233
&:checked ~ .custom-control-label::before {
3334
color: $custom-control-indicator-checked-color;
3435
border-color: $custom-control-indicator-checked-border-color;
35-
@include gradient-bg($custom-control-indicator-checked-bg);
36+
height: math.div(($font-size-base * $line-height-base + $custom-control-indicator-size), 2);
3637
@include box-shadow($custom-control-indicator-checked-box-shadow);
3738
}
3839

@@ -83,8 +84,7 @@
8384
// Background-color and (when enabled) gradient
8485
&::before {
8586
position: absolute;
86-
top: ($font-size-base * $line-height-base - $custom-control-indicator-size) / 2;
87-
left: -($custom-control-gutter + $custom-control-indicator-size);
87+
top: math.div(($font-size-base * $line-height-base - $custom-control-indicator-size), 2);
8888
display: block;
8989
width: $custom-control-indicator-size;
9090
height: $custom-control-indicator-size;
@@ -96,15 +96,16 @@
9696
}
9797

9898
// Foreground (icon)
99-
&::after {
99+
&::after {
100100
position: absolute;
101-
top: ($font-size-base * $line-height-base - $custom-control-indicator-size) / 2;
102-
left: -($custom-control-gutter + $custom-control-indicator-size);
101+
top: math.div(($font-size-base * $line-height-base - $custom-control-indicator-size), 2);
103102
display: block;
104103
width: $custom-control-indicator-size;
105104
height: $custom-control-indicator-size;
106105
content: "";
107-
background: no-repeat 50% / #{$custom-control-indicator-bg-size};
106+
background-repeat: no-repeat;
107+
background-position: 50%;
108+
background-size: $custom-control-indicator-bg-size;
108109
}
109110
}
110111

@@ -186,7 +187,7 @@
186187
}
187188

188189
&::after {
189-
top: add(($font-size-base * $line-height-base - $custom-control-indicator-size) / 2, $custom-control-indicator-border-width * 2);
190+
top: add(math.div(($font-size-base * $line-height-base - $custom-control-indicator-size), 2), $custom-control-indicator-border-width * 2);
190191
left: add(-($custom-switch-width + $custom-control-gutter), $custom-control-indicator-border-width * 2);
191192
width: $custom-switch-indicator-size;
192193
height: $custom-switch-indicator-size;
@@ -404,7 +405,7 @@
404405
&::-webkit-slider-thumb {
405406
width: $custom-range-thumb-width;
406407
height: $custom-range-thumb-height;
407-
margin-top: ($custom-range-track-height - $custom-range-thumb-height) / 2; // Webkit specific
408+
margin-top: math.div($custom-range-track-height - $custom-range-thumb-height, 2); // Webkit specific
408409
@include gradient-bg($custom-range-thumb-bg);
409410
border: $custom-range-thumb-border;
410411
@include border-radius($custom-range-thumb-border-radius);
@@ -479,7 +480,7 @@
479480
cursor: $custom-range-track-cursor;
480481
background-color: transparent;
481482
border-color: transparent;
482-
border-width: $custom-range-thumb-height / 2;
483+
border-width: math.div($custom-range-thumb-height, 2);
483484
@include box-shadow($custom-range-track-box-shadow);
484485
}
485486

‎_sass/bootstrap/_forms.scss‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
// stylelint-disable selector-no-qualifying-type
22

3+
@use "sass:math";
4+
35
//
46
// Textual form controls
57
//
@@ -199,13 +201,13 @@ textarea.form-control {
199201
.form-row {
200202
display: flex;
201203
flex-wrap: wrap;
202-
margin-right: -$form-grid-gutter-width / 2;
203-
margin-left: -$form-grid-gutter-width / 2;
204+
margin-right: - (math.div($form-grid-gutter-width, 2));
205+
margin-left: - (math.div($form-grid-gutter-width, 2));
204206

205207
> .col,
206208
> [class*="col-"] {
207-
padding-right: $form-grid-gutter-width / 2;
208-
padding-left: $form-grid-gutter-width / 2;
209+
padding-right: math.div($form-grid-gutter-width, 2);
210+
padding-left: math.div($form-grid-gutter-width, 2);
209211
}
210212
}
211213

‎_sass/bootstrap/_functions.scss‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@
44

55
// Ascending
66
// Used to evaluate Sass maps like our grid breakpoints.
7+
8+
@use "sass:math";
9+
710
@mixin _assert-ascending($map, $map-name) {
811
$prev-key: null;
912
$prev-num: null;
@@ -75,7 +78,7 @@
7578
$g: green($color);
7679
$b: blue($color);
7780

78-
$yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
81+
$yiq: math.div(($r * 299) + ($g * 587) + ($b * 114), 1000);
7982

8083
@if ($yiq >= $yiq-contrasted-threshold) {
8184
@return $dark;

‎_sass/bootstrap/_jumbotron.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1+
@use "sass:math";
12
.jumbotron {
2-
padding: $jumbotron-padding ($jumbotron-padding / 2);
3+
padding: $jumbotron-padding (math.div($jumbotron-padding, 2));
34
margin-bottom: $jumbotron-padding;
45
color: $jumbotron-color;
56
background-color: $jumbotron-bg;

‎_sass/bootstrap/_modal.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
// .modal-dialog - positioning shell for the actual modal
44
// .modal-content - actual modal w/ bg and corners and stuff
55

6-
6+
@use "sass:math";
77
.modal-open {
88
// Kill the scroll on the body
99
overflow: hidden;
@@ -175,15 +175,15 @@
175175
flex-wrap: wrap;
176176
align-items: center; // vertically center
177177
justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
178-
padding: $modal-inner-padding - $modal-footer-margin-between / 2;
178+
padding: $modal-inner-padding - math.div($modal-footer-margin-between, 2);
179179
border-top: $modal-footer-border-width solid $modal-footer-border-color;
180180
@include border-bottom-radius($modal-content-inner-border-radius);
181181

182182
// Place margin between footer elements
183183
// This solution is far from ideal because of the universal selector usage,
184184
// but is needed to fix https://github.com/twbs/bootstrap/issues/24800
185185
> * {
186-
margin: $modal-footer-margin-between / 2;
186+
margin: math.div($modal-footer-margin-between, 2);
187187
}
188188
}
189189

‎_sass/bootstrap/_popover.scss‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@use "sass:math";
12
.popover {
23
position: absolute;
34
top: 0;
@@ -43,13 +44,13 @@
4344

4445
&::before {
4546
bottom: 0;
46-
border-width: $popover-arrow-height ($popover-arrow-width / 2) 0;
47+
border-width: $popover-arrow-height math.div($popover-arrow-width, 2) 0;
4748
border-top-color: $popover-arrow-outer-color;
4849
}
4950

5051
&::after {
5152
bottom: $popover-border-width;
52-
border-width: $popover-arrow-height ($popover-arrow-width / 2) 0;
53+
border-width: $popover-arrow-height math.div($popover-arrow-width, 2) 0;
5354
border-top-color: $popover-arrow-color;
5455
}
5556
}
@@ -66,13 +67,13 @@
6667

6768
&::before {
6869
left: 0;
69-
border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0;
70+
border-width: math.div($popover-arrow-width, 2) $popover-arrow-height math.div($popover-arrow-width, 2) 0;
7071
border-right-color: $popover-arrow-outer-color;
7172
}
7273

7374
&::after {
7475
left: $popover-border-width;
75-
border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0;
76+
border-width: math.div($popover-arrow-width, 2) $popover-arrow-height math.div($popover-arrow-width, 2) 0;
7677
border-right-color: $popover-arrow-color;
7778
}
7879
}
@@ -86,13 +87,13 @@
8687

8788
&::before {
8889
top: 0;
89-
border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2);
90+
border-width: 0 math.div($popover-arrow-width, 2) $popover-arrow-height math.div($popover-arrow-width, 2);
9091
border-bottom-color: $popover-arrow-outer-color;
9192
}
9293

9394
&::after {
9495
top: $popover-border-width;
95-
border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2);
96+
border-width: 0 math.div($popover-arrow-width, 2) $popover-arrow-height math.div($popover-arrow-width, 2);
9697
border-bottom-color: $popover-arrow-color;
9798
}
9899
}
@@ -104,7 +105,7 @@
104105
left: 50%;
105106
display: block;
106107
width: $popover-arrow-width;
107-
margin-left: -$popover-arrow-width / 2;
108+
margin-left: - (math.div($popover-arrow-width, 2));
108109
content: "";
109110
border-bottom: $popover-border-width solid $popover-header-bg;
110111
}
@@ -121,13 +122,13 @@
121122

122123
&::before {
123124
right: 0;
124-
border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height;
125+
border-width: math.div($popover-arrow-width, 2) 0 math.div($popover-arrow-width, 2) $popover-arrow-height;
125126
border-left-color: $popover-arrow-outer-color;
126127
}
127128

128129
&::after {
129130
right: $popover-border-width;
130-
border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height;
131+
border-width: math.div($popover-arrow-width, 2) 0 math.div($popover-arrow-width, 2) $popover-arrow-height;
131132
border-left-color: $popover-arrow-color;
132133
}
133134
}

‎_sass/bootstrap/_tooltip.scss‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
// Base class
2+
@use "sass:math";
23
.tooltip {
34
position: absolute;
45
z-index: $zindex-tooltip;
@@ -37,7 +38,7 @@
3738

3839
&::before {
3940
top: 0;
40-
border-width: $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
41+
border-width: $tooltip-arrow-height math.div($tooltip-arrow-width, 2) 0;
4142
border-top-color: $tooltip-arrow-color;
4243
}
4344
}
@@ -53,7 +54,7 @@
5354

5455
&::before {
5556
right: 0;
56-
border-width: ($tooltip-arrow-width / 2) $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
57+
border-width: math.div($tooltip-arrow-width, 2) $tooltip-arrow-height math.div($tooltip-arrow-width, 2) 0;
5758
border-right-color: $tooltip-arrow-color;
5859
}
5960
}
@@ -67,7 +68,7 @@
6768

6869
&::before {
6970
bottom: 0;
70-
border-width: 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
71+
border-width: 0 math.div($tooltip-arrow-width, 2) $tooltip-arrow-height;
7172
border-bottom-color: $tooltip-arrow-color;
7273
}
7374
}
@@ -83,7 +84,7 @@
8384

8485
&::before {
8586
left: 0;
86-
border-width: ($tooltip-arrow-width / 2) 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
87+
border-width: math.div($tooltip-arrow-width, 2) 0 math.div($tooltip-arrow-width, 2) $tooltip-arrow-height;
8788
border-left-color: $tooltip-arrow-color;
8889
}
8990
}

‎_sass/bootstrap/_variables.scss‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@
55

66
// Color system
77

8+
@use "sass:math";
9+
810
$white: #fff !default;
911
$gray-100: #f8f9fa !default;
1012
$gray-200: #e9ecef !default;
@@ -299,7 +301,7 @@ $h4-font-size: $font-size-base * 1.5 !default;
299301
$h5-font-size: $font-size-base * 1.25 !default;
300302
$h6-font-size: $font-size-base !default;
301303

302-
$headings-margin-bottom: $spacer / 2 !default;
304+
$headings-margin-bottom: math.div($spacer, 2) !default;
303305
$headings-font-family: null !default;
304306
$headings-font-weight: 500 !default;
305307
$headings-line-height: 1.2 !default;
@@ -495,7 +497,7 @@ $input-height-border: $input-border-width * 2 !default;
495497

496498
$input-height-inner: add($input-line-height * 1em, $input-padding-y * 2) !default;
497499
$input-height-inner-half: add($input-line-height * .5em, $input-padding-y) !default;
498-
$input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y / 2) !default;
500+
$input-height-inner-quarter: add($input-line-height * .25em, math.div($input-padding-y, 2)) !default;
499501

500502
$input-height: add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false)) !default;
501503
$input-height-sm: add($input-line-height-sm * 1em, add($input-padding-y-sm * 2, $input-height-border, false)) !default;
@@ -565,7 +567,7 @@ $custom-radio-indicator-border-radius: 50% !default;
565567
$custom-radio-indicator-icon-checked: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'><circle r='3' fill='#{$custom-control-indicator-checked-color}'/></svg>") !default;
566568

567569
$custom-switch-width: $custom-control-indicator-size * 1.75 !default;
568-
$custom-switch-indicator-border-radius: $custom-control-indicator-size / 2 !default;
570+
$custom-switch-indicator-border-radius: math.div($custom-control-indicator-size, 2) !default;
569571
$custom-switch-indicator-size: subtract($custom-control-indicator-size, $custom-control-indicator-border-width * 4) !default;
570572

571573
$custom-select-padding-y: $input-padding-y !default;
@@ -710,12 +712,12 @@ $nav-pills-link-active-color: $component-active-color !default;
710712
$nav-pills-link-active-bg: $component-active-bg !default;
711713

712714
$nav-divider-color: $gray-200 !default;
713-
$nav-divider-margin-y: calc($spacer / 2) !default;
715+
$nav-divider-margin-y: math.div($spacer, 2) !default;
714716

715717

716718
// Navbar
717719

718-
$navbar-padding-y: calc($spacer / 2) !default;
720+
$navbar-padding-y: math.div($spacer, 2) !default;
719721
$navbar-padding-x: $spacer !default;
720722

721723
$navbar-nav-link-padding-x: .5rem !default;
@@ -724,7 +726,7 @@ $navbar-brand-font-size: $font-size-lg !default;
724726
// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
725727
$nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
726728
$navbar-brand-height: $navbar-brand-font-size * $line-height-base !default;
727-
$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) / 2 !default;
729+
$navbar-brand-padding-y: math.div($nav-link-height - $navbar-brand-height, 2) !default;
728730

729731
$navbar-toggler-padding-y: .25rem !default;
730732
$navbar-toggler-padding-x: .75rem !default;
@@ -840,7 +842,7 @@ $card-bg: $white !default;
840842

841843
$card-img-overlay-padding: 1.25rem !default;
842844

843-
$card-group-margin: $grid-gutter-width / 2 !default;
845+
$card-group-margin: math.div($grid-gutter-width, 2) !default;
844846
$card-deck-margin: $card-group-margin !default;
845847

846848
$card-columns-count: 3 !default;

0 commit comments

Comments
 (0)