-
Notifications
You must be signed in to change notification settings - Fork 1
/
input-material.css
66 lines (65 loc) · 3.13 KB
/
input-material.css
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
.form-group.input-material {
position: relative;
margin-top: 50px;
margin-bottom: 25px;
/* textarea label */ }
.form-group.input-material label {
color: #b1bbc4;
font-size: 16px;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 5px;
bottom: 1px;
transition: 0.1s ease all;
-moz-transition: 0.1s ease all;
-webkit-transition: 0.1s ease all; }
.form-group.input-material textarea.form-control ~ label {
bottom: 90%;
bottom: calc(100% - 38px); }
.form-group.input-material .form-control, .form-group.input-material .form-select {
border: none;
border-bottom: 2px solid #ced4da;
border-radius: 0px;
background-color: transparent;
padding-left: 5px;
box-shadow: none;
/* required fields */
/* active state */
/* invalid state */ }
.form-group.input-material .form-control:required ~ label::after, .form-group.input-material .form-select:required ~ label::after {
content: '*';
color: #dc3545;
padding-left: 2px;
font-size: 0.8em; }
.form-group.input-material .form-control:focus, .form-group.input-material .form-control[value]:not([value=""]), .form-group.input-material .form-select:focus, .form-group.input-material .form-select[value]:not([value=""]) {
border-bottom-color: #007bff;
color: #000; }
.form-group.input-material .form-control:focus ~ label,
.form-group.input-material .form-control[value]:not([value=""]) ~ label, .form-group.input-material .form-select:focus ~ label,
.form-group.input-material .form-select[value]:not([value=""]) ~ label {
top: unset;
bottom: 100%;
bottom: calc(100% - 16px);
font-size: 14px;
color: #007bff;
font-weight: 500; }
.form-group.input-material .form-control:focus.invalid, .form-group.input-material .form-control.invalid, .form-group.input-material .form-control:focus.parsley-error, .form-group.input-material .form-control[value]:not([value=""]).parsley-error, .form-group.input-material .form-select:focus.invalid, .form-group.input-material .form-select.invalid, .form-group.input-material .form-select:focus.parsley-error, .form-group.input-material .form-select[value]:not([value=""]).parsley-error {
border-bottom-color: #dc3545; }
.form-group.input-material .form-control:focus.invalid ~ label,
.form-group.input-material .form-control.invalid ~ label,
.form-group.input-material .form-control:focus.parsley-error ~ label,
.form-group.input-material .form-control[value]:not([value=""]).parsley-error ~ label, .form-group.input-material .form-select:focus.invalid ~ label,
.form-group.input-material .form-select.invalid ~ label,
.form-group.input-material .form-select:focus.parsley-error ~ label,
.form-group.input-material .form-select[value]:not([value=""]).parsley-error ~ label {
color: #dc3545; }
.form-group.input-material .form-select {
background-position: right 0 center;
padding-left: 0; }
.form-group.input-material .parsley-errors-list {
color: #dc3545;
list-style: none;
font-size: 0.7em;
padding-left: 5px; }
/*# sourceMappingURL=input-material.css.map */