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

Re-design of login page.

Browse Source
This commit is contained in:
Florian THIERRY
2024-06-06 11:05:02 +02:00
parent e5076f0c64
commit 95d5308934
8 changed files with 221 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,34 +3,78 @@
flex-direction: column;
justify-content: center;
align-items: center;
padding: 1em;
form {
min-width: 40em;
max-width: 90%;
width: 80%;
max-width: 20em;
display: flex;
flex-direction: column;
justify-content: center;
gap: .5em;
gap: 1em;
box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
border-radius: .5em;
padding: 1em 1.5em;
h1 {
margin: 0;
}
div {
display: flex;
gap: .5em;
flex-direction: column;
position: relative;
gap: .1em;
mat-icon {
position: absolute;
top: 1.2em;
left: .5em;
color: #777;
}
&.actions {
justify-content: end;
flex-direction: row;
justify-content: space-between;
align-items: center;
a {
color: #3f51b5;
text-decoration: none;
}
button {
width: 10em;
height: 2em;
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;
}
}
}
label {
flex: 1 30%;
flex: 1;
font-style: italic;
padding-left: 1em;
color: #777;
.required {
color: red;
}
}
input {
flex: 1 70%;
flex: 1;
background-color: #eeeeee;
border: none;
border-radius: 10em;
padding: 1em 1em 1em 3em;
}
}
}