changed input type=search to input type=text with new styling

src/font/icons.svg

@@ -24,4 +24,5 @@
 <glyph unicode="&#xe014;" d="M1073.595-64l-40.843 134.199c-81.687 268.399-297.573 323.829-466.781 323.829-61.265 0-110.86-8.752-137.117-11.67v-207.134l-428.855 399.681 428.855 385.094v-198.382c212.969-5.835 376.342-70.017 490.12-192.547 186.712-201.299 166.291-481.368 166.291-493.037l-11.67-140.034zM568.889 449.459c125.447 0 335.499-32.091 455.111-224.638-14.587 93.356-52.513 212.969-142.952 312.16-107.943 116.695-268.399 175.043-475.533 175.043h-26.256v131.282l-300.49-268.399 300.49-277.151v128.365l20.422 5.835c0 0 70.017 17.504 169.208 17.504z" horiz-adv-x="1085" />
 <glyph unicode="&#xe015;" d="M458.105-64v272.842h-458.105v495.158l458.105 3.368v252.632l461.474-424.421 101.053-97.684-562.526-501.895zM60.632 269.474h458.105v-198.737l410.947 367.158-53.895 53.895-357.053 330.105v-175.158l-458.105-3.368v-373.895z" horiz-adv-x="1017" />
 <glyph unicode="&#xe016;" d="M-0.001 447.998l511.995 511.995 47.513-47.513-511.995-511.995-47.513 47.513zM47.517 495.519l511.995-511.995-47.513-47.513-511.995 511.995 47.513 47.513z" horiz-adv-x="560" />
+<glyph unicode="&#xe017;" d="M890 186.6l-169.6 171.8c27.6 48.2 42 101.8 42 155.8 0 175.2-142.4 317.8-317.2 317.8s-317.2-142.6-317.2-317.8c0-175.2 142.4-317.8 317.2-317.8 55.8 0 111 15.4 160.2 44.8l168.8-171.2c3.8-3.8 9.2-6.2 14.6-6.2s10.8 2.2 14.6 6.2l86.6 87.6c8 8.2 8 21 0 29zM445.2 708.2c106.8 0 193.6-87 193.6-194s-86.8-194-193.6-194c-106.8 0-193.6 87-193.6 194s86.8 194 193.6 194z" />
 </font></defs></svg>

src/sass/components/_input.scss

@@ -18,13 +18,4 @@
     padding: 0;
     color: red;
     font-size: em(13);
-}
-
-// need to be more specific than normalize.css
-.input-search,
-input[type="search"].input-search {
-    box-sizing: border-box;
-    width: 100%;
-    border-radius: 0;
-    -webkit-appearance: searchfield;
 }

src/sass/views/_mail-list.scss

@@ -42,6 +42,18 @@
         padding: 0 $padding-horizontal $padding-vertical $padding-horizontal;
         margin: 0 auto;
         width: 100%;
+        position: relative;
+        input {
+            width: 100%;
+            padding-left: 1.7em;
+        }
+        &:before {
+            position: absolute;
+            left: 25px;
+            color: $color-grey-medium;
+            top: 8px;
+            line-height: 1.3em;
+        }
     }
 
     .list-wrapper {

src/tpl/mail-list.html

@@ -5,8 +5,8 @@
     <button ng-click="state.writer.write()" class="btn-icon" title="New mail"></button>
   </header>
 
-  <div class="search">
-    <input class="input-text input-search" type="search" results="5" ng-model="searchText" placeholder=" Filter..." focus-me="state.mailList.searching">
+  <div class="search" data-icon="&#xe017;">
+    <input class="input-text" type="text" ng-model="searchText" placeholder="Filter..." focus-me="state.mailList.searching">
   </div>
 
   <div class="list-wrapper" ng-iscroll="filteredMessages">