Scrollbar styles (#357)

* Incorporate scrollbar styling * Restore link to examples styles
playcanvas · Jun 18, 2024 · 4e1cc36 · 4e1cc36
1 parent e4f2fcb
commit 4e1cc36
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 21 deletions.
diff --git a/examples/index.html b/examples/index.html
@@ -25,27 +25,6 @@
         .pcui-treeview-item-icon {
             font-size: 14px;
         }
-
-        ::-webkit-scrollbar {
-            width: 8px;
-            height: 8px;
-        }
-
-        ::-webkit-scrollbar-track {
-            background: #20292b;
-        }
-
-        ::-webkit-scrollbar-thumb {
-            background: #5b7073;
-        }
-
-        ::-webkit-scrollbar-thumb:hover {
-            background: #f60;
-        }
-
-        ::-webkit-scrollbar-corner {
-            background: #2c393c;
-        }
     </style>
     <script async src="https://unpkg.com/es-module-shims/dist/es-module-shims.js"></script>
     <script type="importmap">

diff --git a/src/scss/_scrollbars.scss b/src/scss/_scrollbars.scss
@@ -0,0 +1,31 @@
+/* Apply scrollbar styles globally */
+* {
+    /* Webkit-based browsers */
+    &::-webkit-scrollbar {
+        width: 8px;
+        height: 8px;
+    }
+
+    &::-webkit-scrollbar-track {
+        background: $bcg-darkest;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background: $text-darkest;
+    }
+
+    &::-webkit-scrollbar-thumb:hover {
+        background: $text-active;
+    }
+
+    &::-webkit-scrollbar-corner {
+        background: $bcg-dark;
+    }
+
+    /* Standardized Properties */
+    @supports not selector(::-webkit-scrollbar) {
+        /* Firefox */
+        scrollbar-width: thin;
+        scrollbar-color: $text-darkest $bcg-darkest;
+    }
+}
diff --git a/src/scss/pcui-base.scss b/src/scss/pcui-base.scss
@@ -1,4 +1,5 @@
 @import './variables';
 @import './fonts';
+@import './scrollbars';
 @import './pcui-common';
 @import './components';