fix: replace sass division with multiplication (#6834)

z1m1n · web-flow · commit dd051e93cbb2 · 2021-12-18T00:11:01.000+02:00
diff --git a/src/_variables.scss b/src/_variables.scss
@@ -30,8 +30,8 @@ $b-custom-checkbox-indicator-border-radius-sm: $border-radius-sm !default;
 // Custom switch sizes
 $b-custom-switch-width-lg: $b-custom-control-indicator-size-lg * 1.75 !default;
 $b-custom-switch-width-sm: $b-custom-control-indicator-size-sm * 1.75 !default;
-$b-custom-switch-indicator-border-radius-lg: $b-custom-control-indicator-size-lg / 2 !default;
-$b-custom-switch-indicator-border-radius-sm: $b-custom-control-indicator-size-sm / 2 !default;
+$b-custom-switch-indicator-border-radius-lg: $b-custom-control-indicator-size-lg * 0.5 !default;
+$b-custom-switch-indicator-border-radius-sm: $b-custom-control-indicator-size-sm * 0.5 !default;
 $b-custom-switch-indicator-size-lg: calc(
   #{$b-custom-control-indicator-size-lg} - #{$custom-control-indicator-border-width * 4}
 ) !default;
diff --git a/src/components/form-checkbox/_form-checkbox.scss b/src/components/form-checkbox/_form-checkbox.scss
@@ -7,15 +7,15 @@
   padding-left: $b-custom-control-gutter-lg + $b-custom-control-indicator-size-lg;
 
   .custom-control-label::before {
-    top: ($font-size-lg * $line-height-lg - $b-custom-control-indicator-size-lg) / 2;
+    top: ($font-size-lg * $line-height-lg - $b-custom-control-indicator-size-lg) * 0.5;
     left: -($b-custom-control-gutter-lg + $b-custom-control-indicator-size-lg);
     width: $b-custom-control-indicator-size-lg;
     height: $b-custom-control-indicator-size-lg;
     @include border-radius($b-custom-checkbox-indicator-border-radius-lg);
   }
 
   .custom-control-label::after {
-    top: ($font-size-lg * $line-height-lg - $b-custom-control-indicator-size-lg) / 2;
+    top: ($font-size-lg * $line-height-lg - $b-custom-control-indicator-size-lg) * 0.5;
     left: -($b-custom-control-gutter-lg + $b-custom-control-indicator-size-lg);
     width: $b-custom-control-indicator-size-lg;
     height: $b-custom-control-indicator-size-lg;
@@ -30,15 +30,15 @@
   padding-left: $b-custom-control-gutter-sm + $b-custom-control-indicator-size-sm;
 
   .custom-control-label::before {
-    top: ($font-size-sm * $line-height-sm - $b-custom-control-indicator-size-sm) / 2;
+    top: ($font-size-sm * $line-height-sm - $b-custom-control-indicator-size-sm) * 0.5;
     left: -($b-custom-control-gutter-sm + $b-custom-control-indicator-size-sm);
     width: $b-custom-control-indicator-size-sm;
     height: $b-custom-control-indicator-size-sm;
     @include border-radius($b-custom-checkbox-indicator-border-radius-sm);
   }
 
   .custom-control-label::after {
-    top: ($font-size-sm * $line-height-sm - $b-custom-control-indicator-size-sm) / 2;
+    top: ($font-size-sm * $line-height-sm - $b-custom-control-indicator-size-sm) * 0.5;
     left: -($b-custom-control-gutter-sm + $b-custom-control-indicator-size-sm);
     width: $b-custom-control-indicator-size-sm;
     height: $b-custom-control-indicator-size-sm;
@@ -55,7 +55,7 @@
     line-height: $line-height-lg;
 
     &::before {
-      top: ($font-size-lg * $line-height-lg - $b-custom-control-indicator-size-lg) / 2;
+      top: ($font-size-lg * $line-height-lg - $b-custom-control-indicator-size-lg) * 0.5;
       height: $b-custom-control-indicator-size-lg;
       left: -($b-custom-switch-width-lg + $b-custom-control-gutter-lg);
       width: $b-custom-switch-width-lg;
@@ -64,7 +64,7 @@
 
     &::after {
       top: calc(
-        #{(($font-size-lg * $line-height-lg - $b-custom-control-indicator-size-lg) / 2)} + #{$custom-control-indicator-border-width *
+        #{(($font-size-lg * $line-height-lg - $b-custom-control-indicator-size-lg) * 0.5)} + #{$custom-control-indicator-border-width *
           2}
       );
       left: calc(
@@ -94,7 +94,7 @@
     line-height: $line-height-sm;
 
     &::before {
-      top: ($font-size-sm * $line-height-sm - $b-custom-control-indicator-size-sm) / 2;
+      top: ($font-size-sm * $line-height-sm - $b-custom-control-indicator-size-sm) * 0.5;
       left: -($b-custom-switch-width-sm + $b-custom-control-gutter-sm);
       width: $b-custom-switch-width-sm;
       height: $b-custom-control-indicator-size-sm;
@@ -103,7 +103,7 @@
 
     &::after {
       top: calc(
-        #{(($font-size-sm * $line-height-sm - $b-custom-control-indicator-size-sm) / 2)} + #{$custom-control-indicator-border-width *
+        #{(($font-size-sm * $line-height-sm - $b-custom-control-indicator-size-sm) * 0.5)} + #{$custom-control-indicator-border-width *
           2}
       );
       left: calc(
diff --git a/src/components/form-input/_form-input.scss b/src/components/form-input/_form-input.scss
@@ -17,20 +17,20 @@
 input[type="color"].form-control {
   height: $input-height;
   // We use the smaller padding to make the color block larger
-  padding: ($input-padding-y-sm / 2) ($input-padding-x-sm / 2);
+  padding: ($input-padding-y-sm * 0.5) ($input-padding-x-sm * 0.5);
 }
 
 input[type="color"].form-control.form-control-sm,
 .input-group-sm input[type="color"].form-control {
   height: $input-height-sm;
   // We use the smaller padding to make the color block larger
-  padding: ($input-padding-y-sm / 2) ($input-padding-x-sm / 2);
+  padding: ($input-padding-y-sm * 0.5) ($input-padding-x-sm * 0.5);
 }
 
 input[type="color"].form-control.form-control-lg,
 .input-group-lg input[type="color"].form-control {
   height: $input-height-lg;
-  padding: ($input-padding-y-sm / 2) ($input-padding-x-sm / 2);
+  padding: ($input-padding-y-sm * 0.5) ($input-padding-x-sm * 0.5);
 }
 
 input[type="color"].form-control:disabled {
diff --git a/src/components/form-radio/_form-radio.scss b/src/components/form-radio/_form-radio.scss
@@ -7,15 +7,15 @@
   padding-left: $b-custom-control-gutter-lg + $b-custom-control-indicator-size-lg;
 
   .custom-control-label::before {
-    top: ($font-size-lg * $line-height-lg - $b-custom-control-indicator-size-lg) / 2;
+    top: ($font-size-lg * $line-height-lg - $b-custom-control-indicator-size-lg) * 0.5;
     left: -($b-custom-control-gutter-lg + $b-custom-control-indicator-size-lg);
     width: $b-custom-control-indicator-size-lg;
     height: $b-custom-control-indicator-size-lg;
     border-radius: $b-custom-radio-indicator-border-radius-lg;
   }
 
   .custom-control-label::after {
-    top: ($font-size-lg * $line-height-lg - $b-custom-control-indicator-size-lg) / 2;
+    top: ($font-size-lg * $line-height-lg - $b-custom-control-indicator-size-lg) * 0.5;
     left: -($b-custom-control-gutter-lg + $b-custom-control-indicator-size-lg);
     width: $b-custom-control-indicator-size-lg;
     height: $b-custom-control-indicator-size-lg;
@@ -30,15 +30,15 @@
   padding-left: $b-custom-control-gutter-sm + $b-custom-control-indicator-size-sm;
 
   .custom-control-label::before {
-    top: ($font-size-sm * $line-height-sm - $b-custom-control-indicator-size-sm) / 2;
+    top: ($font-size-sm * $line-height-sm - $b-custom-control-indicator-size-sm) * 0.5;
     left: -($b-custom-control-gutter-sm + $b-custom-control-indicator-size-sm);
     width: $b-custom-control-indicator-size-sm;
     height: $b-custom-control-indicator-size-sm;
     border-radius: $b-custom-radio-indicator-border-radius-sm;
   }
 
   .custom-control-label::after {
-    top: ($font-size-sm * $line-height-sm - $b-custom-control-indicator-size-sm) / 2;
+    top: ($font-size-sm * $line-height-sm - $b-custom-control-indicator-size-sm) * 0.5;
     left: -($b-custom-control-gutter-sm + $b-custom-control-indicator-size-sm);
     width: $b-custom-control-indicator-size-sm;
     height: $b-custom-control-indicator-size-sm;
diff --git a/src/components/skeleton/_skeleton.scss b/src/components/skeleton/_skeleton.scss
@@ -104,7 +104,7 @@
 
 // Fade animation
 .b-skeleton-animate-fade {
-  animation: b-skeleton-animate-fade ($b-skeleton-animation-duration / 2) ease-in-out alternate
+  animation: b-skeleton-animate-fade ($b-skeleton-animation-duration * 0.5) ease-in-out alternate
     infinite;
 
   @media (prefers-reduced-motion: reduce) {
@@ -123,7 +123,7 @@
 
 // Throb animation
 .b-skeleton-animate-throb {
-  animation: b-skeleton-animate-throb ($b-skeleton-animation-duration / 2) ease-in alternate
+  animation: b-skeleton-animate-throb ($b-skeleton-animation-duration * 0.5) ease-in alternate
     infinite;
 
   @media (prefers-reduced-motion: reduce) {
