add search icon

Author: 64json

css/stylesheet.css

@@ -181,19 +181,29 @@ nav h3 {
     box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.48), inset 0 -2px 2px rgba(0, 0, 0, 0.36);
 }
 
-input.search_bar {
-    box-sizing: border-box;
+.search_bar_container {
     background: rgba(0, 0, 0, .10);
-    border: none;
     border-bottom: 2px solid rgb(38, 38, 38);
-    width: 100%;
     height: 30px;
-    color: white;
-    padding-left: 10px;
+    color: rgb(187, 187, 187);
+    font-size: 12px;
+    padding: 0 8px 0 8px;
 }
 
-input.search_bar:focus {
+.search_bar_container > .fa {
+    position: absolute;
+    line-height: 30px;
+}
+
+#search-bar {
+    box-sizing: border-box;
+    padding-left: 16px;
+    background: none;
+    border: none;
+    width: 100%;
+    height: 100%;
     outline: none;
+    overflow: hidden;
 }
 
 .workspace {

index.html

@@ -61,14 +61,17 @@ <h3>
     </div>
 </nav>
 <section class="sidemenu active">
-    <input type = "text" class="search_bar" id="search-bar" autofocus/>
+    <div class="search_bar_container">
+        <i class="fa fa-search" aria-hidden="true"></i>
+        <input type="text" id="search-bar" autofocus/>
+    </div>
     <div id="list">
     </div>
     <div id="footer">
         <button id="scratch-paper"><i class="fa fa-fw fa-code"></i> Scratch Paper</button>
         <button id="documentation"><i class="fa fa-fw fa-book"></i> Tracer API</button>
         <button class="category open" id="powered-by">
-          <i class="fa fa-fw fa-github"></i> Powered by ...
+            <i class="fa fa-fw fa-github"></i> Powered by ...
         </button>
         <div id="powered-by-list">
             <a href="https://github.com/jquery/jquery">

public/algorithm_visualizer.css

@@ -301,19 +301,29 @@ nav h3 {
     box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.48), inset 0 -2px 2px rgba(0, 0, 0, 0.36);
 }
 
-input.search_bar {
-    box-sizing: border-box;
+.search_bar_container {
     background: rgba(0, 0, 0, .10);
-    border: none;
     border-bottom: 2px solid rgb(38, 38, 38);
-    width: 100%;
     height: 30px;
-    color: white;
-    padding-left: 10px;
+    color: rgb(187, 187, 187);
+    font-size: 12px;
+    padding: 0 8px 0 8px;
 }
 
-input.search_bar:focus {
+.search_bar_container > .fa {
+    position: absolute;
+    line-height: 30px;
+}
+
+#search-bar {
+    box-sizing: border-box;
+    padding-left: 16px;
+    background: none;
+    border: none;
+    width: 100%;
+    height: 100%;
     outline: none;
+    overflow: hidden;
 }
 
 .workspace {