material.angularjs Login Form.

by Yashwanth M

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.2/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.2/angular-aria.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.4/angular-material.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.2/angular-messages.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.4/angular-material.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<body ng-app="myAppModule">
 <div ng-controller="loginCtrl as login" class="main-container" layout="" ng-cloak>
 <md-content class="form-container" > <!-- md-padding .layout, .layout-column, .layout-row -->
   <div id="signup">
      <div class="signup-screen">
         <div class="">
            <h1>Sign in to Application</h1>
           <div class="divider"></div>
         </div>
<form name="formName" role="form" data-ng-submit="formSubmit()">

        <md-input-container class="form-inputs ng-scope md-default-theme md-input-invalid">
          <label>Name</label>
          <input type="text"/>
        </md-input-container>
		<!-- <div class="form-group md-form">
			<label for="email">Email</label>
			<div class="error form-hint" 
			data-ng-show="formName.email.$dirty && formName.email.$error.required" 
			data-ng-cloak>{{"You can't leave this empty."}}
			</div>
			<div class="error form-hint" 
			data-ng-show="formName.email.$dirty && formName.email.$error.email" 
			data-ng-cloak>{{"The email address you provided isn't valid"}}</div>

			<input...

SCSS

body {
    min-height:100%;
    background-color: #263238;
}
/* Title */
h1 {
    color: #26a69a;
    font-family: 'Roboto';
    text-transform: uppercase;
    font-weight: 900;
    font-size: 25px;
    text-align: center;
}
.main-container {
    display: table;
    width: 400px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
.signup-screen {
	  padding: 20px;
    padding-bottom: 40px;
    border-radius: 0px; // 5px
    background-color: #2c3940;
    box-shadow: 0 1px 6px rgba(0,0,0,.3);
    color: white;
}
.form-container {
    position: relative;
    bottom: 0;
    display: table-cell;
    vertical-align: middle;
}
.form-inputs {
      width: 90%;
    margin-left: 5%;
    margin-right: 5%;
}
.form-inputs > label {
  padding-left: 3px;
  padding-right: 0;
  margin-bottom: 0px !important;
}
.form-inputs > input#input_0.md-input {
  padding-top: 0px !important;
}

JavaScript

// https://material.angularjs.org/latest/demo/autocomplete
// https://material.angularjs.org/HEAD/demo/input
// https://codepen.io/Yash777/pen/WEvyjg
// CTRL + SHIFT + ENTER to see view in new Tab.
'use strict';
var myApp = angular.module('myAppModule', ['ngMaterial']);

myApp.controller("loginCtrl", function ($scope) {

});

(function () {
  
})();