stipe 0.0.3.6 → 0.0.3.7

data/readme.md

@@ -16,6 +16,9 @@ Stipe is a Compass Extension, so Compass is set as a depdency. You will need to
 For [reasons explained](/Anotheruiguy/toadstool/blob/master/doc-src/exploited-bug.md) please continue using the alpha gem and upgrading to Sass 3.2 will break Toadstool and Stipe. 
 
 # Stipe Changelog
+## 0.0.3.7
+* Updates to Toadstool nav and grid display for legacy browsers
+* Updates to flexbox to support legacy and new based on current support
 
 ## 0.0.3.5
 * Updated code blocks to be 100% of view versus two columns by default

data/stylesheets/stipe/_typography.scss

@@ -26,8 +26,12 @@ $icon_font_bravo: #{'zocial'} !default;
 // Headings default arguments
 $heading_size: $heading_1 !default;
 $heading_font_family: $heading_font_family !default;
-$heading_color: $primary_header_color !default;
 $heading_font_weight: normal !default;
+$heading_color: $primary_header_color !default;
+// $heading_color == value used mixin
+// $primary_header_color == set in Stip /stipe/color/_default_color_pallet.scss
+// override using Toadstool _config.scss
+
 
 //// !do not edit! ////
 $em:          $font_size; // $em ALWAYS == $font-size

data/stylesheets/stipe/grid/_extends.scss

@@ -5,10 +5,10 @@
 
 // grid ----------------------
 %grid_display {
-	border: 1px solid $charlie_gray;
 	margin-bottom: 1em;
 	text-align: center;
 	padding: em(10) 0;
+	@include box_shadow (inset $shadow_color, 0 0 em(20) em(10));
 }
 
 %grid_1 {

data/stylesheets/stipe/grid/_mixins.scss

@@ -6,15 +6,15 @@
 // All values are entered as integers and conversion math is done in the mixin.
 // Do not enter combination values such as '36em'
 
-@mixin grid($col_count, $grid_child, $grid_padding_l, $grid_padding_r, $grid_padding_tb, $grid_border, $grid_uom, $col_gutter, $grid_type, $grid_align, $grid_context) {
+@mixin grid($col_count, $grid_child, $grid_padding_l, $grid_padding_r, $grid_padding_tb, $grid_border, $grid_uom, $col_gutter, $grid_type, $grid_align, $grid_context, $border_color) {
 
 	@if $grid_type == 12 {
 		$col_width: 80 - $col_gutter;
-		@include the_grid($col_count, $col_width, $grid_uom, $grid_padding_l, $grid_padding_r, $grid_padding_tb, $grid_border, $grid_child, $col_gutter, $grid_align, $grid_context);
+		@include the_grid($col_count, $col_width, $grid_uom, $grid_padding_l, $grid_padding_r, $grid_padding_tb, $grid_border, $grid_child, $col_gutter, $grid_align, $grid_context, $border_color);
 	}
 	@else if $grid_type == 16 {
 		$col_width: 60 - $col_gutter;
-		@include the_grid($col_count, $col_width, $grid_uom, $grid_padding_l, $grid_padding_r, $grid_padding_tb, $grid_border, $grid_child, $col_gutter, $grid_align, $grid_context);
+		@include the_grid($col_count, $col_width, $grid_uom, $grid_padding_l, $grid_padding_r, $grid_padding_tb, $grid_border, $grid_child, $col_gutter, $grid_align, $grid_context, $border_color);
 	}
 }
 

data/stylesheets/stipe/grid/lib/_the_grid.scss

@@ -1,16 +1,21 @@
 // 'the_grid' determines width by taking column count, calculates gutter count
 // default setting for grid is ``em`` this is specified in ``_config.scss``
 
-@mixin the_grid($col_count, $col_width, $grid_uom, $grid_padding_l, $grid_padding_r, $grid_padding_tb, $grid_border, $grid_child, $col_gutter, $grid_align, $grid_context) {
+@mixin the_grid($col_count, $col_width, $grid_uom, $grid_padding_l, $grid_padding_r, $grid_padding_tb, $grid_border, $grid_child, $col_gutter, $grid_align, $grid_context, $border_color) {
 	
-	$col_gutter_width: ($col_count - 1) * $col_gutter + ($col_count * $col_width); //determines full col width with gutters
+	//determines full col width with gutters
+	$col_gutter_width: ($col_count - 1) * $col_gutter + ($col_count * $col_width); 
 	
-	$grid_context_width: $grid_context * 80; // determines width of contextual grid block for calculating percentages 
+	// determines width of contextual grid block for calculating percentages
+	$grid_context_width: $grid_context * 80;  
 	
 	$grid_padding_lr: $grid_padding_l + $grid_padding_r;
 	
 	@include grid_placement($grid_align, $grid_uom, $grid_child, $grid_context_width, $margin: $col_gutter / 2);
 	
+	// fallback for unsupported browsers
+	$grid_width_fallback: $col_gutter_width - (($grid_padding_l + $grid_padding_r) + ($grid_border * 2));
+	
 	@if $grid_uom == em {
 		@if $grid_border > 0 {
 			border: #{$grid_border}px $standard_border_style $border_color;
@@ -32,9 +37,6 @@
 		width: $grid_width;
 		
 		
-		// fallback for unsupported browsers
-		$grid_width_fallback: $col_gutter_width - (($grid_padding_lr * 2) + ($grid_border * 2));
-		
 		@if $grid_width_fallback < $col_gutter_width {
 			.no-boxsizing & {
 		   	width: #{$grid_width_fallback}px;
@@ -63,9 +65,6 @@
 		}
 		width: $grid_width;
 		
-		// fallback for unsupported browsers
-		$grid_width_fallback: $col_gutter_width - (($grid_padding_lr * 2) + ($grid_border * 2));
-		
 		@if $grid_width_fallback < $col_gutter_width {
 			.no-boxsizing & {
 		   	width: $grid_width_fallback / $grid_context_width * 100%;
@@ -88,9 +87,6 @@
 		}
 		width: $grid_width;
 		
-		// fallback for unsupported browsers
-		$grid_width_fallback: $col_gutter_width - (($grid_padding_lr * 2) + ($grid_border * 2));
-		
 		@if $grid_width_fallback < $col_gutter_width {
 			.no-boxsizing & {
 		   	width: $grid_width_fallback / $grid_context_width * 100%;

data/stylesheets/stipe/stipe/_mixins.scss

@@ -9,11 +9,11 @@
 // required default value to for vendor prefix support
 // -----------------------------------------------------
 $prefix_defaults: -moz- -webkit- -o- -ms- '' !default;
-$webkit_support: -webkit- '' !default;
+$webkit_support: -webkit- !default;
 $moz_support: -moz- !default;
 $ms_support: -ms- !default; 
-$moz_webkit_support: -moz- -webkit- '' !default;
-$moz_ms_support: -moz- -ms- '' !default;
+$moz_webkit_support: -moz- -webkit- !default;
+$moz_ms_support: -moz- -ms- !default;
 $webkit_ms_support: -webkit- -ms- !default;
 
 
@@ -21,67 +21,79 @@ $webkit_ms_support: -webkit- -ms- !default;
 
 /////// shadow arguments /////////
 // -------------------------------
-$shadow: #{$h-shadow / $em}em #{$v-shadow / $em}em #{$blur / $em}em;
-$inset_shadow: #{$ih-shadow / $em}em #{$iv-shadow / $em}em #{$iblur / $em}em;
+// Config values for all default shadows
+// -----------------------------------------------------------------------------
+$h-shadow:                             0 !default;                // horizontal shadow settings
+$v-shadow:                             2 !default;                // vertical shaddow settings
+$blur:                                 3 !default;                // blur settings
+
+$inset_color:                          $shadow_color !default;    // for use with ``dual_box_shadow`` mixin
+$ih-shadow:                            0 !default;                // inset horizontal shadow settings
+$iv-shadow:                            2 !default;                // inset vertical shaddow settings
+$is-shadow:                            2 !default;                // inset spread shaddow settings
+$iblur:                                3 !default;                // inset blur settings
+
+
+$shadow: em($h-shadow) em($v-shadow) em($blur);
+$inset_shadow: em($ih-shadow) em($iv-shadow) em($iblur) em($is-shadow);
 
 @mixin box_shadow ($shadow_color, $shadow, $prefixes: $prefix_defaults) {
-	@each $prefix in $prefixes {
-		#{$prefix}box-shadow: $shadow_color $shadow;
-	}
+  @each $prefix in $prefixes {
+    #{$prefix}box-shadow: $shadow_color $shadow;
+  }
 }
 
 @mixin dual_box_shadow ($shadow_color, $shadow, $inset_color, $inset_shadow, $prefixes: $prefix_defaults) {
-	@each $prefix in $prefixes {
-		#{$prefix}box-shadow: $shadow_color $shadow, inset $inset_color $inset_shadow;
-	}
+  @each $prefix in $prefixes {
+    #{$prefix}box-shadow: $shadow_color $shadow, inset $inset_color $inset_shadow;
+  }
 }
 
 @mixin text_shadow ($shadow_color, $shadow, $prefixes: $prefix_defaults) {
-	@each $prefix in $prefixes {
-		#{$prefix}text-shadow: $shadow_color $shadow;
-	}
+  @each $prefix in $prefixes {
+    #{$prefix}text-shadow: $shadow_color $shadow;
+  }
 }
 /////// shadow arguments /////////
 
 
 
-/////// border-radius arguments	/////////
+/////// border-radius arguments /////////
 // --------------------------------------
 @mixin border_radius ($border_radius, $prefixes: $webkit_support) {
-	@each $prefix in $prefixes {
-		#{$prefix}border-radius: $border_radius;
-	}
+  @each $prefix in $prefixes {
+    #{$prefix}border-radius: $border_radius;
+  }
 }
-/////// border-radius arguments	/////////
+/////// border-radius arguments /////////
 
 
 
-/////// box-sizing arguments	/////////
+/////// box-sizing arguments  /////////
 // --------------------------------------
-@mixin box_sizing ($box_sizing: border-box, $prefixes: $moz_webkit_support) {
-	@each $prefix in $prefixes {
-		#{$prefix}box-sizing: $box_sizing;
-	}
+@mixin box_sizing ($box_sizing: border-box, $prefixes: $prefix_defaults) {
+  @each $prefix in $prefixes {
+    #{$prefix}box-sizing: $box_sizing;
+  }
 }
-/////// box-sizing arguments	/////////
+/////// box-sizing arguments  /////////
 
 
 
-/////// input_placeholder arguments	/////////
+/////// input_placeholder arguments /////////
 // --------------------------------------
-@mixin input_placeholder ($placeholder_color, $placeholder_prefix: $moz_support, $input-placeholder_prefix: $webkit_ms_support) {
-	@each $prefix in $input-placeholder_prefix {
-	 &::#{$prefix}input-placeholder {
-	 	color: $placeholder_color;
-	 }
-	}
-	@each $prefix in $placeholder_prefix {
-	 &:#{$prefix}placeholder {
-	 	color: $placeholder_color;
-	 }
-	}
+@mixin input_placeholder ($placeholder_color: $placeholder_color) {
+  &::-webkit-input-placeholder {
+    color: $placeholder_color;
+  }
+  &:-moz-placeholder {
+    color: $placeholder_color;
+  }
+  &:-ms-input-placeholder {
+    color: $placeholder_color;
+  }
 }
-/////// input_placeholder arguments	/////////
+/////// input_placeholder arguments /////////
 
 
 
@@ -93,69 +105,108 @@ $inset_shadow: #{$ih-shadow / $em}em #{$iv-shadow / $em}em #{$iblur / $em}em;
 // This tool also requires that a gradient object be created as variables. 
 // Known restrictions ... images must be .png, position of background is currently hard-coded
 @mixin icon_gradient_background($icon_image, $fallback_color, $w3c_color_spec, $safari_color_spec, $ie_start, $ie_stop) {
-	// w3c //: 
-	@include linear_gradient_bkgimage ('#{$imgDir}#{$icon_image}.png',5% 50%, $fallback_color, $w3c_color_spec);
-	// legacy safari //
-	@include linear_gradient_bkgimage_legacy_safari ('#{$imgDir}#{$icon_image}.png', 5% 50%, $safari_color_spec);
-	// IE suck
-	@include linear_gradient_legacy_ie ($ie_start, $ie_stop);
+  // w3c //: 
+  @include linear_gradient_bkgimage ('#{$imgDir}#{$icon_image}.png',5% 50%, $fallback_color, $w3c_color_spec);
+  // legacy safari //
+  @include linear_gradient_bkgimage_legacy_safari ('#{$imgDir}#{$icon_image}.png', 5% 50%, $safari_color_spec);
+  // IE suck
+  @include linear_gradient_legacy_ie ($ie_start, $ie_stop);
 }
 
 // Example using this mixin
 // .your_new_class {
-// 	@include icon_gradient_background(
-// 		$icon_image: play_icon, 
-// 		$fallback_color: $echo_color_bravo, 
-// 		$w3c_color_spec: $alpha_color_gradient_var_w3c, 
-// 		$safari_color_spec: $alpha_color_gradient_var_legacy_safari, 
-// 		$ie_start: $echo_color_delta, 
-// 		$ie_stop: $echo_color_delta);
-// 	}
+//  @include icon_gradient_background(
+//    $icon_image: play_icon, 
+//    $fallback_color: $echo_color_bravo, 
+//    $w3c_color_spec: $alpha_color_gradient_var_w3c, 
+//    $safari_color_spec: $alpha_color_gradient_var_legacy_safari, 
+//    $ie_start: $echo_color_delta, 
+//    $ie_stop: $echo_color_delta);
+//  }
 // }
 
 
 
-/////// column count arguments	/////////
+/////// column count arguments  /////////
 // --------------------------------------
 @mixin column_count($col_count, $col_gap, $prefixes: $prefix_defaults) {
-	@each $prefix in $prefixes {
-		#{$prefix}column-count: $col_count;
-		#{$prefix}column-gap: $col_gap;
-	}
+  @each $prefix in $prefixes {
+    #{$prefix}column-count: $col_count;
+    #{$prefix}column-gap: $col_gap;
+  }
 }
-/////// column count arguments	/////////
+/////// column count arguments  /////////
 
 
 
-///////// flexbox arguments	/////////
+///////// flexbox arguments /////////
 // -----------------------------------
-@mixin flexbox ($width, $height, $orient: horizontal, $pack: center, $align: center, $prefixes: $prefix_defaults) {
-	@each $prefix in $prefixes {
-		display: #{$prefix}box;
-		#{$prefix}box-orient: $orient;
-		#{$prefix}box-pack: $pack;
-		#{$prefix}box-align: $align;
-	}
-	height: $height;
-	width: $width;
+@mixin flexbox (
+$width, 
+$height, 
+$orient: horizontal,
+$direction: row, 
+$pack: center, 
+$align: center, 
+$wrap: none,
+$prefixes: $prefix_defaults,
+$legacyPrefixes: $moz_webkit_support) {
+  @each $prefix in $legacyPrefixes {
+    .flexboxlegacy & {
+      display: #{$prefix}box;
+      #{$prefix}box-orient: $orient;
+      #{$prefix}box-pack: $pack;
+      #{$prefix}box-align: $align;
+    } 
+  }
+  // As of 15.0.1 Mozilla does not support the new Flexbox spec
+  @each $prefix in $webkit_ms_support {
+    .flexbox & {
+      display: -ms-flexbox;
+      display: -webkit-flex;
+      #{$prefix}flex-direction: $direction;
+      #{$prefix}flex-align: $align;
+      #{$prefix}flex-pack: $pack;
+      #{$prefix}flex-wrap: $wrap;
+    }
+  }
+  .no-flexbox & {
+    width: 100%;
+    float: left;
+  }
+  height: $height;
+  width: $width;
 }
 
-	
-@mixin flex ($value, $prefixes: $prefix_defaults) {
-	@each $prefix in $prefixes {
-		#{$prefix}box-flex: $value;
-	}
+  
+@mixin flex (
+$value, 
+$prefixes: $prefix_defaults,
+$legacyPrefixes: $moz_webkit_support) {
+  @each $prefix in $legacyPrefixes {
+    .flexboxlegacy & {
+      #{$prefix}box-flex: $value;
+    } 
+  }
+  @each $prefix in $prefixes {
+    .flexbox & {
+      #{$prefix}flex: $value;
+    }
+  }
+  .no-flexbox & {
+    float: left;
+  }
 }
-///////// flexbox arguments	/////////
+///////// flexbox arguments /////////
 
 
 
 /////// transition arguments //////////
 // http://www.w3schools.com/css3/css3_pr_transition.asp
 @mixin transition ($property, $duration, $timing_function, $delay, $prefixes: $prefix_defaults) {
-	@each $prefix in $prefixes {
-		#{$prefix}transition: $property $duration $timing_function $delay;
-	}
+  @each $prefix in $prefixes {
+    #{$prefix}transition: $property $duration $timing_function $delay;
+  }
 }
 /////// transition arguments //////////
 
@@ -164,9 +215,9 @@ $inset_shadow: #{$ih-shadow / $em}em #{$iv-shadow / $em}em #{$iblur / $em}em;
 /////// transform arguments //////////
 // http://www.w3schools.com/css3/css3_pr_transform.asp
 @mixin transform ($function, $prefixes: $prefix_defaults) {
-	@each $prefix in $prefixes {
-		#{$prefix}transform: $function;
-	}
+  @each $prefix in $prefixes {
+    #{$prefix}transform: $function;
+  }
 }
 /////// transform arguments //////////
 
@@ -174,19 +225,19 @@ $inset_shadow: #{$ih-shadow / $em}em #{$iv-shadow / $em}em #{$iblur / $em}em;
 
 ////////// style placeholder text //////////
 @mixin placeholder_styles ($color) {
-	color: $color;
+  color: $color;
 }
 
 @mixin placeholder ($color) {
-	&::-webkit-input-placeholder {
-		@include placeholder_styles ($color);
-	}
-	&:-moz-placeholder {
-		@include placeholder_styles ($color);
-	}
-	&:-ms-input-placeholder {
-		@include placeholder_styles ($color);
-	}
+  &::-webkit-input-placeholder {
+    @include placeholder_styles ($color);
+  }
+  &:-moz-placeholder {
+    @include placeholder_styles ($color);
+  }
+  &:-ms-input-placeholder {
+    @include placeholder_styles ($color);
+  }
 }
 ////////// style placeholder text //////////
 
@@ -196,10 +247,10 @@ $inset_shadow: #{$ih-shadow / $em}em #{$iv-shadow / $em}em #{$iblur / $em}em;
 // Kellum Method
 // http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/
 @mixin hide_text {
-	text-indent: 100%;
-	white-space: nowrap;
-	overflow: hidden;
-	display: none;
+  text-indent: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  display: none;
 }
 ////////////// hide text ////////////
 
@@ -207,20 +258,20 @@ $inset_shadow: #{$ih-shadow / $em}em #{$iv-shadow / $em}em #{$iblur / $em}em;
 
 /////// clearfix //////////
 @mixin clearfix () {
-	zoom: 1;
-	&:before {
-		content: "\0020";
-		display: block;
-		height: 0;
-		overflow: hidden;
-	}
-	&:after {
-		content: "\0020";
-		display: block;
-		height: 0;
-		overflow: hidden;
-		clear: both;
-	}
+  zoom: 1;
+  &:before {
+    content: "\0020";
+    display: block;
+    height: 0;
+    overflow: hidden;
+  }
+  &:after {
+    content: "\0020";
+    display: block;
+    height: 0;
+    overflow: hidden;
+    clear: both;
+  }
 }
 /////// clearfix //////////
 
@@ -228,13 +279,13 @@ $inset_shadow: #{$ih-shadow / $em}em #{$iv-shadow / $em}em #{$iblur / $em}em;
 
 ///////// inset border /////////
 @mixin inset_border () {
-	@include box_shadow(inset 0 0 1px, $alpha_gray);
+  @include box_shadow(inset 0 0 1px, $alpha_gray);
 }
 ///////// inset border /////////
 
 
 
-/////// center text trick	/////////
+/////// center text trick /////////
 // ---------------------------------
 // By setting the height of the block element and the line-height to the same value
 // this will typically center the text in the block.
@@ -242,18 +293,18 @@ $inset_shadow: #{$ih-shadow / $em}em #{$iv-shadow / $em}em #{$iblur / $em}em;
 //
 //
 @mixin center_text ($block_height, $line_height: $block_height) {
-	height: $block_height;
-	line-height: $line-height;
+  height: $block_height;
+  line-height: $line-height;
 }
-/////// center text trick	/////////
+/////// center text trick /////////
 
 
 
 // a standardized border radius
 // ----------------------------
 @mixin standard_rounded_border ($standard_round_corner, $standard_border_style, $standard_corner_width, $standard_border_color) {
-	@include border_radius(#{$standard_round_corner / $em}rem);
-	border: $standard_corner_width $standard_border_style $standard_border_color;
+  @include border_radius(#{$standard_round_corner / $em}rem);
+  border: $standard_corner_width $standard_border_style $standard_border_color;
 }
 
 
@@ -280,8 +331,8 @@ $inset_shadow: #{$ih-shadow / $em}em #{$iv-shadow / $em}em #{$iblur / $em}em;
 // The only value to be adjusted is the margin-bottom spacing.  This is an argument addressed 
 // in the ``_config.scss`` file
 @mixin standard_block_spacing ($default_block_spacing) {
-	@include clearfix;
-	margin-bottom: #{$default_block_spacing / $em}em;
+  @include clearfix;
+  margin-bottom: #{$default_block_spacing / $em}em;
 }
 
 
@@ -289,9 +340,9 @@ $inset_shadow: #{$ih-shadow / $em}em #{$iv-shadow / $em}em #{$iblur / $em}em;
 // This mixin allows for quick application of a UI to the <hr> tag
 // All values are set in the ``_config.scss`` file
 @mixin standard_hr ($standard_border_style, $standard_hr_width, $standard_hr_spacing, $standard_hr_color){
-	border-bottom: $standard_hr_width $standard_border_style $standard_hr_color;
-	padding-bottom: #{$standard_hr_spacing / $em}rem;
-	margin-bottom: #{$standard_hr_spacing / $em}rem;
+  border-bottom: $standard_hr_width $standard_border_style $standard_hr_color;
+  padding-bottom: #{$standard_hr_spacing / $em}rem;
+  margin-bottom: #{$standard_hr_spacing / $em}rem;
 }
 
 
@@ -299,17 +350,17 @@ $inset_shadow: #{$ih-shadow / $em}em #{$iv-shadow / $em}em #{$iblur / $em}em;
 // This series of mixins sets default values for consistant use of text and box shadows
 // throughout your site.  Values are set in the ``_config.scss`` file
 @mixin primary_text_shadow ($h-shadow, $v-shadow, $blur ) {
-	@include text_shadow ($shadow_color, #{$h-shadow / $em}em #{$v-shadow / $em}em #{$blur / $em}em);
+  @include text_shadow ($shadow_color, #{$h-shadow / $em}em #{$v-shadow / $em}em #{$blur / $em}em);
 }
 
 @mixin disabled_text_shadow ($h-shadow, $v-shadow, $blur ) {
-	@include text_shadow (fade-out($shadow_color, 0.5), #{$h-shadow / $em}em #{$v-shadow / $em}em #{$blur / $em}em);
+  @include text_shadow (fade-out($shadow_color, 0.5), #{$h-shadow / $em}em #{$v-shadow / $em}em #{$blur / $em}em);
 }
 
 @mixin primary_box_shadow ($h-shadow, $v-shadow, $blur ) {
-	@include box_shadow ($shadow_color, #{$h-shadow / $em}em #{$v-shadow / $em}em #{$blur / $em}em);
+  @include box_shadow ($shadow_color, #{$h-shadow / $em}em #{$v-shadow / $em}em #{$blur / $em}em);
 }
 
 @mixin disabled_box_shadow ($h-shadow, $v-shadow, $blur ) {
-	@include box_shadow (fade-out($shadow_color, 0.4), #{$h-shadow / $em}em #{$v-shadow / $em}em #{$blur / $em}em);
+  @include box_shadow (fade-out($shadow_color, 0.4), #{$h-shadow / $em}em #{$v-shadow / $em}em #{$blur / $em}em);
 }

data/stylesheets/stipe/toadstool/_config.scss

@@ -195,6 +195,7 @@ $blur:                                 3 !default;                // blur settin
 $inset_color:                          $shadow_color !default;    // for use with ``dual_box_shadow`` mixin
 $ih-shadow:                            0 !default;                // inset horizontal shadow settings
 $iv-shadow:                            2 !default;                // inset vertical shaddow settings
+$is-shadow:                            2 !default;                // inset spread shaddow settings
 $iblur:                                3 !default;                // inset blur settings
 
 

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

@@ -1,46 +1,49 @@
 .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;
-			}
-		}
-	}
+  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%}); 
+    .no-flexbox & {
+      padding: 0 em(10);
+    }
+    @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;
+      }
+    }
+  }
 }

data/stylesheets/stipe/typography/_default.scss

@@ -1,69 +1,67 @@
-//* typography defauts */
-
 html {
-	font: em($font_size, 16) $primary_font_family;
-	line-height: baseline($font_size);
-	color: $primary_text;
-	@media #{$mobile} {
-		-webkit-text-size-adjust: none; /* Prevent font scaling in landscape */
-	}
+  font: em($font_size, 16) $primary_font_family;
+  line-height: baseline($font_size);
+  color: $primary_text;
+  @media #{$mobile} {
+    -webkit-text-size-adjust: none; /* Prevent font scaling in landscape */
+  }
 }
 
 h1 {
-	//font-size: 2em;  // user agent default
-	@extend %headings_1;
+  //font-size: 2em;  // user agent default
+  @extend %headings_1;
 }
 
 h2 {
-	//font-size: 1.5em;  // user agent default
-	@extend %headings_2;
+  //font-size: 1.5em;  // user agent default
+  @extend %headings_2;
 }
 
 h3 {
-	//font-size:  1.17em;  // user agent default
-	@extend %headings_3;
+  //font-size:  1.17em;  // user agent default
+  @extend %headings_3;
 }
 
 h4 {
-	//font-size:  1em;  // user agent default
-	@extend %headings_4;
+  //font-size:  1em;  // user agent default
+  @extend %headings_4;
 }
 
 h5 {
-	//font-size:  0.83em;  // user agent default
-	@extend %headings_5;
+  //font-size:  0.83em;  // user agent default
+  @extend %headings_5;
 }
 
 h6 {
-	 //font-size:  0.75em;  // user agent default
-	 @extend %headings_6;
+   //font-size:  0.75em;  // user agent default
+   @extend %headings_6;
 }
 
 // Standard body text support
 // --------------------------------
 p {
-	margin-bottom: baseline-margin($font_size);
-	text-indent: 0;
+  margin-bottom: baseline-margin($font_size);
+  text-indent: 0;
 }
 
 b {
-	&:after {
-		content: " ";
-	}
+  &: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;
-	}
+  &:link {
+    color: $href_color;
+    text-decoration: none;
+  }
+  &:hover, &:active {
+    text-decoration: underline;
+  }
+  &:visited {
+    color: $href_color;
+  }
 }

data/stylesheets/stipe/typography/_extends.scss

@@ -6,40 +6,40 @@
 
 //* Text classes */
 %headings_1 {
-	@include heading();
+  @include heading();
 }
 
 %headings_2 {
-	@include heading($heading_2);
+  @include heading($heading_2);
 }
 
 %headings_3 {
-	@include heading($heading_3);
+  @include heading($heading_3);
 }
 
 %headings_4 {
-	@include heading($heading_4);
+  @include heading($heading_4);
 }
 
 %headings_5 {
-	@include heading($heading_5);
+  @include heading($heading_5);
 }
 
 %headings_6 {
-	@include heading($heading_6);
+  @include heading($heading_6);
 }
 
 
 %small {
-	@include small;
+  @include small;
 }
 
 %medium {
-	@include medium;
+  @include medium;
 }
 
 %large {
-	@include large;
+  @include large;
 }
 
 
@@ -48,15 +48,15 @@
 
 //* Font family classes */
 %primary_font_family {
-	font-family: $primary_font_family;
+  font-family: $primary_font_family;
 }
 
 %secondary_font_family {
-	font-family: $secondary_font_family;
+  font-family: $secondary_font_family;
 }
 
 %heading_font_family {
-	font-family: $heading_font_family;
+  font-family: $heading_font_family;
 }
 
 
@@ -65,7 +65,7 @@
 
 //* Hide Text, Kellum Method */
 %hide_text {
-	@include hide_text;
+  @include hide_text;
 }
 
 
@@ -73,13 +73,13 @@
 
 //* Standard content block styling */
 %bulleted_list {
-	@include bulleted_list;
+  @include bulleted_list;
 }
 
 %content_block {
-	@extend %standard_block_spacing;
-	float: left;
-	@extend %bulleted_list;
+  @extend %standard_block_spacing;
+  float: left;
+  @extend %bulleted_list;
 }
 
 

data/stylesheets/stipe/typography/_mixins.scss

@@ -1,37 +1,29 @@
-// Toadstool core v0.0.0.1
-// This document is not to be edited as it will be versioned
-// -----------------------------------------------------------------
-
-
-// All google font includes are placed in the RESET.SCSS file
-// -----------------------------------------------------------
-//@import "../config_files/text";
-
 
 //////// heading text mixin //////////
 // ------------------------------------------------
+// default values are being set in /stipe/stylesheets/stipe/_typography.scss
 @mixin heading ($heading_size, $heading_font_family, $heading_color, $heading_font_weight) {
-	font-size: em($heading_size);
-	line-height: baseline($heading_size);
-	margin-bottom: baseline-margin($heading_size);
-	color: $heading_color;
-	font-weight: $heading_font_weight;
-	font-family: $heading_font_family;
+  font-size: em($heading_size);
+  line-height: baseline($heading_size);
+  margin-bottom: baseline-margin($heading_size);
+  color: $heading_color;
+  font-weight: $heading_font_weight;
+  font-family: $heading_font_family;
 }
 
 
 /////// text arguments w/baseline rythem //////////
 // -----------------------------------------------------
 @mixin text ($baseline_size, $margin: auto) {
-	font-size: em($baseline_size);
-	line-height: baseline($baseline_size);
-
-	@if $margin == auto {
-		margin-bottom: baseline-margin($baseline_size);
-	}
-	@else if $margin == 0 {
-		margin-bottom: 0;
-	}
+  font-size: em($baseline_size);
+  line-height: baseline($baseline_size);
+
+  @if $margin == auto {
+    margin-bottom: baseline-margin($baseline_size);
+  }
+  @else if $margin == 0 {
+    margin-bottom: 0;
+  }
 }
 
 
@@ -39,15 +31,15 @@
 //////// standard text mixins //////////
 // ------------------------------------------------
 @mixin small ($baseline_size: $small_point_size) {
-	@include text($baseline_size);
+  @include text($baseline_size);
 }
 
 @mixin medium ($baseline_size: $font_size) {
-	@include text($baseline_size);
+  @include text($baseline_size);
 }
 
 @mixin large ($baseline_size: $large_point_size) {
-	@include text($baseline_size);
+  @include text($baseline_size);
 }
 
 
@@ -56,20 +48,20 @@
 ////////// Standard bulleted list //////////////
 // --------------------------------------------
 @mixin bulleted_list {
-	ul {
-		list-style: disc;
-		margin: 0 0 1.5em em(20);
-		&:last-child {
-			margin-bottom: 0;
-		}
-	}
-	li {
-		float: none;
-		margin-bottom: 1em;
-		&:last-child {
-			margin-bottom: 0;
-		}
-	}
+  ul {
+    list-style: disc;
+    margin: 0 0 1.5em em(20);
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+  li {
+    float: none;
+    margin-bottom: 1em;
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
 }
 
 
@@ -82,11 +74,11 @@ $webfont_style: normal !default;
 
 
 @mixin font-face($font_family: $webfont_font_family, $font-file: $webfont-file, $font_weight: $webfont_weight, $font_style: $webfont_style ) {
-	font-family: '#{$font_family}';
-	font-style: $font_style;
-	font-weight: $font_weight;
-	src: url('#{$webfont_directory}#{$font-file}.eot');
-	src: url('#{$webfont_directory}#{$font-file}.eot?#iefix') format('embedded-opentype'),
+  font-family: '#{$font_family}';
+  font-style: $font_style;
+  font-weight: $font_weight;
+  src: url('#{$webfont_directory}#{$font-file}.eot');
+  src: url('#{$webfont_directory}#{$font-file}.eot?#iefix') format('embedded-opentype'),
          url('#{$webfont_directory}#{$font-file}.woff') format('woff'),
          url('#{$webfont_directory}#{$font-file}.ttf') format('truetype'),
          url('#{$webfont_directory}#{$font-file}.svg#ZocialRegular') format('svg');

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: stipe
 version: !ruby/object:Gem::Version
-  version: 0.0.3.6
+  version: 0.0.3.7
   prerelease: 
 platform: ruby
 authors: