florian/codiki-hexagonal
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Factorization of input styling.

Browse Source
This commit is contained in:
Florian THIERRY
2024-10-21 14:05:56 +02:00
committed by Florian THIERRY
parent 7c5cc38cff
commit cfca22bf66
7 changed files with 66 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/app/pages/login/login.component.html
View File

@@ -1,6 +1,6 @@
<form [formGroup]="loginForm" (submit)="performLogin()" ngNativeValidate>
<h1 i18n>Login</h1>
<div>
<div class="form-field">
<mat-icon>mail</mat-icon>
<label for="email" i18n>
Email address
@@ -8,7 +8,7 @@
</label>
<input type="email" id="email" formControlName="email" autocomplete="email" required />
</div>
<div>
<div class="form-field">
<mat-icon>lock</mat-icon>
<label for="password" i18n>
Password
@@ -16,7 +16,7 @@
</label>
<input type="password" id="password" formControlName="password" required />
</div>
<div class="actions">
<div class="actions reversed">
<button type="submit" i18n>Send</button>
<a [routerLink]="['/signin']" class="button secondary" i18n>Create an account</a>
</div>

48
frontend/src/app/pages/login/login.component.scss
View File

@@ -16,53 +16,5 @@
border-radius: .5em;
padding: 1em 1.5em;
background-color: #ffffff;
h1 {
margin: 0;
}
div {
display: flex;
flex-direction: column;
position: relative;
gap: .1em;
mat-icon {
position: absolute;
top: 1.3em;
left: .5em;
color: #777;
}
&.actions {
flex-direction: row-reverse;
justify-content: space-between;
align-items: center;
a {
color: #3f51b5;
text-decoration: none;
}
}
label {
flex: 1;
font-style: italic;
padding-left: 1em;
color: #777;
.required {
color: red;
}
}
input {
flex: 1;
background-color: #eeeeee;
border: none;
border-radius: 10em;
padding: 1em 1em 1em 3em;
}
}
}
}

12
frontend/src/app/pages/signin/signin.component.html
View File

@@ -1,6 +1,6 @@
<form [formGroup]="signinForm" (submit)="performSignin()" ngNativeValidate>
<h1 i18n>Signin</h1>
<div>
<div class="form-field">
<mat-icon>person</mat-icon>
<label for="pseudo" i18n>
Pseudo
@@ -8,7 +8,7 @@
</label>
<input type="text" id="pseudo" formControlName="pseudo" autocomplete="pseudo" required />
</div>
<div>
<div class="form-field">
<mat-icon>mail</mat-icon>
<label for="email" i18n>
Email address
@@ -16,7 +16,7 @@
</label>
<input type="email" id="email" formControlName="email" autocomplete="email" required />
</div>
<div>
<div class="form-field">
<mat-icon>lock</mat-icon>
<label for="password" i18n>
Password
@@ -24,7 +24,7 @@
</label>
<input type="password" id="password" formControlName="password" required />
</div>
<div>
<div class="form-field">
<mat-icon>lock</mat-icon>
<label for="confirm-password" i18n>
Confirm password
@@ -32,8 +32,8 @@
</label>
<input type="password" id="confirm-password" formControlName="confirmPassword" required />
</div>
<div class="actions">
<div class="actions reversed">
<button type="submit" i18n>Send</button>
<a [routerLink]="['/login']" i18n>I already have an account</a>
<a [routerLink]="['/login']" class="button secondary" i18n>I already have an account</a>
</div>
</form>

62
frontend/src/app/pages/signin/signin.component.scss
View File

@@ -16,67 +16,5 @@
border-radius: .5em;
padding: 1em 1.5em;
background-color: #ffffff;
h1 {
margin: 0;
}
div {
display: flex;
flex-direction: column;
position: relative;
gap: .1em;
mat-icon {
position: absolute;
top: 1.3em;
left: .5em;
color: #777;
}
&.actions {
flex-direction: row-reverse;
justify-content: space-between;
align-items: center;
button {
padding: .8em 1.2em;
border-radius: 10em;
border: none;
background-color: #3f51b5;
color: white;
transition: background-color .2s ease-in-out;
&:hover {
background-color: #5b6ed8;
cursor: pointer;
}
}
a {
color: #3f51b5;
text-decoration: none;
}
}
label {
flex: 1;
font-style: italic;
padding-left: 1em;
color: #777;
.required {
color: red;
}
}
input {
flex: 1;
background-color: #eeeeee;
border: none;
border-radius: 10em;
padding: 1em 1em 1em 3em;
}
}
}
}

4
frontend/src/design_system/button.scss
View File

@@ -20,3 +20,7 @@ button, a.button {
}
}
}
a.button {
text-decoration: none;
}

1
frontend/src/design_system/index.scss
View File

@@ -1 +1,2 @@
@use './button.scss';
@use './input.scss';

51
frontend/src/design_system/input.scss Normal file
View File

@@ -0,0 +1,51 @@
form {
h1 {
margin: 0;
}
div {
&.actions {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
&.reversed {
flex-direction: row-reverse;
}
}
&.form-field {
display: flex;
flex-direction: column;
position: relative;
gap: .1em;
mat-icon {
position: absolute;
top: 1.3em;
left: .5em;
color: #777;
}
label {
flex: 1;
font-style: italic;
padding-left: 1em;
color: #777;
.required {
color: red;
}
}
input {
flex: 1;
background-color: #eeeeee;
border: none;
border-radius: 10em;
padding: 1em 1em 1em 3em;
}
}
}
}