From 80c0aa0d6f3fa8a8978d0dee259182921b1f1557 Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Mon, 23 Nov 2020 13:19:14 +0300
Subject: [PATCH] Setting global webkit-scrollbar styles

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 src/renderer/components/app.scss    | 36 ++++++++++++++++------
 src/renderer/components/mixins.scss | 46 -----------------------------
 2 files changed, 27 insertions(+), 55 deletions(-)

diff --git a/src/renderer/components/app.scss b/src/renderer/components/app.scss
index 836d3a4ab1..037b088efe 100755
--- a/src/renderer/components/app.scss
+++ b/src/renderer/components/app.scss
@@ -1,15 +1,6 @@
 @import "~flex.box";
 @import "fonts";
 
-*, *:before, *:after {
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-  border: 0;
-  outline: none;
-  -webkit-font-smoothing: antialiased;
-}
-
 :root {
   --unit: 8px;
   --padding: var(--unit);
@@ -27,6 +18,33 @@
   --drag-region-height: 22px
 }
 
+*, *:before, *:after {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  outline: none;
+  -webkit-font-smoothing: antialiased;
+}
+
+::-webkit-scrollbar {
+  width: 16px;
+  height: 15px; // Align sizes visually
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--scrollBarColor);
+  background-clip: padding-box;
+  border: 4px solid transparent;
+  border-right-width: 5px;
+  border-radius: 16px;
+}
+
+::-webkit-scrollbar-corner {
+  background-color: transparent;
+}
+
 ::selection {
   background: $primary;
   color: white;
diff --git a/src/renderer/components/mixins.scss b/src/renderer/components/mixins.scss
index 2509c1e951..6573a7487a 100755
--- a/src/renderer/components/mixins.scss
+++ b/src/renderer/components/mixins.scss
@@ -6,52 +6,6 @@
 @import "table/table.mixins";
 @import "+network/network-mixins";
 
-// todo: re-use in other places with theming
-@mixin custom-scrollbar-themed($invert: false) {
-  @if ($invert) {
-    @include custom-scrollbar(dark);
-    .theme-light & {
-      @include custom-scrollbar(light);
-    }
-  } @else {
-    // fits better with dark background
-    @include custom-scrollbar(light);
-    .theme-light & {
-      @include custom-scrollbar(dark);
-    }
-  }
-}
-
-@mixin custom-scrollbar($theme: light, $size: 7px, $borderSpacing: 5px) {
-  $themes: (
-    light: #5f6064,
-    dark: #bbb,
-  );
-
-  $scrollBarColor: if(map_has_key($themes, $theme), map_get($themes, $theme), none);
-  $scrollBarSize: calc(#{$size} + #{$borderSpacing} * 2);
-
-  overflow: auto; // allow scrolling for container
-
-  // Webkit
-  &::-webkit-scrollbar {
-    width: $scrollBarSize;
-    height: $scrollBarSize;
-    background: transparent;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: $scrollBarColor;
-    background-clip: padding-box;
-    border: $borderSpacing solid transparent;
-    border-radius: $scrollBarSize;
-  }
-
-  &::-webkit-scrollbar-corner {
-    background-color: transparent;
-  }
-}
-
 // Hide scrollbar but keep the element scrollable
 @mixin hidden-scrollbar {
   overflow: auto;