90 lines
2.5 KiB
SCSS
90 lines
2.5 KiB
SCSS
/*
|
|
Crafting Table - crafting_table.scss
|
|
|
|
Copyright (c) 2014-2015 by Redwood Labs
|
|
All rights reserved.
|
|
*/
|
|
|
|
.view__crafting_table {
|
|
min-height: 14em;
|
|
width: 100%;
|
|
|
|
|
|
.panel {
|
|
position: absolute; top: 5em; right: 2em; bottom: 0; left: 2em;
|
|
background: $color-background-panel;
|
|
|
|
.prev {
|
|
background: url('/images/arrow-left-disabled.png');
|
|
position: absolute; top: 50%; left: 1em; height: 8em; width: 4em;
|
|
@include transform(translateY(-50%));
|
|
|
|
&.enabled {
|
|
background: url('/images/arrow-left.png');
|
|
cursor: pointer;
|
|
|
|
&:hover { background: url('/images/arrow-left-hover.png'); }
|
|
}
|
|
}
|
|
|
|
.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; bottom: 0;
|
|
color: black;
|
|
font-family: PressStart;
|
|
font-size: $font-size-large;
|
|
}
|
|
|
|
.quantity + .quantity {
|
|
color: white;
|
|
right: 0.2em; bottom: 0.2em;
|
|
z-index: 1
|
|
}
|
|
}
|
|
|
|
.next {
|
|
background: url('/images/arrow-right-disabled.png');
|
|
position: absolute; top: 50%; right: 1em; height: 8em; width: 4em;
|
|
@include transform(translateY(-50%));
|
|
|
|
&.enabled {
|
|
background: url('/images/arrow-right.png');
|
|
cursor: pointer;
|
|
|
|
&:hover { background: url('/images/arrow-right-hover.png'); }
|
|
}
|
|
}
|
|
}
|
|
}
|