implement light+dark theme

zero.Web/App/Components/Overlays/dropdown.vue

@@ -3,7 +3,7 @@
     <div class="ui-dropdown-toggle" @click.stop="toggle">
       <slot name="button"></slot>
     </div>
-    <div class="ui-dropdown" role="dialog" v-if="open" v-click-outside="hide" :class="'align-' + align">
+    <div class="ui-dropdown theme-dark" role="dialog" v-if="open" v-click-outside="hide" :class="'align-' + align">
       <slot></slot>
     </div>
   </div>
@@ -81,7 +81,7 @@
     background: var(--color-bg-mid);
     border-radius: var(--radius);
     border: 1px solid var(--color-line);
-    box-shadow: 0 0 20px var(--color-shadow);
+    /*box-shadow: 0 0 20px var(--color-shadow);*/
     z-index: 8;
     top: calc(100% + 5px);
 

zero.Web/App/Pages/login.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="app-auth">
+    auth/login
+  </div>
+</template>
+
+
+<script>
+  export default {
+    name: 'app-auth',
+
+    data: () => ({
+      
+    }),
+
+
+    methods: {
+
+    }
+  }
+</script>
+
+
+<style lang="scss">
+  .app-auth
+  {
+    grid-column: span 2 / auto;
+    align-self: center;
+    justify-self: center;
+
+    display: grid;
+    grid-template-rows: 1fr auto;
+    align-items: stretch;
+    max-width: 100%;
+    width: 520px;
+    background: var(--color-bg-mid);
+    border-radius: 3px;
+    min-height: 600px;
+    position: relative;
+    z-index: 2;
+    padding: 40px;
+  }
+</style>

zero.Web/App/Pages/page.vue

@@ -114,7 +114,7 @@
   {
     display: grid;
     grid-template-columns: auto 1fr;
-    grid-gap: 1px;
+    grid-gap: 2px;
     justify-content: stretch;
     height: 100vh;
   }

zero.Web/App/Services/auth.js

@@ -1,11 +1,10 @@
 import Vue from 'vue';
-import Strings from 'zeroservices/strings';
 import { find as _find, extend as _extend } from 'underscore';
 
 export default new Vue({
 
   data: () => ({
-    isAuthenticated: false,
+    isAuthenticated: true,
     user: null
   }),
 

zero.Web/App/app.vue

@@ -1,10 +1,13 @@
 <template>
   <div class="app">
-    <app-overlays />
-    <app-navigation />
-    <div class="app-main">
-      <router-view></router-view>
-    </div>
+    <template v-if="isAuthenticated">
+      <app-overlays />
+      <app-navigation />
+      <div class="app-main">
+        <router-view></router-view>
+      </div>
+    </template>
+    <app-auth v-else />
   </div>
 </template>
 
@@ -12,8 +15,10 @@
 <script>
   import '../Sass/app.scss'
   import AppNavigation from 'zero/navigation.vue'
+  import AppAuth from 'zeropages/login.vue'
   import AppOverlays from 'zerocomponents/Overlays/overlay-holder.vue'
   import Router from '../router.js'
+  import Auth from 'zeroservices/auth.js';
   import 'zero/axios.config.js'
 
   export default {
@@ -21,7 +26,23 @@
 
     router: Router,
 
-    components: { AppNavigation, AppOverlays }
+    components: { AppNavigation, AppOverlays, AppAuth },
+
+    data: () => ({
+      isLoading: false,
+      isAuthenticated: Auth.isAuthenticated
+    }),
+
+    mounted ()
+    {
+      //AuthApi.getUser(res =>
+      //{
+      //  Store.state.isAuthenticated = res.isAuthenticated;
+      //  Store.state.user = res.user;
+      //  Store.state.userMap = res.userMap;
+      //  this.isLoading = false;
+      //});
+    }
   }
 
 </script>

zero.Web/App/navigation.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="app-nav">
+  <div class="app-nav theme-dark">
 
     <h1 class="app-nav-headline" v-localize="'@zero.name'">zero</h1>
 

zero.Web/Sass/Core/_forms.scss

@@ -8,8 +8,8 @@
 input, textarea
 {
   @extend %font;
-  background: var(--color-bg-mid);
-  border: 1px solid transparent;
+  background: var(--color-bg-light);
+  border: 1px solid var(--color-line);
   font-size: $font-size;
   display: inline-block;
   height: 40px;

zero.Web/Sass/Core/_settings.scss

@@ -1,5 +1,45 @@
 
 :root
+{
+  // accent colors
+  --color-primary: #292b2c;
+  --color-primary-fg: #fff;
+  --color-secondary: #292b2c;
+  --color-negative: #d82853; 
+
+  // foreground/text color
+  --color-fg: #222;
+  --color-fg-mid: #6f7375;
+  --color-fg-light: #919294;
+
+  // background color shades
+  --color-bg: #f8f9fa;
+  --color-bg-mid: #f4f5f6;
+  --color-bg-light: #fff;
+
+  // line colors
+  --color-line: #eaebec;
+  --color-line-mid: #eaebec;
+
+  // misc colors
+  --color-shadow: rgba(0,0,0,0.05);
+  --color-highlight: rgba(0,0,0,0.05);
+  --color-overlay-shade: rgba(0,0,0,0.1);
+
+  // sizes
+
+  --padding: 32px;
+  --padding-s: 24px;
+  --height-top: 74px;
+  --radius: 5px;
+
+  --font-size: 14px;
+  --font-size-s: 12px;
+  --font-size-l: 16px;
+  --font-size-xl: 18px;
+}
+
+.theme-dark
 {
   // accent colors
   --color-primary: #f7f8f9;
@@ -12,9 +52,6 @@
   --color-fg-mid: #c1c5c9;
   --color-fg-light: #919294;
 
-  --color-fg-reverse: #fff;
-  --color-fg-reverse-mid: #c1c5c9;
-
   /*--color-fg: #222;
   --color-fg-mid: #6f7375;
   --color-fg-light: #919294;*/
@@ -36,19 +73,6 @@
   --color-shadow: rgba(0,0,0,0.3);
   --color-highlight: rgba(255,255,255, 0.05);
   --color-overlay-shade: rgba(0,0,0,0.3);
-
-
-  // sizes
-
-  --padding: 32px;
-  --padding-s: 24px;
-  --height-top: 74px;
-  --radius: 5px;
-
-  --font-size: 14px;
-  --font-size-s: 12px;
-  --font-size-l: 16px;
-  --font-size-xl: 18px;
 }
 
 

zero.Web/Views/Index.cshtml

@@ -24,7 +24,7 @@
   </environment>
   <title>zero</title>
 </head>
-<body>
+<body class="theme-light">
   <div id="app"></div>
   <script>
     window.zero = window.zero || {};