#e8e8e8
1.search { 2 display: flex; 3 align-items: center; 4 justify-content: space-between; 5 text-align: center; 6} 7 8.search__input { 9 font-family: inherit; 10 font-size: inherit; 11 background-color: #f4f2f2; 12 border: none; 13 color: #646464; 14 padding: 0.7rem 1rem; 15 border-radius: 30px; 16 width: 12em; 17 transition: all ease-in-out .5s; 18 margin-right: -2rem; 19} 20 21.search__input:hover, .search__input:focus { 22 box-shadow: 0 0 1em #00000013; 23} 24 25.search__input:focus { 26 outline: none; 27 background-color: #f0eeee; 28} 29 30.search__input::-webkit-input-placeholder { 31 font-weight: 100; 32 color: #ccc; 33} 34 35.search__input:focus + .search__button { 36 background-color: #f0eeee; 37} 38 39.search__button { 40 border: none; 41 background-color: #f4f2f2; 42 margin-top: .1em; 43} 44 45.search__button:hover { 46 cursor: pointer; 47} 48 49.search__icon { 50 height: 1.3em; 51 width: 1.3em; 52 fill: #b4b4b4; 53}
Comments
MIT License