Factor out the ReceipeController

This commit is contained in:
Andrew Miner
2015-01-18 16:37:23 -08:00
parent 0811a868af
commit ecc839cca8
12 changed files with 208 additions and 164 deletions
+10 -39
View File
@@ -14,45 +14,11 @@ All rights reserved.
position: absolute; top: 5em; right: 2em; bottom: 0; left: 2em;
background: $color-background-panel;
.input {
position: absolute; top: 50%; left: 33%;
@include transform(translate(-50%, -50%));
.tool {
position: absolute; right: 0; bottom: -2em; left: 0; height: 1.5em;
text-align: center;
p { font-weight: bold; }
}
}
.output {
position: absolute; top: 50%; right: 16.5%; height: 5.3em; width: 5.3em;
@include transform(translate(-50%, -50%));
background: $color-gray-faint;
border: 0.2em solid $color-gray-medium;
padding: 0.1em;
a {
position: absolute; top: 50%; left: 50%; height: 4.8em; width: 4.8em;
@include transform(translate(-50%, -50%));
}
.multiplier {
position: absolute; bottom: -3em; left: 0; right: 0; height: 1.5em;
font-family: PressStart;
font-size: $font-size-large;
text-align: center;
}
.quantity {
position: absolute; right: 0.1em; bottom: 0.1em;
color: white;
font-family: PressStart;
font-size: $font-size-large;
text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
}
.multiplier {
position: absolute; bottom: -3em; left: 0; right: 0; height: 1.5em;
font-family: PressStart;
font-size: $font-size-large;
text-align: center;
}
.next {
@@ -68,6 +34,11 @@ All rights reserved.
}
}
.view__recipe {
position: absolute; top: 50%; left: 50%;
@include transform(translate(-50%, -50%));
}
.prev {
background: url('/images/arrow-left-disabled.png');
position: absolute; top: 50%; left: 1em; height: 8em; width: 4em;
+1
View File
@@ -11,4 +11,5 @@ All rights reserved.
@import 'inventory';
@import 'item_page';
@import 'mod_pack';
@import 'recipe';
@import 'stack';
+51
View File
@@ -0,0 +1,51 @@
/*
Crafting Table - recipe.scss
Copyright (c) 2014-2015 by Redwood Labs
All rights reserved.
*/
.view__recipe {
position: relative; height: 20em; width: 26em;
.input {
position: absolute; top: 50%; left: 0;
@include transform(translateY(-50%));
.tool {
position: absolute; right: 0; bottom: -2em; left: 0; height: 1.5em;
text-align: center;
p { font-weight: bold; }
}
}
.output {
position: absolute; top: 50%; right: 0; height: 5.3em; width: 5.3em;
@include transform(translateY(-50%));
background: $color-gray-faint;
border: 0.2em solid $color-gray-medium;
padding: 0.1em;
a {
position: absolute; top: 50%; left: 50%; height: 4.8em; width: 4.8em;
@include transform(translate(-50%, -50%));
}
.multiplier {
position: absolute; bottom: -3em; left: 0; right: 0; height: 1.5em;
font-family: PressStart;
font-size: $font-size-large;
text-align: center;
}
.quantity {
position: absolute; right: 0.1em; bottom: 0.1em;
color: white;
font-family: PressStart;
font-size: $font-size-large;
text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
}
}
}