Login css : ps

This commit is contained in:
venbatechnologies@gmail.com 2018-11-03 15:32:01 +05:30
parent 5d6682e40a
commit e4d7420a09
2 changed files with 35 additions and 30 deletions

View File

@ -2,7 +2,7 @@
<div class="form-bg"> <div class="form-bg">
<div fxLayout="row" fxLayoutAlign="center" class="pt-2"> <div fxLayout="row" fxLayoutAlign="center" class="pt-2">
<!-- <p>SINEEDGE Login Details</p> --> <!-- <p>SINEEDGE Login Details</p> -->
<h3><img [src]="'http://ssa.sineedge.com/sparqapi/logo/sineedge_red.png'" style="height: 50px;;"> <span> SINEEDGE </span> <h3 class="page-title"><img [src]="'http://ssa.sineedge.com/sparqapi/logo/sineedge_red.png'" style="height: 50px;;"> <span> SINEEDGE </span>
</h3> </h3>
</div> </div>
<div fxLayout="row" fxLayoutAlign="center start" class="pt-2"> <div fxLayout="row" fxLayoutAlign="center start" class="pt-2">
@ -11,7 +11,6 @@
<div> <div>
<h2 class="base-border">Login</h2> <h2 class="base-border">Login</h2>
<!-- <p>Enter Your Login Details</p> --> <!-- <p>Enter Your Login Details</p> -->
<br>
<form #form="ngForm" (ngSubmit)="login()"> <form #form="ngForm" (ngSubmit)="login()">
<div fxLayout="column" fxLayoutAlign="start stretch"> <div fxLayout="column" fxLayoutAlign="start stretch">
<mat-form-field style="width: 100%"> <mat-form-field style="width: 100%">
@ -22,11 +21,12 @@
<input matInput placeholder="Password" minlength= "8" type="password" name="password" required [(ngModel)]="password"> <input matInput placeholder="Password" minlength= "8" type="password" name="password" required [(ngModel)]="password">
</mat-form-field> </mat-form-field>
<button class="mat-green" mat-raised-button>SIGN IN</button><br/> <button class="mat-green" mat-raised-button>SIGN IN</button><br/>
<div *ngIf="email"> <div>
<a class="mat-text-warn mb-0" (click)="forgotpassword();">Forgot password?</a></div> <a *ngIf="email" class="mat-text-warn mb-0" (click)="forgotpassword();">Forgot password?</a></div>
<!-- <p class="mb-0">Don't have an account? <a [routerLink]="['/register']" class="mat-text-primary">Register Here</a></p> --> <!-- <p class="mb-0">Don't have an account? <a [routerLink]="['/register']" class="mat-text-primary">Register Here</a></p> -->
</div> </div>
</form> </form>
</div> </div>
</mat-card> </mat-card>
@ -41,7 +41,7 @@
<footer class="page-footer"> <footer class="page-footer">
<!-- © Copyright --> <!-- © Copyright -->
<div class="footer-copyright text-center py-1">&#169; 2018 <div class="footer-copyright text-center">&#169; 2018
<a href="http://www.sineedge.com" target="_blank"> SineEdge Consulting Pvt Ltd. </a> All rights are reserved <a href="http://www.sineedge.com" target="_blank"> SineEdge Consulting Pvt Ltd. </a> All rights are reserved
</div> </div>
<!-- © Copyright --> <!-- © Copyright -->

View File

@ -1,35 +1,40 @@
.form-bg { .form-bg {
// background-image:url('http://www.ssa.sineedge.com/beta/assets/images/login.jpg') !important; //background-image:url('http://www.ssa.sineedge.com/beta/assets/images/login.jpg') !important;
//background-image: url(../../../assets/images/login_o.jpg); //background-image: url(../../../assets/images/login_o.jpg);
//background-color: #F44336; //background-color: #F44336;
background: url(../../../assets/images/bg.png) repeat-x 0 0 #E00201; background: url(../../../assets/images/bg.png) repeat-x 0 0 #ffffff;
height: 100vh !important; //height: 100vh !important;
background-position: center !important; background-position: center !important;
min-height: calc(0vh + 0px) !important; min-height: calc(90vh + 90px) !important;
} }
.signin-page{ .signin-page{
float: left; float: left;
width: 100%; width: 100%;
padding-bottom: 40px; padding-bottom: 40px;
} }
// .form-bg { // .form-bg {
// float: left; // float: left;
// width: 100%; // width: 100%;
// background-color: repeat-x 0 0 #F44336; // background-color: repeat-x 0 0 #F44336;
// padding-bottom: 40px; // padding-bottom: 40px;
// } // }
.form-bg::before { .form-bg::before {
background-color: rgba(0, 0, 0, 0) !important; background-color: rgba(0, 0, 0, 0) !important;
} }
.form-bg::after{ .form-bg::after{
background-color: #E00201; background-color: #E00201;
} }
h3, .page-footer{ .page-title{
color:#E00201; color:#E00201;
background-color:#ffffff; background-color:#ffffff;
font-weight: bold; font-weight: bold;
} }
.page-footer{
color:#E00201;
background-color:#ffffff;
font-size: 14px;
}
.bottom-sec,.mat-green{ .bottom-sec,.mat-green{
color:white !important; color:white !important;
font-weight: 700; font-weight: 700;