Add feedback widget

src/css/main.scss

@@ -48,6 +48,10 @@ $font-size-large:    1.6em;
 $font-size-x-large:  2.0em;
 $font-size-xx-large: 3.0em;
 
+$layer-normal: 0;
+$layer-screen: 5;
+$layer-dialog: 10;
+
 // Common //////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
 body {
@@ -193,6 +197,12 @@ label {
     }
 }
 
+.view__screen {
+    position: fixed; top: 0; right: 0; bottom: 0; left: 0;
+    display: none;
+    z-index: $layer-screen;
+}
+
 // Child Stylesheets ///////////////////////////////////////////////////////////////////////////////////////////////////
 
 @import 'templates/index';

src/css/mixins.scss

@@ -23,4 +23,4 @@ All rights reserved.
     -ms-transform: $transforms;
     -webkit-transform: $transforms;
     transform: $transforms;
-}
+}

src/css/templates/feedback.scss

@@ -0,0 +1,84 @@
+/*
+Crafting Guide - feedback.scss
+
+Copyright (c) 2014 by Redwood Labs
+All rights reserved.
+*/
+
+.view__feedback {
+    position: fixed; top: 50%; left: -30em; width: 25em;
+    @include transform(translateY(-50%));
+
+    background: white;
+    border: 0.2em solid $color-gray-dark;
+    border-left: 0;
+    border-right: 0.1em solid $color-gray-faint;
+    box-size: border-box;
+    box-shadow: 0.3em 0.3em 0.6em 0 $color-gray-shadow;
+    padding: 2em;
+    z-index: $layer-dialog;
+
+    .error {
+        background: white;
+        clear: both;
+        display: none;
+        margin-top: 4em;
+        text-align: center;
+
+        p {
+            color: $color-error-new;
+            font-family: $font-family-normal;
+            font-size: $font-size-small;
+        }
+    }
+
+    .label {
+        position: absolute; top: -0.2em; right: -4.5em; bottom:-0.2em; width: 4.5em;
+
+        background: $color-gray-faint;
+        border: 0.2em solid $color-gray-dark;
+        border-bottom-right-radius: 1.0em;
+        border-left: 0;
+        border-top-right-radius: 1.0em;
+        box-shadow: 0.3em 0.3em 0.6em 0 $color-gray-shadow;
+        cursor: pointer;
+        text-align: center;
+        z-index: $layer-dialog - 1;
+
+        img {
+            position: absolute; top: 0.5em; left: 50%; height: 3.6em; width: 3.6em;
+            @include transform(translateX(-50%));
+        }
+
+        p {
+            position: absolute; top: 50%; left: 50%;
+            @include transform(translateX(-50%) rotate(-90deg));
+
+            font-family: PressStart;
+            font-size: $font-size-large;
+        }
+    }
+
+    button[name="send"] {
+        float: right;
+        margin-top: 0.5em;
+    }
+
+    input {
+        position: relative; width: 100%;
+
+        border: 1px solid $color-gray-light;
+        box-sizing: border-box;
+        margin-bottom: 1em;
+        padding: 0.2em;
+    }
+
+    textarea {
+        border: 1px solid $color-gray-light;
+        position: relative; height: 11.5em; width: 100%;
+
+        font-family: $font-family-input;
+        font-size: $font-size-normal;
+        resize: vertical;
+    }
+}

src/css/templates/index.scss

@@ -7,6 +7,7 @@ All rights reserved.
 
 @import 'crafting_grid';
 @import 'crafting_table';
+@import 'feedback';
 @import 'inventory';
 @import 'item_page';
 @import 'mod_pack';