1.wave-group {
2  position: relative;
3}
4
5.wave-group .input {
6  font-size: 16px;
7  padding: 10px 10px 10px 5px;
8  display: block;
9  width: 200px;
10  border: none;
11  border-bottom: 1px solid #515151;
12  background: transparent;
13}
14
15.wave-group .input:focus {
16  outline: none;
17}
18
19.wave-group .label {
20  color: #999;
21  font-size: 18px;
22  font-weight: normal;
23  position: absolute;
24  pointer-events: none;
25  left: 5px;
26  top: 10px;
27  display: flex;
28}
29
30.wave-group .label-char {
31  transition: 0.2s ease all;
32  transition-delay: calc(var(--index) * .05s);
33}
34
35.wave-group .input:focus ~ label .label-char,
36.wave-group .input:valid ~ label .label-char {
37  transform: translateY(-20px);
38  font-size: 14px;
39  color: #5264AE;
40}
41
42.wave-group .bar {
43  position: relative;
44  display: block;
45  width: 200px;
46}
47
48.wave-group .bar:before,.wave-group .bar:after {
49  content: '';
50  height: 2px;
51  width: 0;
52  bottom: 1px;
53  position: absolute;
54  background: #5264AE;
55  transition: 0.2s ease all;
56  -moz-transition: 0.2s ease all;
57  -webkit-transition: 0.2s ease all;
58}
59
60.wave-group .bar:before {
61  left: 50%;
62}
63
64.wave-group .bar:after {
65  right: 50%;
66}
67
68.wave-group .input:focus ~ .bar:before,
69.wave-group .input:focus ~ .bar:after {
70  width: 50%;
71}
72
73