🔀 Merge pull request #8 from NMSCD/fix/sass-migration

💄 SASS migration

Author: Khaoz-Topsy

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "community-search",
-  "version": "0.0.86",
+  "version": "0.0.87",
   "description": "",
   "homepage": "https://community.nmscd.com",
   "scripts": {
@@ -24,4 +24,4 @@
     "solid-slider": "^1.3.2",
     "solid-transition-group": "^0.0.10"
   }
-}
+}

package.json

@@ -1,13 +1,13 @@
-@import "custom/var";
-@import "custom/fab";
-@import "custom/chips";
-@import "custom/scrollbar";
-@import "custom/background";
-@import "custom/general";
-@import "custom/card";
-@import "custom/modal";
-@import "custom/table";
-@import "custom/slider";
+@use "custom/var";
+@use "custom/fab";
+@use "custom/chips";
+@use "custom/scrollbar";
+@use "custom/background";
+@use "custom/general";
+@use "custom/card";
+@use "custom/modal";
+@use "custom/table";
+@use "custom/slider";
 
 body {
     background-color: rgb(50, 50, 50);
@@ -25,7 +25,7 @@ body {
     }
 
     a {
-        color: $linkColour;
+        color: var.$linkColour;
     }
 }
 
@@ -65,4 +65,4 @@ body {
     overflow: hidden;
     display: block;
     text-overflow: ellipsis;
-}
+}

src/scss/custom.scss

@@ -1,8 +1,11 @@
+@use 'sass:color';
+@use "var";
+
 #floating-button {
     width: 55px;
     height: 55px;
     border-radius: 50%;
-    background-color: darken($linkColour, 15%);
+    background-color: color.scale(var.$linkColour, $lightness: -15%);
     position: fixed;
     bottom: 30px;
     right: 30px;
@@ -11,7 +14,7 @@
     transition: background-color 250ms;
 
     &:hover {
-        background-color: darken($linkColour, 7%);
+        background-color: color.scale(var.$linkColour, $lightness: -7%);
     }
 }
 
@@ -41,4 +44,4 @@
     bottom: 30px;
     right: 30px;
     z-index: 50px;
-}
+}

src/scss/custom/_fab.scss

@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 *::-webkit-scrollbar {
     width: 10px;
     background-color: #00ffff;
@@ -17,15 +19,13 @@
 
 *::-webkit-scrollbar-thumb {
     border-radius: 5px;
-    background-color: darken(#00ffff, 25%);
-    background-image: -webkit-linear-gradient(
-        45deg,
-        rgba(255, 255, 255, 0.2) 25%,
-        transparent 25%,
-        transparent 50%,
-        rgba(255, 255, 255, 0.2) 50%,
-        rgba(255, 255, 255, 0.2) 75%,
-        transparent 75%,
-        transparent
-    );
-}
+    background-color: color.scale(#00ffff, $lightness: -25%);
+    background-image: -webkit-linear-gradient(45deg,
+            rgba(255, 255, 255, 0.2) 25%,
+            transparent 25%,
+            transparent 50%,
+            rgba(255, 255, 255, 0.2) 50%,
+            rgba(255, 255, 255, 0.2) 75%,
+            transparent 75%,
+            transparent);
+}

src/scss/custom/_scrollbar.scss

@@ -1,3 +1,5 @@
+@use "var";
+
 .slide-index {
     display: inline-block;
     background-color: rgba(211, 211, 211, 0.75);
@@ -8,13 +10,14 @@
     cursor: pointer;
 
     &.is-active {
-        background-color: $linkColour;
+        background-color: var.$linkColour;
     }
 }
 
 .slider-container {
     position: relative;
     min-height: 180px;
+
     .slider-loader {
         position: absolute;
         top: 0;
@@ -26,4 +29,4 @@
     img {
         max-height: 50vh;
     }
-}
+}