Skip to content

Commit 824119c

Browse files
marcode24marcode24
committed
💄 add login UI styles
1 parent e2ba52a commit 824119c

File tree

4 files changed

+200
-1
lines changed

4 files changed

+200
-1
lines changed

‎src/app/auth/login/login.component.html‎

Lines changed: 38 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,38 @@
1-
<p>login works!</p>
1+
<div class="auth-wrapper">
2+
<div class="container">
3+
<section class="logo-content">
4+
<div class="logo">
5+
<img src="" alt="logo_image">
6+
</div>
7+
<img src="assets/images/login.svg" alt="media" class="login-image">
8+
</section>
9+
<section class="form-group">
10+
<div class="main">
11+
<span class="title">Iniciar sesión</span>
12+
<span class="sign-up">¿No tienes una cuenta?
13+
<a routerLink="/register">Regístrate</a>
14+
</span>
15+
</div>
16+
<form>
17+
<div class="input-group">
18+
<label for="email">Correo electrónico</label>
19+
<input type="email" id="email" placeholder="Correo electrónico">
20+
</div>
21+
<div class="input-group">
22+
<label for="password">Contraseña</label>
23+
<input type="password" id="password" placeholder="Contraseña">
24+
</div>
25+
<div class="options">
26+
<div class="input-group row">
27+
<input type="checkbox" id="remember">
28+
<label for="remember">Recordar</label>
29+
</div>
30+
<a routerLink="/forgot-password">¿Olvidaste tu contraseña?</a>
31+
</div>
32+
<div class="input-container">
33+
<button class="btn btn-primary">Iniciar sesión</button>
34+
</div>
35+
</form>
36+
</section>
37+
</div>
38+
</div>

‎src/app/auth/login/login.component.scss‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
@import 'settings/_colors.scss';
2+
@import 'settings/_typography.scss';
3+
4+
.logo-content {
5+
flex: 2;
6+
}
7+
8+
.logo {
9+
position: absolute;
10+
top: 1rem;
11+
left: 1rem;
12+
}
13+
14+
.login-image {
15+
width: 100%;
16+
height: 100%;
17+
max-width: 80rem;
18+
background-repeat: no-repeat;
19+
background-size: cover;
20+
background-position: center;
21+
}
22+
23+
.form-group {
24+
display: flex;
25+
flex-direction: column;
26+
gap: 2rem;
27+
flex: 1;
28+
}
29+
30+
.main {
31+
flex: 1;
32+
display: flex;
33+
flex-direction: column;
34+
justify-content: center;
35+
gap: 0.5rem;
36+
37+
& .title {
38+
@include fs-1;
39+
@include fw-600;
40+
color: var(--fc-purple);
41+
}
42+
43+
& .sign-up {
44+
@include fs-5;
45+
@include fw-400;
46+
color: var(--fc-secondary);
47+
48+
& a {
49+
color: var(--fc-purple);
50+
text-decoration: none;
51+
52+
&:hover {
53+
cursor: pointer;
54+
text-decoration: underline;
55+
}
56+
}
57+
}
58+
}
59+
60+
.options {
61+
display: flex;
62+
flex-direction: row;
63+
justify-content: space-between;
64+
align-items: center;
65+
gap: 1rem;
66+
67+
& a {
68+
@include fs-6;
69+
@include fw-500;
70+
color: var(--fc-purple);
71+
text-decoration: none;
72+
73+
&:hover {
74+
cursor: pointer;
75+
text-decoration: underline;
76+
}
77+
}
78+
}
79+
80+
.btn {
81+
width: 100%;
82+
border-radius: 0.5rem;
83+
}

‎src/assets/images/login.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎src/styles.scss‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
--bg-sidebar: #{$purple-light};
2323
--fc-primary: #{$black};
2424
--fc-white: #{$white-grey};
25+
--fc-purple: #{$purple};
2526
--border-input: none;
2627
// --border-input: 1px solid #333639;
2728
}
@@ -52,3 +53,80 @@ body {
5253
.fluid-container {
5354
padding: 1rem 0.8rem;
5455
}
56+
57+
58+
.auth-wrapper {
59+
min-height: 100vh;
60+
height: 100%;
61+
background: var(--bg);
62+
63+
& .container {
64+
min-height: 100vh;
65+
display: flex;
66+
align-items: center;
67+
justify-content: center;
68+
gap: 5rem;
69+
width: 100%;
70+
padding: 1rem 1.8rem;
71+
}
72+
73+
& section {
74+
position: relative;
75+
}
76+
}
77+
78+
form {
79+
width: 100%;
80+
display: flex;
81+
flex-direction: column;
82+
gap: 1rem;
83+
84+
85+
.input-group {
86+
display: flex;
87+
flex-direction: column;
88+
gap: 0.5rem ;
89+
90+
&.row {
91+
display: flex;
92+
flex-direction: row;
93+
gap: 0.5rem;
94+
align-items: center;
95+
}
96+
97+
& label {
98+
@include fs-6;
99+
@include fw-500;
100+
}
101+
102+
& input {
103+
padding: 0.5rem 1rem;
104+
border: var(--border-input);
105+
border-radius: 0.5rem;
106+
background: var(--bg-2);
107+
color: var(--fc-primary);
108+
transition: all 0.3s ease-in-out;
109+
110+
&:focus {
111+
border: var(--border-input);
112+
background: var(--bg-2);
113+
color: var(--fc-primary);
114+
}
115+
116+
&[type='checkbox'] {
117+
width: 1rem;
118+
height: 1rem;
119+
border: var(--border-input);
120+
background: var(--bg-2);
121+
color: var(--fc-purple);
122+
transition: all 0.3s ease-in-out;
123+
124+
&:focus {
125+
border: var(--border-input);
126+
background: var(--bg-2);
127+
color: var(--fc-primary);
128+
}
129+
}
130+
}
131+
}
132+
}

0 commit comments

Comments
 (0)