From 6af7b3f452aad3aab546f66e3f018cb13acf4e6c Mon Sep 17 00:00:00 2001
From: Anmol Baranwal <74038190+Anmol-Baranwal@users.noreply.github.com>
Date: Wed, 7 Jun 2023 13:39:46 +0530
Subject: [PATCH] feat: add custom scrollbar with existing theme
---
src/styles/index.scss | 47 +++++++++++++++++++++++++++++++++++++++++++
1 file changed, 47 insertions(+)
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 997dcc1..489bd1a 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,5 +1,52 @@
+:root {
+ --primary-color: #8034e4;
+ --secondary-color: #7202bb;
+}
+
*,
body {
font-family: "Open Sans";
@import "App";
}
+
+/* --------------Custom Scrollbar---------------------- */
+
+/* Webkit-based browsers */
+::-webkit-scrollbar {
+ width: 0.8rem; /* Width of the entire scrollbar */
+}
+
+::-webkit-scrollbar-track {
+ background: transparent;
+ // margin-block: 0.4em;
+}
+
+// Another secondary color: E638EAFF
+::-webkit-scrollbar-thumb {
+ background: linear-gradient(var(--primary-color), var(--secondary-color));
+ background-clip: content-box;
+ border: 0.21em solid transparent;
+ border-radius: 100px;
+}
+
+/* Firefox */
+* {
+ scrollbar-width: thin;
+ scrollbar-color: var(--primary-color) var(--secondary-color);
+}
+
+/* Internet Explorer and Microsoft Edge */
+*::-ms-scrollbar {
+ width: 0.8rem;
+}
+
+*::-ms-scrollbar-track {
+ background: transparent;
+}
+
+*::-ms-scrollbar-thumb {
+ background: linear-gradient(var(--primary-color), var(--secondary-color));
+ background-clip: content-box;
+ border: 0.21em solid transparent;
+ border-radius: 100px;
+}