Add Scrollbar styling

.editorconfig

@@ -0,0 +1,5 @@
+[*]
+indent_size = 4
+indent_style = space
+insert_final_newline = true
+charset = utf-8

index.html

@@ -77,6 +77,11 @@
         .content {
             margin: 0 2rem;
         }
+
+        .scroll-test {
+            height: 100px;
+            overflow-y: scroll;
+        }
     </style>
 </head>
 
@@ -260,6 +265,12 @@
                 </tr>
             </table>
         </div>
+
+        <div class="margin prev">
+            <div class="scroll-test">
+                <script>prip(2000)</script>
+            </div>
+        </div>
     </div>
 </body>
 

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@hibas123/theme",
-  "version": "1.2.11",
+  "version": "1.2.15",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,24 +1,24 @@
 {
-  "name": "@hibas123/theme",
-  "version": "1.2.15",
-  "description": "",
-  "main": " ",
-  "files": [
-    "out/*.css",
-    "src/*",
-    "index.html",
-    "ipsum.js",
-    "Roboto-Regular.woff2"
-  ],
-  "scripts": {
-    "build": "sass src/base.scss:out/base.css src/dark.scss:out/dark.css src/light.scss:out/light.css",
-    "watch": "sass --watch src/base.scss:out/base.css src/dark.scss:out/dark.css src/light.scss:out/light.css",
-    "prepublishOnly": "npm run build"
-  },
-  "author": "Fabian Stamm <dev@fabianstamm.de>",
-  "license": "ISC",
-  "devDependencies": {
-    "sass": "^1.22.7"
-  },
-  "dependencies": {}
+    "name": "@hibas123/theme",
+    "version": "1.2.16",
+    "description": "",
+    "main": " ",
+    "files": [
+        "out/*.css",
+        "src/*",
+        "index.html",
+        "ipsum.js",
+        "Roboto-Regular.woff2"
+    ],
+    "scripts": {
+        "build": "sass src/base.scss:out/base.css src/dark.scss:out/dark.css src/light.scss:out/light.css",
+        "watch": "sass --watch src/base.scss:out/base.css src/dark.scss:out/dark.css src/light.scss:out/light.css",
+        "prepublishOnly": "npm run build"
+    },
+    "author": "Fabian Stamm <dev@fabianstamm.de>",
+    "license": "ISC",
+    "devDependencies": {
+        "sass": "^1.22.7"
+    },
+    "dependencies": {}
 }

src/_maketheme.scss

@@ -1,12 +1,12 @@
 @import "./_vals.scss";
 
-$background:false !default;
-$on-background:false !default;
-$button-color: #CCCCCC !default;
+$background: false !default;
+$on-background: false !default;
+$button-color: #cccccc !default;
 $on-button: #000000 !default;
 
 @if $background==false or $on-background==false {
-    @error("background and on-background must be set!");
+    @error ("background and on-background must be set!");
 }
 
 :root {
@@ -18,7 +18,6 @@ $on-button: #000000 !default;
     background: $background;
 }
 
-
 @each $dp in $elevations {
     .elv-#{$dp} {
         @include Elevation($dp, false);
@@ -33,13 +32,10 @@ $on-button: #000000 !default;
     @include ElevationTransition();
 }
 
-
 @function darken-brighten-color($color, $val) {
     @if (lightness($color) > 50) {
         @return darken($color, $val); // Lighter backgorund, return dark color
-    }
-
-    @else {
+    } @else {
         @return lighten($color, $val); // Darker background, return light color
     }
 }
@@ -51,4 +47,5 @@ $on-button: #000000 !default;
 @import "./theme/_list.scss";
 @import "./theme/_header.scss";
 @import "./theme/_card.scss";
-@import "./theme/table.scss";
+@import "./theme/_table.scss";
+@import "./theme/_scroll.scss";

src/theme/_scroll.scss

@@ -0,0 +1,20 @@
+::-webkit-scrollbar {
+    margin-left: 4px;
+}
+
+::-webkit-scrollbar-track {
+    background: red;
+    background: darken-brighten-color($background, 5%);
+}
+
+::-webkit-scrollbar-thumb {
+    background: darken-brighten-color($background, 20%);
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: darken-brighten-color($background, 25%);
+}
+
+::-webkit-scrollbar-thumb:active {
+    background: darken-brighten-color($background, 30%);
+}