feat(Desktop): Add custom scrollbar styles

stencila · May 20, 2021 · 9df42dd · 9df42dd
1 parent a12fa66
commit 9df42dd
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 3 deletions.
diff --git a/...s/app-project/app-project-sidebar/app-project-sidebar-files/app-project-sidebar-files.css b/...s/app-project/app-project-sidebar/app-project-sidebar-files/app-project-sidebar-files.css
@@ -1,6 +1,14 @@
 :host {
-  @apply block overflow-scroll resize-x max-w-xs;
+  @apply block overflow-y-scroll resize-x max-w-xs;
   min-width: 12rem;
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba(113, 128, 150, 0) !important;
+  }
+
+  &:hover::-webkit-scrollbar-thumb {
+    background: rgba(113, 128, 150, .75) !important;
+  }
 }
 
 ul {

diff --git a/...s/app-project/app-project-sidebar/app-project-sidebar-files/app-project-sidebar-files.tsx b/...s/app-project/app-project-sidebar/app-project-sidebar-files/app-project-sidebar-files.tsx
@@ -57,7 +57,7 @@ export class AppProjectSidebarFiles {
   render() {
     const files = selectProjectRootFiles(state)
     return (
-      <Host>
+      <Host class="customScrollbar">
         <div class="app-project-sidebar-files">
           {files && files.length > 0 ? (
             <ul>{files.map(this.pathToFileTree)}</ul>

diff --git a/desktop/src/renderer/components/shared/scrollbars.css b/desktop/src/renderer/components/shared/scrollbars.css
@@ -0,0 +1,30 @@
+.customScrollbar {
+  &::-webkit-scrollbar {
+    width: 0.75rem;
+    @apply px-px;
+  }
+
+  &::-webkit-scrollbar-button {
+  }
+
+  &::-webkit-scrollbar-track {
+  }
+
+  &::-webkit-scrollbar-track-piece {
+    @apply rounded bg-transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba(113, 128, 150, .75);
+    transition-property: background, width, opacity;
+    transition-duration: 12500ms;
+    transition-timing-function: ease-out;
+  }
+
+  &::-webkit-scrollbar-corner {
+  }
+
+  &::-webkit-resizer {
+    background: var(--color-neutral-700);
+  }
+}
diff --git a/desktop/src/renderer/global/app.css b/desktop/src/renderer/global/app.css
@@ -8,8 +8,8 @@
   Any global CSS variables should also be applied here.
 */
 
-/* @import 'remixicon/fonts/remixicon.css'; */
 @import url('https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css');
+@import '../components/shared/scrollbars.css';
 
 :root {
   --font-family-display: -apple-system, BlinkMacSystemFont, 'Segoe UI',