gridle 1.3.3 → 1.3.11

data/stylesheets/gridle/_gridle.scss

@@ -8,7 +8,7 @@
 
 // |------------------------------------------------------
 // |------------------------------------------------------
-// Copyright (c) 2014 Olivier Bossel
+// Copyright (c) 2013 Olivier Bossel
 
 // Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
 // documentation files (the "Software"), to deal in the Software without restriction, including without limitation
@@ -29,13 +29,13 @@
 // |------------------------------------------------------
 // |------------------------------------------------------
 // @created 	25.03.13
-// @updated 	22.07.14
+// @updated 	15.05.14
 // @author 	Olivier Bossel <olivier.bossel@gmail.com>
-// @version 	1.3.3
+// @version 	1.3.1
 // |------------------------------------------------------
 // |------------------------------------------------------
 
-$_gridle-version : "1.3.3";
+$_gridle-version : "1.3.1";
 
 
 
@@ -128,14 +128,3 @@ $_gridle_states_debug_devices : (); 				// save the debug states devices
 // |------------------------------------------------------
 
 @import 'generate-mixins';
-
-
-
-
-// |------------------------------------------------------
-// |------------------------------------------------------
-// | Default states
-// |------------------------------------------------------
-// |------------------------------------------------------
-
-@import 'default-states';

data/stylesheets/gridle/_mixins.scss

@@ -4,92 +4,6 @@
 // |------------------------------------------------------
 // |------------------------------------------------------
 
-// Helper to apply multiple config for a certain state with one mixin
-@mixin gridle_set(
-	$settings,
-	$state : default
-) {
-	
-	// loop on each settings
-	@each $settingName, $settingValue in $settings
-	{
-		$sn : unquote($settingName);
-		$sv : $settingValue;
-
-		// check if setting name is a state :
-		@if _gridle_has_state($sn) {
-			// process the state
-			@include gridle_set($sv, $sn);
-		} @else {
-			@if $sn == container {
-				@include gridle_container($state);
-			} @else if $sn == grid {
-				@include gridle($sv, $state);
-			} @else if $sn == push {
-				@include gridle_push($sv, $state);
-			} @else if $sn == pull {
-				@include gridle_pull($sv, $state);
-			} @else if $sn == prefix {
-				@include gridle_prefix($sv, $state);
-			} @else if $sn == suffix {
-				@include gridle_suffix($sv, $state);
-			} @else if $sn == pull {
-				@include gridle_pull($sv, $state);
-			} @else if $sn == clear_each {
-				@include gridle_clear_each(nth($sv,1), nth($sv,2), $state);
-			} @else if $sn == centered {
-				@include gridle_centered($state);
-			} @else if $sn == parent {
-				@include gridle_parent($state);
-			} @else if $sn == vertical_align {
-				@include gridle_vertical_align($sv, $state);
-			} @else if $sn == hide {
-				@if $sv == true {
-					@include gridle_hide($state);
-				} @else {
-					@include gridle_show($state);
-				}
-			} @else if $sn == show {
-				@if $sv == true {
-					@include gridle_show($state);
-				} @else {
-					@include gridle_hide($state);
-				}
-			} @else if $sn == visible {
-				@if $sv == true {
-					@include gridle_visible($state);
-				} @else {
-					@include gridle_not_visible($state);
-				}
-			} @else if $sn == not_visible {
-				@if $sv == true {
-					@include gridle_not_visible($state);
-				} @else {
-					@include gridle_visible($state);
-				}
-			} @else if $sn == show_inline {
-				@if $sv == true {
-					@include gridle_show_inline($state);
-				} @else {
-					@include gridle_hide($state);
-				}
-			} @else if $sn == float {
-				@include gridle_float($sv, $state);
-			} @else if $sn == clear {
-				@include gridle_clear($sv, $state);
-			} @else if $sn == no_gutter
-				or $sn == no_margin {
-				@include gridle_no_gutter($sv, $state);
-			} @else if $sn == gutter
-				or $sn == margin {
-				@include gridle_gutter($sv, $state);
-			} @else {
-				// we do nothing
-			}
-		}
-	}
-}
-
 // Responsive helpers mixins :
 @mixin gridle_state(
 	$states,
@@ -173,7 +87,7 @@
 
 // Container mixin :
 @mixin gridle_container(
-	$state : default
+	$state : null
 ) {
 	@include _gridle_container_common($state);
 }
@@ -183,10 +97,10 @@
 // Set the width of the specified grid column :
 @mixin gridle(
 	$columns,
-	$state : default
+	$state : null
 ) {
 	// common :
-	@include _gridle_grid_common();
+	@include _gridle_grid_common($state);
 	// check if need media query :
 	@if $state {
 		@include gridle_state($state) {
@@ -198,7 +112,7 @@
 }
 @mixin _gridle(
 	$columns,
-	$state : default
+	$state : null
 ) {
 	// vars :
 	$name : _gridle_get_var_value(name, $state);
@@ -210,14 +124,14 @@
 	$debug-show-class-names : _gridle_get_var_value(debug-show-class-names, $state);
 
 	// vars :
-	$width : percentage(1 / $context * ($columns / $name-multiplicator) );
+	$width : percentage(1 / $context * $columns);
 
 	// set value :
 	width:$width;
 	
 	// ie7 support :
 	@if $ie7-support == true {
-		*width: expression((this.parentNode.clientWidth/#{$context}*#{($columns / $name-multiplicator)} - parseInt(this.currentStyle['paddingLeft']) - parseInt(this.currentStyle['paddingRight'])) + 'px');
+		*width: expression((this.parentNode.clientWidth/#{$context}*#{$columns} - parseInt(this.currentStyle['paddingLeft']) - parseInt(this.currentStyle['paddingRight'])) + 'px');
 	}
 	
 	// debug :
@@ -225,16 +139,16 @@
 		#{$gridle-debug-selector} {
 			&:before {
 				@if $name == default {
-					content:"grid-#{$name}-#{$columns}";
+					content:"grid-#{$name}-#{$columns * $name-multiplicator}";
 				} @else {
-					content:"grid-#{$name}-#{$columns}" !important;
+					content:"grid-#{$name}-#{$columns * $name-multiplicator}" !important;
 				}
 			}
 			&.parent:before {
 				@if $name == default {
-					content:"grid-parent-#{$name}-#{$columns}";
+					content:"grid-parent-#{$name}-#{$columns * $name-multiplicator}";
 				} @else {
-					content:"grid-parent-#{$name}-#{$columns}" !important;
+					content:"grid-parent-#{$name}-#{$columns * $name-multiplicator}" !important;
 				}
 			}
 		}
@@ -246,7 +160,7 @@
 // Push the element of the count of column wanted
 @mixin gridle_push(
 	$columns,
-	$state : default
+	$state : null
 ) {
 	// common :
 	@include _gridle_push_common($state);
@@ -262,7 +176,7 @@
 }
 @mixin _gridle_push(
 	$columns,
-	$state : default
+	$state : null
 ) {
 	// variables :
 	$name : _gridle_get_var_value(name, $state);
@@ -273,7 +187,7 @@
 	$debug-show-class-names : _gridle_get_var_value(debug-show-class-names, $state);
 
 	// vars :
-	$width : percentage(1 / $context) * ($columns / $name-multiplicator);
+	$width : percentage(1 / $context) * $columns;
 	@if $direction == rtl { $width : $width*-1; }
 	left:$width;
 
@@ -282,9 +196,9 @@
 		#{$gridle-debug-selector} {
 			&:after {
 				@if $name == default {
-					content:"push-#{$name}-#{$columns}";
+					content:"push-#{$name}-#{$columns * $name-multiplicator}";
 				} @else {
-					content:"push-#{$name}-#{$columns}" !important;
+					content:"push-#{$name}-#{$columns * $name-multiplicator}" !important;
 				}
 			}
 		}
@@ -297,7 +211,7 @@
 // Pull the element of the count of column wanted
 @mixin gridle_pull(
 	$columns,
-	$state : default
+	$state : null
 ) {
 	// common :
 	@include _gridle_pull_common($state);
@@ -313,7 +227,7 @@
 }
 @mixin _gridle_pull(
 	$columns,
-	$state : default
+	$state : null
 ) {
 	// vars :
 	$name : _gridle_get_var_value(name, $state);
@@ -324,7 +238,7 @@
 	$debug-show-class-names : _gridle_get_var_value(debug-show-class-names, $state);
 
 	// vars :
-	$width : percentage(1 / $context) * ($columns / $name-multiplicator);
+	$width : percentage(1 / $context) * $columns;
 	@if $direction == rtl { $width : $width*-1; }
 	right:$width;
 
@@ -333,9 +247,9 @@
 		#{$gridle-debug-selector} {
 			&:after {
 				@if $name == default {
-					content:"pull-#{$name}-#{$columns}";
+					content:"pull-#{$name}-#{$columns * $name-multiplicator}";
 				} @else {
-					content:"pull-#{$name}-#{$columns}" !important;
+					content:"pull-#{$name}-#{$columns * $name-multiplicator}" !important;
 				}
 			}
 		}
@@ -347,7 +261,7 @@
 // Push the element of the count of column wanted
 @mixin gridle_prefix(
 	$columns,
-	$state : default
+	$state : null
 ) {
 	// common :
 	@include _gridle_prefix_common($state);
@@ -363,7 +277,7 @@
 }
 @mixin _gridle_prefix(
 	$columns,
-	$state : default
+	$state : null
 ) {
 	// vars :
 	$name : _gridle_get_var_value(name, $state);
@@ -375,7 +289,7 @@
 	$debug-show-class-names : _gridle_get_var_value(debug-show-class-names, $state);
 
 	// vars :
-	$width : percentage(1 / $context) * ($columns / $name-multiplicator);
+	$width : percentage(1 / $context) * $columns;
 
 	// set value :
 	@if $direction == rtl { margin-right:$width; }
@@ -386,9 +300,9 @@
 		#{$gridle-debug-selector} {
 			&:after {
 				@if $name == default {
-					content:"prefix-#{$name}-#{$columns}";
+					content:"prefix-#{$name}-#{$columns * $name-multiplicator}";
 				} @else {
-					content:"prefix-#{$name}-#{$columns}" !important;
+					content:"prefix-#{$name}-#{$columns * $name-multiplicator}" !important;
 				}
 			}
 		}
@@ -400,7 +314,7 @@
 // Pull the element of the count of column wanted
 @mixin gridle_suffix(
 	$columns,
-	$state : default
+	$state : null
 ) {
 	// common :
 	@include _gridle_suffix_common($state);
@@ -416,7 +330,7 @@
 }
 @mixin _gridle_suffix(
 	$columns,
-	$state : default
+	$state : null
 ) {
 	// vars :
 	$name : _gridle_get_var_value(name, $state);
@@ -428,7 +342,7 @@
 	$debug-show-class-names : _gridle_get_var_value(debug-show-class-names, $state);
 
 	// vars :
-	$width : percentage(1 / $context) * ($columns / $name-multiplicator);
+	$width : percentage(1 / $context) * $columns;
 	
 	// set value :
 	@if $direction == rtl { margin-left:$width; }
@@ -439,9 +353,9 @@
 		#{$gridle-debug-selector} {
 			&:after {
 				@if $name == default {
-					content:"suffix-#{$name}-#{$columns}";
+					content:"suffix-#{$name}-#{$columns * $name-multiplicator}";
 				} @else {
-					content:"suffix-#{$name}-#{$columns}" !important;
+					content:"suffix-#{$name}-#{$columns * $name-multiplicator}" !important;
 				}
 			}
 		}
@@ -452,7 +366,7 @@
 // grid background :
 // Display the grid background debug
 @mixin gridle_grid_background(
-	$state : default
+	$state : null
 ) {
 	// check if need media query :
 	@if $state {
@@ -464,7 +378,7 @@
 	}
 }
 @mixin _gridle_grid_background(
-	$state : default
+	$state : null
 ) {
 	
 	// variables :
@@ -494,20 +408,21 @@
 @mixin gridle_clear_each(
 	$clearEach,
 	$clearWhat : both,
-	$state : default
+	$state : null
 ) {
 	// check if need media query :
 	@if $state {
 		@include gridle_state($state) {
-			@include _gridle_clear_each($clearEach, $clearWhat);
+			@include _gridle_clear_each($clearEach, $clearWhat, $state);
 		}
 	} @else {
-		@include _gridle_clear_each($clearEach, $clearWhat);
+		@include _gridle_clear_each($clearEach, $clearWhat, $state);
 	}
 }
 @mixin _gridle_clear_each(
 	$clearEach,
-	$clearWhat
+	$clearWhat,
+	$state : null
 ) {
 	> *:nth-child(#{$clearEach}n+1) {
 		clear : $clearWhat;
@@ -517,7 +432,7 @@
 
 // Grid centered :
 @mixin gridle_centered(
-	$state : default
+	$state : null
 ) {
 	// check if need media query :
 	@if $state {
@@ -539,7 +454,7 @@
 
 // Grid parent :
 @mixin gridle_parent(
-	$state : default
+	$state : null
 ) {
 	// common :
 	@include _gridle_parent_common();
@@ -562,7 +477,7 @@
  */
 @mixin gridle_vertical_align(
 	$align : middle,
-	$state : default
+	$state : null
 ) {
 	// check if need media query :
 	@if $state {
@@ -591,7 +506,7 @@
 // Hide on :
 // @param 	String 	$media  On what state
 @mixin gridle_hide(
-	$state : default
+	$state : null
 ) {
 	// check if need media query :
 	@if $state {
@@ -610,7 +525,7 @@
 // Not visible on :
 // @param 	String 	$media 	What to hide (one of the 3 state classes name)
 @mixin gridle_not_visible(
-	$state : default
+	$state : null
 ) {
 	// check if need media query :
 	@if $state {
@@ -629,7 +544,7 @@
 // Show on
 // @param 	String 	$media 	What to hide (one of the 3 state classes name)
 @mixin gridle_show(
-	$state : default
+	$state : null
 ) {
 	// check if need media query :
 	@if $state {
@@ -645,32 +560,10 @@
 }
 
 
-/**
- * Show inline
- *
- * @param 	String 		$state 		The state name
- */
-@mixin gridle_show_inline(
-	$state : default
-) {
-	// check if need media query :
-	@if $state {
-		@include gridle_state($state) {
-			@include _gridle_show_inline();
-		}
-	} @else {
-		@include _gridle_show_inline();
-	}
-}
-@mixin _gridle_show_inline() {
-	display:inline-block;
-}
-
-
 // Visible on :
 // @param 	String 	$media 	On what state
 @mixin gridle_visible(
-	$state : default
+	$state : null
 ) {
 	// check if need media query :
 	@if $state {
@@ -689,7 +582,7 @@
 // Gridle Right :
 @mixin gridle_float(
 	$float-direction : left,
-	$state : default
+	$state : null
 ) {
 	// check if need media query :
 	@if $state {
@@ -712,7 +605,7 @@
 // @param 	String 	$state 				The state
 @mixin gridle_clear(
 	$clear-direction : both,
-	$state : default
+	$state : null
 ) {
 	// check if need media query :
 	@if $state {
@@ -735,7 +628,7 @@
 // @param 	String 	$state 				The state
 @mixin gridle_no_gutter(
 	$side : left right,
-	$state : default
+	$state : null
 ) {
 	// check if need media query :
 	@if $state {
@@ -748,7 +641,7 @@
 }
 @mixin gridle_no_margin(
 	$side : left right,
-	$state : default
+	$state : null
 ) {
 	@include gridle_no_gutter($side, $state);
 }
@@ -756,7 +649,7 @@
 	$side : left right
 ) {
 	@each $s in $side {
-		padding-#{$s} : 0;
+		padding-#{$s} : 0 !important;
 	}
 }
 
@@ -766,7 +659,7 @@
 // @param 	String 	$state 				The state
 @mixin gridle_gutter(
 	$side : left right,
-	$state : default
+	$state : null
 ) {
 	// check if need media query :
 	@if $state {
@@ -780,13 +673,13 @@
 // shortcut :
 @mixin gridle_margin(
 	$side : left right,
-	$state : default
+	$state : null
 ) {
 	@include gridle_gutter($side, $state);
 }
 @mixin _gridle_gutter(
 	$side : left right,
-	$state : default
+	$state : null
 ) {
 	$gutter-width : _gridle_get_var_value(gutter-width, $state);
 	@each $s in $side {