feat(chat-list): scrollbar style

Alwatr · Dec 29, 2022 · a02074d · a02074d
1 parent f711e12
commit a02074d
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 2 deletions.
diff --git a/ui/demo-pwa/style/index.css b/ui/demo-pwa/style/index.css
@@ -10,6 +10,7 @@
 @import url('tokens/state.css');
 @import url('tokens/elevation.css');
 @import url('tokens/spacing.css');
+@import url('tokens/scrollbar.css');
 @import url('tokens/z-index.css');
 
 @import url('safe-area.css');

diff --git a/ui/demo-pwa/style/tokens/scrollbar.css b/ui/demo-pwa/style/tokens/scrollbar.css
@@ -0,0 +1,7 @@
+:root {
+  --md-scrollbar-size: var(--md-sys-spacing-track-1);
+  --md-scrollbar-background: transparent;
+  --md-scrollbar-color: var(--md-sys-color-secondary);
+  --md-scrollbar-color-hover: var(--md-sys-color-secondary);
+  --md-scrollbar-radius: 0;
+}
diff --git a/ui/ui-kit/src/chat/chat-list.ts b/ui/ui-kit/src/chat/chat-list.ts
@@ -38,8 +38,27 @@ export class AlwatrChatList extends AlwatrDummyElement {
       flex-direction: column;
       padding: var(--md-sys-spacing-track-3) var(--md-sys-spacing-track-2) var(--md-sys-spacing-track-2);
       gap: var(--md-sys-spacing-track-2);
-      color: var(--md-sys-color-on-surface-variant);
-      background-color: var(--md-sys-color-surface-variant);
+      flex-grow: 1;
+      overflow-y: auto;
+    }
+
+    :host(::-webkit-scrollbar) {
+      width: var(--theme-scrollbar-size);
+      height: var(--theme-scrollbar-size);
+    }
+
+    :host(::-webkit-scrollbar-corner),
+    :host(::-webkit-scrollbar-track) {
+      background-color: red;
+    }
+
+    :host(::-webkit-scrollbar-thumb) {
+      background-color: var(--theme-scrollbar-color);
+      border-radius: var(--theme-scrollbar-radius);
+    }
+
+    :host(::-webkit-scrollbar-thumb:hover) {
+      background-color: var(--theme-scrollbar-color-hover);
     }
   `;