Chore: Replace a / b with math.div(a, b) on SCSS files (#702)

RocketChat · Apr 1, 2022 · 1cb7ae4 · 1cb7ae4
1 parent 7e6ff4b
commit 1cb7ae4
Show file tree

Hide file tree

Showing 11 changed files with 48 additions and 26 deletions.
diff --git a/src/components/Button/styles.scss b/src/components/Button/styles.scss
@@ -1,11 +1,13 @@
+@use 'sass:math';
+
 @import '../../styles/colors';
 @import '../../styles/helpers';
 @import '../../styles/variables';
 
 $button-border-width: $default-border;
 $button-border-radius: $default-border-radius;
 $button-padding: (0.75 * $default-gap - $default-border) (1.5 * $default-gap - $default-border);
-$button-small-padding: (0.25 * $default-gap - $default-border / 2) (1.5 * $default-gap - $default-border);
+$button-small-padding: (0.25 * $default-gap - math.div($default-border, 2)) (1.5 * $default-gap - $default-border);
 
 $button-active-displacement: 2px;
 
@@ -22,7 +24,7 @@ $button-line-height: 1.25rem;
 $button-disabled-opacity: $disabled-opacity;
 
 $button-loading-border-width: (2 * $default-border);
-$button-loading-gap: ($default-gap / 2);
+$button-loading-gap: math.div($default-gap, 2);
 $button-loading-size: $button-line-height;
 $button-loading-color: #ffffff;
 
@@ -66,7 +68,7 @@ $button-icon-padding: 10px;
 		color $default-time-animation,
 		background-color $default-time-animation,
 		border-color $default-time-animation,
-		transform $default-time-animation / 2;
+		transform math.div($default-time-animation, 2);
 	white-space: nowrap;
 	text-decoration: none;
 
@@ -177,18 +179,18 @@ $button-icon-padding: 10px;
 
 	&__badge {
 		position: absolute;
-		top: (-$button-badge-size / 3);
-		right: (-$button-badge-size / 3);
+		top: math.div(-$button-badge-size, 3);
+		right: math.div(-$button-badge-size, 3);
 
 		min-width: $button-badge-size;
 		height: $button-badge-size;
-		padding: 0 ($button-badge-font-size / 2);
+		padding: 0 math.div($button-badge-font-size, 2);
 
 		text-align: center;
 		letter-spacing: 0;
 
 		color: $button-badge-color;
-		border-radius: ($button-badge-size / 2);
+		border-radius: math.div($button-badge-size, 2);
 
 		background-color: $button-badge-background-color;
 		box-shadow: $button-badge-shadow;

diff --git a/src/components/ButtonGroup/styles.scss b/src/components/ButtonGroup/styles.scss
@@ -1,6 +1,8 @@
+@use 'sass:math';
+
 @import '../../styles/variables';
 
-$button-group-margin: ($default-gap / 4);
+$button-group-margin: math.div($default-gap, 4);
 
 .button-group {
 	display: flex;

diff --git a/src/components/Form/mixins.scss b/src/components/Form/mixins.scss
@@ -1,10 +1,12 @@
+@use 'sass:math';
+
 @import '../../styles/variables';
 @import '../../styles/colors';
 
 $form-input-border-width: $default-border;
 $form-input-border-radius: $default-border-radius;
 $form-input-padding: (0.75 * $default-gap - $default-border);
-$form-input-small-padding: (0.25 * $default-gap - $default-border / 2) (0.75 * $default-gap - $default-border);
+$form-input-small-padding: (0.25 * $default-gap - math.div($default-border, 2)) (0.75 * $default-gap - $default-border);
 $form-input-color: $color-text-dark;
 $form-input-placeholder-color: $color-text-light;
 $form-input-background-color: $bg-color-white;

diff --git a/src/components/Header/styles.scss b/src/components/Header/styles.scss
@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 @import '../../styles/colors';
 @import '../../styles/helpers';
 @import '../../styles/variables';
@@ -18,7 +20,7 @@ $header-action-active-displacement: 2px;
 
 	width: 100%;
 	height: $header-height;
-	padding: 0 $header-padding / 2;
+	padding: 0 math.div($header-padding, 2);
 
 	color: var(--font-color, $header-color);
 	background-color: var(--color, $header-background-color);
@@ -31,7 +33,7 @@ $header-action-active-displacement: 2px;
 	&__item {
 		flex: 0 0 auto;
 
-		margin: 0 $header-padding / 2;
+		margin: 0 math.div($header-padding, 2);
 	}
 
 	&__picture {

diff --git a/src/components/Menu/styles.scss b/src/components/Menu/styles.scss
@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 @import '../../styles/colors';
 @import '../../styles/variables';
 
@@ -11,7 +13,7 @@
 	transition:
 		opacity $default-time-animation,
 		visibility $default-time-animation,
-		transform $default-time-animation / 2;
+		transform math.div($default-time-animation, 2);
 
 	border-radius: 4px;
 	background: $bg-color-white;

diff --git a/src/components/Messages/MessageContainer/styles.scss b/src/components/Messages/MessageContainer/styles.scss
@@ -1,7 +1,9 @@
+@use 'sass:math';
+
 @import '../../../styles/variables';
 
 $message-container-margin: 0 0 $default-padding 0;
-$message-container-compact-margin: 0 0 ($default-padding / 4) 0;
+$message-container-compact-margin: 0 0 math.div($default-padding, 4) 0;
 
 .message-container {
 	display: flex;

diff --git a/src/components/Messages/MessageContent/styles.scss b/src/components/Messages/MessageContent/styles.scss
@@ -1,7 +1,9 @@
+@use 'sass:math';
+
 @import '../../../styles/variables';
 
-$message-content-gap: ($default-gap / 2);
-$message-content-margin: (-$message-content-gap / 2) ($default-gap / 2);
+$message-content-gap: math.div($default-gap, 2);
+$message-content-margin: math.div(-$message-content-gap, 2) math.div($default-gap, 2);
 
 .message-content {
 	display: flex;
@@ -11,7 +13,7 @@ $message-content-margin: (-$message-content-gap / 2) ($default-gap / 2);
 	align-items: flex-start;
 
 	> * {
-		margin: ($message-content-gap / 2) 0;
+		margin: math.div($message-content-gap, 2) 0;
 	}
 
 	&--reverse {

diff --git a/src/components/Messages/MessageTime/styles.scss b/src/components/Messages/MessageTime/styles.scss
@@ -1,7 +1,9 @@
+@use 'sass:math';
+
 @import '../../../styles/colors';
 @import '../../../styles/variables';
 
-$message-time-margin: 0 ($default-gap / 2);
+$message-time-margin: 0 math.div($default-gap, 2);
 $message-time-font-size: 0.625rem;
 $message-time-line-height: 1rem;
 $message-time-color: $color-text-grey;

diff --git a/src/components/Screen/styles.scss b/src/components/Screen/styles.scss
@@ -1,7 +1,9 @@
+@use 'sass:math';
+
 @import '../../styles/colors';
 
 $screen-padding: 16px;
-$screen-box-shadow: 0 ($screen-padding / 2 - 1) $screen-padding 0 rgba(0, 0, 0, 0.1);
+$screen-box-shadow: 0 (math.div($screen-padding, 2) - 1) $screen-padding 0 rgba(0, 0, 0, 0.1);
 $max-lines: 12;
 
 .screen {

diff --git a/src/components/uiKit/message/ButtonElement/styles.scss b/src/components/uiKit/message/ButtonElement/styles.scss
@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 @import '../../../../styles/colors';
 @import '../../../../styles/helpers';
 @import '../../../../styles/variables';
@@ -17,7 +19,7 @@
 		color $default-time-animation,
 		background-color $default-time-animation,
 		border-color $default-time-animation,
-		transform $default-time-animation / 2;
+		transform math.div($default-time-animation, 2);
 	white-space: nowrap;
 	text-decoration: none;
 
@@ -58,11 +60,11 @@
 		content: "";
 
 		transition:
-			opacity $default-time-animation / 2,
-			border-width $default-time-animation / 2,
-			width $default-time-animation / 2,
-			height $default-time-animation / 2,
-			visibility $default-time-animation / 2;
+			opacity math.div($default-time-animation, 2),
+			border-width math.div($default-time-animation, 2),
+			width math.div($default-time-animation, 2),
+			height math.div($default-time-animation, 2),
+			visibility math.div($default-time-animation, 2);
 		animation: button-loading-rotation 1s linear infinite;
 
 		opacity: 0;

diff --git a/src/styles/grid.scss b/src/styles/grid.scss
@@ -1,4 +1,6 @@
 //----- Grid System
+@use 'sass:math';
+
 @import "helpers";
 
 //----- Extends
@@ -37,7 +39,7 @@ $cols: 12;
 @for $i from 1 through $cols {
 	.col-#{$i},
 	%col-#{$i} {
-		width: (100% / ($cols / $i)) - ($grid-spacing * ($cols - $i) / $cols);
+		width: math.div(100%, math.div($cols, $i)) - ($grid-spacing * math.div(($cols - $i), $cols));
 	}
 }
 
@@ -46,7 +48,7 @@ $cols: 12;
 		@for $i from 1 through $cols {
 			.col-#{$breakpoint}-#{$i},
 			%col-#{$breakpoint}-#{$i} {
-				width: (100% / ($cols / $i)) - ($grid-spacing * ($cols - $i) / $cols);
+				width: math.div(100%, math.div($cols, $i)) - ($grid-spacing * math.div(($cols - $i), $cols));
 			}
 		}
 	}