stipe 0.0.2

data/stylesheets/stipe/toadstool/_design.scss

@@ -0,0 +1,52 @@
+
+
+.main_content {
+	@include full_width_block(12);
+	
+	article {
+		@include grid(12.25, alphaomega, $grid_align: center, $grid_uom: em);
+		
+		@media #{$tablet_portrait} {
+		 @include grid(12.25, alphaomega, $grid_align: center);
+		}
+		
+		@media #{$mobile} {
+		 @include grid(12.25, alphaomega, $grid_align: center);
+		}
+		
+		header {
+			@include grid(12);
+			@media #{$mobile} {
+			 @include grid(4, $grid_context: 4);
+			}
+		}
+		
+		section {
+			clear: both;
+			&:nth-of-type(1n+2) {
+				border-top: 1px dotted;
+				padding-top: em(20);
+			}
+		}
+	}
+	.element_example {
+		margin-bottom: em(20);
+		float: left;
+		background-image: url(data:image/gif;base64,R0lGODlhUAABAIAAAP/////l5SwAAAAAUAABAAACC4SPocvtD6NsqIICADs=);
+	}
+}
+
+.hidden {
+	display: none;
+}
+
+.mobi_hidden {
+	@media #{$mobile} {
+		display: none;
+	}
+}
+
+code {
+	padding: em(2) em(5);
+	background: $charlie_color_hotel;
+}

data/stylesheets/stipe/toadstool/_forms.scss

@@ -0,0 +1,19 @@
+// Styled drop down menues
+[class*="toadstool"] {
+	select {
+		border: 1px solid #555;
+		padding: 0.5em;
+		line-height: 1.2em;
+		padding: 0.5em 1em 0.5em 0.75em;
+		margin-top: em(3);
+		@include border_radius(0.5em);
+		.flexbox & {
+			-webkit-appearance: none;
+			-moz-appearance: none; // if this ever works, Moz bug for over a year
+			background: #fff url("data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%0C%80%00%00%00%40%08%02%00%00%00W%AEz%EF%00%00%00%19tEXtSoftware%00Adobe%20ImageReadyq%C9e%3C%00%00%04%E5IDATx%DA%EC%DD%3DN%E3Z%18%06%E0%B1oD%82%A8%E8(%A8%D2Q%D2%D0%40%83%C4%12%D8%01%3Db%09P%81%A0%40%A2%60%05%D9%05%BB%A0%04%09!B%3A%9A%10%07%F2g%E7%22%90f(%98%E09%23Y7%E7%3EOi%1F%1FK_%FD%EA%FD%92%E9t%FA%03%00%00%00%00%00%00%00%00%80%3F%97%1A%01%00%00%00%00%00%00%00%00%40%98%9A%06%2C%00%00%00%00%00%00%00%00%20%0E%D5%A7%A14%60%01%00%00%00%00%00%00%00%00%04%D2%80%05%00%00%00%00%00%00%00%00DB%03%16%00%00%00%00%00%00%00%00%C0%DC%D0%80%05%00%00%00%00%00%00%00%00D%A2(%8A%8A%FF(%80%05%00%00%00%00%00%00%00%00D%C2%0AB%00%00%00%00%00%00%00%00%80%B9%A1%01%0B%00%00%00%00%00%00%00%00%88%84%15%84%00%00%00%00%00%00%00%00%00%81%AC%20%04%00%00%00%00%00%00%00%00%98%1B%1A%B0%00%00%00%00%00%00%00%00%80HXA%08%00%00%00%00%00%00%00%00%10%A8%FA4%94%00%16%00%00%00%00%00%00%00%00%10%09%0DX%00%00%00%00%00%00%00%00%00%81%AAOC%A5%86%0E%00%00%00%00%00%00%00%00%10F%03%16%00%00%00%00%00%00%00%00%10%09%2B%08%01%00%00%00%00%00%00%00%00%02U%9F%86%12%C0%02%00%00%00%00%00%00%00%00%22!%80%05%00%00%00%00%00%00%00%00%10%C8%0AB%00%00%00%00%00%00%00%00%80%40%1A%B0%00%00%00%00%00%00%00%00%00%02i%C0%02%00%00%00%00%00%00%00%00%08%A4%01%0B%00%00%00%00%00%00%00%00%20%90%06%2C%00%00%00%00%00%00%00%00%80%40%02X%00%00%00%00%00%00%00%00%00%81%AC%20%04%00%00%00%00%00%00%00%00%08%24%80%05%00%00%00%00%00%00%00%00%10%C8%0AB%00%00%00%00%00%00%00%00%80%40%1A%B0%00%00%00%00%00%00%00%00%00%02i%C0%02%00%00%00%00%00%00%00%00%084%3B%0Du%7B%7B%7Bzz%3A%18%0C%CA_%D8h4%F6%F6%F6677%F3%3C%FF%F2%40%D2%E9t%CC%1D%00%00%00%00%00%00%00%00%88%40%96e3%DE%26I2%18%0C%8E%8F%8F%EF%EE%EE%CA%DC%B6%BC%BC%7Cxx%D8l6_%5E%5EF%A3%D1%97%E9%AE%D4%D0%01%00%00%00%00%00%00%00%80%FF%83%E9t%BA%B8%B8xvv%B6%B3%B3%F3%ED%E1%F5%F5%F5V%AB%B5%B6%B66%99L~W%7F%F5%26y%7C%7C4Y%00%00%00%00%00%00%00%00%20%02%BD%5E%EF%DB3i%9A%D6%EB%F5%AB%AB%ABV%AB%F5%BBu%84%BB%BB%BB%FB%FB%FB%FD~%3F%CB%B2%B73%B3%02X%EDv%DB%DC%01%00%00%00%00%00%00%00%80%08%94%09%60%FDx%DFE%B8%B0%B0%D0n%B7%2F..%3A%9D%CE%E7W%8DF%E3%E8%E8hcc%23%7B7%1C%0E%BF%DC%3C%F8%EB%AA%87%87%07s%07%00%00%00%00%00%00%00%00%22%F0%FC%FC%5C%F2d%9A%A6%B5Zm2%99%9C%9F%9F___%7F%3C%5C%5D%5D%3D99YYY%E9%F5z%FD~%7F%3C%1E%17E1%FB%9E%7F%0E%0E%0E%CC%1D%00%00%00%00%00%00%00%00%88%C0p8%2Cyr%3A%9D%E6y%9E%A6%E9%F6%F6%F6h4%BA%B9%B9%D9%DA%DA%BA%BC%BC%AC%D5j%DDn7%CB%B2%B7%87%B3%BB%AF%3E%24%F7%F7%F7%E6%0E%00%00%00%00%00%00%00%00D%A0%7C%03%D6Oi%9A%D6%EB%F5n%B7%DBl6%C7%E3q%96e%AF%AF%AF%DF%16_%FDT%2B%93%D2%02%00%00%00%00%00%00%00%00%F8%EF%2B%1F%9C%FA%FC%C9%9B%A5%A5%A5%A7%A7%A7%3C%CF%CB%AC%1D%FCL%00%0B%00%00%00%00%00%00%00%00%88DX%1A*%7F%97%24I%C0%E7%02X%00%00%00%00%00%00%00%00%40%24%FE%26%0D%15%F6%AD%00%16%00%00%00%00%00%00%00%00%10%89%80%15%84%7FI%00%0B%00%00%00%00%00%00%00%00%88D%F5i(%01%2C%00%00%00%00%00%00%00%00%20%12%1A%B0%00%00%00%00%00%00%00%00%00%02i%C0%02%00%00%00%00%00%00%00%00%08%24%80%05%00%00%00%00%00%00%00%00%10%C8%0AB%00%00%00%00%00%00%00%00%80%40%D5%A7%A1RC%07%00%00%00%00%00%00%00%00%08%A3%01%0B%00%00%00%00%00%00%00%00%88%84%15%84%00%00%00%00%00%00%00%00%00%81%AAOC%09%60%01%00%00%00%00%00%00%00%00%91%10%C0%02%00%00%00%00%00%00%00%00%08T%FD%0A%C2%D4%D0%01%00%00%00%00%00%00%00%00%C2h%C0%02%00%00%00%00%00%00%00%00%22a%05!%00%00%00%00%00%00%00%00%40%A0%EA%D3PV%10%02%00%00%00%00%00%00%00%00%04%D2%80%05%00%00%00%00%00%00%00%00D%A2(%8A%8A%FF(%80%05%00%00%00%00%00%00%00%00D%C2%0AB%00%00%00%00%00%00%00%00%80%B9%A1%01%0B%00%00%00%00%00%00%00%00%88%84%06%2C%00%00%00%00%00%00%00%00%80%B9%A1%01%0B%00%00%00%00%00%00%00%00%88DQ%14%15%FF%F1_%01%06%00md%E2%BF%C9%C3%19%DA%00%00%00%00IEND%AEB%60%82") no-repeat right center;
+			background-size: 1600px 32px;
+		}
+	}
+}
+
+

data/stylesheets/stipe/toadstool/_grids.scss

@@ -0,0 +1,93 @@
+
+.col_4_grid, .col_10_grid {
+	display: none;
+}
+
+@media #{$tablet_portrait} {
+	.col_10_grid {
+		display: block;
+	}
+	.col_12_grid {
+		display: none;
+	}
+}
+
+@media #{$mobile} {
+	.col_4_grid {
+		display: block;
+	}
+	.col_12_grid, .col_10_grid {
+		display: none;
+	}
+}
+
+
+
+// grid ----------------------
+.grid-1 {
+	@extend %grid_1;
+	@extend %grid_display;
+}
+
+.grid-2 {
+	@extend %grid_2;
+	@extend %grid_display;
+}
+
+.grid-3 {
+	@extend %grid_3;
+	@extend %grid_display;
+}
+
+.grid-4 {
+	@extend %grid_4;
+	@extend %grid_display;
+}
+
+.grid-5 {
+	@extend %grid_5;
+	@extend %grid_display;
+}
+
+.grid-6 {
+	@extend %grid_6;
+	@extend %grid_display;
+}
+
+.grid-7 {
+	@extend %grid_7;
+	@extend %grid_display;
+}
+
+.grid-8 {
+	@extend %grid_8;
+	@extend %grid_display;
+}
+
+.grid-9 {
+	@extend %grid_9;
+	@extend %grid_display;
+}
+
+.grid-10 {
+	@extend %grid_10;
+	@extend %grid_display;
+}
+
+.grid-11 {
+	@extend %grid_11;
+	@extend %grid_display;
+}
+
+.grid-12 {
+	@extend %grid_12;
+	@extend %grid_display;
+}
+
+.grid-full {
+	@include full_width_block(12, $main_grid_align: left);
+}
+
+.grid-full_center {
+	@include full_width_block(12);
+}

data/stylesheets/stipe/toadstool/_modules.scss

@@ -0,0 +1,3 @@
+@import "modules/header";
+@import "modules/footer";
+@import "modules/main_nav";

data/stylesheets/stipe/toadstool/_typography.scss

@@ -0,0 +1,109 @@
+// Twitter's 'Font-Awesome' is installed in Toadstool
+// see http://goo.gl/4JkBd for list of icon options
+// Stipe has all icon classes loaded as silent classes, to activate use the following example
+// -----------------------------------------------------------------------
+// .icon-glass {
+// 	@extend %icon-glass;
+// }
+
+
+
+// Zocial's icon font is installed in Toadstool
+// see http://goo.gl/t92t5 for list of icon options
+// Stipe has all icon classes loaded as silent classes, to activate use the following example
+// -----------------------------------------------------------------------
+// .zocial-amazon {
+// 	@extend %zocial-amazon;
+// }
+
+
+
+// Import of default text bootstrap settings
+// -----------------------------------------------------------------------
+// @import "stipe/typography/default"; // Comment out if unwanted
+
+
+
+// Customize the following to fit your specifications
+// Commented out styles represent Toadstool's default bootstrap styles
+// -----------------------------------------------------------------------
+html {
+	// font: #{$font_size / 16 * 1em}/$line_height $primary_font_family;
+	// color: $primary_text;
+}
+
+[class*="toadstool"] {
+	h1 {
+		@extend %headings_1;
+		font-weight: bold;
+	}
+	h2 {
+		@extend %headings_2;
+		color: $alpha_primary;
+	}
+	p {
+		color: $charlie_gray;
+		@include text(14);
+	}
+}
+
+
+
+h3 {
+	// font-size:  1.17em;  // user agent default
+	// @extend %headings_3;
+}
+
+h4 {
+	// font-size:  1em;  // user agent default
+	// @extend %headings_4;
+}
+
+h5 {
+	// font-size:  0.83em;  // user agent default
+	// @extend %headings_5;
+}
+
+h6 {
+	 // font-size:  0.75em;  // user agent default
+	 // @extend %headings_6;
+}
+
+// Standard body text support
+// --------------------------------
+p {
+	// margin-bottom: 1em;
+	// text-indent: 0;
+	// &:last-child {
+	// 	margin-bottom: 0;
+	// }
+}
+
+b {
+	// &:after {
+	// 	content: " ";
+	// }
+}
+
+
+// :link Pseudo-class is totally not necessary as I can tell
+// code here to combat legacy code
+a {
+	// &:link {
+	// 	color: $href_color;
+	// 	text-decoration: none;
+	// }
+	// &:hover, &:active {
+	// 	text-decoration: underline;
+	// }
+	// &:visited {
+	// 	color: $href_color;
+	// }
+}
+
+// .toadstool_header {
+// 	h1 {
+// 		color: $bravo_primary;
+// 		font-size: em($heading_1);
+// 	}
+// }

data/stylesheets/stipe/toadstool/_ui_manifest.scss

@@ -0,0 +1,39 @@
+// App Config - this is where most of your magic will happen
+// ------------------------------------------------------------------------------
+@import "config";  // Editing defaults here will override any set in the Stipe gem
+
+
+// Want web fonts? We got those too.
+// ------------------------------------------------------------------------------
+@import "web_fonts";
+
+
+
+// Following sequence will load the necessary Stipe libraries
+// ------------------------------------------------------------------------------
+@import "stipe/stipe";                   
+@import "stipe/media";
+@import "stipe/typography";             
+@import "stipe/grid";      
+@import "stipe/forms";               
+@import "stipe/color";                   
+@import "stipe/gradients"; 
+               
+
+
+// This where you start building your own styles. 
+// ------------------------------------------------------------------------------
+@import "typography";
+@import "design";
+@import "forms";
+@import "buttons";
+@import "grids";
+@import "ui_patterns";
+@import "modules";
+
+
+// Following sequence will load the necessary Stipe extends
+// ------------------------------------------------------------------------------
+@import "stipe/grid/extends";
+@import "stipe/color/extends";
+@import "stipe/buttons/extends";

data/stylesheets/stipe/toadstool/_ui_patterns.scss

@@ -0,0 +1,2 @@
+@import "ui_patterns/prettify";
+@import "ui_patterns/emBox";

data/stylesheets/stipe/toadstool/_web_fonts.scss

@@ -0,0 +1,32 @@
+
+// -----------------------------------------------------------
+@import "stipe/typography/mixins"; // Do not edit, needed to pull in necessary mixin
+$webfont_directory: "/fonts/" !default; // edit this directory in the '_config.scss' file if needed.
+
+
+
+// Pre-loaded web fonts for your use, enjoy!
+// Fonts needed to be loaded in path specified above
+// in relation to the rendered CSS file
+// -----------------------------------------------------------
+// To activate 'zocial' uncomment both lines
+// @import "stipe/typography/web_fonts/zocial";
+// @import "stipe/typography/web_fonts/zocial_characters";
+
+// To activate 'font_awesome' uncomment both lines
+@import "stipe/typography/web_fonts/font_awesome";
+@import "stipe/typography/web_fonts/font_awesome_pua";
+
+
+
+// Install your own
+// -----------------------------------------------------------
+//@font-face {
+//	@include font-face ($font_family: [name of family], $font-file:  [name of file], $font_weight: [value], $font_style: [value]);
+//}
+
+
+
+// Install google fonts
+// -----------------------------------------------------------
+@import url(http://fonts.googleapis.com/css?family=Lato:400,700);

data/stylesheets/stipe/toadstool/modules/_footer.scss

@@ -0,0 +1,6 @@
+.toadstool_main_footer {
+	padding: em(10) 0;
+	border-top: 1px solid $border_color;
+	@include grid(12, $grid_align: center);
+	clear: both;
+}

data/stylesheets/stipe/toadstool/modules/_header.scss

@@ -0,0 +1,41 @@
+.toadstool_main_header {
+	@extend %clearfix;
+	h1 {
+		color: $white;
+		float: left;
+		margin-bottom: 0;
+	}
+	background: $bravo_gray;
+	padding: rem(10) rem(10) rem(15) rem(10);
+	form {
+		display: inline-block;
+		float: right;
+		select {
+			min-width: rem(100);
+		}
+		@media #{$mobile} {
+			margin-top: em(10);
+			margin-right: em(10);
+			margin-left: em(2);
+			width: 80%;
+			float: none;
+		}
+	}
+}
+
+.toadstool_header {
+	h1 {
+		margin-top: rem(24);
+	}
+}
+
+.toadstool_subheader {
+	h2 {
+		margin-bottom: 0;
+	}
+}
+
+
+
+
+

data/stylesheets/stipe/toadstool/modules/_main_nav.scss

@@ -0,0 +1,46 @@
+.toadstool_nav {
+	ol {
+		@include flexbox(100%, auto);
+		background: $bravo_gray;
+		font-weight: bold;
+		@media #{$mobile} {
+		 @include flexbox(100%, auto, $orient: vertical);
+		 @include linear_gradient_w3c ($bravo_gray, #{$bravo_gray 30%,$delta_gray 100%});
+		}
+	}
+	li {
+		@include flex(1);
+		text-align: center;
+		line-height: 3em;
+		background: $white;
+		color: $alpha_gray;
+		border-radius: em(5) em(5) 0 0;
+		@media #{$mobile} {
+			width: 100%;
+			border-radius: 0;
+			font-size: 1.2em;
+			background: transparent;
+			color: $echo_gray;
+			border-top: 1px solid $echo_gray;
+		}
+	}
+	a {
+		color: $white;
+		@include linear_gradient_w3c ($bravo_gray, #{$bravo_gray 50%,$delta_gray 100%}); 
+		@media #{$mobile} {
+		 background: transparent;
+		}
+		display: block;
+		&:hover {
+			text-decoration: none;
+			background: $white;
+			color: $alpha_gray;
+			border-radius: em(5) em(5) 0 0;
+			@media #{$mobile} {
+			 border-radius: 0;
+			 background: transparent;
+			 color: $echo_gray;
+			}
+		}
+	}
+}