FIx "Using / for division is deprecated"

Signed-off-by: Joas Schilling <coding@schilljs.com>

5 files changed, 17 insertions, 8 deletions

diff --git a/src/assets/avatar.scss b/src/assets/avatar.scss
index 723f78d21..26c22d4f9 100644
--- a/src/assets/avatar.scss
+++ b/src/assets/avatar.scss
@@ -19,6 +19,8 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
+@use 'sass:math';
+
 @import 'variables.scss';
 
 
@@ -29,7 +31,7 @@
 		width: $size;
 		height: $size;
 		line-height: $size;
-		font-size: $size / 2;
+		font-size: math.div($size, 2);
 		border-radius: 50%;
 
 		&.icon {
@@ -48,7 +50,7 @@
 
 		&.guest {
 			line-height: $size;
-			font-size: $size / 2;
+			font-size: math.div($size, 2);
 			color: $color-guests-avatar;
 			background-color: $color-background-guests-avatar;
 			padding: 0;
diff --git a/src/assets/variables.scss b/src/assets/variables.scss
index 927449da2..e7f172075 100644
--- a/src/assets/variables.scss
+++ b/src/assets/variables.scss
@@ -20,6 +20,8 @@
  *
  */
 
+@use 'sass:math';
+
 // https://uxplanet.org/7-rules-for-mobile-ui-button-design-e9cf2ea54556
 // recommended is 48px
 // 44px is what we choose and have very good visual-to-usability ratio
@@ -31,7 +33,7 @@ $icon-size: 16px;
 
 // icon padding for a $clickable-area width and a $icon-size icon
 // ( 44px - 16px ) / 2
-$icon-margin: ($clickable-area - $icon-size) / 2;
+$icon-margin: math.div($clickable-area - $icon-size, 2);
 
 // transparency background for icons
 $icon-focus-bg: rgba(127, 127, 127, .25);
diff --git a/src/components/ConversationIcon.vue b/src/components/ConversationIcon.vue
index 4183c4e38..b44649cbf 100644
--- a/src/components/ConversationIcon.vue
+++ b/src/components/ConversationIcon.vue
@@ -106,6 +106,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@use 'sass:math';
 $icon-size: 44px;
 
 .conversation-icon {
@@ -117,7 +118,7 @@ $icon-size: 44px;
 		width: $icon-size;
 		height: $icon-size;
 		line-height: $icon-size;
-		font-size: $icon-size / 2;
+		font-size: math.div($icon-size, 2);
 		background-color: var(--color-background-darker);
 
 		&.icon-changelog {
@@ -129,7 +130,7 @@ $icon-size: 44px;
 		&.icon-password,
 		&.icon-file,
 		&.icon-mail {
-			background-size: $icon-size / 2;
+			background-size: math.div($icon-size, 2);
 		}
 	}
 
diff --git a/src/components/NewMessageForm/AdvancedInput/AdvancedInput.vue b/src/components/NewMessageForm/AdvancedInput/AdvancedInput.vue
index e4d05dc06..a0d11281d 100644
--- a/src/components/NewMessageForm/AdvancedInput/AdvancedInput.vue
+++ b/src/components/NewMessageForm/AdvancedInput/AdvancedInput.vue
@@ -400,6 +400,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@use 'sass:math';
+
 @import '../../../assets/variables';
 
 .atwho-wrapper {
@@ -421,7 +423,7 @@ div[contenteditable] {
 	font-size: $chat-font-size;
 	line-height: $chat-line-height;
 	min-height: $clickable-area;
-	border-radius: $clickable-area / 2;
+	border-radius: math.div($clickable-area, 2);
 	border: 1px solid var(--color-border-dark);
 	&:hover,
 	&:focus,
diff --git a/src/components/RightSidebar/Participants/ParticipantsList/Participant/LoadingParticipant.vue b/src/components/RightSidebar/Participants/ParticipantsList/Participant/LoadingParticipant.vue
index f6bd9a099..00bba8cc9 100644
--- a/src/components/RightSidebar/Participants/ParticipantsList/Participant/LoadingParticipant.vue
+++ b/src/components/RightSidebar/Participants/ParticipantsList/Participant/LoadingParticipant.vue
@@ -35,6 +35,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@use 'sass:math';
+
 .participant-loading {
 	$icon-size: 44px;
 	height: 56px;
@@ -58,8 +60,8 @@ export default {
 
 		.username {
 			background-color: var(--color-background-dark);
-			height: $icon-size / 2;
-			margin-top: $icon-size / 4;
+			height: math.div($icon-size, 2);
+			margin-top: math.div($icon-size, 4);
 			margin-left: 2px;
 		}
 	}