css component signin
This commit is contained in:
parent
a545bf5a25
commit
5df6f6f46e
@ -3,36 +3,36 @@
|
||||
<main class="form-signin">
|
||||
<form (ngSubmit)="onSubmit(signinForm)" #signinForm="ngForm">
|
||||
<div class="form-floating">
|
||||
<input type="email"
|
||||
class="form-control"
|
||||
id="floatingInput"
|
||||
placeholder=""
|
||||
name="email"
|
||||
<input type="email"
|
||||
class="form-control"
|
||||
id="floatingInput"
|
||||
placeholder=""
|
||||
name="email"
|
||||
ngModel
|
||||
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'] == ''}">
|
||||
<label for="floatingInput">Adresse email</label>
|
||||
</div>
|
||||
<div class="form-floating">
|
||||
<input type="password"
|
||||
class="form-control"
|
||||
id="floatingPassword"
|
||||
placeholder=""
|
||||
<input type="password"
|
||||
class="form-control"
|
||||
id="floatingPassword"
|
||||
placeholder=""
|
||||
name="password"
|
||||
ngModel
|
||||
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'] == ''}">
|
||||
<label for="floatingPassword">Mot de passe</label>
|
||||
</div>
|
||||
|
||||
<button class="w-100 btn btn-lg btn-success"
|
||||
<button class="w-100 btn btn-lg btn-outline-success"
|
||||
type="submit"
|
||||
[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"
|
||||
>S'inscrire</button>
|
||||
|
||||
|
@ -7,25 +7,34 @@
|
||||
.form-signin {
|
||||
width: 100%;
|
||||
max-width: 330px;
|
||||
padding: 15px;
|
||||
margin: auto;
|
||||
.checkbox {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.form-floating:focus-within {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
input[type="email"] {
|
||||
margin-bottom: -1px;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
input[type="password"] {
|
||||
margin-bottom: 10px;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
margin-top: 50px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
border: solid 1px;
|
||||
border-radius: 10px;
|
||||
background-color: #fcddec;
|
||||
border-color: #ef5da8;
|
||||
}
|
||||
|
||||
.form-floating:focus-within {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
input[type="email"] {
|
||||
margin-bottom: -1px;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-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;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user