add basic frame, basic login page

src/views/forms/login.vue

@@ -1,38 +1,75 @@
 <template>
-    <div class="LoginForm">
+<!--     <div class="LoginForm">
         <h2>Login</h2>
-        <my-form :elements="elements" :buttons="buttons" :submitHandler="login"></my-form>
+
+    </div> -->
+
+    <div id="login_form">
+        <div class="holder">
+            <div class="logo">
+                <img src="assets/images/cms_logo_white.png" alt="">
+            </div>
+
+            <div class="content">
+
+                <p class="intro_text">Bitte melde dich mit deinen Benutzerdaten an.</p>
+
+                <my-form :elements="elements" :buttons="buttons" :submitHandler="login"></my-form>
+
+<!--                 <form class="login_form" action="index.php" method="post">
+                    <div class="login_input login_user">
+                        <input required="required" placeholder="Benutzername" type="text" name="user" />
+                    </div>
+                    <div class="login_input login_pw">
+                        <input required="required" placeholder="Passwort"  type="password" name="passwort" />
+                    </div>
+
+                    <div class="login_input login_submit">
+                        <input type="submit" name="submit_login" value="Anmelden" class="submit" />
+                    </div>
+
+                </form> -->
+
+                <!-- <div class="login_error">
+                <p>Login fehlgeschlagen.</p>
+                </div> -->
+
+                <div style="clear:both;"></div>
+            </div>
+        </div>
     </div>
 </template>
 
 <script>
-import MyForm from '../../components/my-form.vue';
+import MyForm from "../../components/my-form.vue";
 
 export default {
-  name: 'LoginForm',
+  name: "LoginForm",
   components: {
       MyForm
   },
   data() {
       return {
-          username: '',
-          password: '',
+          username: "",
+          password: "",
           elements: {
               username: {
-                  label: 'Benutzername',
-                  type: 'text',
+                  placeholder: "Benutzername",
+                  icon: "icon-user",
+                  type: "text",
                   required: true
               },
               password: {
-                  label: 'Passwort',
-                  type: 'password',
+                  placeholder: "Passwort",
+                  icon: "icon-key",
+                  type: "password",
                   required: true
               }
           },
           buttons: [
               {
-                  label: 'login',
-                  type: 'submit'
+                  label: "login",
+                  type: "submit"
               }
           ]
       }
@@ -53,3 +90,126 @@ export default {
   }
 }
 </script>
+
+
+
+<style lang="less">
+@import "../../mixins";
+
+/*--------------------------------------------------------------
+# LOGINBOX
+--------------------------------------------------------------*/
+
+#login_form{
+    /* Disply on top */
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    z-index: 3000;
+    top:0px; left:0px; bottom:0px; right:0px;
+
+    /* Center vertically */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+
+    background: @cms_brand_primary;
+
+    &>.holder {
+        position: relative;
+        display: block;
+        max-width: 380px;
+        width: 90%;
+        height: auto;
+        margin: 0px;
+        border-radius: 2px;
+        padding: 20px;
+    }
+
+    .logo{
+        .clearfix();
+        line-height:0; margin-bottom:15px; text-align:center;
+        img {width:100%; max-width:72px;}
+    }
+
+    .content{
+        p {text-align:center; color: white; font-size:15px; line-height:1.2;}
+    }
+
+    .intro_text{
+        font-size:14px!important; margin-bottom:20px; line-height:1.5;
+    }
+
+    form{
+        text-align: center;
+    }
+
+    input{
+        height: 40px;
+        padding: 0px 15px;
+        border-color: transparent;
+
+        &:focus {
+            border: solid 1px @cms_dark_border;
+            background: white;
+        }
+    }
+}
+
+/*.login_input {
+  margin-bottom:10px;
+  border:none;
+  height:40px;
+  position:relative;
+}
+.login_input:before {
+
+}
+.login_form {
+  text-align:center;
+}
+.login_user:before {content:"\f007";}
+.login_pw:before {content:"\f084";}
+.login_submit {
+  width:auto;
+  margin:0 auto;
+  display:inline-block;
+  margin-top:10px;
+}
+.login_submit:before {content:"\f090"; left:15px; top:6px;}
+
+.login_input input {
+  border:none;
+  background:none;
+  height:40px;
+  width:100%;
+  padding: 0px 10px 0px 35px;
+  background:#f4f4f4;
+  border:solid 1px #FFF;
+}
+.loginbox_content .login_input input:focus {border:solid 1px #152129; background:#FFF;}
+.login_form input[type="submit"] {
+  height:40px;
+  background:#152129;
+  border:none;
+  color:#FFF;
+  cursor:pointer;
+  text-transform:uppercase;
+  width:auto;
+  margin:0px auto 0 auto;
+  padding: 0px 20px 0px 40px;
+  border-radius:20px;
+}
+.login_form input[type="submit"]:hover {
+  background:#1f3441;
+}
+.login_error {
+  display:block;
+  text-align:center;
+  color:#FFF;
+  line-height:1.2;
+  margin-top:20px;
+}*/
+/*.login_error p {text-transform:uppercase; display:inline-block; background:#c70e00; padding:5px; font-weight:600; font-size:14px;}*/
+</style>