Update crafting page checks to fade in

Update the crafting page so that the check mark for each step only
appears when hovering over that step, and so that the check also has
some descriptive text helping the user understand what it does.

src/coffee/controllers/step_controller.coffee

@@ -28,7 +28,7 @@ module.exports = class StepController extends BaseController
 
     # Event Methods ################################################################################
 
-    onCompleteButtonClicked: (event)->
+    onCompleteClicked: (event)->
         event.preventDefault()
         @trigger Event.button.complete, this
 
@@ -46,8 +46,9 @@ module.exports = class StepController extends BaseController
             model:       @model.recipe
             modPack:     @modPack
 
-        @$header         = @$('h3')
-        @$completeButton = @$('button.complete')
+        @$header        = @$('h3')
+        @$completePanel = @$('.complete')
+        @$completeImage = @$('.complete img')
         super
 
     onWillChangeModel: (oldModel, newModel)->
@@ -63,9 +64,9 @@ module.exports = class StepController extends BaseController
         @recipeController.multiplier = @model.multiplier
 
         if @canComplete(this)
-            @$completeButton.removeProp 'disabled'
+            @$completePanel.addClass 'disabled'
         else
-            @$completeButton.prop 'disabled', true
+            @$completePanel.removeClass 'disabled'
 
         super
 
@@ -73,4 +74,4 @@ module.exports = class StepController extends BaseController
 
     events: ->
         return _.extend super,
-            'click button.complete': 'onCompleteButtonClicked'
+            'click .complete a': 'onCompleteClicked'

src/jade/templates/step.jade

@@ -9,4 +9,5 @@
     h3
     .view__inventory
     .view__minimal_recipe
-    button.complete
+    .complete
+        a: div: p I already have this

src/scss/main.scss

@@ -62,6 +62,11 @@ $color-brick-light:        #D9D9D9;
 $color-dirt:               #906647;
 $color-ice:                #8AA7E6;
 
+// Opacity Values //////////////////////////////////////////////////////////////////////////////////
+
+$opacity-hidden: 0.000001;
+$opacity-shown:  1.0;
+
 // Style Colors ////////////////////////////////////////////////////////////////////////////////////
 
 $color-active:             #5C8AE6;
@@ -69,6 +74,7 @@ $color-active-hover:       #2E6BE6;
 $color-background:         #AAC9FF;
 $color-background-panel:   #FFFFFF;
 $color-background-toolbar: rgba(255, 255, 255, 0.75);
+$color-checkmark:          #7EDD7B;
 $color-content:            rgba(230, 230, 230, 0.90);
 $color-error:              #F3C2C2;
 $color-error-new:          #CD0000;

src/scss/templates/step.scss

@@ -13,6 +13,17 @@ All rights reserved.
 
     &:first-child {
         border-top: 0;
+        padding-top: 0;
+
+        .complete {
+            top: 0;
+        }
+    }
+
+    &:hover {
+        .complete {
+            opacity: $opacity-shown;
+        }
     }
 
     .view__inventory {
@@ -23,25 +34,50 @@ All rights reserved.
         position: absolute; top: 2em; right: 4.8em;
     }
 
-    button.complete {
-        position: absolute; top: 1em; right: 0; height: 3em; width: 3em;
+    .complete {
+        position: absolute; top: 1em; right: 0;
+        cursor: pointer;
+        opacity: $opacity-hidden;
 
-        background: url("/images/check.png") no-repeat center;
-        border: 0;
-        font-size: $font-size-small;
-        outline: none;
+        transition: opacity $animate-fast;
 
-        &:active {
-            background: url('/images/check_active.png') no-repeat center;
+        a {
+            div {
+                height: 3em;
+
+                background: url('/images/check.png') no-repeat right;
+                background-size: 3em 3em;
+                padding-right: 4em;
+                text-align: right;
+
+                &:hover {
+                    background-image: url('/images/check_hover.png');
+
+                    p {
+                        font-weight: bold;
+                    }
+                }
+
+                p {
+                    position: relative; top: 50%;
+                    @include transform(translateY(-50%));
+                    color: $color-checkmark;
+                    font-size: $font-size-small;
+                }
+            }
         }
 
-        &:disabled {
-            background: url('/images/check_disabled.png') no-repeat center !important;
-            cursor: inherit;
+        &.active {
+            a {
+                background-image: url('/images/check_active.png');
+            }
         }
 
-        &:hover {
-            background: url('/images/check_hover.png') no-repeat center;
+        &.disabled {
+            a {
+                background-image: url('/images/check_disabled.png') !important;
+                cursor: inherit;
+            }
         }
     }
 }