Andrew Miner
c78828426f
Change the inventory view to make editing of quantities happen on the individual rows instead of having to get the quantity right before adding the item.
95 lines
2.1 KiB
SCSS
95 lines
2.1 KiB
SCSS
/*
|
|
Crafting Guide - stack.scss
|
|
|
|
Copyright (c) 2014-2015 by Redwood Labs
|
|
All rights reserved.
|
|
*/
|
|
|
|
.view__stack {
|
|
font-family: $font-family-normal;
|
|
|
|
td {
|
|
padding: 0.2em 0;
|
|
}
|
|
|
|
td.quantity {
|
|
position: relative;
|
|
width: 4em;
|
|
|
|
input {
|
|
position: absolute; top: 50%; height: $font-size-small; width: 100%;
|
|
@include transform(translateY(-50%));
|
|
|
|
border-radius: 0.75em;
|
|
background: $color-ice;
|
|
color: $color-background-panel;
|
|
font-family: $font-family-normal;
|
|
font-size: $font-size-normal;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
|
|
&.editable {
|
|
&:focus {
|
|
background: $color-background-panel;
|
|
color: $color-text;
|
|
font-family: $font-family-input;
|
|
font-weight: normal;
|
|
outline: none;
|
|
}
|
|
|
|
&:hover {
|
|
background: $color-background-panel;
|
|
color: $color-text;
|
|
font-family: $font-family-input;
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
td.icon {
|
|
width: 4.6em;
|
|
padding: 0.2em 0.5em;
|
|
|
|
img {
|
|
width: 100%; height: auto;
|
|
max-height: 4.8em;
|
|
@include pixel-image;
|
|
}
|
|
}
|
|
|
|
td.name a {
|
|
color: $color-text;
|
|
display: inline;
|
|
font-size: $font-size-normal;
|
|
text-decoration: none;
|
|
|
|
&:hover {
|
|
color: $color-active-hover;
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
td.action {
|
|
text-align: right;
|
|
}
|
|
|
|
button.remove {
|
|
opacity: 0;
|
|
position: relative; width: 1.8em; height: 1.8em;
|
|
background: url('/images/remove.png') no-repeat center;
|
|
border: 0;
|
|
outline: none;
|
|
|
|
&:hover {
|
|
background: url('/images/remove-hover.png') no-repeat center;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
button.remove {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|