chore(styles): remove / symbol (#9398)

* chore(components): replace division symbol * chore(styles): remove division symbol Co-authored-by: Scott Strubberg <[email protected]>
carbon-design-system · Aug 5, 2021 · 9c2eb1c · 9c2eb1c
1 parent 15dd30a
commit 9c2eb1c
Show file tree

Hide file tree

Showing 8 changed files with 22 additions and 20 deletions.
diff --git a/packages/components/src/components/loading/_functions.scss b/packages/components/src/components/loading/_functions.scss
@@ -6,5 +6,5 @@
 //
 
 @function loading-progress($circumference, $percentage) {
-  @return $circumference - $percentage / 100 * $circumference;
+  @return $circumference - $percentage * 0.01 * $circumference;
 }
diff --git a/packages/components/src/components/pagination-nav/_pagination-nav.scss b/packages/components/src/components/pagination-nav/_pagination-nav.scss
@@ -38,7 +38,7 @@
 
   .#{$prefix}--pagination-nav__page--active + &::after,
   &.#{$prefix}--pagination-nav__page--active::after {
-    left: calc(50% - #{$carbon--spacing-05 / 2});
+    left: calc(50% - #{$carbon--spacing-05 * 0.5});
     width: $carbon--spacing-05;
     opacity: 1;
   }
@@ -187,8 +187,8 @@
 
   .#{$prefix}--pagination-nav__select-icon {
     position: absolute;
-    top: calc(50% - #{$select-icon-top-position / 2});
-    left: calc(50% - #{$select-icon-top-position / 2});
+    top: calc(50% - #{$select-icon-top-position * 0.5});
+    left: calc(50% - #{$select-icon-top-position * 0.5});
     pointer-events: none;
   }
 

diff --git a/packages/components/src/components/structured-list/_mixins.scss b/packages/components/src/components/structured-list/_mixins.scss
@@ -10,21 +10,21 @@
 /// @group structured-list
 /// @param {Number} $padding [$structured-list-padding]
 @mixin padding-td--condensed($padding: $structured-list-padding) {
-  padding: $padding / 4;
+  padding: $padding * 0.25;
 }
 
 /// Used only for [data-structured-list]
 /// @access private
 /// @group structured-list
 /// @param {Number} $padding [$structured-list-padding]
 @mixin padding--data-structured-list($padding: $structured-list-padding) {
-  padding-right: $padding / 2;
-  padding-left: $padding / 2;
+  padding-right: $padding * 0.5;
+  padding-left: $padding * 0.5;
 
   // Controls gutter sizes for check
   &:first-child {
-    padding-right: $padding / 2;
-    padding-left: $padding / 2;
+    padding-right: $padding * 0.5;
+    padding-left: $padding * 0.5;
   }
 }
 

diff --git a/packages/styles/scss/components/loading/_functions.scss b/packages/styles/scss/components/loading/_functions.scss
@@ -6,5 +6,5 @@
 //
 
 @function loading-progress($circumference, $percentage) {
-  @return $circumference - $percentage / 100 * $circumference;
+  @return $circumference - $percentage * 0.01 * $circumference;
 }
diff --git a/packages/styles/scss/components/pagination-nav/_mixins.scss b/packages/styles/scss/components/pagination-nav/_mixins.scss
@@ -31,7 +31,7 @@
 
   .#{$prefix}--pagination-nav__page--active + &::after,
   &.#{$prefix}--pagination-nav__page--active::after {
-    left: calc(50% - #{$spacing-05 / 2});
+    left: calc(50% - #{$spacing-05 * 0.5});
     width: $spacing-05;
     opacity: 1;
   }

diff --git a/packages/styles/scss/components/pagination-nav/_pagination-nav.scss b/packages/styles/scss/components/pagination-nav/_pagination-nav.scss
@@ -160,8 +160,8 @@
 
   .#{$prefix}--pagination-nav__select-icon {
     position: absolute;
-    top: calc(50% - #{$select-icon-top-position / 2});
-    left: calc(50% - #{$select-icon-top-position / 2});
+    top: calc(50% - #{$select-icon-top-position * 0.5});
+    left: calc(50% - #{$select-icon-top-position * 0.5});
     pointer-events: none;
   }
 

diff --git a/packages/styles/scss/components/structured-list/_mixins.scss b/packages/styles/scss/components/structured-list/_mixins.scss
@@ -24,21 +24,21 @@ $structured-list-text-transform: none !default;
 /// @group structured-list
 /// @param {Number} $padding [$structured-list-padding]
 @mixin padding-td--condensed($padding: $structured-list-padding) {
-  padding: $padding / 4;
+  padding: $padding * 0.25;
 }
 
 /// Used only for [data-structured-list]
 /// @access private
 /// @group structured-list
 /// @param {Number} $padding [$structured-list-padding]
 @mixin padding--data-structured-list($padding: $structured-list-padding) {
-  padding-right: $padding / 2;
-  padding-left: $padding / 2;
+  padding-right: $padding * 0.5;
+  padding-left: $padding * 0.5;
 
   // Controls gutter sizes for check
   &:first-child {
-    padding-right: $padding / 2;
-    padding-left: $padding / 2;
+    padding-right: $padding * 0.5;
+    padding-left: $padding * 0.5;
   }
 }
 

diff --git a/packages/styles/scss/utilities/_convert.scss b/packages/styles/scss/utilities/_convert.scss
@@ -8,6 +8,8 @@
 /// Default font size
 /// @type Number
 /// @access public
+@use "sass:math";
+
 $base-font-size: 16px !default;
 
 /// Convert a given px unit to a rem unit
@@ -21,7 +23,7 @@ $base-font-size: 16px !default;
     @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
   }
 
-  @return ($px / $base-font-size) * 1rem;
+  @return math.div($px, $base-font-size) * 1rem;
 }
 
 /// Convert a given px unit to a em unit
@@ -35,5 +37,5 @@ $base-font-size: 16px !default;
     @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
   }
 
-  @return ($px / $base-font-size) * 1em;
+  @return math.div($px, $base-font-size) * 1em;
 }