Andrew Miner
5b014c9921
This introduces the new crafting page design featuring a new vertical layout and list display of all crafting steps. It also makes it easy to move items between the have/need sections and even from each step into your inventory (causing a new crafting plan to be created which doesn't plan on making that item). * Convert the `BaseController.hide` and `show` methods to be much more robust in the use of CSS transitions (using a timer in case a transition doesn't actually fire). * Change `hide`/`show` to use events for communicating animation state instead of callbacks * Convert several controllers to fire events for communication with parent controllers instead of accepting functions. * Rewrite the `CraftPageController`, `CraftPage` model and related Jade/SCSS files to implement the new design. * Alter the `InventoryController` and `StackController` to allow a variety of action buttons, and for the events from those action buttons to bubble up to parent controllers * Add the `StepController` and its related model, template, and style sheet as part of the new craft page. * Tweak the `ItemSelectorController` and related files to allow for a variety of styles for the launcher button
152 lines
3.9 KiB
SCSS
152 lines
3.9 KiB
SCSS
/*
|
|
Crafting Guide - stack.scss
|
|
|
|
Copyright (c) 2014-2015 by Redwood Labs
|
|
All rights reserved.
|
|
*/
|
|
|
|
.view__stack {
|
|
font-family: $font-family-normal;
|
|
display: table-row;
|
|
|
|
& > div {
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.quantity {
|
|
.bubble {
|
|
border: 0.1em solid $color-gray-light;
|
|
border-radius: 1.5em;
|
|
background: $color-ice;
|
|
|
|
input {
|
|
width: 3em;
|
|
background: none;
|
|
border: none;
|
|
color: $color-background-panel;
|
|
font-family: $font-family-normal;
|
|
font-size: $font-size-normal;
|
|
font-weight: bold;
|
|
line-height: $font-size-normal;
|
|
outline: none;
|
|
text-align: center;
|
|
}
|
|
|
|
&.editable:hover, &.editing {
|
|
background: $color-background-panel;
|
|
|
|
input {
|
|
color: $color-text;
|
|
font-family: $font-family-input;
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.icon {
|
|
img {
|
|
width: 100%; height: auto;
|
|
max-height: 4.8em;
|
|
@include pixel-image;
|
|
}
|
|
}
|
|
|
|
.name {
|
|
a {
|
|
color: $color-text;
|
|
font-size: $font-size-normal;
|
|
text-decoration: none;
|
|
|
|
&:hover {
|
|
color: $color-active-hover;
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
}
|
|
|
|
.action {
|
|
text-align: right;
|
|
|
|
button {
|
|
position: relative; width: 3.0em; height: 3.0em;
|
|
display: inline-block;
|
|
|
|
border: 0;
|
|
font-size: $font-size-small;
|
|
margin: 0;
|
|
outline: none;
|
|
padding: 0;
|
|
|
|
&.check {
|
|
background: url('/images/check.png') no-repeat center;
|
|
|
|
&:active {
|
|
background: url('/images/check_active.png') no-repeat center;
|
|
}
|
|
|
|
&:disabled {
|
|
background: url('/images/check_disabled.png') no-repeat center !important;
|
|
cursor: inherit;
|
|
}
|
|
|
|
&:hover {
|
|
background: url('/images/check_hover.png') no-repeat center;
|
|
}
|
|
}
|
|
|
|
&.down {
|
|
background: url('/images/down.png') no-repeat center;
|
|
|
|
&:active {
|
|
background: url('/images/down_active.png') no-repeat center;
|
|
}
|
|
|
|
&:disabled {
|
|
background: url('/images/down_disabled.png') no-repeat center !important;
|
|
cursor: inherit;
|
|
}
|
|
|
|
&:hover {
|
|
background: url('/images/down_hover.png') no-repeat center;
|
|
}
|
|
}
|
|
|
|
&.remove {
|
|
background: url('/images/remove.png') no-repeat center;
|
|
|
|
&:active {
|
|
background: url('/images/remove_active.png') no-repeat center;
|
|
}
|
|
|
|
&:disabled {
|
|
background: url('/images/remove_disabled.png') no-repeat center !important;
|
|
cursor: inherit;
|
|
}
|
|
|
|
&:hover {
|
|
background: url('/images/remove_hover.png') no-repeat center;
|
|
}
|
|
}
|
|
|
|
&.up {
|
|
background: url('/images/up.png') no-repeat center;
|
|
|
|
&:active {
|
|
background: url('/images/up_active.png') no-repeat center;
|
|
}
|
|
|
|
&:disabled {
|
|
background: url('/images/up_disabled.png') no-repeat center !important;
|
|
cursor: inherit;
|
|
}
|
|
|
|
&:hover {
|
|
background: url('/images/up_hover.png') no-repeat center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|