output first setup step

zero.Web/App/Components/Buttons/button.vue

@@ -0,0 +1,50 @@
+<template>
+  <button class="ui-button" :class="{ themeClass }">
+    <span v-html="label"></span>
+  </button>
+</template>
+
+
+<script>
+  export default {
+    name: 'uiButton',
+
+    props: {
+      label: {
+        type: String,
+        required: true
+      },
+      state: {
+        type: String,
+        default: 'default'
+      },
+      theme: {
+        type: String,
+        default: 'action'
+      },
+      disabled: Boolean
+    },
+
+    computed: {
+      themeClass() 
+      {
+        return 'theme-' + this.theme;
+      }
+    },
+
+    mounted ()
+    {
+      
+    },
+
+    methods: {
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import 'Sass/Core/settings';
+
+  
+</style>

zero.Web/App/Components/Forms/property.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="ui-property" :class="{'is-vertical': vertical }">
+    <label v-if="label" class="ui-property-label" for="">
+      <span v-html="label"></span>
+      <strong class="ui-property-required" v-if="required">*</strong>
+      <small v-if="description" v-html="description"></small>
+    </label>
+
+    <div class="ui-property-content">    
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+
+<script>
+  export default {
+    name: 'uiProperty',
+
+    props: {
+      label: String,
+      description: String,
+      required: Boolean,
+      vertical: Boolean
+    },
+
+    mounted ()
+    {
+      
+    },
+
+    methods: {
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import 'Sass/Core/settings';
+
+  .ui-property
+  {
+    position: relative;
+    display: flex;
+  }
+
+  .ui-property.is-vertical
+  {
+    flex-direction: column;
+
+    .ui-property-label
+    {
+      width: 100%;
+    }
+
+    .ui-property-content
+    {
+      margin-top: 5px;
+    }
+  }
+
+  .ui-property-label
+  {
+    display: block;
+    color: var(--color-text);
+    width: 240px;
+    padding-right: 2rem;
+    margin-bottom: 5px;
+    font-size: $font-size;
+    line-height: 1.5;
+    font-weight: 400;
+  }
+
+  .ui-property-label small
+  {
+    display: block;
+    padding-top: 5px;
+    font-size: $font-size-s;
+    font-weight: 400;
+    line-height: 1.5;
+    text-decoration: none;
+    color: var(--color-fg-mid);
+  }
+
+  .ui-property-required
+  {
+    color: var(--color-negative);
+  }
+
+  .ui-property-content
+  {
+    flex: 1;
+  }
+
+  .ui-property + .ui-property
+  {
+    padding-top: 25px;
+    margin-top: 25px;
+    border-top: 1px solid var(--color-line);
+  }
+</style>

zero.Web/Sass/Core/_all.scss

@@ -10,3 +10,5 @@
 @import "core";
 
 @import "icons";
+
+@import "forms";

zero.Web/Sass/Core/_core.scss

@@ -61,31 +61,23 @@ button
 
 h1
 {
-  @extend %font;
+  @extend %font-headline;
   font-size: calc(1.4rem + 0.1vmin);
-  font-weight: 600;
+  font-weight: 400;
   margin: -0.3rem 0 3rem;
 }
 
 h2
 {
-  @extend %font;
-  font-size: calc(1.3rem + 0.1vmin);
-  font-weight: 700;
-  margin: 0 0 2.5rem;
+  @extend %font-headline;
+  font-size: calc(1.4rem + 0.1vmin);
+  font-weight: 400;
+  margin: 0 0 2rem;
 }
 
-h2, h3
+h3
 {
-  @extend %font;
-}
-
-@media (max-width: 730px)
-{
-  h2
-  {
-    margin: 0 0 6px;
-  }
+  @extend %font-headline;
 }
 
 

zero.Web/Sass/Core/_forms.scss

@@ -0,0 +1,18 @@
+
+
+input, textarea
+{
+  @extend %font;
+  background: var(--color-bg);
+  border: 1px solid var(--color-line);
+  font-size: $font-size;
+  display: inline-block;
+  height: 36px;
+  padding: 6px 10px;
+  line-height: 1.5;
+  color: var(--color-fg);
+  border-radius: 0;
+  vertical-align: middle;
+  box-sizing: border-box;
+  width: 100%;
+}

zero.Web/Sass/Core/_mixins.scss

@@ -7,7 +7,8 @@
     font-family: $font-family;
     font-weight: $weight;
     font-style: $style;
-    src: url('#{$file-path}.ttf') format('truetype'), 
-         url('#{$file-path}.woff') format('woff');
+    src: url('#{$file-path}.woff2') format('woff2'),
+         url('#{$file-path}.woff') format('woff'),
+         url('#{$file-path}.ttf') format('truetype');
   }
 } 

zero.Web/Sass/Core/_settings.scss

@@ -1,12 +1,26 @@
 
 :root
 {
+  // accent colors
+  --color-primary: #222;
+  --color-negative: #d82853; 
+
   // foreground/text color
   --color-fg: #222;
-  --color-fg-mid: #919294;
+  --color-fg-mid: #6f7375;
+  --color-fg-light: #919294;
 
   // background color shades
   --color-bg: #fff;
   --color-bg-light: #f8f9fa;
   --color-bg-mid: #f4f5f6;
+
+  // line colors
+  --color-line: #eaebec;
 }
+
+
+// font sizes
+
+$font-size: 14px;
+$font-size-s: 12px;

zero.Web/Sass/Core/_typography.scss

@@ -5,13 +5,13 @@ $font-headline-name: 'TwCenMt';
 
 @include font-face($font-icon-name, '/Assets/Fonts/Feather/feather', 400);
 
-@include font-face($font-text-name, '/Assets/Fonts/Lato/Lato-Light', 100);
+@include font-face($font-text-name, '/Assets/Fonts/Lato/LatoLatin-Light', 100);
 
-@include font-face($font-text-name, '/Assets/Fonts/Lato/Lato-Thin', 300);
+@include font-face($font-text-name, '/Assets/Fonts/Lato/LatoLatin-Regular', 400);
 
-@include font-face($font-text-name, '/Assets/Fonts/Lato/Lato-Regular', 400);
+@include font-face($font-text-name, '/Assets/Fonts/Lato/LatoLatin-Bold', 700);
 
-@include font-face($font-text-name, '/Assets/Fonts/Lato/Lato-Bold', 700);
+@include font-face($font-text-name, '/Assets/Fonts/Lato/LatoLatin-Black', 700);
 
 @include font-face($font-headline-name, '/Assets/Fonts/TwCenMt/twcenmt-regular', 400);
 
@@ -19,12 +19,13 @@ $font-headline-name: 'TwCenMt';
 
 %font
 {
-	font-family: $font-text-name, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  font-family: $font-text-name, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
 
 %font-headline
 {
-  font-family: $font-headline-name, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  font-family: $font-text-name, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  //font-family: $font-headline-name, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
 
 %font-icon

zero.Web/Sass/Modules/Buttons/_button.scss

@@ -1,5 +1,56 @@
 
 
+button
+{
+  @extend %font;
+
+  &:focus
+  {
+    outline: 1px dotted var(--color-line);
+  }
+}
+
+.ui-button
+{
+  display: inline-block;
+  color: white;
+  background: var(--color-primary);
+  padding: 0 30px;
+  height: 40px;
+  line-height: 40px;
+  border-radius: 3px;
+  font-size: 14px;
+  font-weight: 600;
+  margin: 0;
+  -webkit-backface-visibility: hidden;
+  -webkit-appearance: none;
+  outline: none;
+  cursor: pointer;
+  user-select: none;
+  border: none;
+  margin-top: 2rem;
+  will-change: transform, background, border-color;
+  transition: background .2s, transform .2s, opacity .2s;
+  overflow: hidden;
+  @extend %font;
+
+  &:hover
+  {
+    opacity: 0.9;
+  }
+
+  &:active
+  {
+    opacity: 1;
+  }
+
+  &.is-disabled, &[disabled]
+  {
+    pointer-events: none;
+    //background: var(--color-dark);
+  }
+}
+
 
 /*button
 {

zero.Web/Sass/Modules/_all.scss

@@ -1,2 +1,2 @@
 
-@import "Buttons/_button";
+@import "Buttons/button";

zero.Web/Sass/Setup/_all.scss

@@ -1,2 +1,4 @@
 
 @import "canvas";
+
+@import "steps";

zero.Web/Sass/Setup/_buttons.scss

@@ -1 +0,0 @@
-

zero.Web/Sass/Setup/_canvas.scss

@@ -13,6 +13,7 @@ body, html
 html
 {
   height: 100%;
+  -webkit-text-size-adjust: 100%;
 }
 
 body
@@ -44,6 +45,7 @@ body
   min-height: 600px;
   position: relative;
   z-index: 2;
+  padding: 2rem;
 }
 
 body:before

zero.Web/Sass/Setup/_steps.scss

@@ -0,0 +1,39 @@
+
+
+.setup
+{
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+.setup-step
+{
+
+}
+
+.setup-step h2
+{
+  text-align: center;
+}
+
+.setup-step p
+{
+  color: var(--color-fg-mid);
+  font-size: 0.9rem;
+  line-height: 1.6;
+  margin: 0 0 2rem;
+}
+
+.setup-step p b
+{
+  color: var(--color-fg);
+  font-weight: 600;
+}
+
+.setup-step .ui-property + .ui-property
+{
+  padding-top: 0;
+  border-top: none;
+}

zero.Web/Setup/Steps/step-user.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="setup-step setup-step-user">
+    <h2>welcome to zero</h2>
+    <p>First we need some basic credentials from you to create a login. This login is the solely <b>superadmin</b> which is required to change critical application data.</p>
+    
+    <ui-property label="Name" :vertical="true">
+      <input type="text" class="ui-input" placeholder="What's your name?" />
+    </ui-property>
+
+    <ui-property label="Email" :vertical="true">
+      <input type="text" class="ui-input" placeholder="Your email will be used as your login" />
+    </ui-property>
+
+    <ui-property label="Password" :vertical="true">
+      <input type="password" class="ui-input" autocomplete="off" placeholder="As long as you want, but at last 8 characters" />
+    </ui-property>
+  </div>
+</template>
+
+
+<script>
+  import UiProperty from 'zerocomponents/forms/property.vue'
+  import UiButton from 'zerocomponents/buttons/button.vue'
+
+  export default {
+    name: 'setupStepUser',
+
+    props: {
+      value: Object 
+    },
+
+    components: { UiProperty, UiButton },
+
+    mounted ()
+    {
+      
+    },
+
+    methods: {
+
+    }
+  }
+
+</script>

zero.Web/Setup/setup.vue

@@ -1,18 +1,35 @@
 <template>
-  <div class="app">
+  <div class="app setup">
+    <step-user v-model="model.User" />
+    <ui-button label="Next" />
   </div>
 </template>
 
 
 <script>
   import Vue from 'vue'
+  import StepUser from './Steps/step-user.vue'
   import Sass from '../Sass/setup.scss'
+  import UiButton from 'zerocomponents/buttons/button.vue'
 
   export default {
     name: 'setup',
 
+    components: { StepUser, UiButton },
+
     data: () => ({
-      count: 0
+      model: {
+        AppName: null,
+        User: {
+          Name: null,
+          Email: null,
+          Password: null
+        },
+        Database: {
+          Url: 'http://localhost:9800',
+          Name: null
+        }
+      }
     }),
 
     mounted ()
@@ -22,10 +39,6 @@
 
     methods: {
 
-      add()
-      {
-        this.count += 1;
-      }
     }
   }
 

zero.Web/webpack.config.js

@@ -28,6 +28,7 @@ module.exports = {
       'vue$': 'vue/dist/vue.esm.js',
       'zero': path.join(__dirname, 'App'),
       'zerosetup': path.join(__dirname, 'Setup'),
+      'zerocomponents': path.join(__dirname, 'App', 'Components'),
       '@': __dirname
     }
   },
@@ -52,7 +53,7 @@ module.exports = {
       },
       {
         test: /\.scss$/,
-        use: ["style-loader", "css-loader", "sass-loader"]
+        use: ["vue-style-loader", "css-loader", "sass-loader"]
       }
     ]
   }