From 5985f216dae62645a587aabac39440fc8bc53193 Mon Sep 17 00:00:00 2001
From: fantasticit <fantasticit@163.com>
Date: Mon, 25 Apr 2022 15:28:38 +0800
Subject: [PATCH] feat: custom scroll bar style

---
 packages/client/src/styles/reset.scss | 27 +++++++++++++++++++++++++--
 packages/client/src/styles/var.scss   |  1 +
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/styles/reset.scss b/packages/client/src/styles/reset.scss
index f0e7779d..81ff8685 100644
--- a/packages/client/src/styles/reset.scss
+++ b/packages/client/src/styles/reset.scss
@@ -84,9 +84,32 @@ select {
   *,
   *::before,
   *::after {
-    transition-duration: .01ms !important;
-    animation-duration: .01ms !important;
+    transition-duration: 0.01ms !important;
+    animation-duration: 0.01ms !important;
     animation-iteration-count: 1 !important;
     scroll-behavior: auto !important;
   }
 }
+
+::-webkit-scrollbar-track {
+  background: transparent;
+  border-radius: 0;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: transparent;
+  border-radius: 0.5rem;
+  transition: all 0.2s;
+}
+
+*:hover {
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--scrollbar-bg);
+  }
+}
+
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+  background: transparent;
+}
diff --git a/packages/client/src/styles/var.scss b/packages/client/src/styles/var.scss
index 1827cdcb..99f56c0b 100644
--- a/packages/client/src/styles/var.scss
+++ b/packages/client/src/styles/var.scss
@@ -1,4 +1,5 @@
 body {
   --border-radius: 4px;
   --box-shadow: rgb(0 0 0 / 10%) 0 0 10px;
+  --scrollbar-bg: #dadada;
 }