New layout mixins for absolute positioning:

* stretch
* stretch-x
* stretch-y
This commit is contained in:
Steve Wong 2010-10-28 21:20:34 -07:00 committed by Chris Eppstein
parent a618ff3509
commit a82a5938b6
4 changed files with 125 additions and 0 deletions

View File

@ -1 +1,2 @@
@import "layout/sticky-footer";
@import "layout/stretching";

View File

@ -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; }
}

View File

@ -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; }

View File

@ -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)