feat: auth jwt, permissions, login ui (wip)

client/scss/app.scss

@@ -4,6 +4,7 @@
 @import "base/icons";
 
 @import "../libs/animate/animate";
+@import '~vue2-animate/src/sass/vue2-animate';
 
 @import 'components/markdown-content';
 @import 'components/v-btn';
@@ -11,6 +12,8 @@
 @import 'components/v-dialog';
 @import 'components/vue-tree-navigation';
 
+@import 'layout/md2';
+
 // @import '../libs/twemoji/twemoji-awesome';
 @import '../libs/prism/prism.css';
 @import '~vue-tour/dist/vue-tour.css';

client/scss/base/base.scss

@@ -18,3 +18,10 @@ html {
     height: 100vh;
   }
 }
+
+
+@for $i from 1 through 25 {
+  .radius-#{$i} {
+    border-radius: #{$i}px;
+  }
+}

client/scss/base/material.scss

@@ -335,3 +335,30 @@ $material-colors: (
 @function mc($color-name, $color-variant: '500') {
 	@return material-color($color-name, $color-variant);
 }
+
+/**
+ * Material Elevation
+ */
+@mixin md-elevation-0 {
+  box-shadow: none !important;
+}
+
+@mixin md-elevation-1 {
+  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2) !important;
+}
+
+@mixin md-elevation-2 {
+  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3) !important;
+}
+
+@mixin md-elevation-3 {
+  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.3) !important;
+}
+
+@mixin md-elevation-4 {
+  box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.3) !important;
+}
+
+@mixin md-elevation-5 {
+  box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3) !important;
+}

client/scss/layout/_md2.scss

@@ -0,0 +1,7 @@
+.md2 {
+
+  &.v-text-field .v-input__slot {
+    border-radius: 28px;
+  }
+
+}