From a8a2f42b60b37d198cdd8db518ba5a3287eadddd Mon Sep 17 00:00:00 2001
From: Chris Eppstein <chris@eppsteins.net>
Date: Fri, 12 Nov 2010 16:45:19 -0800
Subject: [PATCH] Add reference documentation and examples for stretching
 module.

---
 .../examples/compass/layout/stretching.haml   |  8 +++++
 .../compass/layout/stretching/markup.haml     | 17 +++++++++++
 .../compass/layout/stretching/stylesheet.sass | 29 +++++++++++++++++++
 .../reference/compass/layout/stretching.haml  | 15 ++++++++++
 4 files changed, 69 insertions(+)
 create mode 100644 doc-src/content/examples/compass/layout/stretching.haml
 create mode 100644 doc-src/content/examples/compass/layout/stretching/markup.haml
 create mode 100644 doc-src/content/examples/compass/layout/stretching/stylesheet.sass
 create mode 100644 doc-src/content/reference/compass/layout/stretching.haml

diff --git a/doc-src/content/examples/compass/layout/stretching.haml b/doc-src/content/examples/compass/layout/stretching.haml
new file mode 100644
index 00000000..976a576e
--- /dev/null
+++ b/doc-src/content/examples/compass/layout/stretching.haml
@@ -0,0 +1,8 @@
+---
+title: Compass Stretch Layout Example
+description: How to do stretch out your elements.
+framework: compass
+stylesheet: compass/layout/_stretching.scss
+example: true
+---
+= render "partials/example"
diff --git a/doc-src/content/examples/compass/layout/stretching/markup.haml b/doc-src/content/examples/compass/layout/stretching/markup.haml
new file mode 100644
index 00000000..24a9dbba
--- /dev/null
+++ b/doc-src/content/examples/compass/layout/stretching/markup.haml
@@ -0,0 +1,17 @@
+.example
+  Click on the the following links to make them stretch.
+  Click <a href="#">here</a> to dismiss it.
+  #stretch-container
+    %ul
+      %li
+        %a#stretch-full(href="#stretch-full")
+          This element is fully stretched.
+      %li
+        %a#stretch-offset(href="#stretch-offset")
+          This element is stretched with a 1em offset on each side.
+      %li
+        %a#stretch-x(href="#stretch-x")
+          This element is stretched horizontally.
+      %li
+        %a#stretch-y(href="#stretch-y")
+          This element is stretched vertically.
diff --git a/doc-src/content/examples/compass/layout/stretching/stylesheet.sass b/doc-src/content/examples/compass/layout/stretching/stylesheet.sass
new file mode 100644
index 00000000..b3ba1412
--- /dev/null
+++ b/doc-src/content/examples/compass/layout/stretching/stylesheet.sass
@@ -0,0 +1,29 @@
+@import "compass/layout/stretching"
+@import "compass/css3"
+
+#stretch-container
+  border: 1px solid #999
+  min-width: 200px
+  min-height: 200px
+  position: relative
+.stretched
+  $stretch-color: #4C6B99
+  border: 3px solid $stretch-color
+  +border-radius(8px)
+  display: block
+  background-color: darken($stretch-color, 30%)
+  text-align: center
+  vertical-align: middle
+  padding: 2em 0
+#stretch-full:target
+  @extend .stretched
+  +stretch
+#stretch-offset:target
+  @extend .stretched
+  +stretch(1em, 1em, 1em, 1em)
+#stretch-x:target
+  @extend .stretched
+  +stretch-x
+#stretch-y:target
+  @extend .stretched
+  +stretch-y
diff --git a/doc-src/content/reference/compass/layout/stretching.haml b/doc-src/content/reference/compass/layout/stretching.haml
new file mode 100644
index 00000000..722f96f7
--- /dev/null
+++ b/doc-src/content/reference/compass/layout/stretching.haml
@@ -0,0 +1,15 @@
+--- 
+title: Compass Stretching
+crumb: Stretching
+framework: compass
+stylesheet: compass/layout/_stretching.scss
+layout: core
+classnames:
+  - reference
+  - core
+  - layout
+---
+- render 'reference' do
+  %p
+    The stretch mixins allow you to style absolutely positioned elements
+    such that they will stretch to fill their positioning parent.