Fullscreen modals

fixes #80

client/src/styles/partials/bdsettings/button.scss

@@ -32,7 +32,7 @@
         }
     }
 
-    &.active {
+    &.bd-active {
         background: transparent;
         opacity: 1;
         box-shadow: none;

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

@@ -98,3 +98,16 @@
         }
     }
 }
+
+.bd-settings .bd-sidebar-view.bd-stop .bd-content-region {
+	z-index: 3003;
+}
+
+.bd-backdrop {
+	z-index: 3003;
+}
+
+.bd-sidebar .bd-settings-button {
+    position: absolute;
+	top: 0;
+}

client/src/styles/partials/generic/modals.scss

@@ -31,6 +31,7 @@
     box-sizing: border-box;
     pointer-events: none;
     z-index: 9001;
+    justify-content: center;
 }
 
 .bd-modal .bd-modal-inner {
@@ -46,6 +47,8 @@
     flex-grow: 1;
     border-radius: 4px;
     max-height: 100%;
+    max-width: 500px;
+    width: 500px;
 }
 
 .bd-modal .bd-modal-body {

client/src/styles/partials/layouts.scss

@@ -17,3 +17,7 @@
 .bd-flex-spacer {
     flex-grow: 1;
 }
+
+.bd-hide {
+    display: none;
+}

client/src/ui/components/BdSettings.vue

@@ -12,6 +12,9 @@
     <div class="bd-settings" :class="{active: active}" @keyup="close">
         <SidebarView :contentVisible="this.activeIndex >= 0" :animating="this.animating" :class="{'bd-stop': !first}">
             <Sidebar slot="sidebar">
+                <div class="bd-settings-button bd-active">
+                    <div class="bd-settings-button-btn"></div>
+                </div>
                 <div class="bd-settings-x" @click="close">
                     <MiClose size="17"/>
                     <span class="bd-x-text">ESC</span>

client/src/ui/components/BdSettingsWrapper.vue

@@ -10,7 +10,7 @@
 
 <template>
     <div class="bd-settings-wrapper" :class="[{active: active}, 'platform-' + this.platform]">
-        <div class="bd-settings-button" :class="{active: active}" @click="showSettings">
+        <div class="bd-settings-button" :class="{'bd-hide': active}" @click="showSettings">
             <div class="bd-settings-button-btn" :class="[{'bd-loading': !loaded}]"></div>
         </div>
         <BdSettings :active="active" :close="hideSettings" />