Customize scroll-bar style (#2857)

janhq · May 3, 2024 · c6182ab · c6182ab
1 parent ce2d8e5
commit c6182ab
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 0 deletions.
diff --git a/uikit/src/main.scss b/uikit/src/main.scss
@@ -45,6 45,7 @@
  --border: 20 5.9% 90%;
  --input: 20 5.9% 90%;
  --ring: 20 14.3% 4.1%;
  --scroll-bar: 60, 3%, 86%;
 
  .primary-blue {
  --primary: 221 83% 53%;

diff --git a/uikit/src/scroll-area/styles.scss b/uikit/src/scroll-area/styles.scss
@@ -21,3 21,38 @@
  @apply bg-border relative z-50 w-[10px] rounded-full;
  }
 }
 
 // Customized scroll bar
 ::-webkit-scrollbar {
  width: 7px;
 }
 
 ::-webkit-scrollbar-thumb {
  background-color: hsl(var(--scroll-bar));
  border-radius: 4px;
 }
 
 ::-webkit-scrollbar-track {
  background-color: hsl(var(--background));
 }
 
 ::-webkit-scrollbar-corner {
  background-color: hsl(var(--background));
 }
 
 ::-moz-scrollbar {
  width: 7px;
 }
 
 ::-moz-scrollbar-thumb {
  background-color: hsl(var(--scroll-bar));
  border-radius: 4px;
 }
 
 ::-moz-scrollbar-track {
  background-color: hsl(var(--background));
 }
 
 ::-moz-scrollbar-corner {
  background-color: hsl(var(--background));
 }