blob: 3ddb57b8c6f6b7229457b2574f188969ca1849da (
plain)
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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
|
$primary: #303F9F
$light-primary: #BBDEFB
$white: #f2f2f2
$divider: #B6B6B6
$error: #D32F2F
$boton: #1976D2
$titulo: #1976D2
$footer: #26C6DA
$links: #BEA3FA
$break-small: 320px
$break-medium: 768px
$break-large: 1200px
$borde: 2px
$font-family: "Roboto", Arial
*
margin: 0
padding: 0
-webkit-box-sizing: border-box
-moz-box-sizing: border-box
box-sizing: border-box
body
height: 100%
background: $white
font-family: $font-family
border-top: 30px solid $primary
img
width: 100%
max-width: 200px
.wrap
width: 90%
max-width: 500px
padding: 40px
margin: auto
background: #fff
box-shadow: 0px 0px 3px grey
.cabecera
width: 200px
margin: 0 auto
p.titulo
text-align: center
font-family: $font-family Arial
font-weight: bold
font-size: 18px
padding-bottom: 30px
color: $primary
p.titulo2
text-align: center
font-family: $font-family Arial
font-weight: bold
font-size: 18px
color: $primary
p.invalid
background: #FBD6D5
max-width: 45%
text-align: center
font-family: $font-family Arial
font-weight: bold
font-size: 12px
padding: 8px
margin: auto
margin-bottom: 20px
color: $error
.contenedor-formulario
width: 100%
color: $white
padding: 50px
.formulario
width: 100%
margin: auto
.input-group
position: relative
margin-bottom: 32px
input[type="text"],
input[type="password"],
font-family: $font-family
font-size: 16px
color: $primary
width: 100%
outline: none
padding: 15px
background: none
border: none
border-bottom: $borde solid $light-primary
&:focus,
&:active
outline: none
border-bottom: $borde solid $primary
&.error
border-bottom: $borde solid $error
+ label
color: $error
label
color: $primary
&.label
position: absolute
top: 16px
left: 0px
font-size: 16px
line-height: 16px
margin-left: 16px
-webkit-transition: all .3s ease
-o-transition: all .3s ease
transition: all .3s ease
&.active
top: -12px
font-size: 12px
line-height: 12px
color: $divider
input[type="submit"]
background: $primary
border-radius: 1px
border: $borde solid $white
color: #fff
cursor: pointer
display: inline-block
padding: 15px
width: 100%
font-family: $font-family
font-size: 16px
-webkit-transition: all .3s ease
-o-transition: all .3s ease
transition: all .3s ease
&:hover
background: $boton
footer
clear: both
padding: 10px
width: 100%
background: $primary
margin: auto
.links
background: $titulo
p
color: $white
font-family: $font-family
font-size: 16px
margin: 0 auto
text-align: center
.footer
font-family: $font-family Arial
color: $footer
text-decoration: none
a:hover
color: $links
.cabecera
@media screen and (max-width: $break-medium)
max-width: 120px
p.titulo
@media screen and (max-width: $break-medium)
font-size: 12px
padding-bottom: 15px
p.titulo2
@media screen and (max-width: $break-medium)
font-size: 12px
p.invalid
@media screen and (max-width: $break-medium)
font-size: 10px
padding-top: 5px
padding-bottom: 15px
.wrap
@media screen and (max-width: $break-medium)
width: 100%
.contenedor-formulario
@media screen and (max-width: $break-medium)
padding: 30px
.formulario
.input-group
label
&.label
@media screen and (max-width: $break-medium)
font-size: 12px
input[type="submit"]
@media screen and (max-width: $break-medium)
font-size: 12px
footer
p
@media screen and (max-width: $break-medium)
font-size: 12px
|
