From 8db384d64be5ddbe050fe9525a057022cfc7fb6a Mon Sep 17 00:00:00 2001
From: kolaente <konrad@kola-entertainments.de>
Date: Tue, 30 Apr 2019 10:44:49 +0200
Subject: [PATCH] Added fancy scrollbars

---
 src/styles/_scrollbars.scss | 31 +++++++++++++++++++++++++++++++
 src/styles/_variables.scss  |  7 ++++++-
 src/styles/scrollbars.scss  | 14 --------------
 todo.md                     |  2 +-
 4 files changed, 38 insertions(+), 16 deletions(-)
 create mode 100644 src/styles/_scrollbars.scss
 delete mode 100644 src/styles/scrollbars.scss

diff --git a/src/styles/_scrollbars.scss b/src/styles/_scrollbars.scss
new file mode 100644
index 00000000..f81178ed
--- /dev/null
+++ b/src/styles/_scrollbars.scss
@@ -0,0 +1,31 @@
+
+// Chrome
+::-webkit-scrollbar {
+  width: $scrollbar-height;
+  height: $scrollbar-height;
+}
+
+::-webkit-scrollbar-track {
+  background: $scrollbar-track-color;
+  border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  background: $scrollbar-thumb-color;
+  -webkit-transition: background-color $transition;
+  -moz-transition: background-color $transition;
+  -ms-transition: background-color $transition;
+  -o-transition: background-color $transition;
+  transition: background-color $transition;
+
+  &:hover {
+    background: $scrollbar-hover-color;
+  }
+}
+
+// Firefox
+*{
+  scrollbar-color: $scrollbar-thumb-color $scrollbar-track-color;
+  scrollbar-width: thin;
+}
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index 89f9f3a5..c53124b8 100644
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -36,4 +36,9 @@ $multiselect-dark: #35495e;
 $multiselect-border: #e8e8e8;
 $multiselect-highlight: $green;
 $multiselect-highlight-negative: $red;
-$multiselect-disabled: darken(#fff, 40);
\ No newline at end of file
+$multiselect-disabled: darken(#fff, 40);
+
+$scrollbar-height: 8px;
+$scrollbar-track-color: lighten($dark, 65);
+$scrollbar-thumb-color: lighten($dark, 40);
+$scrollbar-hover-color: lighten($dark, 30);
\ No newline at end of file
diff --git a/src/styles/scrollbars.scss b/src/styles/scrollbars.scss
deleted file mode 100644
index 0ef4dbcc..00000000
--- a/src/styles/scrollbars.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-//
-//::-webkit-scrollbar {
-//  width: 8px;
-//}
-//
-//::-webkit-scrollbar-track {
-//  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-//  border-radius: 10px;
-//}
-//
-//::-webkit-scrollbar-thumb {
-//  border-radius: 10px;
-//  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
-//}
diff --git a/todo.md b/todo.md
index ba589dca..c3778570 100644
--- a/todo.md
+++ b/todo.md
@@ -34,9 +34,9 @@
 * [x] Google fonts raus (sollen von lokal geladen werden)
 * [x] Ladeanimationen erst nach 100ms anzeigen, sonst wird das überflüssigerweise angezeigt
 * [x] Btns für Teams und neuer Namespace nach oben in die Leiste verschieben
+* [x] Fancy Scrollbars
 * [ ] Card-like overview of all lists with the first 3-5 tasks, undone first
 * [ ] Be able to collapse all lists in a namespace by clicking on the menu entry
-* [ ] Fancy Scrollbars
 
 ## Funktionales