From 29b9777a96077e6737687726f3ecf2b02b43a04f Mon Sep 17 00:00:00 2001
From: David Cook <david@redcliffs.net>
Date: Fri, 14 Apr 2023 17:57:44 +1000
Subject: [PATCH] Replace deprecated sass division operator

https://sass-lang.com/documentation/breaking-changes/slash-div
> Sass currently treats / as a division operation in some contexts and a separator in others. This makes it difficult for Sass users to tell what any given / will mean, and makes it hard to work with new CSS features that use / as a separator.

There's a handy migrator:

    npm install -g sass-migrator
    sass-migrator division **/*.scss

And it cleverly avoids the need for the ugly division method in most cases.
---
 app/webpacker/css/admin/components/states.scss | 2 +-
 app/webpacker/css/admin/grid.scss              | 6 ++++--
 app/webpacker/css/darkswarm/menu.scss          | 2 +-
 app/webpacker/css/darkswarm/variables.scss     | 2 +-
 4 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/app/webpacker/css/admin/components/states.scss b/app/webpacker/css/admin/components/states.scss
index 97ad366abf..2cc202b388 100644
--- a/app/webpacker/css/admin/components/states.scss
+++ b/app/webpacker/css/admin/components/states.scss
@@ -8,7 +8,7 @@
     position: relative;
     display: inline-block;
     margin-right: 3px;
-    border-radius: $body-font-size/2;
+    border-radius: $body-font-size*0.5;
     width: $body-font-size - 4px;
     height: $body-font-size - 4px;
   }
diff --git a/app/webpacker/css/admin/grid.scss b/app/webpacker/css/admin/grid.scss
index b47efe48a0..e5b37ce15b 100644
--- a/app/webpacker/css/admin/grid.scss
+++ b/app/webpacker/css/admin/grid.scss
@@ -1,11 +1,13 @@
 // Grid Calculations
 // Adjust $col-gutter (space between columns, as percentage) to adjust everything else automatically
 
+@use "sass:math";
+
 $col-gutter: 2;
 $total-gutter: $col-gutter * 15;
 $total-colspace: 100 - $total-gutter;
-$gutter-width: $col-gutter / 100;
-$col-width: ($total-colspace / 16) / 100;
+$gutter-width: $col-gutter * 0.01;
+$col-width: math.div($total-colspace, 16) * 0.01;
 
 $col-1: $col-width;
 $col-2: ($col-width * 2) + $gutter-width;
diff --git a/app/webpacker/css/darkswarm/menu.scss b/app/webpacker/css/darkswarm/menu.scss
index 0f282a056c..0856db6686 100644
--- a/app/webpacker/css/darkswarm/menu.scss
+++ b/app/webpacker/css/darkswarm/menu.scss
@@ -281,7 +281,7 @@ nav.top-bar {
   nav .top-bar-section {
     ul li a,
     .has-dropdown > a {
-      padding: 0 ($topbar-height / 8) !important;
+      padding: 0 ($topbar-height * 0.125) !important;
     }
   }
 }
diff --git a/app/webpacker/css/darkswarm/variables.scss b/app/webpacker/css/darkswarm/variables.scss
index dc1521f069..28d7df1a25 100644
--- a/app/webpacker/css/darkswarm/variables.scss
+++ b/app/webpacker/css/darkswarm/variables.scss
@@ -13,7 +13,7 @@ $brand-colour: #f27052;
 
 // Topbar
 $topbar-height: rem-calc(64);
-$topbar-link-padding: $topbar-height / 4;
+$topbar-link-padding: $topbar-height * 0.25;
 $topbar-arrows: false;
 
 $topbar-bg: $white;