Input by Li-Deheng
#212121
1.search-panels { 2 --default-color: #9e9e9e; 3 --color-text: #ccc; 4 --color-active: #1a73e8; 5 --color-active-input: #f5f5f5; 6 --transition: 150ms cubic-bezier(0.4,0,0.2,1); 7 --width-input: 200px; 8} 9 10.search-group { 11 position: relative; 12} 13 14.input { 15 width: var(--width-input); 16 border: solid 1.5px var(--default-color); 17 border-radius: 80px; 18 background: none; 19 padding: 1rem; 20 padding-right: 3rem; 21 font-size: 1rem; 22 color: var(--color-active-input); 23 transition: border var(--transition); 24} 25 26.enter-label { 27 position: absolute; 28 left: 15px; 29 color: var(--default-color); 30 pointer-events: none; 31 transform: translateY(1rem); 32 transition: var(--transition); 33} 34 35.enter-label { 36 color: var(--default-color); 37 pointer-events: none; 38} 39 40.input:focus, input:valid { 41 outline: none; 42 border: 1.5px solid var(--color-active); 43} 44 45.input:focus ~ label, input:valid ~ label { 46 transform: translateY(-50%) scale(0.8); 47 background-color: var(--color-active); 48 border-radius: 20px; 49 padding: .2em .6em; 50 color: var(--color-text); 51} 52 53.btn-box { 54 display: flex; 55 justify-content: center; 56 align-items: center; 57 position: absolute; 58 top: -1em; 59 right: 80%; 60 border-radius: 100%; 61 transition: 300ms cubic-bezier(0.4,0,0.2,1); 62 transition-delay: 100ms; 63 opacity: 0; 64} 65 66.input:focus ~ .btn-box, input:valid ~ .btn-box { 67 right: 10%; 68 opacity: 1; 69 transition-delay: 0s; 70 transition: var(--transition); 71} 72 73.input:not(:focus) ~ .btn-box, input:not(:valid) ~ .btn-box { 74 transition-property: right, opacity; 75 transition-delay: 300ms; 76} 77 78.input:focus ~ .btn-box:hover, input:valid ~ .btn-box:hover { 79 transform: scale(1.2); 80} 81 82.input:focus ~ .btn-box:hover:active, input:valid ~ .btn-box:hover:active { 83 transform: scale(1); 84} 85 86.btn-search { 87 position: relative; 88 cursor: pointer; 89 background-color: var(--color-active); 90 width: 2em; 91 height: 2em; 92 top: 2.5px; 93 border: none; 94 border-radius: 100%; 95 padding: 0; 96 transition: var(--transition); 97} 98 99.btn-search:active { 100 transform: scale(1); 101} 102 103.btn-search svg { 104 position: absolute; 105 top: 25%; 106 left: 25%; 107 fill: var(--color-text); 108 width: 12px; 109 height: 12px; 110} 111 112#svg-circle { 113 fill: var(--color-text); 114 transition: var(--transition); 115} 116 117.input:focus ~ .btn-box:hover #svg-circle, input:valid ~ .btn-box:hover #svg-circle { 118 fill: transparent; 119} 120 121.btn-box-x { 122 display: flex; 123 justify-content: center; 124 align-items: center; 125 position: absolute; 126 top: 1em; 127 right: 7%; 128 opacity: 0; 129 transform: rotate(-90deg) scale(.1); 130 transition: var(--transition); 131} 132 133.input:focus ~ .btn-box-x, input:valid ~ .btn-box-x { 134 opacity: 1; 135 transform: rotate(0) scale(1); 136} 137 138.btn-cleare { 139 position: relative; 140 cursor: pointer; 141 background-color: transparent; 142 width: 2em; 143 height: 2em; 144 border: none; 145 border-radius: 100%; 146 padding: 0; 147 transition: var(--transition); 148} 149 150.btn-cleare svg { 151 width: 15px; 152 height: 15px; 153} 154 155#cleare-line { 156 fill: var(--default-color); 157} 158 159.btn-box-x:hover #cleare-line { 160 fill: var(--color-active); 161}
1.4K views
1.4K views
MIT License