Add site-wide search function

src/scss/classes.scss

@@ -130,6 +130,11 @@ All rights reserved.
     }
 }
 
+.stop-scrolling {
+    height: 100%;
+    overflow: hidden;
+}
+
 .two-thirds-content {
     position: relative; width: 66%;
     margin: 5em 16.5%;

src/scss/templates/index.scss

@@ -17,6 +17,8 @@ All rights reserved.
 @import 'inventory_table';
 @import 'item';
 @import 'item_page';
+@import 'item_selector';
+@import 'item_selector_element';
 @import 'login_page';
 @import 'minimal_recipe';
 @import 'mod';

src/scss/templates/item_selector.scss

@@ -0,0 +1,51 @@
+/*
+Crafting Guide - item_selector.scss
+
+Copyright (C) 2015 by Redwood Labs
+All rights reserved.
+*/
+
+.view__item_selector {
+    background: $color-background-panel;
+    border: 0.1em solid $color-gray-medium;
+    border-radius: 1.5em;
+    cursor: pointer;
+    padding: 0 0.75em;
+
+    p.placeholder {
+        position: relative; top: 50%; width: 100%;
+        @include transform(translateY(-50%));
+
+        color: $color-gray-medium;
+        font-family: $font-family-input;
+        font-size: $font-size-normal;
+    }
+}
+
+.view__item_selector_popup {
+    position: absolute; top: 0; left: 0;
+    min-height: 5em;
+
+    background: $color-background-panel;
+    border: 0.1em solid $color-gray-medium;
+    border-radius: 1.5em 1.5em 0 0;
+    box-shadow: 10px 10px 20px #666;
+
+    .search {
+        border-bottom: 0.1em solid $color-gray-medium;
+        margin: 1em;
+
+        input {
+            border: none;
+            outline: none;
+            width: 100%;
+        }
+    }
+
+    .results {
+        position: relative;
+        max-height: 50em;
+        overflow-y: auto;
+        padding-bottom: 1em;
+    }
+}

src/scss/templates/item_selector_element.scss

@@ -0,0 +1,31 @@
+/*
+Crafting Guide - item_selector_element.scss
+
+Copyright (C) 2015 by Redwood Labs
+All rights reserved.
+*/
+
+.view__item_selector_element {
+    height: 3.6em;
+    padding: 0.3em 1em;
+    clear: both;
+
+    transition: background $animate-fast, color $animate-fast;
+
+    &.selected {
+        background: $color-active-hover;
+        color: $color-text-light;
+    }
+
+    img {
+        height: 3.6em; width: 3.6em;
+        float: left;
+        margin-right: 1em;
+    }
+
+    .modName p {
+        color: $color-gray-medium;
+        font-size: $font-size-small;
+        margin-top: 0.2em;
+    }
+}

src/scss/views.scss

@@ -132,6 +132,10 @@ All rights reserved.
                 transition: color $animate-normal;
             }
         }
+
+        .view__item_selector {
+            position: absolute; top: 0; right: 0; height: 3em; width: 35em;
+        }
     }
 }
 
@@ -139,4 +143,4 @@ All rights reserved.
     position: fixed; top: 0; right: 0; bottom: 0; left: 0;
     display: none;
     z-index: $layer-screen;
-}
+}