isa44.74/organizee-front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

css component signin

Browse Source
This commit is contained in:
Blandine Bajard 2022-01-25 17:18:51 +01:00
parent a545bf5a25
commit 5df6f6f46e
2 changed files with 43 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/app/components/signin/signin.component.html
View File

@ -3,36 +3,36 @@
<main class="form-signin"> <main class="form-signin">
<form (ngSubmit)="onSubmit(signinForm)" #signinForm="ngForm"> <form (ngSubmit)="onSubmit(signinForm)" #signinForm="ngForm">
<div class="form-floating"> <div class="form-floating">
<input type="email" <input type="email"
class="form-control" class="form-control"
id="floatingInput" id="floatingInput"
placeholder="" placeholder=""
name="email" name="email"
ngModel ngModel
required required
[ngClass]="{'is-valid': signinForm.form.touched && signinForm.form.value['email'] != '' , [ngClass]="{'is-valid': signinForm.form.touched && signinForm.form.value['email'] != '' ,
'is-invalid': signinForm.form.touched && signinForm.form.value['email'] == ''}"> 'is-invalid': signinForm.form.touched && signinForm.form.value['email'] == ''}">
<label for="floatingInput">Adresse email</label> <label for="floatingInput">Adresse email</label>
</div> </div>
<div class="form-floating"> <div class="form-floating">
<input type="password" <input type="password"
class="form-control" class="form-control"
id="floatingPassword" id="floatingPassword"
placeholder="" placeholder=""
name="password" name="password"
ngModel ngModel
required required
[ngClass]="{'is-valid': signinForm.form.touched && signinForm.form.value['password'] != '' , [ngClass]="{'is-valid': signinForm.form.touched && signinForm.form.value['password'] != '' ,
'is-invalid': signinForm.form.touched && signinForm.form.value['password'] == ''}"> 'is-invalid': signinForm.form.touched && signinForm.form.value['password'] == ''}">
<label for="floatingPassword">Mot de passe</label> <label for="floatingPassword">Mot de passe</label>
</div> </div>
<button class="w-100 btn btn-lg btn-success" <button class="w-100 btn btn-lg btn-outline-success"
type="submit" type="submit"
[disabled]="signinForm.invalid">Se connecter</button> [disabled]="signinForm.invalid">Se connecter</button>
<button class="w-100 btn btn-lg btn-success" <button class="w-100 btn btn-lg btn-outline-success"
routerLink="../creation-compte" routerLinkActive="active-custom" routerLink="../creation-compte" routerLinkActive="active-custom"
>S'inscrire</button> >S'inscrire</button>

51
src/app/components/signin/signin.component.scss
View File

@ -7,25 +7,34 @@
.form-signin { .form-signin {
width: 100%; width: 100%;
max-width: 330px; max-width: 330px;
padding: 15px; margin-top: 50px;
margin: auto; margin-left: auto;
.checkbox { margin-right: auto;
font-weight: 400; border: solid 1px;
} border-radius: 10px;
background-color: #fcddec;
.form-floating:focus-within { border-color: #ef5da8;
z-index: 2; }
}
.form-floating:focus-within {
input[type="email"] { z-index: 2;
margin-bottom: -1px; }
border-bottom-right-radius: 0;
border-bottom-left-radius: 0; input[type="email"] {
} margin-bottom: -1px;
border-bottom-right-radius: 0;
input[type="password"] { border-bottom-left-radius: 0;
margin-bottom: 10px; }
border-top-left-radius: 0;
border-top-right-radius: 0; input[type="password"] {
} margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.btn-outline-success {
margin-top: 10px;
margin-bottom: 5px;
background-color: #ffff;
color: #ef5da8 !important;
border-color: #ef5da8 !important;
} }