feat(uniquely/soffit-site-pwa): scroll bar

Alwatr · Jan 18, 2023 · 4d11e08 · 4d11e08
1 parent eca14c8
commit 4d11e08
Showing 1 changed file with 23 additions and 0 deletions.
diff --git a/uniquely/soffit-site-pwa/src/page-home.ts b/uniquely/soffit-site-pwa/src/page-home.ts
@@ -21,6 +21,29 @@ export class AlwatrPageHome extends AlwatrSmartElement {
       overflow-y: auto;
     }
 
+    :host::-webkit-scrollbar {
+      width: var(--sys-scrollbar-size);
+      height: var(--sys-scrollbar-size);
+    }
+
+    :host::-webkit-scrollbar-corner,
+    :host::-webkit-scrollbar-track {
+      background-color: var(--sys-scrollbar-background);
+    }
+
+    :host::-webkit-scrollbar-track {
+      margin: var(--sys-spacing-track);
+    }
+
+    :host::-webkit-scrollbar-thumb {
+      background-color: var(--sys-scrollbar-color);
+      border-radius: var(--sys-scrollbar-radius);
+    }
+
+    :host(:hover)::-webkit-scrollbar-thumb {
+      background-color: var(--sys-scrollbar-color-hover);
+    }
+
     section {
       display: flex;
       flex-direction: column;