rl-theme/library/scss/style-guide.scss

/******************************************************************
Site Name: 
Author: 

Stylesheet: Style Guide Stylesheet

Creating a style guide is crazy helpful for your clients and
will allow them to see how their site works. We want to try
and automate this as much as possible, but you will probably
have to customize this so it looks ok. Remember, this page 
doesn't need to look as nice as the rest of the site since it's
just a reference page.

THIS PAGE IS NOT RESPONSIVE!
There's really no need, so we skipped it here. You can add it
if you feel it's important, but your client should be ok.

******************************************************************/

/*
We're going to import the basic styles.
If we built the site out correctly :), then
we should have the bulk of the styles applied
to our style guide automatically. You can add
anything we missed on this file.
(i.e. the grid or desktop only styles)
*/

@import "normalize";
@import "mixins";
@import "base";

/********************
STYLE GUIDE LAYOUT
This cleans up the page &
gives it it's simple look.
********************/

body.style-guide {
	background: #eee;
}

#sg-container {
	width: 960px;
	margin: 40px auto;
}	

#sg-content {
	padding: 20px 40px;
	background: #fcfcfc;
	border: 1px solid #ddd;
}

#sg-logo {
	margin: 40px auto;
}

#sg-menu {
	width: 200px;
	float: left;
	font-family: sans-serif;
	font-weight: 700;
	
	a, a:visited {
		text-decoration: none;		
		text-shadow: 0 1px 1px $white;
	}
	
	li ul {
		margin: 0.375em 0 0.5em 1em;
		font-weight: normal;
		font-size: 0.85em;
	}
}

#sg-main {
	width: 640px;
	float: right;
}

.sg-title {
	margin: 2.2em 0 0;
	border-bottom: 1px solid #ccc;
}

.sg-subtitle {
	margin: 1.1em 0 0;
	background: #efefef;
	padding: 0.76em 0.4em;
}

/* 
If you're using icon fonts, you can display
a table with each character so it's easy to
find which icon is mapped to which character.
*/

/* icon table example */
.icon-font-example {
	width: 150px;
	float: right;
	margin-left: 20px;
	border: 1px solid #ccc; 
	padding: 1px;
}

.icon-font-guide,
.icon-font-example {

	th {
		background: #1a90d9;
		padding: 7px 2px;
		text-align: center;
		font-weight: normal;
		color: darken(#1a90d9, 50%);
		text-shadow: 0 1px 1px lighten(#1a90d9, 9%);
		font-family: sans-serif;
		font-size: 12px;
	}
	
	td {
		width: 99px;
		padding: 1px;
		border: 1px solid #ccc;
	}
	
	em,
	p {
		font-family: sans-serif;
		display: block;
		text-align: center;
		font-size: 12px;
		line-height: 22px;
	}
	
	em {
		background: #eee;
	}
	
	span {
		text-align: center;
		display: block;
		font-size: 42px;
		line-height: 72px;
		color: #1a90d9;
	}
	
	p {
		padding: 0;
		color: #fff;
		background: #1a90d9;
	}
}

/* 
This class highlights anything you need
to edit or change before you present the
style guide to your client.
*/
.sg-highlight {
	background: #ebe16f;
	border-bottom: 1px dashed darken(#ebe16f, 30%);
}

/*
These are the examples used in the style guide.
you can add more of change these if you like.
*/

.sg-box,
.sg-gradient-box,
.transition-box {
	padding: 7px 14px;
	margin: 1.5em;
	text-align: center;	
	
	p {
		padding: 0 !important;
	}
}

.sg-box {
	background: #fae389;
	border: 1px solid #d9ad24;
}

/* border-radius example */
.sg-round {
	@include rounded(4px);
}

.sg-round24 {
	@include rounded(24px);
}

/* gradient example */
.sg-gradient-box {
	border: 1px solid #d9ad24;
	@include css-gradient(#fae389,#fad648);
}

/*transition example */
.transition-box {
	border: 1px solid #d9ad24;
	background: #fae389;
	@include css-transition(all, 2s, ease);

	&:hover {
		background: #7dcce3;
		border-color: #1e68b5;
	}
}



/********************
SITE COLOR SCHEME
If you changed these in
the mixins file, you'll
want to change them here.
********************/


/********************
ADDITIONAL STYLE GUIDE STYLES
Here we can add anything we missed.
********************/