Skip to content

Commit 03b84d4

Browse files
authored
Merge pull request #82 from peter1357908/master
Resolved all division deprecation warnings with sass-migrator
2 parents cc7c32a + a1e4916 commit 03b84d4

File tree

6 files changed

+42
-34
lines changed

6 files changed

+42
-34
lines changed

_sass/bootstrap/_variables.scss

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -299,7 +299,7 @@ $h4-font-size: $font-size-base * 1.5 !default;
299299
$h5-font-size: $font-size-base * 1.25 !default;
300300
$h6-font-size: $font-size-base !default;
301301

302-
$headings-margin-bottom: $spacer / 2 !default;
302+
$headings-margin-bottom: $spacer * 0.5 !default;
303303
$headings-font-family: null !default;
304304
$headings-font-weight: 500 !default;
305305
$headings-line-height: 1.2 !default;
@@ -495,7 +495,7 @@ $input-height-border: $input-border-width * 2 !default;
495495

496496
$input-height-inner: add($input-line-height * 1em, $input-padding-y * 2) !default;
497497
$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;
498+
$input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y * 0.5) !default;
499499

500500
$input-height: add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false)) !default;
501501
$input-height-sm: add($input-line-height-sm * 1em, add($input-padding-y-sm * 2, $input-height-border, false)) !default;
@@ -565,7 +565,7 @@ $custom-radio-indicator-border-radius: 50% !default;
565565
$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;
566566

567567
$custom-switch-width: $custom-control-indicator-size * 1.75 !default;
568-
$custom-switch-indicator-border-radius: $custom-control-indicator-size / 2 !default;
568+
$custom-switch-indicator-border-radius: $custom-control-indicator-size * 0.5 !default;
569569
$custom-switch-indicator-size: subtract($custom-control-indicator-size, $custom-control-indicator-border-width * 4) !default;
570570

571571
$custom-select-padding-y: $input-padding-y !default;
@@ -710,12 +710,12 @@ $nav-pills-link-active-color: $component-active-color !default;
710710
$nav-pills-link-active-bg: $component-active-bg !default;
711711

712712
$nav-divider-color: $gray-200 !default;
713-
$nav-divider-margin-y: $spacer / 2 !default;
713+
$nav-divider-margin-y: $spacer * 0.5 !default;
714714

715715

716716
// Navbar
717717

718-
$navbar-padding-y: $spacer / 2 !default;
718+
$navbar-padding-y: $spacer * 0.5 !default;
719719
$navbar-padding-x: $spacer !default;
720720

721721
$navbar-nav-link-padding-x: .5rem !default;
@@ -724,7 +724,7 @@ $navbar-brand-font-size: $font-size-lg !default;
724724
// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
725725
$nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
726726
$navbar-brand-height: $navbar-brand-font-size * $line-height-base !default;
727-
$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) / 2 !default;
727+
$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) * 0.5 !default;
728728

729729
$navbar-toggler-padding-y: .25rem !default;
730730
$navbar-toggler-padding-x: .75rem !default;
@@ -844,7 +844,7 @@ $card-bg: $white !default;
844844

845845
$card-img-overlay-padding: 1.25rem !default;
846846

847-
$card-group-margin: $grid-gutter-width / 2 !default;
847+
$card-group-margin: $grid-gutter-width * 0.5 !default;
848848
$card-deck-margin: $card-group-margin !default;
849849

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

_sass/bootstrap/mixins/_grid-framework.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@
88
%grid-column {
99
position: relative;
1010
width: 100%;
11-
padding-right: $gutter / 2;
12-
padding-left: $gutter / 2;
11+
padding-right: $gutter * 0.5;
12+
padding-left: $gutter * 0.5;
1313
}
1414

1515
@each $breakpoint in map-keys($breakpoints) {

_sass/bootstrap/mixins/_grid.scss

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,21 @@
22
//
33
// Generate semantic grid columns with these mixins.
44

5+
@use "sass:math";
6+
57
@mixin make-container($gutter: $grid-gutter-width) {
68
width: 100%;
7-
padding-right: $gutter / 2;
8-
padding-left: $gutter / 2;
9+
padding-right: $gutter * 0.5;
10+
padding-left: $gutter * 0.5;
911
margin-right: auto;
1012
margin-left: auto;
1113
}
1214

1315
@mixin make-row($gutter: $grid-gutter-width) {
1416
display: flex;
1517
flex-wrap: wrap;
16-
margin-right: -$gutter / 2;
17-
margin-left: -$gutter / 2;
18+
margin-right: -$gutter * 0.5;
19+
margin-left: -$gutter * 0.5;
1820
}
1921

2022
// For each breakpoint, define the maximum width of the container in a media query
@@ -33,16 +35,16 @@
3335
// always setting `width: 100%;`. This works because we use `flex` values
3436
// later on to override this initial width.
3537
width: 100%;
36-
padding-right: $gutter / 2;
37-
padding-left: $gutter / 2;
38+
padding-right: $gutter * 0.5;
39+
padding-left: $gutter * 0.5;
3840
}
3941

4042
@mixin make-col($size, $columns: $grid-columns) {
41-
flex: 0 0 percentage($size / $columns);
43+
flex: 0 0 percentage(math.div($size, $columns));
4244
// Add a `max-width` to ensure content within each column does not blow out
4345
// the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
4446
// do not appear to require this.
45-
max-width: percentage($size / $columns);
47+
max-width: percentage(math.div($size, $columns));
4648
}
4749

4850
@mixin make-col-auto() {
@@ -52,7 +54,7 @@
5254
}
5355

5456
@mixin make-col-offset($size, $columns: $grid-columns) {
55-
$num: $size / $columns;
57+
$num: math.div($size, $columns);
5658
margin-left: if($num == 0, 0, percentage($num));
5759
}
5860

@@ -63,7 +65,7 @@
6365
// style grid.
6466
@mixin row-cols($count) {
6567
> * {
66-
flex: 0 0 100% / $count;
67-
max-width: 100% / $count;
68+
flex: 0 0 math.div(100%, $count);
69+
max-width: math.div(100%, $count);
6870
}
6971
}

_sass/bootstrap/vendor/_rfs.scss

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@
99
// Configuration
1010

1111
// Base font size
12+
@use "sass:math";
13+
1214
$rfs-base-font-size: 1.25rem !default;
1315
$rfs-font-size-unit: rem !default;
1416

@@ -43,21 +45,21 @@ $rfs-base-font-size-unit: unit($rfs-base-font-size);
4345

4446
// Remove px-unit from $rfs-base-font-size for calculations
4547
@if $rfs-base-font-size-unit == "px" {
46-
$rfs-base-font-size: $rfs-base-font-size / ($rfs-base-font-size * 0 + 1);
48+
$rfs-base-font-size: math.div($rfs-base-font-size, $rfs-base-font-size * 0 + 1);
4749
}
4850
@else if $rfs-base-font-size-unit == "rem" {
49-
$rfs-base-font-size: $rfs-base-font-size / ($rfs-base-font-size * 0 + 1 / $rfs-rem-value);
51+
$rfs-base-font-size: math.div($rfs-base-font-size, $rfs-base-font-size * 0 + math.div(1, $rfs-rem-value));
5052
}
5153

5254
// Cache $rfs-breakpoint unit to prevent multiple calls
5355
$rfs-breakpoint-unit-cache: unit($rfs-breakpoint);
5456

5557
// Remove unit from $rfs-breakpoint for calculations
5658
@if $rfs-breakpoint-unit-cache == "px" {
57-
$rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1);
59+
$rfs-breakpoint: math.div($rfs-breakpoint, $rfs-breakpoint * 0 + 1);
5860
}
5961
@else if $rfs-breakpoint-unit-cache == "rem" or $rfs-breakpoint-unit-cache == "em" {
60-
$rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1 / $rfs-rem-value);
62+
$rfs-breakpoint: math.div($rfs-breakpoint, $rfs-breakpoint * 0 + math.div(1, $rfs-rem-value));
6163
}
6264

6365
// Responsive font-size mixin
@@ -79,15 +81,15 @@ $rfs-breakpoint-unit-cache: unit($rfs-breakpoint);
7981

8082
// Remove px-unit from $fs for calculations
8183
@if $fs-unit == "px" {
82-
$fs: $fs / ($fs * 0 + 1);
84+
$fs: math.div($fs, $fs * 0 + 1);
8385
}
8486
@else if $fs-unit == "rem" {
85-
$fs: $fs / ($fs * 0 + 1 / $rfs-rem-value);
87+
$fs: math.div($fs, $fs * 0 + math.div(1, $rfs-rem-value));
8688
}
8789

8890
// Set default font-size
8991
@if $rfs-font-size-unit == rem {
90-
$rfs-static: #{$fs / $rfs-rem-value}rem#{$rfs-suffix};
92+
$rfs-static: #{math.div($fs, $rfs-rem-value)}rem#{$rfs-suffix};
9193
}
9294
@else if $rfs-font-size-unit == px {
9395
$rfs-static: #{$fs}px#{$rfs-suffix};
@@ -103,20 +105,20 @@ $rfs-breakpoint-unit-cache: unit($rfs-breakpoint);
103105
$variable-unit: null;
104106

105107
// Calculate minimum font-size for given font-size
106-
$fs-min: $rfs-base-font-size + ($fs - $rfs-base-font-size) / $rfs-factor;
108+
$fs-min: $rfs-base-font-size + math.div($fs - $rfs-base-font-size, $rfs-factor);
107109

108110
// Calculate difference between given font-size and minimum font-size for given font-size
109111
$fs-diff: $fs - $fs-min;
110112

111113
// Base font-size formatting
112114
// No need to check if the unit is valid, because we did that before
113-
$min-width: if($rfs-font-size-unit == rem, #{$fs-min / $rfs-rem-value}rem, #{$fs-min}px);
115+
$min-width: if($rfs-font-size-unit == rem, #{math.div($fs-min, $rfs-rem-value)}rem, #{$fs-min}px);
114116

115117
// If two-dimensional, use smallest of screen width and height
116118
$variable-unit: if($rfs-two-dimensional, vmin, vw);
117119

118120
// Calculate the variable width between 0 and $rfs-breakpoint
119-
$variable-width: #{$fs-diff * 100 / $rfs-breakpoint}#{$variable-unit};
121+
$variable-width: #{math.div($fs-diff * 100, $rfs-breakpoint)}#{$variable-unit};
120122

121123
// Set the calculated font-size.
122124
$rfs-fluid: calc(#{$min-width} + #{$variable-width}) #{$rfs-suffix};
@@ -132,7 +134,7 @@ $rfs-breakpoint-unit-cache: unit($rfs-breakpoint);
132134

133135
// RFS breakpoint formatting
134136
@if $rfs-breakpoint-unit == em or $rfs-breakpoint-unit == rem {
135-
$mq-value: #{$rfs-breakpoint / $rfs-rem-value}#{$rfs-breakpoint-unit};
137+
$mq-value: #{math.div($rfs-breakpoint, $rfs-rem-value)}#{$rfs-breakpoint-unit};
136138
}
137139
@else if $rfs-breakpoint-unit == px {
138140
$mq-value: #{$rfs-breakpoint}px;

_sass/libraries/hamburgers/_base.scss

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
// Hamburger
22
// ==================================================
3+
@use "sass:math";
4+
35
.hamburger {
46
padding: $hamburger-padding-y $hamburger-padding-x;
57
display: inline-block;
@@ -55,7 +57,7 @@
5557
.hamburger-inner {
5658
display: block;
5759
top: 50%;
58-
margin-top: $hamburger-layer-height / -2;
60+
margin-top: math.div($hamburger-layer-height, -2);
5961

6062
&,
6163
&::before,

_sass/libraries/hamburgers/types/_slider.scss

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
1+
@use "sass:math";
2+
13
@if index($hamburger-types, slider) {
24
/*
35
* Slider
46
*/
57
.hamburger--slider {
68
.hamburger-inner {
7-
top: $hamburger-layer-height / 2;
9+
top: $hamburger-layer-height * 0.5;
810

911
&::before {
1012
top: $hamburger-layer-height + $hamburger-layer-spacing;
@@ -25,7 +27,7 @@
2527
transform: translate3d(0, $y-offset, 0) rotate(45deg);
2628

2729
&::before {
28-
transform: rotate(-45deg) translate3d($hamburger-layer-width / -7, $hamburger-layer-spacing * -1, 0);
30+
transform: rotate(-45deg) translate3d(math.div($hamburger-layer-width, -7), $hamburger-layer-spacing * -1, 0);
2931
opacity: 0;
3032
}
3133

0 commit comments

Comments
 (0)