Input by LeonKohli

1.ui-input-container {
2  position: relative;
3  width: 300px;
4}
5
6.ui-input {
7  width: 100%;
8  padding: 10px 10px 10px 40px;
9  font-size: 1em;
10  border: none;
11  border-bottom: 2px solid #ccc;
12  outline: none;
13  background-color: transparent;
14  transition: border-color 0.3s;
15}
16
17.ui-input:focus {
18  border-color: #6c63ff;
19}
20
21.ui-input-underline {
22  position: absolute;
23  bottom: 0;
24  left: 0;
25  height: 2px;
26  width: 100%;
27  background-color: #6c63ff;
28  transform: scaleX(0);
29  transition: transform 0.3s;
30}
31
32.ui-input:focus + .ui-input-underline {
33  transform: scaleX(1);
34}
35
36.ui-input-highlight {
37  position: absolute;
38  bottom: 0;
39  left: 0;
40  height: 100%;
41  width: 0;
42  background-color: rgba(108, 99, 255, 0.1);
43  transition: width 0.3s;
44}
45
46.ui-input:focus ~ .ui-input-highlight {
47  width: 100%;
48}
49
50.ui-input-icon {
51  position: absolute;
52  left: 10px;
53  top: 50%;
54  transform: translateY(-50%);
55  color: #999;
56  transition: color 0.3s;
57}
58
59.ui-input:focus ~ .ui-input-icon {
60  color: #6c63ff;
61}
62
63.ui-input-icon svg {
64  width: 20px;
65  height: 20px;
66}
67