#e8e8e8
1.searchbar { 2 font-size: 14px; 3 font-family: arial, sans-serif; 4 color: #202124; 5 display: flex; 6 z-index: 3; 7 height: 44px; 8 background: white; 9 border: 1px solid #dfe1e5; 10 box-shadow: none; 11 border-radius: 24px; 12 margin: 0 auto; 13 width: auto; 14 max-width: 224px; 15} 16 17.searchbar:hover { 18 box-shadow: 0 1px 6px rgb(32 33 36 / 28%); 19 border-color: rgba(223,225,229,0); 20} 21 22.searchbar-wrapper { 23 flex: 1; 24 display: flex; 25 padding: 5px 8px 0 14px; 26} 27 28.searchbar-left { 29 font-size: 14px; 30 font-family: arial, sans-serif; 31 color: #202124; 32 display: flex; 33 align-items: center; 34 padding-right: 13px; 35 margin-top: -5px; 36} 37 38.search-icon-wrapper { 39 margin: auto; 40} 41 42.search-icon { 43 margin-top: 3px; 44 color: #9aa0a6; 45 height: 20px; 46 line-height: 20px; 47 width: 20px; 48} 49 50.searchbar-icon { 51 display: inline-block; 52 fill: currentColor; 53 height: 24px; 54 line-height: 24px; 55 position: relative; 56 width: 24px; 57} 58 59.searchbar-center { 60 display: flex; 61 flex: 1; 62 flex-wrap: wrap; 63} 64 65.searchbar-input-spacer { 66 color: transparent; 67 flex: 100%; 68 white-space: pre; 69 height: 34px; 70 font-size: 16px; 71} 72 73.searchbar-input { 74 background-color: transparent; 75 border: none; 76 margin: 0; 77 padding: 0; 78 color: rgba(0, 0, 0, .87); 79 word-wrap: break-word; 80 outline: none; 81 display: flex; 82 flex: 100%; 83 margin-top: -37px; 84 height: 34px; 85 font-size: 16px; 86 max-width: 100%; 87 width: 100%; 88} 89 90.searchbar-right { 91 display: flex; 92 flex: 0 0 auto; 93 margin-top: -5px; 94 align-items: stretch; 95 flex-direction: row 96} 97 98.searchbar-clear-icon { 99 margin-right: 12px 100} 101 102.voice-search { 103 flex: 1 0 auto; 104 display: flex; 105 cursor: pointer; 106 align-items: center; 107 border: 0; 108 background: transparent; 109 outline: none; 110 padding: 0 8px; 111 width: 2.8em; 112}
Comments
MIT License