1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41@use "../global-styles/variables.module.scss";
@use "../global-styles/fonts.scss";
.login{
margin: clamp(32px, 8vw, 120px) auto;
padding: calc(variables.$spacing * 5);
display: grid;
gap: calc(variables.$spacing * 3);
width: 100%;
max-width: 400px ;
.header{
.logo{
width: 100px;
margin: 0 auto;
}
.title{
text-align: center;
}
}
label{
display: block;
margin-top: variables.$spacing*2;
margin-bottom: calc(variables.$spacing / 4);
}
button{
width: 100%;
margin-top: variables.$spacing*2;
box-shadow: variables.$shadow-small;
}
input[type="text"], input[type="password"], input[type="email"]{
width: 100%
}
.error{
color: variables.$red;
border-radius: calc(variables.$spacing / 2);
background: variables.$red-light;
border: 1px solid variables.$red-dark;
padding: variables.$spacing*2;
}
}