Input by naelawadallah
#212121
1.search-header { 2 display: flex; 3 align-items: center; 4 justify-content: space-between; 5 text-align: center; 6} 7 8.search-header__input { 9 font-family: inherit; 10 font-size: 16px; 11 background-color: #0a0a0a; 12 border: solid 0.5px #525252; 13 color: #646464; 14 padding: 0.7rem 1rem; 15 border-radius: 25px; 16 width: 240px; 17 height: 48px; 18 transition: all ease-in-out 0.5s; 19 margin-right: -2rem; 20 opacity: 1; 21 text-align: center; 22} 23 24.search-header__input:hover, 25.search-header__input:focus { 26 box-shadow: 0 0 1em #00000013; 27} 28 29.search-header__input:focus { 30 outline: none; 31 background-color: #0a0a0aad; 32} 33 34.search-header__input::-webkit-input-placeholder { 35 font-weight: 100; 36 color: #3a3a3a; 37} 38 39.search-header__input:focus + .search-header__button { 40 background-color: transparent; 41} 42 43.search-header__button { 44 border: none; 45 background-color: transparent; 46 margin-top: 0.1em; 47} 48 49.search-header__button:hover { 50 cursor: pointer; 51} 52 53.search-header__icon { 54 height: 1.3em; 55 width: 1.3em; 56 fill: #3a3a3a; 57} 58
592 views
592 views
MIT License