Tidy settings wrapper SCSS

client/src/styles/partials/sidebarview/content.scss

@@ -11,28 +11,6 @@
         flex-grow: 1;
     }
 
-    .bd-settingsWrap {
-        display: flex;
-        flex-direction: column;
-        flex-grow: 1;
-
-        .bd-scroller-wrap {
-            flex-grow: 1;
-        }
-
-        .bd-settingsWrap-header {
-            color: $colbdblue;
-            text-transform: uppercase;
-            font-weight: 600;
-            margin-top: 10px;
-            margin-bottom: 20px;
-            font-size: 100%;
-            outline: 0;
-            padding: 0;
-            vertical-align: baseline;
-        }
-    }
-
     > div:not(.active) {
         opacity: 0;
         position: absolute;
@@ -50,8 +28,4 @@
     .animating {
         animation: bd-fade-out .4s forwards;
     }
-
-    .bd-settingsWrap {
-        padding: 20px 15px 15px 15px;
-    }
 }

client/src/styles/partials/sidebarview/index.scss

@@ -1,3 +1,4 @@
 @import './main.scss';
 @import './sidebar.scss';
 @import './content.scss';
+@import './settingswrap.scss';

client/src/styles/partials/sidebarview/main.scss

@@ -19,16 +19,6 @@
         z-index: 5;
         max-width: 310px;
         min-width: 310px;
-
-        .bd-settingsWrap {
-            display: flex;
-            height: 100%;
-            -webkit-box-flex: 1;
-            flex: 1;
-            min-height: 1px;
-            box-sizing: border-box;
-            padding: 80px 15px 15px 15px;
-        }
     }
 
     .bd-content-region {

client/src/styles/partials/sidebarview/settingswrap.scss

@@ -0,0 +1,39 @@
+.bd-sidebar-region {
+    .bd-settingswrap {
+        display: flex;
+        height: 100%;
+        -webkit-box-flex: 1;
+        flex: 1;
+        min-height: 1px;
+        box-sizing: border-box;
+        padding: 80px 15px 15px 15px;
+    }
+}
+
+.bd-content-region {
+    .bd-settingswrap {
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+        padding: 20px 15px 15px 15px;
+
+        .bd-scroller-wrap {
+            flex-grow: 1;
+        }
+
+        .bd-settingswrap-header {
+            outline: 0;
+            padding: 0;
+            margin-top: 10px;
+            margin-bottom: 20px;
+            vertical-align: baseline;
+
+            .bd-settingswrap-header-text {
+                color: $colbdblue;
+                text-transform: uppercase;
+                font-weight: 600;
+                font-size: 16px;
+            }
+        }
+    }
+}

client/src/styles/partials/sidebarview/sidebar.scss

@@ -44,7 +44,7 @@
         }
 
         &.active {
-            color: #FFF;
+            color: #fff;
         }
     }
 }

client/src/ui/components/bd/SettingsPanel.vue

@@ -58,11 +58,6 @@
             Setting,
             Drawer
         },
-        data() {
-            return {
-                active_scheme: 'scheme-1'
-            };
-        },
         methods: {
             checkSchemeActive(scheme) {
                 for (let schemeCategory of scheme.settings) {

client/src/ui/components/bd/SettingsWrapper.vue

@@ -9,8 +9,10 @@
 */
 
 <template>
-    <div class="bd-settingsWrap">
-        <div class="bd-settingsWrap-header">{{headertext}}</div>
+    <div class="bd-settingswrap">
+        <div class="bd-settingswrap-header">
+            <span class="bd-settingswrap-header-text">{{ headertext }}</span>
+        </div>
         <ScrollerWrap>
             <slot />
         </ScrollerWrap>

client/src/ui/components/sidebar/View.vue

@@ -11,7 +11,7 @@
 <template>
     <div class="bd-sidebar-view" :class="{active: contentVisible, animating: animating}">
         <div class="bd-sidebar-region bd-flex-col">
-            <div class="bd-settingsWrap">
+            <div class="bd-settingswrap">
                 <ScrollerWrap dark="true">
                     <slot name="sidebar" />
                 </ScrollerWrap>