gridle 2.0.2 → 2.0.4

data/stylesheets/gridle/_driver-flex.scss

@@ -19,6 +19,21 @@
 		}
 		padding-left: 0 !important;
 		padding-right: 0 !important;
+		margin-left: -#{gridle_get_state_var(gutter-left)};
+		margin-right: -#{gridle_get_state_var(gutter-right)};
+
+		// do this only when not in generate phase
+		// mean that we use the mixin directly
+		@if _gridle_is_in_generate_phase() == false {
+			@each $stateName, $state in gridle_get_states() {
+				@include gridle_state($state) {	
+					& #{str-replace(#{&},".state-#{gridle_get_state_var(name, $state)}","")} {
+						margin-left: -#{gridle_get_state_var(gutter-left, $state)};
+						margin-right: -#{gridle_get_state_var(gutter-right, $state)};
+					}
+				}
+			}
+		}
 	}
 }
 
@@ -41,6 +56,21 @@
 		}
 		padding-left: 0 !important;
 		padding-right: 0 !important;
+		margin-left: -#{gridle_get_state_var(gutter-left)};
+		margin-right: -#{gridle_get_state_var(gutter-right)};
+
+		// do this only when not in generate phase
+		// mean that we use the mixin directly
+		@if _gridle_is_in_generate_phase() == false {
+			@each $stateName, $state in gridle_get_states() {
+				@include gridle_state($state) {	
+					& #{str-replace(#{&},".state-#{gridle_get_state_var(name, $state)}","")} {
+						margin-left: -#{gridle_get_state_var(gutter-left, $state)};
+						margin-right: -#{gridle_get_state_var(gutter-right, $state)};
+					}
+				}
+			}
+		}
 	}
 }
 
@@ -97,14 +127,14 @@
 	@include gridle_gutter();
 	
 }
-@mixin gridle(
+@mixin gridle_grid(
 	$columns,
 	$context : null
 ) {
 	@if $columns == grow {
 		@include gridle_grid_grow();
 	} @else if $columns == adapt {
-		@include gridle_grow_adapt();
+		@include gridle_grid_adapt();
 	} @else {
 
 		@include _gridle_call(grid) {
@@ -117,7 +147,8 @@
 			$name-multiplicator : gridle_get_state_var(name-multiplicator);
 			$gutter-left : gridle_get_state_var(gutter-left);
 			$gutter-right : gridle_get_state_var(gutter-right);
-
+			$column-width : gridle_get_state_var(column-width);
+			
 			// manage columns
 			@if type-of($columns) != number and map-has-key($_gridle_columns, $columns) {
 				// the columns is a saved one, get the context and column value
@@ -131,7 +162,12 @@
 			}
 
 			// width :
-			$width : percentage(1 / $context * $columns);
+			$width : 0;
+			@if $column-width {
+				$width : $column-width * $columns;
+			} @else {
+				$width : percentage(1 / $context * $columns);
+			}
 
 			// if flex
 			@include flex-basis($width);
@@ -140,14 +176,6 @@
 
 	}
 }
-// alias to gridle
-@mixin gridle_grid(
-	$columns,
-	$context : null
-) {
-	@include gridle($columns, $context);
-}
-
 
 //
 // Grid table
@@ -196,6 +224,30 @@
 			}
 			transform: translateX(-50%);
 		}
+		@if gridle_get_state_var(dir-attribute) {
+			[dir="ltr"] & {
+				margin-left:50% !important;
+				margin-right:0 !important;
+				@if $gridle-vendor-prefix {
+					-webkit-transform: translateX(-50%);
+					-moz-transition: translateX(-50%);
+					-ms-transform: translateX(-50%);
+					-o-transform: translateX(-50%);
+				}
+				transform: translateX(-50%);
+			}
+			[dir="rtl"] & {
+				margin-right:50% !important;
+				margin-left:0 !important;
+				@if $gridle-vendor-prefix {
+					-webkit-transform: translateX(50%);
+					-moz-transition: translateX(50%);
+					-ms-transform: translateX(50%);
+					-o-transform: translateX(50%);
+				}
+				transform: translateX(50%);
+			}
+		}
 	}
 }
 
@@ -249,122 +301,6 @@
 }
 
 
-//
-// Push
-//
-@mixin _gridle_common_push(
-	$state : default
-) {
-	// css
-	position:relative;
-}
-@mixin gridle_push(
-	$columns,
-	$context : null
-) {
-	@include _gridle_call(push) {
-		// variables :
-		@if type-of($context) != number {
-			$context : gridle_get_state_var(context);
-		}
-		$direction : gridle_get_state_var(direction);
-		$name-multiplicator : gridle_get_state_var(name-multiplicator);
-
-		// vars :
-		$width : percentage(1 / $context) * ($columns / $name-multiplicator);
-		@if $direction == rtl { $width : $width*-1; }
-		left:$width;
-	}
-}
-
-
-//
-// Pull
-//
-@mixin _gridle_common_pull(
-	$state : default
-) {
-	// css
-	position:relative;
-}
-@mixin gridle_pull(
-	$columns,
-	$context : null
-) {
-	@include _gridle_call(pull) {
-		// variables :
-		@if type-of($context) != number {
-			$context : gridle_get_state_var(context);
-		}
-		$direction : gridle_get_state_var(direction);
-		$name-multiplicator : gridle_get_state_var(name-multiplicator);
-		
-		// vars :
-		$width : percentage(1 / $context) * ($columns / $name-multiplicator);
-		@if $direction == rtl { $width : $width*-1; }
-		right:$width;
-	}
-}
-
-
-//
-// Prefix
-//
-@mixin _gridle_common_prefix(
-	$state : default
-) {
-}
-@mixin gridle_prefix(
-	$columns,
-	$context : null
-) {
-	@include _gridle_call(prefix) {
-		// vars :
-		@if type-of($context) != number {
-			$context : gridle_get_state_var(context);
-		}
-		$direction : gridle_get_state_var(direction);
-		$name-multiplicator : gridle_get_state_var(name-multiplicator);
-		
-		// vars :
-		$width : percentage(1 / $context) * ($columns / $name-multiplicator);
-
-		// set value :
-		@if $direction == rtl { margin-right:$width; }
-		@else { margin-left:$width; }
-	}
-}
-
-
-//
-// Suffix
-//
-@mixin _gridle_common_suffix(
-	$state : default
-) {
-}
-@mixin gridle_suffix(
-	$columns,
-	$context : null
-) {
-	@include _gridle_call(suffix) {
-		// vars :
-		@if type-of($context) != number {
-			$context : gridle_get_state_var(context);
-		}
-		$direction : gridle_get_state_var(direction);
-		$name-multiplicator : gridle_get_state_var(name-multiplicator);
-		
-		// vars :
-		$width : percentage(1 / $context) * ($columns / $name-multiplicator);
-		
-		// set value :
-		@if $direction == rtl { margin-left:$width; }
-		@else { margin-right:$width; }
-	}
-}
-
-
 //
 // Order
 //

data/stylesheets/gridle/_functions.scss

@@ -158,7 +158,7 @@
 //
 @function gridle_column_width(
 	$columns : 1,
-	$stateMap-or-stateName : null
+	$stateMap-or-stateName : current
 ) {
 	$context : gridle_get_state_var(context, $stateMap-or-stateName);
 	@return percentage(1 / $context * $columns);
@@ -200,6 +200,8 @@
 	@if $stateMap-or-stateName
 		and type-of($stateMap-or-stateName) == map
 	{
+		// prepare state
+		$stateMap-or-stateName : _gridle_prepare_state_settings($stateMap-or-stateName);	
 		// create a new state by merging given one with defaul one
 		$state : map-merge($_gridle-settings, $stateMap-or-stateName);
 		// set the name with random name
@@ -228,6 +230,9 @@
 @function gridle_has_state(
 	$stateName
 ) {
+	@if $stateName == current {
+		@return true;
+	}
 	@if map-has-key($_gridle_states, unquote("#{$stateName}")) {
 		@return true;
 	} @else {
@@ -245,7 +250,7 @@
 //
 @function gridle_get_state_var(
 	$varName,
-	$stateMap-or-stateName : null
+	$stateMap-or-stateName : current
 ) {
 	// if is a state :
 	$state : null;
@@ -315,6 +320,9 @@
 	}
 	@return $list;
 }
+@function gridle_states_names() {
+	@return gridle_get_states_names();
+}
 
 
 //
@@ -408,6 +416,80 @@
 }
 
 
+//
+// Check if has column
+//
+@function gridle_has_column(
+	$name
+) {
+	$column : map-get($_gridle_columns,$name);
+	@if $column {
+		@return true;
+	} @else {
+		@return false;
+	}
+}
+
+
+@function _gridle_prepare_state_settings(
+	$settings
+) {
+	// manage gutters
+	$gutter-top : map-get($settings, gutter-top);
+	$gutter-bottom : map-get($settings, gutter-bottom);
+	$gutter-left : map-get($settings, gutter-left);
+	$gutter-right : map-get($settings, gutter-right);
+	$gutter-width : map-get($settings, gutter-width);
+	$gutter-height : map-get($settings, gutter-height);
+	@if $gutter-right and $gutter-left {
+		// calculate the gutter-width
+		$settings : map-set($settings, gutter-width, $gutter-left + $gutter-right);
+	} @else if $gutter-width {
+		// calculate the gutter-left and right
+		$settings : map-set($settings, gutter-left, $gutter-width * .5);
+		$settings : map-set($settings, gutter-right, $gutter-width * .5);
+	}
+	@if $gutter-top and $gutter-bottom {
+		// calculate the gutter-height
+		$settings : map-set($settings, gutter-height, $gutter-bottom + $gutter-top);
+	} @else if $gutter-height {
+		// calculate the gutter-bottom and top
+		$settings : map-set($settings, gutter-bottom, $gutter-height * .5);
+		$settings : map-set($settings, gutter-top, $gutter-height * .5);
+	}
+
+	// return prepared settings
+	@return $settings;
+}
+
+
+//
+// Extend a state
+//
+@function _gridle_inherit_state(
+	$state,
+	$extend-state
+) {
+	$extend-state-name : gridle_get_state_var(name, $extend-state);
+	$state-name : gridle_get_state_var(name, $state);
+	$has-state : gridle_has_state($state-name);
+	$has-extend-state : gridle_has_state($extend-state-name);
+	@if $has-state and $has-extend-state {
+		// we do nothing if this is nested existing states
+		@return $state;
+	} @else if $has-extend-state {
+		// if the base state is a registered one
+		// keep the extend state and extend it with the wanted state
+		@return map-merge($extend-state, $state);
+	} @else {
+		// otherwise, the base state is a custom one so we keep
+		// it and extend the wanted state with it
+		$new-state : map-remove($extend-state, name); // remove the name is important here!
+		@return map-merge($state, $new-state);	
+	}
+}
+
+
 //
 // Get the padding value
 //
@@ -723,6 +805,110 @@
 }
 
 
+//
+// Parse gridle mixin list
+//
+@function _gridle_parse_gridle_mixin_list(
+	$list
+) {
+	// map
+	$map : ();
+
+	// context
+	$context : null;
+	$of : index($list, of);
+	@if $of {
+		$context : nth($list, ($of + 1));
+		$list : remove-nth($list,$of);
+		$list : remove-nth($list,$of);
+	} @else {
+		$ctx : index($list, context);
+		@if $ctx {
+			$context : nth($list, ($ctx + 1));
+			$list : remove-nth($list,$ctx);
+			$list : remove-nth($list,$ctx);
+		}
+	}
+
+	// grid
+	$gr : nth($list, 1);
+	@if type-of($gr) == number or $gr == adapt or $gr == grow or gridle_has_column($gr) {
+		$map : map-set($map, grid, $gr $context);
+		$list : remove-nth($list,1);
+	}
+
+	// prefix
+	$prefix : null;
+	$at : index($list, at);
+	@if $at {
+		$map : map-set($map, prefix, nth($list,($at + 1)) $context);
+		$list : remove-nth($list,$at);
+		$list : remove-nth($list,$at);
+	}
+
+	// loop on each parameters
+	$prop_values : ();
+	$prop_name : null;
+	$list : append($list, _gridle-last);
+	@each $param in $list {
+		
+		@if $param != with and $param != 'and' {
+			@if map-get($_gridle-packages, $param) or $param == _gridle-last {
+				@if $prop_name {
+					$values : true;
+					@if length($prop_values) > 0 {
+						$values : $prop_values;
+						$prop_values : ();
+					}
+					$map : map-set($map, $prop_name, $values);	
+				}
+				$prop_name : $param;
+			} @else {
+				$prop_values : append($prop_values, $param);
+			}
+		}
+	}
+
+	// return the map
+	@return $map;
+}
+
+
+//
+// Get set map from string
+//
+@function _gridle_get_gridle_set_map_from_list(
+	$list
+) {
+	// loop on each list element to split into states lists
+	$state : current;
+	$map : ();
+	@each $prop in $list {
+		@if map-get($map, $state) == null {
+			$map : map-set($map, $state, ());
+		}
+		@if type-of($prop) == string and gridle_has_state($prop) {
+			$state : $prop;
+		} @else {
+			$ls : map-get($map, $state);
+			$ls : append($ls, $prop);
+			$map : map-set($map, $state, $ls);
+		}
+	}
+
+	// loop on each states
+	@each $stateName, $props in $map {
+		$props_map : _gridle_parse_gridle_mixin_list($props);
+		@if type-of($props_map) == map {
+			$map : map-set($map, $stateName, $props_map);
+		} @else {
+			$map : map-set($map, $stateName, null);
+		}
+	}
+	@return $map;
+}
+
+
 //
 // Get the media query for a particular state, or with, etc...
 //