From 76f13ea62659b8a3bcb3db2733a3dec97a1bf45d Mon Sep 17 00:00:00 2001
From: razonyang <razonyang@gmail.com>
Date: Sun, 21 Aug 2022 13:14:38 +0800
Subject: [PATCH] style: update scrollbar style and add scrollbar CSS variables

---
 assets/main/scss/_code.scss      | 13 -------------
 assets/main/scss/_root.scss      |  5 +++++
 assets/main/scss/_scrollbar.scss | 16 ++++++++++++++++
 assets/main/scss/index.scss      |  1 +
 4 files changed, 22 insertions(+), 13 deletions(-)
 create mode 100644 assets/main/scss/_scrollbar.scss

diff --git a/assets/main/scss/_code.scss b/assets/main/scss/_code.scss
index bf634eebd..8e5eda0fa 100644
--- a/assets/main/scss/_code.scss
+++ b/assets/main/scss/_code.scss
@@ -48,19 +48,6 @@ pre {
   padding: 1rem;
   position: relative;
 
-  &::-webkit-scrollbar {
-    width: 10px;
-    height: 10px;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: var(--#{$prefix}secondary);
-  }
-
-  &::-webkit-scrollbar-corner {
-    background: var(--#{$prefix}secondary);
-  }
-
   code {
     padding: 0;
     background: inherit !important;
diff --git a/assets/main/scss/_root.scss b/assets/main/scss/_root.scss
index 47a07b335..b196b58d9 100644
--- a/assets/main/scss/_root.scss
+++ b/assets/main/scss/_root.scss
@@ -14,6 +14,11 @@
   --#{$prefix}surface-color-secondary: #{$surface-color-secondary};
   --#{$prefix}surface-color-disabled: #{$surface-color-disabled};
   --#{$prefix}shadow-rgb: 0, 0, 0;
+  --#{$prefix}scrollbar-width: 10px;
+  --#{$prefix}scrollbar-height: 10px;
+  --#{$prefix}scrollbar-track-bg: var(--#{$prefix}secondary-bg);
+  --#{$prefix}scrollbar-thumb-bg: var(--#{$prefix}secondary);
+  --#{$prefix}scrollbar-corner-bg: var(--#{$prefix}secondary);
 }
 
 [data-bs-theme='dark'] {
diff --git a/assets/main/scss/_scrollbar.scss b/assets/main/scss/_scrollbar.scss
new file mode 100644
index 000000000..2a7d9ba8f
--- /dev/null
+++ b/assets/main/scss/_scrollbar.scss
@@ -0,0 +1,16 @@
+::-webkit-scrollbar {
+    width: var(--#{$prefix}scrollbar-width);
+    height: var(--#{$prefix}scrollbar-height);
+}
+
+::-webkit-scrollbar-track {
+    background: var(--#{$prefix}scrollbar-track-bg);
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--#{$prefix}scrollbar-thumb-bg);
+}
+
+::-webkit-scrollbar-corner {
+    background: var(--#{$prefix}scrollbar-corner-bg);
+}
diff --git a/assets/main/scss/index.scss b/assets/main/scss/index.scss
index edc7988b5..f8dfb7454 100644
--- a/assets/main/scss/index.scss
+++ b/assets/main/scss/index.scss
@@ -36,6 +36,7 @@
 @import 'snackbar';
 @import 'docs';
 @import 'carousel';
+@import 'scrollbar';
 @import 'custom';
 
 /*!purgecss end ignore*/