joywok-material-components
Version:
<h1 align="center"> Joywok Material Components </h1>
61 lines (60 loc) • 3.52 kB
CSS
.jw-search-component {
width: 100%;
height: 46px;
position: relative;
margin-left: 0;
border-radius: 23px;
background: #E7E7E7;
text-align: left;
font-size: 13px;
line-height: 35px;
}
.jw-search-component.rounded-rectangle {
border-radius: 4px;
}
.jw-search-component .jw-search-component-input {
margin-left: 46px;
line-height: 33px;
width: 80%;
padding-right: 30px;
height: 100%;
}
.jw-search-component .jw-search-component-icon {
width: 32px;
color: #999;
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
z-index: 22;
position: absolute;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-left: 12px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.jw-search-component .jw-search-component-icon .icon-jw-search {
display: inline-block;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAYAAAA6RwvCAAAAAXNSR0IArs4c6QAABL1JREFUWAm9mF1oVEcUx7ub3UWJzYdijXYNUogSv0CwfRFCFjQtoWJVTKlZWxJMoj4oldKHVpRGKvHBl9og+TYJWEg0mFAFqRgV9aUVERG0plpKG7VQN/1ITdzNpr8zm3ud3L27yW4uHZg7Z+ac85//nDN7Z+66XkmztLe3z4tGo6/i/qSiomIkTRjTzWVKSYSGhgYv6oDL5dpEW0LNHx8f92kuIeQ76HsZ762pqflJ001LTEoEUHdzc3OQlR8GLd+C+Af9v5k8D7tZuo6xM/Q/q66u/lEfTyYnJNLa2vpGOBw+jfMaAQD8LrWb2peVlXW3rKzshQEsaRodHS2mLxHbArFM2gi2dVVVVQdpx+knLbZESEUAr27qPEAeAXyA1X0zHcC2trY8FnAIn534e/DpzcnJCUL8n2RM4oiQinWk4hJAvumC2E3Q1NRUDI5EVBZzGbwS9k7YzlbG3LqCSOSPjY31TJD4mrBunmolur8u43vZ6/W+BYlfwSumPa7rrfIkIig7qa/hdB6gfbRT5tYKqPcrKysfgvEeY88hU8NCRbYtJhFSshGLIurvOG0HIGrrkeIgC7oJ1icTbnX9/f0eOwiTCCn5UgzcbnctufzTzjjdsYKCgkZ871OXDQwM7LDDUUQaGxtXoFwF86dsMHFytAQCgQgLPCKgRPsDO3BFBALy+5fSl2xnx0zSe3o8nj48w7Jx2SvZVhRFBKW8N6R8G2ucf3IeDbHg6yB7ic466wzGHnldFBg+sBo43Ff4LFzNp2MbEVkkg+yPQV3ptAwBhc+C1Xw6vhERdZLm5ua+0JVOy6RE4bNgNZ+ObxB5LIOhUCiOqW48U5mILJzAUPPpeAYRIyXWo163dUJW+ETGmM/EVETI2fcyQrvB1DgsdHV1+YhIscCSmh+s8EZEeicUCc8Cq2Oq/aGhIXlFZFFv8a76xeqviHBfuIZCzphCzpx3rEZO9MHeLzhEvccOTxHhqB/D4IgYELajOBmRsvNJeYwjZD1OJdRQZmZmvR2AOSFROQGZR5BYzaXmCzvjdMbq6+sLwTwpvrLY8vJyuWjHFZOI3EExlOtdBMcDkLE9nOIQkgx0dHSs5HJ0ExN5k95isV8lMjeJiAF3h0uQ2ScyZDo5nD4WOZ3CQhaMjIxcAGe2+IM7d3h4eG4irLg7qxhC4HMcDwMi+m6fz/cph9bPopuqiA8ktmF3DNkPzjCt3Oql3GaPFAWDwb9i3ZdPWyKiZoNtpukUEMDk1dxM7ZJfmGxu5EmFz4/5XK7exX439U1R4neFsXJeYKfoyu1Pjfn9/rdLS0tHpW+UhETEAPDFkUikFuAP6ao0Av4M+R51kCqfCAvQ+2nlcmWk+jfsDpLqk7RRuX/QXsVuNTZSevg82Sa6WBeChpCshdByvlV24LgJsEI7W3Ty/XuR9mx2dvYpovZct4OMnDM3qEtkHLsGyOwSWcq0iMRMY0/y74dMPkCLaOcw+jQjI2OQyD3gjfmvbmuVSfdSxq7hN190YNRC5pCS5fF/lpaWlrWQ7mdOWYSUPSzgRMoRifnO7ElUN/AGPweK/MsQZTO/b2yumSGn6M0m/o7JPyI18gHnJlVbU4Rw1pwNvJd9cxwi7v8AymzZaXYll68AAAAASUVORK5CYII=);
background-size: cover;
background-repeat: no-repeat;
width: 17px;
height: 17px;
}
.jw-search-component .jw-search-component-icon-right {
position: absolute;
right: 8px;
top: 0;
cursor: pointer;
}
.jw-search-component .icon-jw-search-clear {
display: inline-block;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAABB0lEQVQ4T6WSPU6FUBCFzzFALIidO9DSDhpYw6tMoHcF1vZauwJ7IFaugQoqX6k7sDMkmkA8Zsi75BJfjD9TTYbzzRnuDOFFXdfHJC8lbQCc7j49kXyQdFsUxYuT0yVVVZ0DuCN55DdzuaRXABdlWd5bbQYNIlkDONgHebUPSYXBtPEkPTunMAwxjuOK92vmTPKETdNcS7oypQnyPEff9xiGYYbjOEaSJGjbdmlI8sYcHwGcOQsnNNjCIL/RTrc18A3AoT+bwWmaQtI+yKTv34Km6LpuGdtrPoNfRjU3Ayxc7v55GdV/nCiKkGXZjx9ntY4gCDBN02odfm1Zx58P4F8n5+DfHPknLtWzy/XGqGMAAAAASUVORK5CYII=);
background-size: cover;
background-repeat: no-repeat;
width: 14px;
height: 14px;
}