login.css
2.6 KB
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
.form-container{
color: #fff;
padding: 20px;
border-radius: 5px;
font-size: 20px;
background-color: rgba(94,109,148);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.group-material-login{
position:relative;
margin-bottom:25px;
}
.material-login-control,
.material-control-login{
background-color: transparent;
font-size:17px;
padding:10px 10px 10px 5px;
display:block;
width:100%;
border:none;
border-bottom:1px solid #fff;
outline:none;
}
.material-login-control:focus{ outline:none; }
.group-material-login label{
color:#fff;
font-size:17px;
font-weight:normal;
position:absolute;
pointer-events:none;
left:5px;
top:10px;
transition:all 0.2s ease;
-moz-transition:all 0.2s ease;
-webkit-transition:all 0.2s ease;
}
/* Estado activo */
input.material-login-control:focus:valid ~ label,
input.material-login-control:valid ~ label{
top:-18px;
font-size:13px;
color:#fff;
}
input.material-login-control:focus:invalid:required,
input.material-login-control:invalid:required{
outline: none;
box-shadow: none;
}
/*Barra de formularios material desing ================*/
.bar-login{ position:relative; display:block; width:100%; }
.bar-login:before, .bar-login:after {
content:'';
height:2px;
width:0;
bottom:1px;
position:absolute;
background:#fff;
transition:all 0.2s ease;
-moz-transition:all 0.2s ease;
-webkit-transition:all 0.2s ease;
}
.bar-login:before { left:50%; }
.bar-login:after { right:50%; }
input.material-login-control:focus ~ .bar-login:before, input.material-login-control:focus ~ .bar-login:after {
width:50%;
}
.btn-login{
background-color: transparent;
text-align: center;
border: none;
box-shadow: none;
font-size: 19px;
line-height: 19px;
color: #fff;
padding: 0;
margin: 0;
position: absolute;
bottom: 3%;
right: 3%;
}
.btn-login:hover{
border: none;
box-shadow: none;
}
.btn-login:focus,
.btn-login:active{
outline: none;
border: none;
box-shadow: none;
}
label{
font-style: normal;
font-weight: normal;
font-size: 16px;
}
.radio-inline label:hover{
cursor: pointer;
}
select.material-control-login{
-ms-appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
background: #5E6D94 url(../assets/icons/SelectMaterialIndicator-white.png) no-repeat scroll right 0.75rem center / 13px 8px;
}
select.material-control-login:hover{
cursor: pointer;
}