susy 1.0.9 → 2.2.14

data/lib/compass-susy.rb

@@ -0,0 +1 @@
+require 'susy'

data/lib/susy.rb

@@ -1,4 +1,14 @@
-require 'compass'
-Compass::Frameworks.register('susy',
-                             :stylesheets_directory => File.join(File.dirname(__FILE__), '..', 'sass'),
-                             :templates_directory => File.join(File.dirname(__FILE__), '..', 'templates'))
+base_directory  = File.expand_path(File.join(File.dirname(__FILE__), '..'))
+susy_stylesheets_path = File.join(base_directory, 'sass')
+susy_templates_path = File.join(base_directory, 'templates')
+
+if (defined? Compass)
+  Compass::Frameworks.register('susy', :stylesheets_directory => susy_stylesheets_path, :templates_directory => susy_templates_path)
+else
+  # compass not found, register on the Sass path via the environment.
+  if ENV.has_key?("SASS_PATH")
+    ENV["SASS_PATH"] = ENV["SASS_PATH"] + File::PATH_SEPARATOR + susy_stylesheets_path
+  else
+    ENV["SASS_PATH"] = susy_stylesheets_path
+  end
+end

data/sass/_su.scss

@@ -0,0 +1,4 @@
+// Su
+// ==
+
+@import 'susy/su';

data/sass/_susy.scss

@@ -1,16 +1,4 @@
-// ---------------------------------------------------------------------------
-// Partials
+// Susy
+// ====
 
-// temporary
-@import "susy/support";
-@import "susy/units";
-
-// permanent
-@import "susy/settings";
-@import "susy/functions";
-@import "susy/grid";
-@import "susy/isolation";
-@import "susy/padding";
-@import "susy/margin";
-@import "susy/media";
-@import "susy/background";
+@import 'susy/language/susy';

data/sass/_susyone.scss

@@ -0,0 +1,4 @@
+// Susy
+// ====
+
+@import 'susy/language/susyone';

data/sass/susy/_su.scss

@@ -0,0 +1,7 @@
+// Su
+// ==
+
+@import "su/utilities";
+@import "su/settings";
+@import "su/validation";
+@import "su/grid";

data/sass/susy/language/_susy.scss

@@ -0,0 +1,24 @@
+// Susy Next Syntax
+// ================
+
+$susy-version: 2.1;
+
+@import "../su";
+@import "../output/float";
+
+@import "susy/settings";
+@import "susy/validation";
+@import "susy/grids";
+@import "susy/box-sizing";
+@import "susy/context";
+@import "susy/background";
+@import "susy/container";
+@import "susy/span";
+@import "susy/gutters";
+@import "susy/isolate";
+@import "susy/gallery";
+@import "susy/rows";
+@import "susy/margins";
+@import "susy/padding";
+@import "susy/bleed";
+@import "susy/breakpoint-plugin";

data/sass/susy/language/_susyone.scss

@@ -0,0 +1,13 @@
+// ---------------------------------------------------------------------------
+// Partials
+
+$susy-version: 1.5;
+
+@import "susyone/settings";
+@import "susyone/functions";
+@import "susyone/grid";
+@import "susyone/isolation";
+@import "susyone/padding";
+@import "susyone/margin";
+@import "susyone/media";
+@import "susyone/background";

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

@@ -0,0 +1,385 @@
+// Background Grid Syntax
+// ======================
+
+$susy-overlay-grid-head-exists: false;
+
+
+// Show Grid/s
+// -----------
+// Show grid on any element using either background or overlay.
+// - [$grid]  : <settings>
+@mixin show-grid(
+  $grid: $susy
+) {
+  $inspect: $grid;
+  $_output: debug-get(output, $grid);
+
+  @include susy-inspect(show-grid, $inspect);
+  @if $_output == overlay and susy-get(debug image, $grid) != hide {
+    @include overlay-grid($grid);
+  } @else {
+    @include background-grid($grid);
+  }
+}
+
+@mixin show-grids(
+  $grid: $susy
+) {
+  @include show-grid($grid);
+}
+
+// Background Grid
+// ---------------
+// Show a grid background on any element.
+// - [$grid]  : <settings>
+@mixin background-grid(
+  $grid: $susy
+) {
+  $inspect  : $grid;
+  $_output  : get-background($grid);
+
+  @if length($_output) > 0 {
+    $_flow: susy-get(flow, $grid);
+
+    $_image: ();
+    @each $name, $layer in map-get($_output, image) {
+      $_direction: if($name == baseline, to bottom, to to($_flow));
+      $_image: append($_image, linear-gradient($_direction, $layer), comma);
+    }
+    $_output: map-merge($_output, (image: $_image));
+
+    @include background-grid-output($_output...);
+    @include susy-inspect(background-grid, $inspect);
+  }
+}
+
+
+// Overlay Grid
+// ------------
+// Generate an icon to trigger grid-overlays on any given elements.
+// $grids...  : <selector> [<settings>] [, <selector>]*
+@mixin overlay-grid (
+  $grid: $susy
+) {
+  @if not($susy-overlay-grid-head-exists) {
+    @at-root head { @include overlay-head($grid); }
+    @at-root head:before { @include overlay-trigger; }
+    @at-root head:hover { @include overlay-trigger-hover; }
+    $susy-overlay-grid-head-exists: true !global;
+  }
+
+  head:hover ~ &,
+  head:hover ~ body & {
+    position: relative;
+    &:before {
+      @include grid-overlay-base;
+      @include background-grid($grid);
+    }
+  }
+}
+
+
+// [Private] Overlay Trigger
+// -------------------------
+@mixin overlay-trigger {
+  content: "|||";
+  display: block;
+  padding: 5px 10px;
+  font: {
+    family: sans-serif;
+    size: 16px;
+    weight: bold;
+  }
+}
+
+
+// [Private] Overlay Trigger Hover
+// -------------------------------
+@mixin overlay-trigger-hover {
+  background: rgba(white, .5);
+  color: red;
+}
+
+
+// [Private] Overlay Head
+// ----------------------
+// <head> styles to create grid overlay toggle
+@mixin overlay-head (
+  $grid: $susy
+) {
+  $_toggle: debug-get(toggle, $grid);
+  $_horz: null;
+  $_vert: null;
+
+  @each $side in $_toggle {
+    $_horz: if($side == left or $side == right, $side, $_horz);
+    $_vert: if($side == top or $side == bottom, $side, $_vert);
+  }
+
+  display: block;
+  position: fixed;
+  #{$_horz}: 10px;
+  #{$_vert}: 10px;
+  z-index: 999;
+  color: #333;
+  background: rgba(white, .25);
+}
+
+
+// [Private] Grid Overlay Base
+// ---------------------------
+// Base styles for generating a grid overlay
+@mixin grid-overlay-base() {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  content: " ";
+  z-index: 998;
+}
+
+
+// Get Symmetrical Background
+// --------------------------
+// - $grid: <map>
+@function get-background-sym(
+  $grid
+) {
+  $grid           : parse-grid($grid);
+  $_gutters       : susy-get(gutters, $grid);
+  $_column-width  : susy-get(column-width, $grid);
+  $_math          : susy-get(math, $grid);
+
+  $_color         : debug-get(color);
+  $_trans         : transparent;
+  $_light         : lighten($_color, 15%);
+
+  $_end           : 1 + $_gutters;
+  $_after         : percentage(1/$_end);
+  $_stops         : ();
+  $_size          : span(1 $grid wide);
+
+  @if is-inside($grid) {
+    $_stops: $_color, $_light;
+  } @else if is-split($grid) {
+    $_split: $_gutters/2;
+    $_before: percentage($_split/$_end);
+    $_after: percentage((1 + $_split)/$_end);
+    $_stops: $_trans $_before, $_color $_before, $_light $_after, $_trans $_after;
+  } @else {
+    $_stops: $_color, $_light $_after, $_trans $_after;
+  }
+
+  @if $_math == static {
+    $_size: valid-column-math($_math, $_column-width) * $_end;
+  }
+
+  $_output: (
+    image: (columns: $_stops),
+    size: $_size,
+  );
+
+  @return $_output;
+}
+
+
+// Get Asymmetrical Inside
+// -----------------------
+// - $grid: <settings>
+@function get-asym-inside(
+  $grid
+) {
+  $grid     : parse-grid($grid);
+  $_columns : susy-get(columns, $grid);
+
+  $_color   : debug-get(color);
+  $_light   : lighten($_color, 15%);
+  $_stops   : ();
+
+  @for $location from 1 through susy-count($_columns) {
+    $this-stop: ();
+
+    @if $location == 1 {
+      $this-stop: append($this-stop, $_color, comma);
+    } @else {
+      $start: parse-span(1 at $location $grid);
+      $start: get-isolation($start);
+      $this-stop: append($this-stop, $_color $start, comma);
+    }
+
+    @if $location == susy-count($_columns) {
+      $this-stop: append($this-stop, $_light, comma);
+    } @else {
+      $_end: parse-span(1 at ($location + 1) $grid);
+      $_end: get-isolation($_end);
+      $this-stop: append($this-stop, $_light $_end, comma);
+    }
+
+    $_stops: join($_stops, $this-stop, comma);
+  }
+
+  @return $_stops;
+}
+
+
+// Get Asymmetrical Split
+// ----------------------
+// - $grid: <settings>
+@function get-asym-split(
+  $grid
+) {
+  $grid     : parse-grid($grid);
+  $_columns : susy-get(columns, $grid);
+
+  $_color   : debug-get(color);
+  $_light   : lighten($_color, 15%);
+  $_stops   : ();
+
+  @for $location from 1 through susy-count($_columns) {
+    $this-stop: ();
+
+    $start: parse-span(1 at $location $grid);
+    $start: get-isolation($start);
+    $this-stop: append($this-stop, transparent $start, comma);
+    $this-stop: append($this-stop, $_color $start, comma);
+
+    $_end: $start + span(1 at $location $grid);
+    $this-stop: append($this-stop, $_light $_end, comma);
+    $this-stop: append($this-stop, transparent $_end, comma);
+
+    $_stops: join($_stops, $this-stop, comma);
+  }
+
+  @return $_stops;
+}
+
+
+// Get Asymmetrical Outside
+// ------------------------
+// - $grid: <settings>
+@function get-asym-outside(
+  $grid
+) {
+  $grid     : parse-grid($grid);
+  $_columns : susy-get(columns, $grid);
+
+  $_color   : debug-get(color);
+  $_light   : lighten($_color, 15%);
+  $_trans   : transparent;
+  $_stops   : ();
+
+  @for $location from 1 through susy-count($_columns) {
+    $this-stop: ();
+
+    @if $location == 1 {
+      $this-stop: append($this-stop, $_color, comma);
+    } @else {
+      $start: parse-span(1 at $location $grid);
+      $start: get-isolation($start);
+      $this-stop: append($this-stop, $_color $start, comma);
+    }
+
+    @if $location == susy-count($_columns) {
+      $this-stop: append($this-stop, $_light, comma);
+    } @else {
+      $gutter: get-span-width(first $location $grid);
+
+      $_end: parse-span(1 at ($location + 1) $grid);
+      $_end: get-isolation($_end);
+
+      $gutter: $_light $gutter, $_trans $gutter, $_trans $_end;
+      $this-stop: join($this-stop, $gutter, comma);
+    }
+
+    $_stops: join($_stops, $this-stop, comma);
+  }
+
+  @return $_stops;
+}
+
+
+// Get Asymmetrical Background
+// ---------------------------
+// - $grid: <settings>
+@function get-background-asym(
+  $grid
+) {
+  $_stops: ();
+
+  @if is-inside($grid) {
+    $_stops: get-asym-inside($grid);
+  } @else if is-split($grid) {
+    $_stops: get-asym-split($grid);
+  } @else {
+    $_stops: get-asym-outside($grid);
+  }
+
+  @return (image: (columns: $_stops));
+}
+
+
+// Get Background
+// --------------
+// - $grid: <settings>
+@function get-background(
+  $grid
+) {
+  $grid     : parse-grid($grid);
+  $_show    : susy-get(debug image, $grid);
+  $_return  : ();
+
+  @if $_show and $_show != 'hide' {
+    $_columns: susy-get(columns, $grid);
+
+    @if $_show != 'show-baseline' {
+      $_sym: is-symmetrical($_columns);
+      $_return: if($_sym, get-background-sym($grid), get-background-asym($grid));
+      $_return: map-merge($_return, (clip: content-box));
+    }
+
+    @if $_show != 'show-columns'
+      and global-variable-exists(base-line-height)
+      and type-of($base-line-height) == 'number'
+      and not unitless($base-line-height) {
+      $_color: variable-exists('grid-background-baseline-color');
+      $_color: if($_color, $grid-background-baseline-color, #000);
+
+      $_image: map-get($_return, image);
+      $_size: map-get($_return, size);
+      $_baseline: (baseline: ($_color 1px, transparent 1px));
+      $_baseline-size: 100% $base-line-height;
+
+      $_return: map-merge($_return, (
+        image: if($_image, map-merge($_image, $_baseline), $_baseline),
+        size: if($_size, ($_size, $_baseline-size), $_baseline-size),
+      ));
+
+      @if $_show == 'show' {
+        $_clip: map-get($_return, clip);
+        $_return: map-merge($_return, (clip: join($_clip, border-box, comma)));
+      }
+    } @else if $_show == 'show-baseline' {
+      @warn 'Please provide a $base-line-height with the desired height and units';
+    }
+  }
+
+  @if map-get($_return, image) {
+    $_return: map-merge($_return, (flow: susy-get(flow, $grid)));
+  }
+
+  @return $_return;
+}
+
+
+// Get Debug
+// ---------
+// Return the value of a debug setting
+// - $key: <setting>
+@function debug-get(
+  $key,
+  $grid: $susy
+) {
+  $key: join(debug, $key, space);
+  @return susy-get($key, $grid);
+}