From eb45e8775a3d49ccc60c95aca27df0ee550bd7ce Mon Sep 17 00:00:00 2001
From: walstanb <walstanb@gmail.com>
Date: Sat, 17 Apr 2021 15:20:12 +0530
Subject: [PATCH] feat(UI): standardardized themed scrollbar

---
 frappe/public/scss/common/css_variables.scss |  3 ++
 frappe/public/scss/desk/dark.scss            |  5 ++++
 frappe/public/scss/desk/desktop.scss         | 21 ++++++++++++++
 frappe/public/scss/desk/index.scss           |  1 +
 frappe/public/scss/desk/scrollbar.scss       | 29 ++++++++++++++++++++
 5 files changed, 59 insertions(+)
 create mode 100644 frappe/public/scss/desk/scrollbar.scss

diff --git a/frappe/public/scss/common/css_variables.scss b/frappe/public/scss/common/css_variables.scss
index 701a0d09e9..8f4af36389 100644
--- a/frappe/public/scss/common/css_variables.scss
+++ b/frappe/public/scss/common/css_variables.scss
@@ -169,6 +169,9 @@
 	// Other Colors
 	--sidebar-select-color: var(--gray-200);
 
+	--scrollbar-thumb-color: var(--gray-400);
+	--scrollbar-track-color: var(--gray-200);
+
 	--shadow-inset: inset 0px -1px 0px var(--gray-300);
 	--border-color: var(--gray-100);
 	--dark-border-color: var(--gray-300);
diff --git a/frappe/public/scss/desk/dark.scss b/frappe/public/scss/desk/dark.scss
index 5817e33ca0..4e83f4db47 100644
--- a/frappe/public/scss/desk/dark.scss
+++ b/frappe/public/scss/desk/dark.scss
@@ -65,6 +65,9 @@
 
 	--sidebar-select-color: var(--gray-800);
 
+	--scrollbar-thumb-color: var(--gray-600);
+	--scrollbar-track-color: var(--gray-700);
+
 	--shadow-inset: var(--fg-color);
 	--border-color: var(--gray-700);
 	--dark-border-color: var(--gray-600);
@@ -75,6 +78,8 @@
 	// input
 	--input-disabled-bg: none;
 
+	color-scheme: dark;
+
 	.frappe-card {
 		.btn-default {
 			background-color: var(--bg-color);
diff --git a/frappe/public/scss/desk/desktop.scss b/frappe/public/scss/desk/desktop.scss
index 1bb91090e6..ac3b1a4f7c 100644
--- a/frappe/public/scss/desk/desktop.scss
+++ b/frappe/public/scss/desk/desktop.scss
@@ -754,7 +754,28 @@ body {
 			.layout-side-section, .layout-main-section-wrapper {
 				height: 100%;
 				overflow-y: auto;
+				padding-right: 25px;
+				scrollbar-color: var(--gray-200) transparent;
+				[data-theme="dark"] & {
+					scrollbar-color: var(--gray-800) transparent;
+				}
+
+				&::-webkit-scrollbar-track {
+					background: transparent;
+				}
+
+				&::-webkit-scrollbar-thumb {
+					background: var(--gray-200);
+					[data-theme="dark"] & {
+						background: var(--gray-800);
+					}
+				}
 			}
+
+			.layout-side-section {
+				margin-right: 20px;
+			}
+
 			.desk-sidebar {
 				margin-bottom: var(--margin-2xl);
 			}
diff --git a/frappe/public/scss/desk/index.scss b/frappe/public/scss/desk/index.scss
index 31eae63776..d0d968df63 100644
--- a/frappe/public/scss/desk/index.scss
+++ b/frappe/public/scss/desk/index.scss
@@ -10,6 +10,7 @@
 @import "mobile";
 @import "form";
 @import "print_preview";
+@import "scrollbar";
 @import "navbar";
 @import "../common/modal";
 @import "slides";
diff --git a/frappe/public/scss/desk/scrollbar.scss b/frappe/public/scss/desk/scrollbar.scss
new file mode 100644
index 0000000000..806ffd13eb
--- /dev/null
+++ b/frappe/public/scss/desk/scrollbar.scss
@@ -0,0 +1,29 @@
+/* Works on Firefox */
+* {
+	scrollbar-width: thin;
+	scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
+}
+
+html {
+	scrollbar-width: auto;
+}
+
+/* Works on Chrome, Edge, and Safari */
+*::-webkit-scrollbar {
+	width: 6px;
+	height: 6px;
+}
+
+*::-webkit-scrollbar-thumb {
+	background: var(--scrollbar-thumb-color);
+}
+
+*::-webkit-scrollbar-track,
+*::-webkit-scrollbar-corner {
+	background: var(--scrollbar-track-color);
+}
+
+body::-webkit-scrollbar {
+	width: unset;
+	height: unset;
+}