From a82a5938b6d0b56b5988ea89dfaf369d85fa123a Mon Sep 17 00:00:00 2001
From: Steve Wong <swong@epocrates.com>
Date: Thu, 28 Oct 2010 21:20:34 -0700
Subject: [PATCH] New layout mixins for absolute positioning: * stretch *
 stretch-x * stretch-y

---
 .../compass/stylesheets/compass/_layout.scss  |  1 +
 .../compass/layout/_stretching.scss           | 24 +++++++
 .../stylesheets/compass/css/stretching.css    | 66 +++++++++++++++++++
 .../stylesheets/compass/sass/stretching.sass  | 34 ++++++++++
 4 files changed, 125 insertions(+)
 create mode 100644 frameworks/compass/stylesheets/compass/layout/_stretching.scss
 create mode 100644 test/fixtures/stylesheets/compass/css/stretching.css
 create mode 100644 test/fixtures/stylesheets/compass/sass/stretching.sass

diff --git a/frameworks/compass/stylesheets/compass/_layout.scss b/frameworks/compass/stylesheets/compass/_layout.scss
index 7f0fda1d..fbbf7aad 100644
--- a/frameworks/compass/stylesheets/compass/_layout.scss
+++ b/frameworks/compass/stylesheets/compass/_layout.scss
@@ -1 +1,2 @@
 @import "layout/sticky-footer";
+@import "layout/stretching";
diff --git a/frameworks/compass/stylesheets/compass/layout/_stretching.scss b/frameworks/compass/stylesheets/compass/layout/_stretching.scss
new file mode 100644
index 00000000..c123e3d1
--- /dev/null
+++ b/frameworks/compass/stylesheets/compass/layout/_stretching.scss
@@ -0,0 +1,24 @@
+
+// stretch element height to specified top and bottom position
+
+@mixin stretch-y($offset-top:0, $offset-bottom:0) {
+  @include stretch($offset-top, false, $offset-bottom, false);
+}
+
+
+// stretch element width to specified left and right position
+
+@mixin stretch-x($offset-left:0, $offset-right:0) {
+  @include stretch(false, $offset-right, false, $offset-left);
+}
+
+
+// shorthand to stretch element height and width
+
+@mixin stretch($offset-top:0, $offset-right:0, $offset-bottom:0, $offset-left:0) {
+  position: absolute;
+  @if $offset-top { top: $offset-top; }
+  @if $offset-bottom { bottom: $offset-bottom; }
+  @if $offset-left { left: $offset-left; }
+  @if $offset-right { right: $offset-right; }
+}
\ No newline at end of file
diff --git a/test/fixtures/stylesheets/compass/css/stretching.css b/test/fixtures/stylesheets/compass/css/stretching.css
new file mode 100644
index 00000000..4d841d18
--- /dev/null
+++ b/test/fixtures/stylesheets/compass/css/stretching.css
@@ -0,0 +1,66 @@
+.stretched-completely {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0; }
+
+.stretched-horizontally {
+  position: absolute;
+  left: 0;
+  right: 0; }
+
+.stretched-right {
+  position: absolute;
+  left: 0;
+  right: 50%; }
+
+.left-pane {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 50%; }
+
+.stretched-left {
+  position: absolute;
+  left: 50%;
+  right: 0; }
+
+.right-pane {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 50%;
+  right: 0; }
+
+.stretched-down {
+  position: absolute;
+  top: 0;
+  bottom: 50%; }
+
+.top-pane {
+  position: absolute;
+  top: 0;
+  bottom: 50%;
+  left: 0;
+  right: 0; }
+
+.stretched-up {
+  position: absolute;
+  top: 50%;
+  bottom: 0; }
+
+.bottom-pane {
+  position: absolute;
+  top: 50%;
+  bottom: 0;
+  left: 0;
+  right: 0; }
+
+.viewport {
+  position: absolute;
+  top: 10px;
+  bottom: 30px;
+  left: 40px;
+  right: 20px; }
\ No newline at end of file
diff --git a/test/fixtures/stylesheets/compass/sass/stretching.sass b/test/fixtures/stylesheets/compass/sass/stretching.sass
new file mode 100644
index 00000000..fa575dca
--- /dev/null
+++ b/test/fixtures/stylesheets/compass/sass/stretching.sass
@@ -0,0 +1,34 @@
+@import "compass/layout/stretching"
+
+.stretched-completely
+  +stretch
+
+.stretched-horizontally
+  +stretch-x
+
+.stretched-right
+  +stretch-x(0, 50%)
+
+.left-pane
+  +stretch(0, 50%, 0, 0)
+
+.stretched-left
+  +stretch-x(50%, 0)
+
+.right-pane
+  +stretch(0, 0, 0, 50%)
+
+.stretched-down
+  +stretch-y(0, 50%)
+
+.top-pane
+  +stretch(0, 0, 50%, 0)
+
+.stretched-up
+  +stretch-y(50%, 0)
+
+.bottom-pane
+  +stretch(50%, 0, 0, 0)
+
+.viewport
+  +stretch(10px, 20px, 30px, 40px)
\ No newline at end of file