build: Upgrade stylelint to version 16 and fix issues

Migrate upgrade stylelint from version 10 to 16 and fix all the
stylelint and prettier issues in scss files.

The following deprecated stylistic rules are no longer supported in
stylelint, and the checks are taken over by prettier:

- string-quotes
- max-empty-lines
- max-line-length

src/app/core/shell/breadcrumb/breadcrumb.component.scss

@@ -1,4 +1,5 @@
-@import "assets/styles/helper";
+@use 'assets/styles/helper';
+@use 'assets/styles/colours' as *;
 
 .breadcrumb-wrapper {
   margin: 0 auto;
@@ -18,7 +19,7 @@
     }
 
     .separator::before {
-      content: "";
+      content: '';
       border: 1.5px solid $mid-grey;
       margin: 0 0.6rem;
       font-size: 1.25rem;
@@ -40,7 +41,7 @@
         }
 
         &::after {
-          content: "/";
+          content: '/';
           margin: 0 0.4rem;
         }
       }

src/app/core/shell/content/content.component.scss

@@ -4,6 +4,7 @@ mifosx-content {
   height: 100%;
   margin: 0 auto -30px;
 }
+
 #push {
   height: 30px;
 }

src/app/core/shell/shell.component.scss

@@ -5,7 +5,10 @@
   .sidebar-panel {
     min-height: 100vh;
     overflow: auto;
-    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+    box-shadow:
+      0 3px 1px -2px rgb(0 0 0 / 20%),
+      0 2px 2px 0 rgb(0 0 0 / 14%),
+      0 1px 5px 0 rgb(0 0 0 / 12%);
   }
 
   .sidebar-full {
@@ -17,18 +20,18 @@
   }
 }
 
-
 $bar: 190px;
 $foo: $bar * 8;
 $color: #e2e4ec;
 
-
 .loading {
   position: absolute;
   width: $bar;
   height: 8px;
-  background: linear-gradient(125deg, rgb(255, 255, 255), #c4d2e9, rgb(255, 255, 255));
-  animation: grow 4s linear infinite, move 4s linear infinite;
+  background: linear-gradient(125deg, rgb(255 255 255), #c4d2e9, rgb(255 255 255));
+  animation:
+    grow 4s linear infinite,
+    move 4s linear infinite;
   top: 64px;
 }
 
@@ -46,7 +49,7 @@ $color: #e2e4ec;
   }
 
   33.3% {
-    left: $foo / 2;
+    left: calc($foo / 2);
   }
 
   50% {
@@ -54,7 +57,7 @@ $color: #e2e4ec;
   }
 
   66.7% {
-    left: $foo / 2;
+    left: calc($foo / 2);
   }
 
   83.3% {
@@ -72,11 +75,11 @@ $color: #e2e4ec;
   }
 
   16.7% {
-    width: $foo / 2;
+    width: calc($foo / 2);
   }
 
   33.3% {
-    width: $foo / 2;
+    width: calc($foo / 2);
   }
 
   50% {
@@ -84,11 +87,11 @@ $color: #e2e4ec;
   }
 
   66.7% {
-    width: $foo / 2;
+    width: calc($foo / 2);
   }
 
   83.3% {
-    width: $foo / 2;
+    width: calc($foo / 2);
   }
 
   100% {

src/app/core/shell/sidenav/sidenav.component.scss

@@ -19,9 +19,7 @@
     text-align: center;
     max-width: 15rem;
     z-index: 9999;
-    &:hover {
-      cursor: pointer;
-    }
+    cursor: pointer;
 
     .app-logo {
       width: auto;
@@ -46,7 +44,8 @@
       width: 72px;
       margin: 0 auto 8px;
       height: 72px;
-      border: 1px solid hsla(210, 8%, 51%, 0.13);
+      /* stylelint-disable-next-line color-function-notation */
+      border: 1px solid hsla(210deg, 8%, 51%, 13%);
       padding: 4px;
       border-radius: 50%;
     }
@@ -75,7 +74,7 @@
       }
 
       .text-muted {
-        color: rgba(0, 0, 0, 0.54);
+        color: rgba(0 0 0 / 54%);
       }
     }
   }
@@ -137,11 +136,8 @@
   .app-brand {
     .app-logo {
       margin: auto;
-      &:hover {
-        cursor: pointer;
-      }
     }
-    
+
     .app-logo-text {
       display: none;
     }
@@ -172,10 +168,12 @@
     }
   }
 }
+
 .sidebar-full {
   .navigation-panel {
     padding-top: 5%;
   }
+
   .app-sidenav {
     .icon-menu {
       flex-direction: row;

src/app/core/shell/toolbar/toolbar.component.scss

@@ -1,6 +1,9 @@
 #mifosx-toolbar {
   position: relative;
-  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+  box-shadow:
+    0 3px 1px -2px rgb(0 0 0 / 20%),
+    0 2px 2px 0 rgb(0 0 0 / 14%),
+    0 1px 5px 0 rgb(0 0 0 / 12%);
 
   .tab-link {
     min-width: auto;
@@ -44,9 +47,9 @@
   display: none;
 }
 
-@media (max-width: 959px) {
+@media (width <= 959px) {
   .lg-icon {
-    display: block; 
+    display: block;
     margin-left: 5px;
   }
 }