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/assets/styles/_align.scss

@@ -1,3 +1,5 @@
+@use 'colours' as *;
+
 .v-mid,
 .v-m {
   vertical-align: middle;

src/assets/styles/_border.scss

@@ -1,6 +1,6 @@
 body {
   table {
-    border: 1px solid rgba($color: #000000, $alpha: 0.12);
+    border: 1px solid rgba($color: #000, $alpha: 12%);
   }
 }
 
@@ -108,4 +108,3 @@ body {
 .radius10 {
   border-radius: 10px;
 }
-

src/assets/styles/_colours.scss

@@ -66,7 +66,7 @@ $accent: $peter-river;
 $status-active: #5cb85c;
 $status-inactive: #666f73;
 $status-paid: #666f73;
-$status-deleted: #000000;
+$status-deleted: #000;
 $status-pending: #ffa500;
 $status-approved: #4461e2;
 $status-chargeoff: #f39c12;
@@ -75,11 +75,11 @@ $status-downpayment: #16a085;
 $status-reage: #e08e0b;
 $status-reamortize: #4461e2;
 $status-transfer: #16a085;
-$status-active-overdue: #ff0000;
+$status-active-overdue: #f00;
 $status-matured: #ff4000;
 $state-done: #2af72a;
-$status-transfer-progress:#FF4000;
-$status-transfer-hold:#DF0101;
+$status-transfer-progress: #ff4000;
+$status-transfer-hold: #df0101;
 
 $error-log: #ffa726;
 

src/assets/styles/_form.scss

@@ -23,8 +23,8 @@ textarea.noresize {
 .normal input,
 .normal select,
 .normal textarea,
-.full-input [type="checkbox"],
-.full-input [type="radio"] {
+.full-input [type='checkbox'],
+.full-input [type='radio'] {
   width: auto;
 }
 

src/assets/styles/_helper.scss

@@ -1,17 +1,17 @@
-@import "background";
-@import "border";
-@import "colours";
-@import "align";
-@import "display";
-@import "float";
-@import "form";
-@import "loader";
-@import "margin";
-@import "misc";
-@import "overflow";
-@import "padding";
-@import "position";
-@import "status";
-@import "text";
-@import "width-height";
-@import "z-index";
+@use 'background';
+@use 'border';
+@use 'colours';
+@use 'align';
+@use 'display';
+@use 'float';
+@use 'form';
+@use 'loader';
+@use 'margin';
+@use 'misc';
+@use 'overflow';
+@use 'padding';
+@use 'position';
+@use 'status';
+@use 'text';
+@use 'width-height';
+@use 'z-index';

src/assets/styles/_loader.scss

@@ -11,15 +11,15 @@
   }
 
   .bottom {
-    border-width: 0 90px 90px 90px;
-    border-color: transparent transparent #1fb050 transparent;
+    border-width: 0 90px 90px;
+    border-color: transparent transparent #1fb050;
     bottom: calc(50% - 100px);
     left: calc(50% - 90px);
   }
 
   .top {
-    border-width: 90px 90px 0 90px;
-    border-color: #b4d575 transparent transparent transparent;
+    border-width: 90px 90px 0;
+    border-color: #b4d575 transparent transparent;
     top: calc(50% - 100px);
     left: calc(50% - 90px);
   }
@@ -39,8 +39,12 @@
   }
 
   @keyframes rotate {
-    from { transform: rotate(0deg); }
-    to { transform: rotate(360deg); }
-  }
+    from {
+      transform: rotate(0deg);
+    }
 
+    to {
+      transform: rotate(360deg);
+    }
+  }
 }

src/assets/styles/_margin.scss

@@ -491,11 +491,11 @@ body {
 }
 
 .no-m-v {
-  margin: 0 0;
+  margin: 0;
 }
 
 .no-m-h {
-  margin: 0 0;
+  margin: 0;
 }
 
 .no-margin {

src/assets/styles/_misc.scss

@@ -1,4 +1,5 @@
-@import 'colours';
+@use 'sass:color';
+@use 'colours' as *;
 
 html,
 body {
@@ -30,22 +31,23 @@ div {
 }
 
 .alert {
-  background-color: #E8F4FD;
+  background-color: #e8f4fd;
   padding: 6px 16px;
   font-size: 0.875rem;
-  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  font-family: Roboto, Helvetica, Arial, sans-serif;
   font-weight: 400;
   line-height: 1.43;
   border-radius: 4px;
-  letter-spacing: 0.01071em;
+  letter-spacing: 0.0107em;
   margin: 10px;
 
   .message {
     padding: 8px 0;
     font-size: 18px;
   }
+
   .alert-check {
-    color:#359FF4;
+    color: #359ff4;
     margin-right: 2px;
     font-size: 1.4rem;
   }
@@ -53,10 +55,9 @@ div {
 
 ::ng-deep .mat-tooltip {
   font-size: 15px;
-  white-space: pre-wrap;
   color: $white !important;
-  background-color: rgba($status-approved, .7);
-  border: 1px solid darken($status-approved, 20%);
+  background-color: rgba($status-approved, 0.7);
+  border: 1px solid color.adjust($status-approved, $lightness: -20%);
   max-width: 400px !important;
   white-space: pre-line !important;
- }
+}

src/assets/styles/_overflow.scss

@@ -24,4 +24,3 @@ body {
   overflow-x: auto;
   max-width: 100%;
 }
-

src/assets/styles/_padding.scss

@@ -23,11 +23,11 @@ body {
 }
 
 .no-p-v {
-  padding: 0 0;
+  padding: 0;
 }
 
 .no-p-h {
-  padding: 0 0;
+  padding: 0;
 }
 
 .p-5 {

src/assets/styles/_status.scss

@@ -1,3 +1,5 @@
+@use 'colours' as *;
+
 .status-active {
   color: $status-active;
 }

src/assets/styles/_text.scss

@@ -10,9 +10,9 @@ html {
 body {
   font-weight: 400;
   font-size: 0.875rem;
-  color: rgba(0, 0, 0, 0.87);
+  color: rgb(0 0 0 / 87%);
   line-height: 1.5;
-  font-family: Roboto, "Helvetica Neue", sans-serif;
+  font-family: Roboto, 'Helvetica Neue', sans-serif;
 }
 
 .lh-1 {
@@ -193,23 +193,23 @@ body {
 }
 
 .text-shadow {
-  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
+  text-shadow: 1px 1px 1px rgb(0 0 0 / 40%);
 }
 
 .text-rgb-2 {
-  color: rgba(0, 0, 0, 0.2);
+  color: rgb(0 0 0 / 20%);
 }
 
 .text-rgb-3 {
-  color: rgba(0, 0, 0, 0.3);
+  color: rgb(0 0 0 / 30%);
 }
 
 .text-rgb-4 {
-  color: rgba(0, 0, 0, 0.4);
+  color: rgb(0 0 0 / 40%);
 }
 
 .text-rgb-5 {
-  color: rgba(0, 0, 0, 0.5);
+  color: rgb(0 0 0 / 50%);
 }
 
 .no-ul,

src/assets/styles/_width-height.scss

@@ -1,17 +1,17 @@
-.fit { 
+.fit {
   max-width: 100%;
 }
 
-.half-width { 
-  width: 50%; 
+.half-width {
+  width: 50%;
 }
 
-.full-width { 
-  width: 100%; 
+.full-width {
+  width: 100%;
 }
 
-.full-height { 
-  height: 100%; 
+.full-height {
+  height: 100%;
 }
 
 html,

src/assets/styles/_z-index.scss

@@ -1,4 +1,15 @@
-.zindex-1 { z-index: 1; }
-.zindex-2 { z-index: 2; }
-.zindex-3 { z-index: 3; }
-.zindex-4 { z-index: 4; }
+.zindex-1 {
+  z-index: 1;
+}
+
+.zindex-2 {
+  z-index: 2;
+}
+
+.zindex-3 {
+  z-index: 3;
+}
+
+.zindex-4 {
+  z-index: 4;
+}