121 lines
2.9 KiB
SCSS
121 lines
2.9 KiB
SCSS
/*
|
|
Crafting Guide - views.scss
|
|
|
|
Copyright (c) 2015 by Redwood Labs
|
|
All rights reserved.
|
|
*/
|
|
|
|
.view__footer {
|
|
background: $color-footer;
|
|
color: $color-footer-text;
|
|
margin-top: 2em;
|
|
|
|
a {
|
|
color: $color-footer-text;
|
|
}
|
|
|
|
.divider {
|
|
position: relative; height: 3.2em; width: 100%;
|
|
clear: both;
|
|
}
|
|
|
|
.divider.top {
|
|
background: $color-dirt url('/images/grass_side.png');
|
|
}
|
|
|
|
.left, .center, .right {
|
|
position: relative; width: 33%; height: 23em;
|
|
float: left;
|
|
padding: 2em;
|
|
|
|
.action {
|
|
position: absolute; bottom: 3em; left: 50%;
|
|
@include transform(translateX(-50%));
|
|
}
|
|
}
|
|
|
|
.divider.bottom {
|
|
background: $color-bedrock url('/images/bedrock.png');
|
|
}
|
|
}
|
|
|
|
.view__header {
|
|
background: $color-gray-light;
|
|
position: relative; height: 13em;
|
|
margin-top: 3.2em;
|
|
|
|
h1 {
|
|
position: relative; top: -1.6em; left: -1.6em;
|
|
|
|
p {
|
|
position: relative; top: 0.2em;
|
|
}
|
|
}
|
|
|
|
.divider {
|
|
background: $color-brick-dark url('/images/stone_brick.png');
|
|
position: absolute; bottom: 5em; height: 3.2em; width: 100%;
|
|
}
|
|
|
|
.navBar {
|
|
position: absolute; right: 2em; bottom: 1em; left: 2em; height: 3em;
|
|
|
|
a {
|
|
position: relative; height: 3em; width: 15em;
|
|
background: $color-gray-faint;
|
|
border: 0.1em solid $color-gray-medium;
|
|
border-radius: 0 1.5em 1.5em 0;
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
margin-left: -1.5em;
|
|
|
|
transition: background $animate-normal;
|
|
|
|
&:first-child {
|
|
border-radius: 1.5em;
|
|
margin-left: 0;
|
|
}
|
|
|
|
&:hover {
|
|
background: $color-background-panel;
|
|
}
|
|
|
|
&.selected {
|
|
background: $color-active;
|
|
|
|
p {
|
|
color: $color-background-panel;
|
|
}
|
|
}
|
|
|
|
.dot {
|
|
position: absolute; top: 50%; right: 1em; height: 1.5em; width: 1.5em;
|
|
@include transform(translateY(-50%));
|
|
|
|
background: $color-active;
|
|
border-radius: 0.75em;
|
|
opacity: 0;
|
|
}
|
|
|
|
p {
|
|
position: absolute; top: 50%; left: 50%; width: 100%;
|
|
@include transform(translateX(-50%) translateY(-50%));
|
|
|
|
color: $color-active;
|
|
font-family: $font-family-normal;
|
|
font-size: $font-size-normal;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
|
|
transition: color $animate-normal;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.view__screen {
|
|
position: fixed; top: 0; right: 0; bottom: 0; left: 0;
|
|
display: none;
|
|
z-index: $layer-screen;
|
|
} |