Merge pull request #294 from rensite/master

Migrates to dart sass

package.json

@@ -1,6 +1,6 @@
 {
   "name": "adminator",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "private": true,
   "description": "HTML Admin Template",
   "scripts": {
@@ -22,7 +22,6 @@
     "@babel/plugin-proposal-object-rest-spread": "^7.13.8",
     "@babel/plugin-transform-runtime": "^7.13.9",
     "@babel/runtime": "^7.13.9",
-    "@popperjs/core": "^2.9.2",
     "babel-core": "^6.26.3",
     "babel-loader": "^8.2.2",
     "babel-preset-env": "^1.7.0",
@@ -31,17 +30,17 @@
     "copy-webpack-plugin": "^9.0.0",
     "cross-env": "^7.0.3",
     "css-loader": "^5.2.6",
-    "css-minimizer-webpack-plugin": "^4.0.0",
+    "css-minimizer-webpack-plugin": "^5.0.1",
     "eslint": "^7.21.0",
     "eslint-config-airbnb-base": "^14.2.1",
     "eslint-plugin-import": "^2.23.4",
     "html-webpack-plugin": "^5.3.1",
     "imagemin-webpack-plugin": "^2.4.2",
     "mini-css-extract-plugin": "^1.6.0",
-    "node-sass": "^4.14.1",
     "postcss": "^8.3.4",
     "postcss-loader": "^6.1.0",
-    "postcss-preset-env": "7.8.0",
+    "sass": "^1.55.0",
+    "postcss-preset-env": "^6.7.0",
     "sass-loader": "^12.1.0",
     "shx": "^0.3.3",
     "style-loader": "^2.0.0",
@@ -53,20 +52,21 @@
     "webpack-dev-server": "^3.11.2"
   },
   "dependencies": {
-    "@fullcalendar/core": "^5.7.2",
-    "@fullcalendar/daygrid": "^5.7.2",
-    "@fullcalendar/interaction": "^5.7.2",
-    "@fullcalendar/list": "^5.7.2",
-    "@fullcalendar/timegrid": "^5.7.2",
+    "@fullcalendar/core": "^5.11.3",
+    "@fullcalendar/daygrid": "^5.11.3",
+    "@fullcalendar/interaction": "^5.11.3",
+    "@fullcalendar/list": "^5.11.3",
+    "@fullcalendar/timegrid": "^5.11.3",
+    "@popperjs/core": "^2.11.6",
     "babel-polyfill": "^6.26.0",
-    "bootstrap": "^5.0.1",
+    "bootstrap": "^5.2.2",
     "bootstrap-datepicker": "^1.9.0",
     "brand-colors": "^2.1.1",
     "chart.js": "^2.9.4",
     "datatables": "^1.10.18",
     "easy-pie-chart": "^2.1.7",
     "file-loader": "^6.2.0",
-    "fullcalendar": "^5.7.2",
+    "fullcalendar": "^5.11.3",
     "jquery": "^3.6.0",
     "jquery-sparkline": "^2.4.0",
     "jvectormap": "^2.0.4",

src/assets/styles/spec/settings/materialColors.scss

@@ -547,4 +547,4 @@ $md-colors: (
   blue-grey-700         : #455a64,
   blue-grey-800         : #37474f,
   blue-grey-900         : #263238,
-) !global;
+);

src/assets/styles/spec/utils/colors.scss

@@ -10,11 +10,11 @@
 // ---------------------------------------------------------
 
 @each $item, $color in $md-colors {
-  .c-#{$item},     .cH-#{$item}:hover      { color: $color !important; }
-  .bgc-#{$item},   .bgcH-#{$item}:hover    { background-color: $color !important; }
-  .bdc-#{$item},   .bdcH-#{$item}:hover    { border-color: $color !important; }
-  .fill-#{$item},  .fillH-#{$item}:hover   { fill: $color !important; }
-  .str-#{$item},   .strH-#{$item}:hover    { stroke: $color !important; }
+  .c-#{"" + $item},     .cH-#{"" + $item}:hover      { color: $color !important; }
+  .bgc-#{"" + $item},   .bgcH-#{"" + $item}:hover    { background-color: $color !important; }
+  .bdc-#{"" + $item},   .bdcH-#{"" + $item}:hover    { border-color: $color !important; }
+  .fill-#{"" + $item},  .fillH-#{"" + $item}:hover   { fill: $color !important; }
+  .str-#{"" + $item},   .strH-#{"" + $item}:hover    { stroke: $color !important; }
 }
 
 // ---------------------------------------------------------
@@ -22,9 +22,9 @@
 // ---------------------------------------------------------
 
 @each $item, $color in $grey-colors-alt {
-  .c-#{$item},     .cH-#{$item}:hover      { color: $color !important; }
-  .bgc-#{$item},   .bgcH-#{$item}:hover    { background-color: $color !important; }
-  .bdc-#{$item},   .bdcH-#{$item}:hover    { border-color: $color !important; }
-  .fill-#{$item},  .fillH-#{$item}:hover   { fill: $color !important; }
-  .str-#{$item},   .strH-#{$item}:hover    { stroke: $color !important; }
+  .c-#{"" + $item},     .cH-#{"" + $item}:hover      { color: $color !important; }
+  .bgc-#{"" + $item},   .bgcH-#{"" + $item}:hover    { background-color: $color !important; }
+  .bdc-#{"" + $item},   .bdcH-#{"" + $item}:hover    { border-color: $color !important; }
+  .fill-#{"" + $item},  .fillH-#{"" + $item}:hover   { fill: $color !important; }
+  .str-#{"" + $item},   .strH-#{"" + $item}:hover    { stroke: $color !important; }
 }

src/assets/styles/spec/utils/layout/utils/gap.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 // ---------------------------------------------------------
 // @TOC
 // ---------------------------------------------------------
@@ -29,60 +31,60 @@ $responsive: true;
 
 @for $i from 0 through 4 {
   .gapX-#{$i} {
-    margin-left: #{($i / -2)}px !important;
-    margin-right: #{($i / -2)}px !important;
+    margin-left: #{math.div($i, -2)}px !important;
+    margin-right: #{math.div($i, -2)}px !important;
 
     & > * {
-      padding-left: #{($i / 2)}px !important;
-      padding-right: #{($i / 2)}px !important;
+      padding-left: #{math.div($i, 2)}px !important;
+      padding-right: #{math.div($i, 2)}px !important;
     }
   }
 
   .gapY-#{$i} {
-    margin-top: #{($i / -2)}px !important;
-    margin-bottom: #{($i / -2)}px !important;
+    margin-top: #{math.div($i, -2)}px !important;
+    margin-bottom: #{math.div($i, -2)}px !important;
 
     & > * {
-      padding-top: #{($i / 2)}px !important;
-      padding-bottom: #{($i / 2)}px !important;
+      padding-top: #{math.div($i, 2)}px !important;
+      padding-bottom: #{math.div($i, 2)}px !important;
     }
   }
 
   .gap-#{$i} {
-    margin: #{($i / -2)}px !important;
+    margin: #{math.div($i, -2)}px !important;
 
     & > * {
-      padding: #{($i / 2)}px !important;
+      padding: #{math.div($i, 2)}px !important;
     }
   }
 
   @if ($responsive == true) {
     @include generateResponsive() {
       .gapX-#{$i}\@#{$breakpointAlias} {
-        margin-left: #{($i / -2)}px !important;
-        margin-right: #{($i / -2)}px !important;
+        margin-left: #{math.div($i, -2)}px !important;
+        margin-right: #{math.div($i, -2)}px !important;
 
         & > * {
-          padding-left: #{($i / 2)}px !important;
-          padding-right: #{($i / 2)}px !important;
+          padding-left: #{math.div($i, 2)}px !important;
+          padding-right: #{math.div($i, 2)}px !important;
         }
       }
 
       .gapY-#{$i}\@#{$breakpointAlias} {
-        margin-top: #{($i / -2)}px !important;
-        margin-bottom: #{($i / -2)}px !important;
+        margin-top: #{math.div($i, -2)}px !important;
+        margin-bottom: #{math.div($i, -2)}px !important;
 
         & > * {
-          padding-top: #{($i / 2)}px !important;
-          padding-bottom: #{($i / 2)}px !important;
+          padding-top: #{math.div($i, 2)}px !important;
+          padding-bottom: #{math.div($i, 2)}px !important;
         }
       }
 
       .gap-#{$i}\@#{$breakpointAlias} {
-        margin: #{($i / -2)}px !important;
+        margin: #{math.div($i, -2)}px !important;
 
         & > * {
-          padding: #{($i / 2)}px !important;
+          padding: #{math.div($i, 2)}px !important;
         }
       }
     }
@@ -96,60 +98,60 @@ $responsive: true;
 @for $i from 5 through 35 {
   @if $i % 5 == 0 {
     .gapX-#{$i} {
-      margin-left: #{($i / -2)}px !important;
-      margin-right: #{($i / -2)}px !important;
+      margin-left: #{math.div($i, -2)}px !important;
+      margin-right: #{math.div($i, -2)}px !important;
 
       & > * {
-        padding-left: #{($i / 2)}px !important;
-        padding-right: #{($i / 2)}px !important;
+        padding-left: #{math.div($i, 2)}px !important;
+        padding-right: #{math.div($i, 2)}px !important;
       }
     }
 
     .gapY-#{$i} {
-      margin-top: #{($i / -2)}px !important;
-      margin-bottom: #{($i / -2)}px !important;
+      margin-top: #{math.div($i, -2)}px !important;
+      margin-bottom: #{math.div($i, -2)}px !important;
 
       & > * {
-        padding-top: #{($i / 2)}px !important;
-        padding-bottom: #{($i / 2)}px !important;
+        padding-top: #{math.div($i, 2)}px !important;
+        padding-bottom: #{math.div($i, 2)}px !important;
       }
     }
 
     .gap-#{$i} {
-      margin: #{($i / -2)}px !important;
+      margin: #{math.div($i, -2)}px !important;
 
       & > * {
-        padding: #{($i / 2)}px !important;
+        padding: #{math.div($i, 2)}px !important;
       }
     }
 
     @if ($responsive == true) {
       @include generateResponsive() {
         .gapX-#{$i}\@#{$breakpointAlias} {
-          margin-left: #{($i / -2)}px !important;
-          margin-right: #{($i / -2)}px !important;
+          margin-left: #{math.div($i, -2)}px !important;
+          margin-right: #{math.div($i, -2)}px !important;
 
           & > * {
-            padding-left: #{($i / 2)}px !important;
-            padding-right: #{($i / 2)}px !important;
+            padding-left: #{math.div($i, 2)}px !important;
+            padding-right: #{math.div($i, 2)}px !important;
           }
         }
 
         .gapY-#{$i}\@#{$breakpointAlias} {
-          margin-top: #{($i / -2)}px !important;
-          margin-bottom: #{($i / -2)}px !important;
+          margin-top: #{math.div($i, -2)}px !important;
+          margin-bottom: #{math.div($i, -2)}px !important;
 
           & > * {
-            padding-top: #{($i / 2)}px !important;
-            padding-bottom: #{($i / 2)}px !important;
+            padding-top: #{math.div($i, 2)}px !important;
+            padding-bottom: #{math.div($i, 2)}px !important;
           }
         }
 
         .gap-#{$i}\@#{$breakpointAlias} {
-          margin: #{($i / -2)}px !important;
+          margin: #{math.div($i, -2)}px !important;
 
           & > * {
-            padding: #{($i / 2)}px !important;
+            padding: #{math.div($i, 2)}px !important;
           }
         }
       }
@@ -164,60 +166,60 @@ $responsive: true;
 @for $i from 40 through 160 {
   @if $i % 10 == 0 {
     .gapX-#{$i} {
-      margin-left: #{($i / -2)}px !important;
-      margin-right: #{($i / -2)}px !important;
+      margin-left: #{math.div($i, -2)}px !important;
+      margin-right: #{math.div($i, -2)}px !important;
 
       & > * {
-        padding-left: #{($i / 2)}px !important;
-        padding-right: #{($i / 2)}px !important;
+        padding-left: #{math.div($i, 2)}px !important;
+        padding-right: #{math.div($i, 2)}px !important;
       }
     }
 
     .gapY-#{$i} {
-      margin-top: #{($i / -2)}px !important;
-      margin-bottom: #{($i / -2)}px !important;
+      margin-top: #{math.div($i, -2)}px !important;
+      margin-bottom: #{math.div($i, -2)}px !important;
 
       & > * {
-        padding-top: #{($i / 2)}px !important;
-        padding-bottom: #{($i / 2)}px !important;
+        padding-top: #{math.div($i, 2)}px !important;
+        padding-bottom: #{math.div($i, 2)}px !important;
       }
     }
 
     .gap-#{$i} {
-      margin: #{($i / -2)}px !important;
+      margin: #{math.div($i, -2)}px !important;
 
       & > * {
-        padding: #{($i / 2)}px !important;
+        padding: #{math.div($i, 2)}px !important;
       }
     }
 
     @if ($responsive == true) {
       @include generateResponsive() {
         .gapX-#{$i}\@#{$breakpointAlias} {
-          margin-left: #{($i / -2)}px !important;
-          margin-right: #{($i / -2)}px !important;
+          margin-left: #{math.div($i, -2)}px !important;
+          margin-right: #{math.div($i, -2)}px !important;
 
           & > * {
-            padding-left: #{($i / 2)}px !important;
-            padding-right: #{($i / 2)}px !important;
+            padding-left: #{math.div($i, 2)}px !important;
+            padding-right: #{math.div($i, 2)}px !important;
           }
         }
 
         .gapY-#{$i}\@#{$breakpointAlias} {
-          margin-top: #{($i / -2)}px !important;
-          margin-bottom: #{($i / -2)}px !important;
+          margin-top: #{math.div($i, -2)}px !important;
+          margin-bottom: #{math.div($i, -2)}px !important;
 
           & > * {
-            padding-top: #{($i / 2)}px !important;
-            padding-bottom: #{($i / 2)}px !important;
+            padding-top: #{math.div($i, 2)}px !important;
+            padding-bottom: #{math.div($i, 2)}px !important;
           }
         }
 
         .gap-#{$i}\@#{$breakpointAlias} {
-          margin: #{($i / -2)}px !important;
+          margin: #{math.div($i, -2)}px !important;
 
           & > * {
-            padding: #{($i / 2)}px !important;
+            padding: #{math.div($i, 2)}px !important;
           }
         }
       }