107 lines
2.0 KiB
SCSS
107 lines
2.0 KiB
SCSS
//
|
|
// Crafting Guide - step.scss
|
|
//
|
|
// Copyright © 2014-2017 by Redwood Labs
|
|
// All rights reserved.
|
|
//
|
|
|
|
.view__step {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
&:not(:first-child) {
|
|
border-top: 1px solid $color-gray-light;
|
|
margin-top: $size-margin-large;
|
|
padding-top: $size-margin-small;
|
|
}
|
|
|
|
&:hover {
|
|
& > .buttons {
|
|
opacity: 1.0;
|
|
}
|
|
}
|
|
|
|
h3 {
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
.main_content {
|
|
display: flex;
|
|
|
|
.view__inventory {
|
|
flex: 50%;
|
|
margin-left: $size-margin-large;
|
|
|
|
.buttons {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.view__recipe {
|
|
flex: 50%;
|
|
}
|
|
}
|
|
|
|
.buttons {
|
|
margin-top: $size-margin-large;
|
|
|
|
opacity: 0;
|
|
|
|
display: flex;
|
|
|
|
.button {
|
|
flex: 1 1 50%;
|
|
|
|
&:not(:first-child) {
|
|
margin-left: $size-margin-medium;
|
|
}
|
|
}
|
|
|
|
a {
|
|
border: 0;
|
|
|
|
.bezel {
|
|
border-top : 3px solid $color-button-highlight;
|
|
border-left : 3px solid $color-button-highlight;
|
|
border-bottom : 6px solid $color-button-shadow;
|
|
border-right : 3px solid $color-button-shadow;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.complete {
|
|
opacity: 0.25;
|
|
|
|
h3 {
|
|
text-decoration: line-through;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include screen-size(mobile) {
|
|
.view__step {
|
|
.main_content {
|
|
flex-direction: column-reverse;
|
|
|
|
.view__inventory {
|
|
flex: 0 0 auto;
|
|
margin: $size-margin-large $size-margin-large 0 $size-margin-large;
|
|
}
|
|
|
|
.view__recipe {
|
|
flex: 0 0 auto;
|
|
}
|
|
}
|
|
|
|
.buttons {
|
|
opacity: 1.0;
|
|
|
|
.button {
|
|
.full {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|