Refactor SCSS into separate files
This commit is contained in:
Andrew Miner
@@ -0,0 +1,23 @@
|
||||
/*
|
||||
Crafting Guide - classes.scss
|
||||
|
||||
Copyright (C) 2015 by Redwood Labs
|
||||
All rights reserved.
|
||||
*/
|
||||
|
||||
.centered {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.content {
|
||||
background: $color-content;
|
||||
box-shadow: 10px 10px 20px #666;
|
||||
margin: 2em auto;
|
||||
max-width: 96em;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.error { background: $color-error; }
|
||||
|
||||
.error-new { background: $color-error-new; }
|
||||
+4
-167
@@ -70,173 +70,10 @@ $layer-normal: 0;
|
||||
$layer-screen: 5;
|
||||
$layer-dialog: 10;
|
||||
|
||||
// Common //////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
body {
|
||||
background: $color-background url('/images/ice.png');
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
button {
|
||||
background: $color-gray-faint;
|
||||
border: 0.1em solid $color-gray-medium;
|
||||
border-radius: 1em;
|
||||
color: $color-active;
|
||||
cursor: pointer;
|
||||
font-size: $font-size-normal;
|
||||
font-weight: bold;
|
||||
padding: 0.1em 1em;
|
||||
|
||||
&:hover {
|
||||
background: white;
|
||||
color: $color-active-hover;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-bottom: 1em;
|
||||
|
||||
* { display: inline; }
|
||||
|
||||
img {
|
||||
position: relative; height: 10em; width: 10em;
|
||||
margin-right: 1em;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: $font-family-header;
|
||||
font-size: $font-size-xx-large;
|
||||
position: relative; top: -0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 1em;
|
||||
|
||||
* { display: inline; }
|
||||
|
||||
img {
|
||||
position: relative; height: 4em; width: 4em;
|
||||
margin-right: 1em;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: $font-family-header;
|
||||
font-size: $font-size-x-large;
|
||||
position: relative; top: -0.25em;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-family: $font-family-normal;
|
||||
font-weight: bold;
|
||||
|
||||
p { font-size: $font-size-normal; }
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: $font-family-normal;
|
||||
font-size: $font-size-normal;
|
||||
}
|
||||
|
||||
input {
|
||||
font-family: $font-family-input;
|
||||
font-size: $font-size-normal;
|
||||
}
|
||||
|
||||
label {
|
||||
font-family: $font-family-normal;
|
||||
font-size: $font-size-normal;
|
||||
}
|
||||
|
||||
.centered {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.content {
|
||||
background: $color-content;
|
||||
box-shadow: 10px 10px 20px #666;
|
||||
margin: 2em auto;
|
||||
max-width: 96em;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.error { background: $color-error; }
|
||||
|
||||
.error-new { background: $color-error-new; }
|
||||
|
||||
// Views ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
.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%;
|
||||
float: left;
|
||||
padding: 2em;
|
||||
|
||||
p {
|
||||
font-family: sans-serif;
|
||||
font-size: $font-size-small;
|
||||
padding-bottom: 1.0em;
|
||||
|
||||
&:last-child {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
padding-bottom: 1.0em;
|
||||
|
||||
p {
|
||||
font-family: $font-family-header;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.divider.bottom {
|
||||
background: $color-bedrock url('/images/bedrock.png');
|
||||
}
|
||||
}
|
||||
|
||||
.view__header {
|
||||
background: $color-brick-light url('/images/stone_brick_light.png');
|
||||
position: relative; height: 10em;
|
||||
margin-top: 5em;
|
||||
|
||||
h1 { position: relative; top: -3em; left: -3em; }
|
||||
|
||||
.divider {
|
||||
background: $color-brick-dark url('/images/stone_brick.png');
|
||||
position: absolute; bottom: 0; height: 3.2em; width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.view__screen {
|
||||
position: fixed; top: 0; right: 0; bottom: 0; left: 0;
|
||||
display: none;
|
||||
z-index: $layer-screen;
|
||||
}
|
||||
|
||||
// Child Stylesheets ///////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
@import 'classes';
|
||||
@import 'tags';
|
||||
@import 'views';
|
||||
|
||||
@import 'templates/index';
|
||||
|
||||
@@ -0,0 +1,85 @@
|
||||
/*
|
||||
Crafting Guide - tags.scss
|
||||
|
||||
Copyright (C) 2015 by Redwood Labs
|
||||
All rights reserved.
|
||||
*/
|
||||
|
||||
body {
|
||||
background: $color-background url('/images/ice.png');
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
button {
|
||||
background: $color-gray-faint;
|
||||
border: 0.1em solid $color-gray-medium;
|
||||
border-radius: 1em;
|
||||
color: $color-active;
|
||||
cursor: pointer;
|
||||
font-size: $font-size-normal;
|
||||
font-weight: bold;
|
||||
padding: 0.1em 1em;
|
||||
|
||||
&:hover {
|
||||
background: white;
|
||||
color: $color-active-hover;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-bottom: 1em;
|
||||
|
||||
* { display: inline; }
|
||||
|
||||
img {
|
||||
position: relative; height: 10em; width: 10em;
|
||||
margin-right: 1em;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: $font-family-header;
|
||||
font-size: $font-size-xx-large;
|
||||
position: relative; top: -0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 1em;
|
||||
|
||||
* { display: inline; }
|
||||
|
||||
img {
|
||||
position: relative; height: 4em; width: 4em;
|
||||
margin-right: 1em;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: $font-family-header;
|
||||
font-size: $font-size-x-large;
|
||||
position: relative; top: -0.25em;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-family: $font-family-normal;
|
||||
font-weight: bold;
|
||||
|
||||
p { font-size: $font-size-normal; }
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: $font-family-normal;
|
||||
font-size: $font-size-normal;
|
||||
}
|
||||
|
||||
input {
|
||||
font-family: $font-family-input;
|
||||
font-size: $font-size-normal;
|
||||
}
|
||||
|
||||
label {
|
||||
font-family: $font-family-normal;
|
||||
font-size: $font-size-normal;
|
||||
}
|
||||
@@ -0,0 +1,73 @@
|
||||
/*
|
||||
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%;
|
||||
float: left;
|
||||
padding: 2em;
|
||||
|
||||
p {
|
||||
font-family: sans-serif;
|
||||
font-size: $font-size-small;
|
||||
padding-bottom: 1.0em;
|
||||
|
||||
&:last-child {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
padding-bottom: 1.0em;
|
||||
|
||||
p {
|
||||
font-family: $font-family-header;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.divider.bottom {
|
||||
background: $color-bedrock url('/images/bedrock.png');
|
||||
}
|
||||
}
|
||||
|
||||
.view__header {
|
||||
background: $color-brick-light url('/images/stone_brick_light.png');
|
||||
position: relative; height: 10em;
|
||||
margin-top: 5em;
|
||||
|
||||
h1 { position: relative; top: -3em; left: -3em; }
|
||||
|
||||
.divider {
|
||||
background: $color-brick-dark url('/images/stone_brick.png');
|
||||
position: absolute; bottom: 0; height: 3.2em; width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.view__screen {
|
||||
position: fixed; top: 0; right: 0; bottom: 0; left: 0;
|
||||
display: none;
|
||||
z-index: $layer-screen;
|
||||
}
|
||||
Reference in New Issue
Block a user