#e8e8e8
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
22K views
22K views
Comments
MIT License