refactored user blocks using ajax loaded drupal's html as template for vue

web/themes/custom/materiotheme/assets/styles/main.scss

@@ -52,7 +52,7 @@ header[role="banner"]{
     &>section{
       background-color: #fff;
       overflow: hidden;
-      width:14em;
+      width:11em;
       height:1px;
       padding:0.01em 1em;
       // margin:0 0 0 -1em;
@@ -63,6 +63,7 @@ header[role="banner"]{
       position: absolute;
       right:0;
       top:1.7em;
+      box-sizing: content-box;
     }
     &:hover{
       &>section{
@@ -72,6 +73,48 @@ header[role="banner"]{
         box-shadow: 0 0 10px #ccc;
       }
     }
+    .form-item{
+      margin:0;
+      position: relative;
+      width:100%;
+      &.form-item-name{
+        margin:2px 0 0.5em 0;
+        input{
+          width:90%;
+          padding:0;
+          box-sizing: content-box;
+        }
+      }
+      &.form-item-pass{
+        margin:0 0 0.5em 0;
+        input{
+          width:90%;
+          padding:0;
+          box-sizing: content-box;
+        }
+      }
+      &.form-item-persistent-login{
+        font-size: 0.756em;
+        label{
+          vertical-align: top;
+        }
+      }
+    }
+    #edit-actions{
+      margin:0;
+    }
+    .item-list{
+      ul{
+        margin:0;
+        li{
+          list-style: none;
+          margin:0;
+          a{
+            font-size: 0.756em;
+          }
+        }
+      }
+    }
   }
 
   #block-languageswitcher{