stipe 0.0.2

data/stylesheets/stipe/color/_grayscale_math.scss

@@ -0,0 +1,10 @@
+/////// generic b/w blocks ////////
+// ----------------------------------------------
+$bravo_gray:scale-color($alpha_gray, $lightness: 10%) !default;
+$charlie_gray:scale-color($alpha_gray, $lightness: 20%) !default;
+$delta_gray:scale-color($alpha_gray, $lightness: 30%) !default;
+$echo_gray:scale-color($alpha_gray, $lightness: 40%) !default;
+$fox_gray:scale-color($alpha_gray, $lightness: 50%) !default;
+$golf_gray:scale-color($alpha_gray, $lightness: 60%) !default;
+$hotel_gray:scale-color($alpha_gray, $lightness: 70%) !default;
+$india_gray:scale-color($alpha_gray, $lightness: 80%) !default;

data/stylesheets/stipe/forms/_default.scss

@@ -0,0 +1,11 @@
+input[type=text], input[type=password], input[type="date"], select {
+	@extend %input_fields;
+}
+
+input[disabled], textarea[disabled], select[disabled], .disabled {
+	@extend %disabled_inputs;
+}
+
+label {
+	@extend %form_labels;
+}

data/stylesheets/stipe/forms/_extends.scss

@@ -0,0 +1,103 @@
+// input fields
+// ------------------------------------------------------------
+%input_fields {
+	border: 1px solid $form_field_border;
+	background: $form_field_background_color;
+	@include medium();
+	height: #{32 / $em}em;
+	@include grid(12,12,$grid_uom:combo, $grid_padding_lr:6);
+	@include placeholder ($delta_gray);
+
+	@include field_focus;
+	color: $form_field_text;
+	+ .horizontal_selectors {
+		margin-top: -0.5em;
+	}
+}
+
+// disabled input fields
+// ------------------------------------------------------------
+%disabled_inputs {
+	background-color: $input_disabled_bkg;
+	border-color: $input_disabled_border;
+	color: $input_disabled_text;
+	&:hover {
+		border-color: $input_disabled_border;
+	}
+}
+
+// form labels 
+// ------------------------------------------------------------
+%form_labels {
+	display: block;
+	font-weight: bold;
+	line-height: #{20 / $em}em;
+	span {
+		padding-left: .25em;
+		font-weight: normal;
+	}
+	fieldset & {
+		@include grid(12,12, $grid_uom:percent);
+	}
+}
+
+// default error
+// ------------------------------------------------------------
+%fail {
+	border-color: $form_field_border_fail !important;
+	color: $form_field_text_fail !important;
+	input & {
+		background: $form_field_fail_bkg;
+	}
+	&:focus {
+		background: $form_field_fail_bkg !important;
+	}
+	select, input[type="text"], input[type="date"] {
+		background: $form_field_fail_bkg;
+		border-color: $form_field_border_fail;
+		color: $form_field_text_fail;
+		@include placeholder($form_field_text_fail);
+		&:focus {
+			background: $form_field_fail_bkg;
+		}
+	}
+	&:after {
+		background: $form_field_fail_bkg;
+		border-color: $form_field_border_fail;
+	}
+}
+
+// notification alerts / panels 
+// ------------------------------------------------------------
+%default_alert_panel {
+	@include alert_boxes ($alert_background_color, 10, 14, 10);
+}
+
+%notification_panel {
+	@extend %default_alert_panel;
+}
+
+%alert_panel {
+	@extend %default_alert_panel;
+	background: $alpha_color;
+	color: $white;
+	font-weight: bold;
+}
+
+// form text 
+// ------------------------------------------------------------
+%instructional {
+	color: $instructional_text;
+}
+
+%note {
+	@extend %instructional;
+	@include small;
+	margin-top: #{5 / $em}em;
+}
+
+%informational {
+	@extend %instructional;
+	line-height: 1.3em;
+	margin-bottom: 1em;
+}

data/stylesheets/stipe/forms/_mixins.scss

@@ -0,0 +1,32 @@
+// Toadstool core v0.0.0.1
+// This document is not to be edited as it will be versioned
+// -----------------------------------------------------------------
+
+
+////////////// Form mixins ////////////////
+// ---------------------------------------
+
+@mixin field_focus {
+	&:hover {
+		border-color: $form_field_focus_border_color;
+	}
+	&:focus {
+		background-color: $form_field_focus_color;
+		border-color: $form_field_focus_border_color;
+		outline: none;
+	}
+}
+
+//////// Form settings //////////
+
+
+
+/////////// Alert  mixins //////////////
+// -----------------------------------------
+@mixin alert_boxes ($background_color, $padding_tb, $padding_lr, $margin_bottom) {
+	background-color: $background_color;
+	@include grid(12,12.25, $grid_uom:combo, $grid_child: alphaomega, $grid_padding_lr: $padding_lr);
+	padding-top: #{$padding_tb / $em}em;
+	padding-bottom: #{$padding_tb / $em}em;
+	margin-bottom: #{$margin_bottom / $em}em;
+}

data/stylesheets/stipe/gradients/_extends.scss

@@ -0,0 +1,48 @@
+//
+// Standardized abstract gradient color objects.  NOT to be used as classes appended to a block in the HTML.
+// Preferred uses include @extend .class; or repurpose the mixin within the class.
+//
+
+
+/////// OOCSS gradient color ////////
+// ----------------------------------------------
+
+//* Gradient color objects */
+//* ----------------------- */
+// %alpha_color_gradient {
+// 	@include alpha_color_gradient;
+// }
+// 
+// %bravo_color_gradient {
+// 	@include bravo_color_gradient;
+// }
+// 
+// %charlie_color_gradient {
+// 	@include charlie_color_gradient;
+// }
+// 
+// %delta_color_gradient {
+// 	@include delta_color_gradient;
+// }
+// 
+// %echo_color_gradient {
+// 	@include echo_color_gradient;
+// }
+// 
+// %fox_color_gradient {
+// 	@include fox_color_gradient;
+// }
+// 
+// %golf_color_gradient {
+// 	@include golf_color_gradient;
+// }
+// 
+// %hotel_color_gradient {
+// 	@include hotel_color_gradient;
+// }
+// 
+// %india_color_gradient {
+// 	@include india_color_gradient;
+// }
+
+/////// OOCSS gradient color mixins ////////

data/stylesheets/stipe/gradients/mixins/_area_51.scss

@@ -0,0 +1,53 @@
+// Toadstool core v0.0.0.1
+// This document is not to be edited as it will be versioned
+// -----------------------------------------------------------------
+
+
+
+// example class using all mixins to support all browsers
+//.gradient_box {
+//	@include linear_gradient_legacy_safari (#{color-stop(0%,$alpha_color), color-stop(100%,$bravo_color)});
+//	@include linear_gradient_w3c ($alpha_color, #{$alpha_color 0%,$bravo_color 100%});
+//	@include linear_gradient_legacy_ie ($alpha_color, $bravo_color);
+//
+//}
+
+
+// requires that color values are written using #{} interpolation syntax
+// example .....
+// @include linear_gradient_w3c ($alpha_color, #{$alpha_color 0%,$bravo_color 100%}); 
+// ---------------------------------------------------------------------------------------
+@mixin linear_gradient_w3c ($default_color, $color_values, $prefixes: $prefix_defaults) {
+	background: $default_color; // default fallback
+	background: -webkit-linear-gradient(top, $color_values);
+	background: -moz-linear-gradient(top, $color_values);
+	background: -o-linear-gradient(top, $color_values);
+	background: -ms-linear-gradient(top, $color_values);
+}
+
+
+
+
+
+// requires that color values are written using #{} interpolation syntax
+// example .....
+// @include linear_gradient_legacy_safari (#{color-stop(0%,$alpha_color), color-stop(100%,$bravo_color)}); 
+// ---------------------------------------------------------------------------------------
+@mixin linear_gradient_legacy_safari ($color_values) {
+	background: -webkit-gradient(linear, left top, left bottom, #{$color_values});
+}
+
+
+
+
+// this is pretty old skool here, think you can figure it out
+// -----------------------------------------------------------
+@mixin linear_gradient_legacy_ie ($start_color, $end_color) {
+	// IE6 & 7 //
+    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr='#{ie_hex_str($start_color)}', endColorstr='#{ie_hex_str($end_color)}');
+	// IE8 & 9 //
+	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie_hex_str($start_color)}', endColorstr='#{ie_hex_str($end_color)}')";
+}
+
+
+// -------------------------------------------------------------------------------------------

data/stylesheets/stipe/gradients/mixins/_linear_gradient_bkgimage.scss

@@ -0,0 +1,43 @@
+// Toadstool core v0.0.0.1
+// This document is not to be edited as it will be versioned
+// -----------------------------------------------------------------
+
+
+// The following gradients are designed with variable color stops and supports background images
+// It is recommended to use these to build reusable objects in the SCSS
+// -------------------------------------------------------------------------------------
+// four color stop linear gradient with color stops and images set as variable 
+// --------------------------------------------------------------- 
+// NOTE:  Place url path on single quotes, i.e. '../../images/image.png'
+
+@mixin linear_gradient_bkgimage ($image, $position, $start_color, $color_values, $prefixes: $prefix_defaults) {
+	// default fallback //
+	background: $start_color;
+	background: url(#{$image}) no-repeat $position, -moz-linear-gradient(top, #{$color_values});
+	background: url(#{$image}) no-repeat $position, -webkit-linear-gradient(top, #{$color_values});
+	background: url(#{$image}) no-repeat $position, -o-linear-gradient(top, #{$color_values});
+	background: url(#{$image}) no-repeat $position, -ms-linear-gradient(top, #{$color_values});
+
+
+	// IE6 - 9 //
+	// ms crappy filters cannot be used with background images
+	// IE specific UIs will need to be engineered in the widget sass
+}
+//////// gradient arguments /////////
+
+
+
+
+// requires that color values are written using #{} interpolation syntax
+// example .....
+// @include linear_gradient_bkgimage_legacy_safari (#{color-stop(0%,$alpha_color), color-stop(100%,$bravo_color)}); 
+// ---------------------------------------------------------------------------------------
+// NOTE:  Place url path on single quotes, i.e. '../../images/image.png'
+@mixin linear_gradient_bkgimage_legacy_safari ($image, $position, $color_values) {
+	background: url(#{$image}) no-repeat $position, -webkit-gradient(linear, left top, left bottom, #{$color_values});
+}
+
+
+
+
+

data/stylesheets/stipe/grid/_extends.scss

@@ -0,0 +1,221 @@
+//
+// Standardized grid objects.  NOT to be used as classes appended to a block in the HTML.
+// Preferred uses include @extend .class; or repurpose the mixin within the class.
+//
+
+// grid ----------------------
+%grid_display {
+	border: 1px solid $charlie_gray;
+	margin-bottom: 1em;
+	text-align: center;
+	padding: em(10) 0;
+}
+
+%grid_1 {
+	@include grid(1);
+	@media #{$tablet_portrait} {
+		@include grid(1, $grid_context: 10);
+	}
+	@media #{$mobile} {
+		@include grid(1, $grid_context: 4);
+	}
+}
+
+%grid_2 {
+	@include grid(2);
+	@media #{$tablet_portrait} {
+		@include grid(2, $grid_context: 10);
+	}
+	@media #{$mobile} {
+		@include grid(2, $grid_context: 4);
+	}
+}
+
+%grid_3 {
+	@include grid(3);
+	@media #{$tablet_portrait} {
+		@include grid(3, $grid_context: 10);
+	}
+	@media #{$mobile} {
+		@include grid(3, $grid_context: 4);
+	}
+}
+
+%grid_4 {
+	@include grid(4);
+	@media #{$tablet_portrait} {
+		@include grid(4, $grid_context: 10);
+	}
+	@media #{$mobile} {
+		@include grid(4, $grid_context: 4);
+	}
+}
+
+%grid_5 {
+	@include grid(5);
+	@media #{$tablet_portrait} {
+		@include grid(5, $grid_context: 10);
+	}
+	@media #{$mobile} {
+		@include grid(4, $grid_context: 4);
+	}
+}
+
+%grid_6 {
+	@include grid(6);
+	@media #{$tablet_portrait} {
+		@include grid(6, $grid_context: 10);
+	}
+	@media #{$mobile} {
+		@include grid(4, $grid_context: 4);
+	}
+}
+
+%grid_7 {
+	@include grid(7);
+	@media #{$tablet_portrait} {
+		@include grid(7, $grid_context: 10);
+	}
+	@media #{$mobile} {
+		@include grid(4, $grid_context: 4);
+	}
+}
+
+%grid_8 {
+	@include grid(8);
+	@media #{$tablet_portrait} {
+		@include grid(8, $grid_context: 10);
+	}
+	@media #{$mobile} {
+		@include grid(4, $grid_context: 4);
+	}
+}
+
+%grid_9 {
+	@include grid(9);
+	@media #{$tablet_portrait} {
+		@include grid(9, $grid_context: 10);
+	}
+	@media #{$mobile} {
+		@include grid(4, $grid_context: 4);
+	}
+}
+
+%grid_10 {
+	@include grid(10);
+	@media #{$tablet_portrait} {
+		@include grid(10, $grid_context: 10);
+	}
+	@media #{$mobile} {
+		@include grid(4, $grid_context: 4);
+	}
+}
+
+%grid_11 {
+	@include grid(11);
+	@media #{$tablet_portrait} {
+		@include grid(10, $grid_context: 10);
+	}
+	@media #{$mobile} {
+		@include grid(4, $grid_context: 4);
+	}
+}
+
+%grid_12 {
+	@include grid(12);
+	@media #{$tablet_portrait} {
+		@include grid(10, $grid_context: 10);
+	}
+	@media #{$mobile} {
+		@include grid(4, $grid_context: 4);
+	}
+}
+
+%grid_full {
+	@include full_width_block(12, $main_grid_align: left);
+}
+
+%grid_full_center {
+	@include full_width_block(12);
+}
+
+// push ----------------------
+
+%push_12_1 {
+	@include push(12,1);
+}
+
+%push_12_2 {
+	@include push(12,2);
+}
+
+%push_12_3 {
+	@include push(12,3);
+}
+
+// suffix ----------------------
+
+%suffix_12_1 {
+	@include suffix(12,1);
+}
+
+%suffix_12_2 {
+	@include suffix(12,2);
+}
+
+%suffix_12_3 {
+	@include suffix(12,3);
+}
+
+// prefix ----------------------
+
+%prefix_12_1 {
+	@include prefix(12,1);
+}
+
+%prefix_12_2 {
+	@include prefix(12,2);
+}
+
+%prefix_12_3 {
+	@include prefix(12,3);
+}
+
+
+// push ----------------------
+
+%push_12_1 {
+	@include push(12,1);
+}
+
+%push_12_2 {
+	@include push(12,2);
+}
+
+%push_12_3 {
+	@include push(12,3);
+}
+
+// pull ----------------------
+
+%pull_12_1 {
+	@include pull(12,1);
+}
+
+%pull_12_2 {
+	@include pull(12,2);
+}
+
+%pull_12_3 {
+	@include pull(12,3);
+}
+
+// alpha / omega ----------------------
+
+%alpha {
+	@include alpha;
+}
+
+%omega {
+	@include omega;
+}