From ff1510dbccfb9115696ab2145694300cecce9647 Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Sat, 20 Jan 2018 14:51:30 +0200
Subject: [PATCH] Style changes and scrollerwrap props

---
 .../vue/components/generic/ScrollerWrap.vue   |  2 +-
 .../generic/templates/ScrollerWrap.html       |  6 +-
 .../ui/vue/components/sidebar/View.vue        |  3 +-
 .../components/sidebar/templates/Sidebar.html |  2 +-
 .../components/sidebar/templates/View.html    |  4 +-
 .../vue/components/templates/BdSettings.html  |  2 +-
 client/src/styles/partials/generic.scss       | 48 ++++++++++
 client/src/styles/partials/index.scss         |  1 +
 client/src/styles/partials/sidebarview.scss   | 87 +++++++++----------
 9 files changed, 100 insertions(+), 55 deletions(-)
 create mode 100644 client/src/styles/partials/generic.scss

diff --git a/client/src/modules/ui/vue/components/generic/ScrollerWrap.vue b/client/src/modules/ui/vue/components/generic/ScrollerWrap.vue
index a511f680..3ea3a8f8 100644
--- a/client/src/modules/ui/vue/components/generic/ScrollerWrap.vue
+++ b/client/src/modules/ui/vue/components/generic/ScrollerWrap.vue
@@ -1,2 +1,2 @@
 <template src="./templates/ScrollerWrap.html"></template>
-<script>export default {}</script>
\ No newline at end of file
+<script>export default { props: ['dark'] }</script>
\ No newline at end of file
diff --git a/client/src/modules/ui/vue/components/generic/templates/ScrollerWrap.html b/client/src/modules/ui/vue/components/generic/templates/ScrollerWrap.html
index bcc9d428..6ce4413c 100644
--- a/client/src/modules/ui/vue/components/generic/templates/ScrollerWrap.html
+++ b/client/src/modules/ui/vue/components/generic/templates/ScrollerWrap.html
@@ -1,5 +1,3 @@
-<div class="bd-scroller-wrap">
-    <div class="bd-scroller">
-        <slot/>
-    </div>
+<div class="bd-scroller-wrap" :class="{'bd-dark': dark}">
+    <slot/>
 </div>
\ No newline at end of file
diff --git a/client/src/modules/ui/vue/components/sidebar/View.vue b/client/src/modules/ui/vue/components/sidebar/View.vue
index 3432053c..0ee01a63 100644
--- a/client/src/modules/ui/vue/components/sidebar/View.vue
+++ b/client/src/modules/ui/vue/components/sidebar/View.vue
@@ -6,6 +6,7 @@
     /*<= Imports*/
 
     export default {
-        components
+        components,
+        props: ['dark']
     }
 </script>
\ No newline at end of file
diff --git a/client/src/modules/ui/vue/components/sidebar/templates/Sidebar.html b/client/src/modules/ui/vue/components/sidebar/templates/Sidebar.html
index b423bd24..292542a3 100644
--- a/client/src/modules/ui/vue/components/sidebar/templates/Sidebar.html
+++ b/client/src/modules/ui/vue/components/sidebar/templates/Sidebar.html
@@ -1,3 +1,3 @@
-<div class="bd-sidebar">
+<div class="bd-sidebar bd-scroller">
     <slot/>
 </div>
\ No newline at end of file
diff --git a/client/src/modules/ui/vue/components/sidebar/templates/View.html b/client/src/modules/ui/vue/components/sidebar/templates/View.html
index 11eb65b3..e61f544b 100644
--- a/client/src/modules/ui/vue/components/sidebar/templates/View.html
+++ b/client/src/modules/ui/vue/components/sidebar/templates/View.html
@@ -1,13 +1,13 @@
 <div class="bd-sidebar-view">
     <div class="bd-sidebar-region">
         <div class="bd-settingsWrap">
-            <ScrollerWrap>
+            <ScrollerWrap dark="dark">
                 <slot name="sidebar"/>
             </ScrollerWrap>
         </div>
     </div>
     <div class="bd-content-region">
-        <ScrollerWrap>
+        <ScrollerWrap dark="dark">
             <slot name="content"/>
         </ScrollerWrap>
     </div>
diff --git a/client/src/modules/ui/vue/components/templates/BdSettings.html b/client/src/modules/ui/vue/components/templates/BdSettings.html
index d2442e28..b044e18e 100644
--- a/client/src/modules/ui/vue/components/templates/BdSettings.html
+++ b/client/src/modules/ui/vue/components/templates/BdSettings.html
@@ -1,5 +1,5 @@
 <div class="bd-settings" :class="{active: active}">
-    <SidebarView>
+    <SidebarView dark="true">
         <Sidebar slot="sidebar">
             <div class="bd-settings-x" @click="close">
                 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 12 12"><g fill="none" fill-rule="evenodd"><path d="M0 0h12v12H0"></path><path class="fill" fill="#dcddde" d="M9.5 3.205L8.795 2.5 6 5.295 3.205 2.5l-.705.705L5.295 6 2.5 8.795l.705.705L6 6.705 8.795 9.5l.705-.705L6.705 6"></path></g></svg>
diff --git a/client/src/styles/partials/generic.scss b/client/src/styles/partials/generic.scss
new file mode 100644
index 00000000..18cc66b5
--- /dev/null
+++ b/client/src/styles/partials/generic.scss
@@ -0,0 +1,48 @@
+.bd-scroller-wrap {
+    display: flex;
+    width: 100%;
+
+    .bd-scroller {
+        display: flex;
+        flex-grow: 1;
+        flex-direction: column;
+        overflow-y: auto;
+        overflow-x: hidden;
+
+        &::-webkit-scrollbar {
+            width: 14px;
+        }
+
+        &::-webkit-scrollbar-thumb {
+            background-color: #1e2124;
+            border-color: #36393e;
+        }
+
+        &::-webkit-scrollbar-thumb,
+        &::-webkit-scrollbar-track-piece {
+            background-clip: padding-box;
+            border-width: 3px;
+            border-style: solid;
+            border-radius: 7px;
+        }
+
+        &::-webkit-scrollbar-track-piece {
+            background-color: #2f3136;
+            border-color: #36393e;
+        }
+    }
+
+    &.bd-dark {
+        .bd-scroller {
+            &::-webkit-scrollbar-thumb {
+                background-color: #36393e;
+                border-color: transparent;
+            }
+
+            &::-webkit-scrollbar-track-piece {
+                background-color: #2b2e31;
+                border-color: transparent;
+            }
+        }
+    }
+}
diff --git a/client/src/styles/partials/index.scss b/client/src/styles/partials/index.scss
index e2f4fec4..302fc649 100644
--- a/client/src/styles/partials/index.scss
+++ b/client/src/styles/partials/index.scss
@@ -3,5 +3,6 @@
 @import './animations.scss';
 @import './bdsettings.scss';
 @import './sidebarview.scss';
+@import './generic.scss';
 
 @import './discordoverrides.scss';
\ No newline at end of file
diff --git a/client/src/styles/partials/sidebarview.scss b/client/src/styles/partials/sidebarview.scss
index 57b82ac7..8465b9a9 100644
--- a/client/src/styles/partials/sidebarview.scss
+++ b/client/src/styles/partials/sidebarview.scss
@@ -26,58 +26,55 @@
             flex: 1;
             min-height: 1px;
             box-sizing: border-box;
-            padding: 50px 15px 15px 15px;
+            padding: 80px 15px 15px 15px;
 
-            .bd-scroller {
+            .bd-scroller.bd-sidebar {
                 width: 100%;
                 padding-right: 20px;
+                padding: 0;
 
-                .bd-sidebar {
-                    padding: 0;
+                .bd-header {
+                    padding: 6px 0;
+                    margin-left: 10px;
+                    margin-top: 15px;
+                    color: rgba(255, 255, 255, 0.15);
+                    font-size: 14px;
+                    font-weight: 700;
+                    line-height: 16px;
+                    text-transform: uppercase;
+                    font-weight: 600;
+                    flex-shrink: 0;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                    font-family: Whitney, Helvetica Neue, Helvetica, Arial, sans-serif;
+                }
 
-                    .bd-header {
-                        padding: 6px 0;
-                        margin-left: 10px;
-                        margin-top: 15px;
-                        color: rgba(255, 255, 255, 0.15);
-                        font-size: 14px;
-                        font-weight: 700;
-                        line-height: 16px;
-                        text-transform: uppercase;
-                        font-weight: 600;
-                        flex-shrink: 0;
-                        overflow: hidden;
-                        text-overflow: ellipsis;
-                        white-space: nowrap;
-                        font-family: Whitney, Helvetica Neue, Helvetica, Arial, sans-serif;
+                .bd-item {
+                    border-radius: 3px;
+                    margin-bottom: 2px;
+                    padding-bottom: 6px;
+                    padding-top: 6px;
+                    padding: 6px 10px;
+                    color: $coldimwhite;
+                    cursor: pointer;
+                    font-size: 17px;
+                    line-height: 20px;
+                    position: relative;
+                    flex-shrink: 0;
+                    font-weight: 500;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                    font-family: Whitney, Helvetica Neue, Helvetica, Arial, sans-serif;
+
+                    &:hover,
+                    &.active {
+                        background: $colbdblue;
                     }
 
-                    .bd-item {
-                        border-radius: 3px;
-                        margin-bottom: 2px;
-                        padding-bottom: 6px;
-                        padding-top: 6px;
-                        padding: 6px 10px;
-                        color: $coldimwhite;
-                        cursor: pointer;
-                        font-size: 17px;
-                        line-height: 20px;
-                        position: relative;
-                        flex-shrink: 0;
-                        font-weight: 500;
-                        overflow: hidden;
-                        text-overflow: ellipsis;
-                        white-space: nowrap;
-                        font-family: Whitney, Helvetica Neue, Helvetica, Arial, sans-serif;
-
-                        &:hover,
-                        &.active {
-                            background: $colbdblue;
-                        }
-
-                        &.active {
-                            color: #FFF;
-                        }
+                    &.active {
+                        color: #FFF;
                     }
                 }
             }