From 3629c0c20bd54b337bedea5da1fc395ab2229939 Mon Sep 17 00:00:00 2001
From: gaelle morin <gmorin.dev@gmail.com>
Date: Wed, 10 Jun 2020 12:22:22 +0200
Subject: [PATCH] update: table - scrollvar ok

---
 src/styles/abstracts/_variables.scss |  2 ++
 src/styles/base/main.scss            | 22 +++++++++++++++++++++-
 src/styles/base/menu-left.scss       |  1 -
 src/styles/base/table.scss           |  1 +
 4 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/styles/abstracts/_variables.scss b/src/styles/abstracts/_variables.scss
index e3b7d59..194e13c 100644
--- a/src/styles/abstracts/_variables.scss
+++ b/src/styles/abstracts/_variables.scss
@@ -74,6 +74,8 @@
   --color-scrollbar-right-track: var(--color-grey-9);
   --color-scrollbar-left-background: var(--color-secondary);
   --color-scrollbar-left-track: var(--color-grey-11);
+  --color-scrollbar-table-background: var(--color-grey-10);
+  --color-scrollbar-table-track: var(--color-secondary);
 
   /* tags */
   --color-tag-admin-text: var(--color-complementary);
diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss
index 91e4e9d..ef152ae 100644
--- a/src/styles/base/main.scss
+++ b/src/styles/base/main.scss
@@ -89,7 +89,7 @@
 
 
 /* Add scrollbar to the left and right menu, and to the content */
-nav, .views-container {
+nav, .views-container, .table-wrapper {
   overflow: auto;
   height: auto;
   -webkit-overflow-scrolling: touch;
@@ -136,6 +136,26 @@ nav {
   }
 }
 
+/* Custom scrollbar of the table */
+.table-wrapper {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-scrollbar-table-track) var(--color-scrollbar-table-background);
+
+  &::-webkit-scrollbar-track {
+    background-color: var(--color-scrollbar-table-background);
+    border-radius: 10px;
+  }
+
+  &::-webkit-scrollbar {
+    height: 5px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--color-scrollbar-table-track);
+    border-radius: 10px;
+  }
+}
+
 /* Quick fix. Will be removed later */
 #admin-circles,
 #admin-projects,
diff --git a/src/styles/base/menu-left.scss b/src/styles/base/menu-left.scss
index 39648b5..a0f6e33 100644
--- a/src/styles/base/menu-left.scss
+++ b/src/styles/base/menu-left.scss
@@ -264,7 +264,6 @@
         }
 
         hubl-counter {
-          background-color: turquoise;
           height: 20px;
           width: 20px;
           margin-right: 1em;
diff --git a/src/styles/base/table.scss b/src/styles/base/table.scss
index aac166d..c1e34d8 100644
--- a/src/styles/base/table.scss
+++ b/src/styles/base/table.scss
@@ -8,6 +8,7 @@
   .table {
     border-collapse: collapse;
     display: table;
+    margin-bottom: 20px;
     overflow: auto;
     table-layout: fixed;
     width: 100%;