susy 2.0.0.alpha.2 → 2.0.0.alpha.3

data/sass/susy/language/susy/_margins.scss

@@ -0,0 +1,92 @@
+// Margin Syntax
+// =============
+
+// Pre
+// ---
+// Add spanning-margins before an element.
+// - $span  : <span>
+@mixin pre(
+  $span
+) {
+  $span   : if(index($span, outer), $span, append($span, outer));
+  $flow   : get-span-setting(flow, $span, parse);
+  $width  : span($span);
+
+  @include margin-output($width, null, $flow);
+}
+
+// Post
+// ----
+// Add spanning-margins after an element.
+// - $span  : <span>
+@mixin post(
+  $span
+) {
+  $span   : if(index($span, outer), $span, append($span, outer));
+  $flow   : get-span-setting(flow, $span, parse);
+  $width  : span($span);
+
+  @include margin-output(null, $width, $flow);
+}
+
+// Push
+// ----
+// Simple synonymn for pre.
+// - $span  : <span>
+@mixin push(
+  $span
+) {
+  @include pre($span);
+}
+
+// Pull
+// ----
+// Add negative spanning-margins before an element.
+// - $span  : <span>
+@mixin pull(
+  $span
+) {
+  $span   : if(index($span, outer), $span, append($span, outer));
+  $flow   : get-span-setting(flow, $span, parse);
+  $width  : 0 - span($span);
+
+  @include margin-output($width, null, $flow);
+}
+
+// Squish
+// ------
+// Add spanning-margins before and after an element.
+// - $pre     : <span>
+// - [$post]  : <span>
+@mixin squish(
+  $pre,
+  $post: $pre
+) {
+  $pre    : if(index($pre, outer), $pre, append($pre, outer));
+  $post   : if(index($post, outer), $post, append($post, outer));
+
+  $get-pre    : parse-span($pre);
+  $get-post   : parse-span($post);
+
+  $flow     : get-span-setting(flow, $get-pre);
+  $before   : null;
+  $after    : null;
+
+  // get the various contexts
+  $default-context  : $columns $gutters;
+  $pre-context      : get-span-setting(columns, $get-pre) get-span-setting(gutters, $get-pre);
+  $post-context     : get-span-setting(columns, $get-post) get-span-setting(gutters, $get-post);
+
+  // if the contexts don't line up, and only the post has changed, we use it for both
+  @if $pre-context != $post-context and $default-context == $pre-context {
+    @include use-grid($post-context) {
+      $before: span($pre);
+      $after: span($post);
+    }
+  } @else {
+    $before: span($pre);
+    $after: span($post);
+  }
+
+  @include margin-output($before, $after, $flow);
+}

data/sass/susy/language/susy/_padding.scss

@@ -0,0 +1,68 @@
+// Padding Syntax
+// ==============
+
+// Prefix
+// ------
+// Add spanning-padding before an element.
+// - $span  : <span>
+@mixin prefix(
+  $span
+) {
+  $span   : if(index($span, outer), $span, append($span, outer));
+  $flow   : get-span-setting(flow, $span, parse);
+  $width  : span($span);
+
+  @include padding-output($width, null, $flow);
+}
+
+// Suffix
+// ------
+// Add spanning-padding after an element.
+// - $span  : <span>
+@mixin suffix(
+  $span
+) {
+  $span   : if(index($span, outer), $span, append($span, outer));
+  $flow   : get-span-setting(flow, $span, parse);
+  $width  : span($span);
+
+  @include padding-output(null, $width, $flow);
+}
+
+// Pad
+// ---
+// Add spanning-padding before and after an element.
+// - $pre     : <span>
+// - [$post]  : <span>
+@mixin pad(
+  $pre,
+  $post: $pre
+) {
+  $pre    : if(index($pre, outer), $pre, append($pre, outer));
+  $post   : if(index($post, outer), $post, append($post, outer));
+
+  $get-pre    : parse-span($pre);
+  $get-post   : parse-span($post);
+
+  $flow     : get-span-setting(flow, $get-pre);
+  $before   : null;
+  $after    : null;
+
+  // get the various contexts
+  $default-context  : $columns $gutters;
+  $pre-context      : get-span-setting(columns, $get-pre) get-span-setting(gutters, $get-pre);
+  $post-context     : get-span-setting(columns, $get-post) get-span-setting(gutters, $get-post);
+
+  // if the contexts don't line up, and only the post has changed, we use it for both
+  @if $pre-context != $post-context and $default-context == $pre-context {
+    @include use-grid($post-context) {
+      $before: span($pre);
+      $after: span($post);
+    }
+  } @else {
+    $before: span($pre);
+    $after: span($post);
+  }
+
+  @include padding-output($before, $after, $flow);
+}

data/sass/susy/language/susy/_rows.scss

@@ -1,46 +1,63 @@
 // Row Start & End
 // ===============
 
+// Row
+// ---
 // Apply to any layout element that should force a new layout row.
+// - [$flow]  : ltr | rtl
 @mixin row(
   $flow: $flow
 ) {
-  $clear: $flow;
-
-  @if $flow == ltr or $flow == rtl {
-    $clear: from($flow);
-  }
-
-  clear: $clear;
+  @include pie-clearfix;
+  clear: from($flow);
 }
 
+// Unrow
+// -----
 // Cancel the row() effect, e.g. when using media queries.
+// - [$flow]  : ltr | rtl
 @mixin unrow {
   clear: none;
+  &:after {
+    content: none;
+    display: inline;
+    clear: none;
+  }
 }
 
-// First item
-// ----------
-
+// First
+// -----
+// - [$flow]  : ltr | rtl
 @mixin first(
   $flow: $flow
 ) {
   @include float-first($flow);
 }
 
+// Alpha
+// -----
+// - [$flow]  : ltr | rtl
 @mixin alpha(
   $flow: $flow
 ) {
   @include float-first($flow);
 }
 
+// Nth-First
+// ---------
+// - [$value]   : first | last | only | <math>
+// - [$type]    : child | last-child | of-type | last-of-type
 @mixin nth-first(
   $value: first,
   $type: child
 ) {
-  &:#{format-nth($value,$type)} { @include first($flow); }
+  &:#{format-nth($value,$type)} { @include first(); }
 }
 
+// Nth-Alpha
+// ---------
+// - [$value]   : first | last | only | <math>
+// - [$type]    : child | last-child | of-type | last-of-type
 @mixin nth-alpha(
   $value: first,
   $type: child
@@ -48,28 +65,39 @@
   @include nth-first($value, $type);
 }
 
-// Last item
-// ---------
-
+// Last
+// ----
+// - [$flow]  : ltr | rtl
 @mixin last(
   $flow: $flow
 ) {
   @include float-last($flow);
 }
 
+// Omega
+// -----
+// - [$flow]  : ltr | rtl
 @mixin omega(
   $flow: $flow
 ) {
   @include float-last($flow);
 }
 
+// Nth-Last
+// --------
+// - [$value]   : first | last | only | <math>
+// - [$type]    : child | last-child | of-type | last-of-type
 @mixin nth-last(
   $value: last,
   $type: child
 ) {
-  &:#{format-nth($value,$type)} { @include last($flow); }
+  &:#{format-nth($value,$type)} { @include last(); }
 }
 
+// Nth-Omega
+// ---------
+// - [$value]   : first | last | only | <math>
+// - [$type]    : child | last-child | of-type | last-of-type
 @mixin nth-omega(
   $value: last,
   $type: child

data/sass/susy/language/susy/_span.scss

@@ -1,14 +1,17 @@
-// Span language parsing
-// =====================
+// Span Syntax
+// ===========
 
-// Set a spanning element using shorthand syntax
+// Span [mixin]
+// ------------
+// Set a spanning element using shorthand syntax.
+// - $span  : <span>
 @mixin span(
   $span
 ) {
   $span     : parse-span($span);
   $output   : span-math($span...);
   $box      : get-span-setting(box-sizing, $span);
-  $inside   : if(get-span-setting(gutter-placement, $span) == inside, true, false);
+  $inside   : if(get-span-setting(gutter-position, $span) == inside, true, false);
 
   @if $box == border-box or $inside {
     @include box-sizing(border-box);
@@ -19,26 +22,51 @@
   @include float-span-output($output...);
 }
 
-// Span Helpers
-// ------------
+// Span [function]
+// ---------------
+// Return the width of a span.
+// - $span  : <span>
+@function span(
+  $span
+) {
+  $span                   : parse-span($span);
+
+  $width                  : get-span-setting(span, $span);
+
+  $this-location          : get-span-setting(location, $span);
+  $this-columns           : get-span-setting(columns, $span);
+  $this-gutters           : get-span-setting(gutters, $span);
+  $this-column-width      : get-span-setting(column-width, $span);
+  $this-layout-math       : get-span-setting(layout-math, $span);
+  $this-gutter-position   : get-span-setting(gutter-position, $span);
+  $outer                  : get-span-setting(outer, $span);
 
-// Parse the span shortcut syntax
+  $width: get-span-width($width, $this-location, $this-columns, $this-gutters, $this-column-width, $this-layout-math, $this-gutter-position, $outer);
+
+  @return $width;
+}
+
+// Parse Span
+// ----------
+// Parse the span shortcut syntax.
+// - $string  : <span>
 @function parse-span(
   $string
 ) {
-  $new-span           : false;
-  $new-location       : false;
-  $new-context        : false;
-  $new-isolate        : false;
-  $new-static         : false;
-  $new-columns        : false;
-  $new-gutters        : false;
-  $new-column-width   : false;
-  $new-flow           : false;
-  $new-gutter-place   : false;
-  $gutter-override    : false;
-
-  $is-container       : false;
+  $new-span               : false;
+  $new-location           : false;
+  $new-context            : false;
+  $new-layout-method      : false;
+  $new-layout-math        : false;
+  $new-columns            : false;
+  $new-gutters            : false;
+  $new-column-width       : false;
+  $outer                  : false;
+  $new-flow               : false;
+  $new-gutter-position    : false;
+  $gutter-override        : false;
+
+  $is-container           : false;
 
   $i: 1;
 
@@ -58,18 +86,23 @@
         $new-location: last;
       }
 
-      // isolate
+      // layout-method
       @else if $value == isolate {
-        $new-isolate: isolate;
+        $new-layout-method: isolate;
       } @else if $value == float {
-        $new-isolate: float;
+        $new-layout-method: float;
       }
 
-      // static | fluid
+      // layout-math | fluid
       @else if $value == static {
-        $new-static: static;
+        $new-layout-math: static;
       } @else if $value == fluid {
-        $new-static: fluid;
+        $new-layout-math: fluid;
+      }
+
+      // ltr | rtl
+      @else if $value == outer {
+        $outer: outer;
       }
 
       // ltr | rtl
@@ -81,19 +114,19 @@
 
       // after | before | split | inside | no-gutters
       @else if $value == after {
-        $new-gutter-place: after;
+        $new-gutter-position: after;
       } @else if $value == before {
-        $new-gutter-place: before;
+        $new-gutter-position: before;
       } @else if $value == split {
-        $new-gutter-place: split;
+        $new-gutter-position: split;
       } @else if $value == inside {
-        $new-gutter-place: inside;
-      } @else if $value == no-gutters {
-        $new-gutter-place: no-gutters;
+        $new-gutter-position: inside;
+      } @else if $value == no-gutter or $value == no-gutters {
+        $new-gutter-position: no-gutters;
       }
 
       // container
-      @if $value == container {
+      @else if $value == container {
         $is-container: container;
       }
 
@@ -132,7 +165,7 @@
     // context
     @if $of {
       $i: $i + 1;
-      $new-context: compact();
+      $new-context: ();
 
       @while $of and $i <= length($string) {
         $this: nth($string,$i);
@@ -151,44 +184,36 @@
 
   // parse the context
   @if $new-context {
-    $new-columns: get-setting(columns, $new-context);
-    $new-gutters: get-setting(gutters, $new-context);
-    $new-column-width: get-setting(column-width, $new-context);
+    $new-context        : parse-grid($new-context);
+    $new-columns        : get-setting(columns, $new-context);
+    $new-gutters        : get-setting(gutters, $new-context);
+    $new-column-width   : get-setting(column-width, $new-context);
   }
 
   // use global values for empty grid settings
-  @if not $new-columns {
-    $new-columns: $columns;
-  }
-  @if not $new-gutters {
-    $new-gutters: $gutters;
-  }
-  @if not $new-column-width {
-    $new-column-width: $column-width;
-  }
-  @if not $new-static {
-    $new-static: $static;
-  }
-  @if not $new-isolate {
-    $new-isolate: $isolate;
-  }
-  @if not $new-flow {
-    $new-flow: $flow;
-  }
-  @if not $new-gutter-place {
-    $new-gutter-place: $gutter-placement;
-  }
+  $new-columns            : if($new-columns, $new-columns, $columns);
+  $new-gutters            : if($new-gutters, $new-gutters, $gutters);
+  $new-column-width       : if($new-column-width, $new-column-width, $column-width);
+  $new-layout-math        : if($new-layout-math, $new-layout-math, $layout-math);
+  $new-layout-method      : if($new-layout-method, $new-layout-method, $layout-method);
+  $new-flow               : if($new-flow, $new-flow, $flow);
+  $new-gutter-position    : if($new-gutter-position, $new-gutter-position, $gutter-position);
 
-  @return $new-span $new-location $new-columns $new-gutters $new-column-width $new-isolate $new-static $new-flow $new-gutter-place $is-container $gutter-override;
+  @return $new-span, $new-location, $new-columns, $new-gutters, $new-column-width, $new-layout-method, $new-layout-math, $outer, $new-flow, $new-gutter-position, $is-container, $gutter-override;
 }
 
-// Return one particular span setting from a list
+// Get Span Setting
+// ----------------
+// Return one particular span setting from a list.
+// - $setting   : <keyword> (see $options below)
+// - $span      : <span>
+// - $parse     : <boolean>
 @function get-span-setting(
   $setting,
   $span,
   $parse: false
 ) {
-  $options  : span location columns gutters column-width isolate static flow gutter-placement is-container gutter-override;
+  $options  : span location columns gutters column-width layout-method layout-math outer flow gutter-position is-container gutter-override;
   $key      : index($options, $setting);
   $value    : false;
 
@@ -202,3 +227,115 @@
 
   @return $value;
 }
+
+// Span Math
+// ---------
+// Get all the span results.
+// - $span                : <length> | <number>
+// - $location            : first | last | <length> | <number>
+// - [$columns]           : <number> | <list>
+// - [$gutters]           : <ratio>
+// - [$column-width]      : <length>
+// - [$layout-method]     : float | isolate
+// - [$layout-math]       : fluid | static
+// - [$outer]             : <boolean>
+// - [$flow]              : ltr | rtl
+// - [$gutter-position]   : before | after | split | inside
+// - [$is-container]      : <boolean>
+// - [$gutter-override]   : <length>
+@function span-math(
+  $span,
+  $location,
+  $columns            : $columns,
+  $gutters            : $gutters,
+  $column-width       : $column-width,
+  $layout-method      : $layout-method,
+  $layout-math        : $layout-math,
+  $outer              : $outer,
+  $flow               : $flow,
+  $gutter-position    : $gutter-position,
+  $is-container       : false,
+  $gutter-override    : false
+) {
+  $float            : from;
+  $width            : $span;
+
+  $padding-before   : null;
+  $padding-after    : null;
+  $margin-before    : null;
+  $margin-after     : null;
+
+  // calculate widths
+  $width: get-span-width($span, $location, $columns, $gutters, $column-width, $layout-math, $gutter-position, $outer);
+  $this-gutters: get-gutters($columns, $gutters, $column-width, $layout-math, $gutter-position, $gutter-override);
+
+  // apply gutters
+  @if $gutter-position == inside and not $is-container {
+    $padding-before: nth($this-gutters,1);
+    $padding-after: nth($this-gutters,2);
+  } @else if $gutter-position != inside {
+    $margin-before: nth($this-gutters,1);
+    $margin-after: nth($this-gutters,2);
+  }
+
+  // special margin handling
+  @if $layout-method == isolate {
+    $margin-before: get-isolation($span, $location, $columns, $gutters, $column-width, $layout-math);
+    $margin-after: -100%;
+  } @else {
+    @if is-last($span, $location, $columns) {
+      $float: to;
+      $margin-after: null;
+    } @else if is-first($location) {
+      $margin-before: null;
+    }
+  }
+
+  @return $width $float $margin-before $margin-after $padding-before $padding-after $flow;
+}
+
+// Get Span Width
+// --------------
+// Return span width.
+// - $span                : <length> | <number>
+// - $location            : first | last | <length> | <number>
+// - [$columns]           : <number> | <list>
+// - [$gutters]           : <ratio>
+// - [$column-width]      : <length>
+// - [$layout-math]       : fluid | static
+// - [$gutter-position]   : before | after | split | inside
+// - [$outer]             : <boolean>
+@function get-span-width(
+  $span,
+  $location           : 1,
+  $columns            : $columns,
+  $gutters            : $gutters,
+  $column-width       : $column-width,
+  $layout-math        : $layout-math,
+  $gutter-position    : $gutter-position,
+  $outer              : null
+) {
+  $context  : null;
+  $span-sum : null;
+  $width    : null;
+
+  @if unitless($span) {
+    @if $gutter-position == inside {
+      $context: column-sum($columns, $gutters, outer);
+      $span-sum: get-column-span-sum($span, $location, $columns, $gutters, outer);
+    } @else {
+      $context: column-sum($columns, $gutters);
+      $span-sum: get-column-span-sum($span, $location, $columns, $gutters, $outer);
+    }
+
+    @if $layout-math == static {
+      $width: $span-sum * $column-width;
+    } @else {
+      $width: percentage($span-sum / $context);
+    }
+  } @else {
+    $width: $span;
+  }
+
+  @return $width;
+}