init

.eslintrc.json

@@ -0,0 +1,24 @@
+{
+  "root": true,
+  "env": {
+    "browser": true,
+    "node": true
+  },
+  "parserOptions": {
+    "parser": "babel-eslint"
+  },
+  "extends": [
+    "@nuxtjs",
+    "plugin:nuxt/recommended",
+    "plugin:prettier/recommended",
+    "prettier",
+    "prettier/vue"
+  ],
+  "plugins": [
+    "prettier"
+  ],
+  "rules": {
+		"nuxt/no-cjs-in-config": "off",
+    "no-console": "off"
+  }
+}

.gitignore

@@ -0,0 +1,14 @@
+# dependencies
+node_modules
+
+# logs
+npm-debug.log
+
+# Nuxt build
+.nuxt
+
+# Nuxt generate
+dist
+
+# yarn
+yarn.lock

README.md

@@ -0,0 +1,47 @@
+# [WIP] nuxt-vuetify-admin
+
+## Introduction
+
+Nuxt Material Admin is based off [vue-material-design](https://github.com/tookit/vue-material-admin) with upgraded vuetify version. For now, this version is in complete dark mode.
+
+## Broken features
+
+* the first 3 jumbotron
+* Timeline
+* Login page - not same layout
+
+## missing features
+
+* font awesome icons
+* applying custom styl 
+* chat pages
+* email pages
+* notifications
+* profile dropdown
+* theme settings
+* echarts
+* quil editor
+* BasicForms page
+* homepage
+
+## issues
+
+* some places "v-html" needs to be used for setting style on text
+* some scope features will be removed in vue 3
+
+## Build Setup
+
+``` bash
+# install dependencies
+$ npm install # Or yarn install
+
+# serve with hot reload at localhost:3000
+$ npm run dev
+
+# build for production and launch server
+$ npm run build
+$ npm start
+
+# generate static project
+$ npm run generate
+```

assets/README.md

@@ -0,0 +1,8 @@
+# ASSETS
+
+This directory contains your un-compiled assets such as LESS, SASS, or JavaScript.
+
+More information about the usage of this directory in the documentation:
+https://nuxtjs.org/guide/assets#webpacked
+
+**This directory is not required, you can delete it if you don't want to use it.**

assets/style/app.styl

@@ -0,0 +1,268 @@
+/*------------------------------------------------------------------
+[Table of contents] 
+/*  
+# overwrite some style of stylus
+
+/*------------------------------------------------------------------
+[FontAwesome]
+*/
+
+/*------------------------------------------------------------------
+[Global]
+*/
+@import '~vuetify/src/stylus/main.styl'
+
+
+body
+  font-family: $body-font-family
+  font-size: $font-size-root
+  font-weight: $font-weights.regular
+  line-height: $line-height-root
+h1
+  font-size: 48px
+  font-weight: $font-weights.thin
+  letter-spacing: -1.5
+
+h2
+  font-size: 36px
+  font-weight: $font-weights.light
+  letter-spacing: -0.5
+
+h3 
+  font-size: 24px
+  font-weight: $font-weights.light
+  letter-spacing: normal
+
+h4 
+  font-size: 20px
+  font-weight: $font-weights.light
+  letter-spacing: normal  
+h5 
+  font-size: 16px
+  font-weight: $font-weights.regular
+  letter-spacing: normal  
+
+
+/*------------------------------------------------------------------
+[Components List]
+*/
+.v-list
+  .v-list__tile--link:hover,
+  .v-list__tile--highlighted,
+  .v-list__group__header:hover
+  .v-list__group--active:before,
+  .v-list__group--active:after
+    // background: #f5f5f5!important
+
+/*------------------------------------------------------------------
+[Components / Card]
+*/  
+.v-card
+  // box-shadow: 0 1px 3px 1px rgba(0,0,0,0.03)
+  box-shadow: 0 1px 1px 0 rgba(60,64,67,.08), 0 1px 3px 1px rgba(60,64,67,.16);
+  &__actions 
+    .v-btn 
+      margin: 0 8px;
+      min-width: 56px
+      &:first-child
+        margin-left: 0
+
+/*------------------------------------------------------------------
+[Components / Timeline]
+*/    
+
+.timeline
+  position: relative;
+  list-style: none;
+  padding-left: 0;
+  z-index: 1
+
+  &-block
+    display: -webkit-box;
+    display: flex
+
+  &-detail 
+    -webkit-box-flex: 1;
+    flex: 1 1 0%;
+    padding-bottom: 30px
+    @media $display-breakpoints.sm-and-down
+      display: none;
+
+  &-point 
+    position: relative;
+    flex-shrink: 0;
+    -webkit-box-flex: 0;
+    flex-grow: 0;
+    -webkit-box-ordinal-group: 3;
+    order: 2;
+    width: 96px;
+    padding-bottom: 30px;
+    text-align: center
+
+  &-point::before
+    content: '';
+    position: absolute;
+    top: 9px;
+    left: 50%;
+    bottom: -9px;
+    width: 1px;
+    margin-left: -1px;
+    z-index: -1;
+    // background-color: #ebebeb;
+   & &-block:last-child &-point::before
+    bottom: 0 !important;
+
+  & &-block:first-child &-point::after
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 50%;
+    display: inline-block;
+    width: 4px;
+    height: 4px;
+    margin-left: -2px;
+    border-radius: 50%
+
+  & &-block:last-child &-point::after
+    content: '';
+    position: absolute;
+    left: 50%;
+    bottom: 0;
+    display: inline-block;
+    width: 6px;
+    height: 6px;
+    margin-left: -3px;
+    border-radius: 50%
+
+  &-content 
+    -webkit-box-flex: 1;
+    flex: 1 1 0%;
+    margin-bottom: 60px
+
+  &-period
+    position: relative;
+    padding: 30px 0;
+    text-align: center;
+    font-size: 20px;
+    font-weight: 300;
+
+  &-period::after
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 50%;
+    display: inline-block;
+    width: 6px;
+    height: 6px;
+    margin-left: -3px;
+    // background-color: #ebebeb;
+    border-radius: 50%
+
+  & &-period:first-child::after
+    display: none;
+
+  &-point-xs &-point
+    width: 32px
+  &-point-sm &-point
+    width: 64px      
+  &-point-lg &-point
+    width: 128px      
+  &-point-xl &-point
+    width: 256px
+
+  @media $display-breakpoints.md-and-down
+    & &-block &-detail 
+      -webkit-box-ordinal-group:2;
+      order: 1;
+    & &-block &-content 
+      -webkit-box-ordinal-group: 4;
+      order: 3
+
+  @media $display-breakpoints.md-and-up
+      & &-block:nth-child(even) &-detail 
+        -webkit-box-ordinal-group:2;
+        order: 1;
+        text-align: right
+
+      & &-block:nth-child(even) &-content 
+        -webkit-box-ordinal-group: 4;
+        order: 3
+
+      & &-block:nth-child(odd) &-detail 
+        -webkit-box-ordinal-group: 4;
+        order: 3;
+        text-align: left  
+
+      & &-block:nth-child(odd) &-content 
+        -webkit-box-ordinal-group: 2;
+        order: 1
+    &&-content-left &-block &-detail
+    -webkit-box-ordinal-group: 4;
+    order: 3;
+    text-align: left
+
+  &&-content-left &-block &-content
+    -webkit-box-ordinal-group: 2;
+    order: 1;
+
+  &&-content-right &-block &-detail
+    -webkit-box-ordinal-group: 2;
+    order: 1;
+
+  &&-content-right &-block &-content
+    -webkit-box-ordinal-group: 4;
+    order: 3 ;
+  &&-activity &-content
+    margin-bottom: 10px
+/*------------------------------------------------------------------
+[Components / Chat]
+*/
+.chat
+  &-history
+    &--toolbar
+      box-shadow: 0 1px 3px 1px rgba(0,0,0,0.03)
+    &--list
+      a.list__tile--active
+        background: #eee        
+    &--scrollbar
+      height:calc(100vh - 48px)             
+      @media $display-breakpoints.sm-and-down
+        height:calc(100vh - 48px - 56px)  
+  &-room
+    &--toolbar
+      box-shadow: 0 1px 3px 1px rgba(0,0,0,0.03)
+    &--scrollbar
+      height: calc(100vh - 48px - 80px)         
+/*------------------------------------------------------------------
+[Components / mail]
+*/
+.mail
+  &-toolbar
+    border-bottom: 1px solid rgba(0,0,0,0.12)
+  &-list
+    &--layout
+      padding-top: 64px!important
+      @media $display-breakpoints.sm-and-down
+        padding-top: 56px!important         
+    &--toolbar
+      margin-top: 64px!important
+      @media $display-breakpoints.sm-and-down
+        margin-top: 56px!important      
+      .check-all
+        flex: 0 0
+        margin-top: 0
+    &--wrap
+      height: calc(100vh - 64px - 64px)
+  &-reply
+    &--layout
+      padding-top: 64px!important
+      @media $display-breakpoints.sm-and-down
+        padding-top: 56px!important        
+    &--toolbar
+      margin-top: 64px !important
+      @media $display-breakpoints.sm-and-down
+        margin-top: 56px!important        
+    &--scrollbar
+      height: calc(100vh - 64px - 64px)
+      @media $display-breakpoints.sm-and-down
+        height : calc(100vh - 56px - 56px)