susy 2.0.0.alpha.3 → 2.0.0.alpha.4

checksums.yaml

@@ -1,7 +1,7 @@
 --- 
-SHA512: 
-  data.tar.gz: 7bc217525b1ca257b1d45a1bdd688ddc09417358c26228cc53083ba64f914ec1057154f51feefb76c0cf463a8ab52f368227219b69c978d73951cafdea5f1e9a
-  metadata.gz: 0c0f837b5286717bf4dfdcd78bddafd15b19ee4d5aa9441a63774f160490133e27a5bf09f77d617c959ae883da55b93b979d959c75286fb1e09ff96700d1be92
 SHA1: 
-  data.tar.gz: db4197b6108f2e34188ca74fa198bf0677ced5d3
-  metadata.gz: d7a5ba312e875a4172e9e391ee7cc22d9c46b21d
+  metadata.gz: 46be92875abbfabd5a08c7190610555dbaca91ae
+  data.tar.gz: fe798a70237e5369c6a007550753af7a95523044
+SHA512: 
+  metadata.gz: 3e4c356738b99d6148a9b2d4af4664ee6c51e3600e59e6747b02536b481b2d35ed7af1b3d633e32a77d3d90cda1782d9e08ef6e0aaec6b4912200bdbb6757c30
+  data.tar.gz: caf82262dd8131a8384fda277375fc6393a18cbdf60686ba15afc2666b53b89edf52e2f4911eb6d51990813719dce2b18b103818d1caba7ed565615a7b07b062

data/sass/susy/_settings.scss

@@ -15,3 +15,9 @@ $gutters              : .25       !default;
 
 $column-width         : false     !default;
 $container            : auto      !default;
+
+// Last Flow
+// ---------
+// - Last/Omega float-direction, relative to the document flow
+// from | to
+$last-flow            : to        !default;

data/sass/susy/api/_shared.scss

@@ -1,7 +1,7 @@
 // Shared API
 // ==========
 
-@import "shared/grid-background";
+@import "shared/background";
 @import "shared/container";
 @import "shared/margins";
 @import "shared/padding";

data/sass/susy/api/float/_container.scss

@@ -1,6 +1,8 @@
 // Float Container API
 // ===================
 
+@import "compass/utilities/general/clearfix";
+
 // Float Container
 // ---------------
 // - [$width]         : <length>

data/sass/susy/api/float/_end.scss

@@ -5,11 +5,15 @@
 // ----------
 // - [$flow]  : ltr | rtl
 @mixin float-last(
-  $flow: $flow
+  $flow: $flow,
+  $last-flow: $last-flow
 ) {
   $to: to($flow);
 
-  float: $to;
+  @if $last-flow == to {
+    float: $to;
+  }
+
   margin-#{$to}: 0;
 }
 

data/sass/susy/api/shared/{_grid-background.scss → _background.scss}

@@ -2,18 +2,23 @@
 // ===================
 // - Sub-pixel rounding can lead to several pixels variation between browsers.
 
-@import "compass/css3";
 @import "compass/layout/grid-background";
+@import "compass/css3/images";
+@import "compass/css3/background-size";
+
+// Set the line height for your vertical rhythm.
+$base-line-height       : 24px            !default;
 
 // Grid Background Output
 // ----------------------
 // $stops     : <list> (gradient color-stops)
 // [$show]    : show | show-columns | show-gutters | hide
 // [$flow]    : ltr | rtl
-@mixin grid-background-output (
+@mixin background-grid-output (
   $stops,
-  $show   : $show-grids,
-  $flow   : $flow
+  $line-height  : $base-line-height,
+  $show         : $show-grids,
+  $flow         : $flow
 ) {
   $to     : to($flow);
   $from   : from($flow);
@@ -35,7 +40,7 @@
     @include background($background);
 
     @if $show != show-columns {
-      @include background-size(100% $base-line-height);
+      @include background-size(100% $line-height);
       background-position: left top;
     }
 

data/sass/susy/language/shared/_settings.scss

@@ -22,7 +22,7 @@ $box-sizing           : false           !default;
 $container-position   : center          !default;
 
 // gutter handling
-// - before | after | split
+// - before | after | split | inside | inside-static | no-gutters
 $gutter-position      : after           !default;
 
 // show/hide grids
@@ -177,6 +177,8 @@ $show-grids           : show-columns    !default;
         $new-gutter-position: split;
       } @else if $value == inside {
         $new-gutter-position: inside;
+      } @else if $value == inside-static {
+        $new-gutter-position: inside-static;
       } @else if $value == no-gutters {
         $new-gutter-position: no-gutters;
       }

data/sass/susy/language/susy/_background.scss

@@ -1,6 +1,8 @@
 // Background Grid Syntax
 // ======================
 
+@import "compass/css3/border-radius";
+@import "compass/css3/box-shadow";
 @import "compass/layout/stretching";
 
 // The overlay is painted over your container's ::after pseudo-element,
@@ -12,16 +14,13 @@ $overlay-position       : relative        !default;
 $grid-toggle-position   : left bottom     !default;
 
 // Set the color of background grids.
-$grid-background-color  : rgba(#66f, .25) !default;
-
-// Set the line height for your vertical rhythm.
-$base-line-height       : 24px            !default;
+$grid-color             : rgba(#66f, .25) !default;
 
 // Grid Background
 // ---------------
 // Show a grid background on any element.
 // - [$grid]  : <settings>
-@mixin grid-background(
+@mixin background-grid(
   $grid: get-grid()
 ) {
   $grid         : get-adjusted-grid($grid);
@@ -31,14 +30,14 @@ $base-line-height       : 24px            !default;
 
   $stops        : get-grid-color-stops($grid);
 
-  @include grid-background-output($stops, $this-show, $this-flow);
+  @include background-grid-output($stops, $show: $this-show, $flow: $this-flow);
 }
 
 // Grid Overlay
 // ------------
 // Generate an icon to trigger grid-overlays on any given elements.
 // $grids...  : <selector> [<settings>] [, <selector>]*
-@mixin grid-overlay (
+@mixin overlay-grid (
   $grids...
 ) {
   $vert: nth($grid-toggle-position, 1);
@@ -76,7 +75,7 @@ $base-line-height       : 24px            !default;
           position: unquote($overlay-position);
           &::before {
             @extend %grid-overlay-base;
-            @include grid-background($grid);
+            @include background-grid($grid);
           }
         }
       }
@@ -98,7 +97,7 @@ $base-line-height       : 24px            !default;
   $grid: parse-grid()
 ) {
   $stops  : ();
-  $color  : $grid-background-color;
+  $color  : $grid-color;
   $trans  : transparent;
   $light  : lighten($color, 15%);
 
@@ -122,8 +121,9 @@ $base-line-height       : 24px            !default;
       $this-stop: append($this-stop, $light, comma);
     } @else {
       $end-color: $light;
+      $inside: if($this-gutter-position == inside or $this-gutter-position == inside-static, true, false);
 
-      @if $this-gutter-position != inside {
+      @if not $inside {
         $gutter: get-span-width($location, 1, $this-columns, $this-gutters, $this-column-width, $this-layout-math, $this-gutter-position);
         $this-stop: append($this-stop, $light $gutter, comma);
         $this-stop: append($this-stop, $trans $gutter, comma);

data/sass/susy/language/susy/_container.scss

@@ -26,7 +26,7 @@
   }
 
   @include float-container($width, $justify, $this-layout-math);
-  @include grid-background($grid);
+  @include background-grid($grid);
 }
 
 // Container [function]

data/sass/susy/language/susy/_gallery.scss

@@ -1,6 +1,8 @@
 // Gallery Syntax
 // ==============
 
+@import "compass/css3/box-sizing";
+
 // Gallery
 // -------
 // Create an isolated gallery
@@ -23,7 +25,7 @@
   $this-flow              : get-span-setting(flow, $input);
 
   $box                    : get-span-setting(box-sizing, $input);
-  $inside                 : if(get-span-setting(gutter-position, $input) == inside, true, false);
+  $inside                 : if($this-gutter-position == inside or $this-gutter-position == inside-static, true, false);
 
   $from                   : from($this-flow);
   $context                : column-count($this-columns);

data/sass/susy/language/susy/_gutters.scss

@@ -6,22 +6,25 @@
 // Set gutters on an element.
 // - [$context]   : <settings>
 @mixin gutters(
-  $context: get-grid()
+  $context: join((of), get-grid())
 ) {
-  $context: get-adjusted-grid($context);
+  $context                : parse-span($context);
 
-  $this-columns           : get-setting(columns, $context);
-  $this-gutters           : get-setting(gutters, $context);
-  $this-column-width      : get-setting(column-width, $context);
-  $this-layout-math       : get-setting(layout-math, $context);
-  $this-gutter-position   : get-setting(gutter-position, $context);
-  $this-flow              : get-setting(flow, $context);
+  $override               : get-span-setting(span, $context);
+  $this-columns           : get-span-setting(columns, $context);
+  $this-gutters           : get-span-setting(gutters, $context);
+  $this-column-width      : get-span-setting(column-width, $context);
+  $this-layout-math       : get-span-setting(layout-math, $context);
+  $this-gutter-position   : get-span-setting(gutter-position, $context);
+  $this-flow              : get-span-setting(flow, $context);
 
   $from: from($this-flow);
   $to: to($this-flow);
 
-  $this-gutters: get-gutters($this-columns, $this-gutters, $this-column-width, $this-layout-math, $this-gutter-position);
-  $property: if($this-gutter-position == inside, padding, margin);
+  @if $override { $override: if(unitless($override), false, $override); }
+
+  $this-gutters: get-gutters($this-columns, $this-gutters, $this-column-width, $this-layout-math, $this-gutter-position, $override);
+  $property: if($this-gutter-position == inside or $this-gutter-position == inside-static, padding, margin);
 
   #{$property}-#{$from}: nth($this-gutters, 1);
   #{$property}-#{$to}: nth($this-gutters, 2);
@@ -34,17 +37,20 @@
 @function gutter(
   $context: get-grid()
 ) {
-  $context            : get-adjusted-grid($context);
+  $context                : get-adjusted-grid($context);
 
-  $this-columns       : get-setting(columns, $context);
-  $this-gutters       : get-setting(gutters, $context);
-  $this-column-width  : get-setting(column-width, $context);
-  $this-layout-math   : get-setting(layout-math, $context);
+  $this-columns           : get-setting(columns, $context);
+  $this-gutters           : get-setting(gutters, $context);
+  $this-column-width      : get-setting(column-width, $context);
+  $this-layout-math       : get-setting(layout-math, $context);
   $this-gutter-position   : get-setting(gutter-position, $context);
 
-  $width: get-gutter-width($this-columns, $this-gutters, $this-column-width, $this-layout-math);
+  $this-layout-math: if($this-gutter-position == inside-static, static, $this-layout-math);
+  $width: get-gutter-width($this-columns, $this-gutters, $this-column-width, $this-layout-math, $this-gutter-position);
+
+  $split: if($this-gutter-position == before or $this-gutter-position == after, false, true);
 
-  @if $this-gutter-position == inside or $this-gutter-position == split {
+  @if $split {
     $width: $width / 2;
   }
 
@@ -59,17 +65,25 @@
 // - [$column-width]  : <length>
 // - [$layout-math]   : fluid | static
 @function get-gutter-width(
-  $columns        : $columns,
-  $gutters        : $gutters,
-  $column-width   : $column-width,
-  $layout-math    : $layout-math
+  $columns          : $columns,
+  $gutters          : $gutters,
+  $column-width     : $column-width,
+  $layout-math      : $layout-math,
+  $gutter-position  : $gutter-position
 ) {
-  $context  : column-sum($columns, $gutters);
+  $context  : null;
   $gutter   : null;
 
+  $inside: if($gutter-position == inside or $gutter-position == inside-static, true, false);
+
   @if $layout-math == static {
     $gutter: $gutters * $column-width;
   } @else {
+    @if $inside {
+      $context: column-sum($columns, $gutters, outer);
+    } @else {
+      $context: column-sum($columns, $gutters);
+    }
     $gutter: percentage($gutters / $context);
   }
 
@@ -100,15 +114,16 @@
   @if $gutter-override {
     $gutter: $gutter-override;
   } @else {
-    $gutter: get-gutter-width($columns, $gutters, $column-width, $layout-math);
+    $layout-math: if($gutter-position == inside-static, static, $layout-math);
+    $gutter: get-gutter-width($columns, $gutters, $column-width, $layout-math, $gutter-position);
   }
 
   @if $gutter-position == before {
     $before: $gutter;
   } @else if $gutter-position == after {
     $after: $gutter;
-  } @else if $gutter-position == split or $gutter-position == inside {
-    $gutter: if($gutter-override, $gutter, $gutter / 2);
+  } @else if $gutter-position == split or $gutter-position == inside or $gutter-position == inside-static {
+    $gutter: $gutter / 2;
     $before: $gutter;
     $after: $gutter;
   }

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

@@ -90,3 +90,39 @@
 
   @include margin-output($before, $after, $flow);
 }
+
+// Bleed
+// -----
+// Add negative margins, and equal positive padding to create bleed.
+// - $span  : <span>
+// - $sides : [ top | right | bottom | left | all ]
+@mixin bleed(
+  $span   : gutter(),
+  $sides  : left right
+) {
+  $margin: span(append($span, outer));
+  $padding: $margin;
+
+  $context: get-span-context($span);
+
+  $this-gutter-position: get-span-setting(gutter-position, $span, parse);
+  $inside: if($this-gutter-position == inside or $this-gutter-position == inside-static, true, false);
+  $gutter-width: gutter($context);
+
+  @if $inside and comparable($padding, $gutter-width) {
+    $padding: $padding + $gutter-width;
+  }
+
+  @if $box-sizing == border-box { @include box-sizing(content-box); }
+
+  @if $sides == all {
+    margin: 0 - $margin;
+    padding: $padding;
+  } @else {
+    @each $side in $sides {
+      margin-#{$side}: 0 - $margin;
+      padding-#{$side}: $padding;
+    }
+  }
+}
+

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

@@ -38,15 +38,15 @@
   $pre,
   $post: $pre
 ) {
-  $pre    : if(index($pre, outer), $pre, append($pre, outer));
-  $post   : if(index($post, outer), $post, append($post, outer));
+  $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;
+  $flow       : get-span-setting(flow, $get-pre);
+  $before     : null;
+  $after      : null;
 
   // get the various contexts
   $default-context  : $columns $gutters;

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

@@ -1,6 +1,8 @@
 // Span Syntax
 // ===========
 
+@import "compass/css3/box-sizing";
+
 // Span [mixin]
 // ------------
 // Set a spanning element using shorthand syntax.
@@ -11,7 +13,9 @@
   $span     : parse-span($span);
   $output   : span-math($span...);
   $box      : get-span-setting(box-sizing, $span);
-  $inside   : if(get-span-setting(gutter-position, $span) == inside, true, false);
+
+  $this-gutter-position: get-span-setting(gutter-position, $span);
+  $inside   : if($this-gutter-position == inside or $this-gutter-position == inside-static, true, false);
 
   @if $box == border-box or $inside {
     @include box-sizing(border-box);
@@ -20,6 +24,8 @@
   }
 
   @include float-span-output($output...);
+
+  @include nested($span) { @content; }
 }
 
 // Span [function]
@@ -121,6 +127,8 @@
         $new-gutter-position: split;
       } @else if $value == inside {
         $new-gutter-position: inside;
+      } @else if $value == inside-static {
+        $new-gutter-position: inside-static;
       } @else if $value == no-gutter or $value == no-gutters {
         $new-gutter-position: no-gutters;
       }
@@ -208,13 +216,15 @@
 // - $setting   : <keyword> (see $options below)
 // - $span      : <span>
 // - $parse     : <boolean>
+
+$susy-span-options: span location columns gutters column-width layout-method layout-math outer flow gutter-position is-container gutter-override;
+
 @function get-span-setting(
   $setting,
   $span,
   $parse: false
 ) {
-  $options  : span location columns gutters column-width layout-method layout-math outer flow gutter-position is-container gutter-override;
-  $key      : index($options, $setting);
+  $key      : index($susy-span-options, $setting);
   $value    : false;
 
   @if $parse {
@@ -255,7 +265,8 @@
   $flow               : $flow,
   $gutter-position    : $gutter-position,
   $is-container       : false,
-  $gutter-override    : false
+  $gutter-override    : false,
+  $last-flow          : $last-flow
 ) {
   $float            : from;
   $width            : $span;
@@ -269,11 +280,15 @@
   $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);
 
+  $inside: if($gutter-position == inside or $gutter-position == inside-static, true, false);
+
   // 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 {
+  @if $inside {
+    @if not $is-container {
+      $padding-before: nth($this-gutters,1);
+      $padding-after: nth($this-gutters,2);
+    }
+  } @else {
     $margin-before: nth($this-gutters,1);
     $margin-after: nth($this-gutters,2);
   }
@@ -284,7 +299,7 @@
     $margin-after: -100%;
   } @else {
     @if is-last($span, $location, $columns) {
-      $float: to;
+      $float: $last-flow;
       $margin-after: null;
     } @else if is-first($location) {
       $margin-before: null;
@@ -319,8 +334,10 @@
   $span-sum : null;
   $width    : null;
 
+  $inside: if($gutter-position == inside or $gutter-position == inside-static, true, false);
+
   @if unitless($span) {
-    @if $gutter-position == inside {
+    @if $inside {
       $context: column-sum($columns, $gutters, outer);
       $span-sum: get-column-span-sum($span, $location, $columns, $gutters, outer);
     } @else {
@@ -339,3 +356,34 @@
 
   @return $width;
 }
+
+// Get Span Context
+// ----------------
+// - $span: <span>
+@function get-span-context(
+  $span
+) {
+  $parsed: parse-span($span);
+  $context: compact();
+
+  $width: get-span-setting(span, $parsed);
+  $location: get-span-setting(location, $parsed);
+
+  $removed-width: false;
+  $removed-location: false;
+
+  @each $setting in $span {
+    @if $setting != of and $setting != at {
+      @if $setting == $width and not $removed-width {
+        $removed-width: true;
+      } @else if $setting == $location and not $removed-location {
+        $removed-location: true;
+      } @else {
+        $context: append($context, $setting, space);
+      }
+    }
+  }
+
+  @return $context;
+}
+

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification 
 name: susy
 version: !ruby/object:Gem::Version 
-  version: 2.0.0.alpha.3
+  version: 2.0.0.alpha.4
 platform: ruby
 authors: 
 - Eric Meyer
@@ -16,7 +16,7 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2013-07-09 00:00:00 Z
+date: 2013-09-04 00:00:00 Z
 dependencies: 
 - !ruby/object:Gem::Dependency 
   name: compass
@@ -70,8 +70,8 @@ files:
 - sass/susy/api/float/_end.scss
 - sass/susy/api/float/_isolate.scss
 - sass/susy/api/float/_span.scss
+- sass/susy/api/shared/_background.scss
 - sass/susy/api/shared/_container.scss
-- sass/susy/api/shared/_grid-background.scss
 - sass/susy/api/shared/_margins.scss
 - sass/susy/api/shared/_padding.scss
 - sass/susy/helpers/_direction.scss