made the stretching example be less lame.

This commit is contained in:
Chris Eppstein 2011-01-10 09:26:34 -08:00
parent ceeb11ec9a
commit b9be4702fd
2 changed files with 40 additions and 24 deletions

View File

@ -1,17 +1,30 @@
.example .example
Click on the the following links to make them stretch.
Click <a href="#">here</a> to dismiss it.
#stretch-container
%ul %ul
%li %li.stretch-container
%a#stretch-full(href="#stretch-full") #stretch-full
This element is fully stretched. This element is fully stretched.
%li %li.stretch-container
%a#stretch-offset(href="#stretch-offset") #stretch-offset
This element is stretched with a 1em offset on each side. This element is stretched with a 1em offset on each side.
%li %li.stretch-container
%a#stretch-x(href="#stretch-x") #stretch-x
This element is stretched horizontally. This
%li %br
%a#stretch-y(href="#stretch-y") element
This element is stretched vertically. %br
is
%br
stretched
%br
horizontally.
%li.stretch-container
#stretch-y
This
%br
element
%br
is
%br
stretched
%br
vertically.

View File

@ -1,29 +1,32 @@
@import "compass/layout/stretching" @import "compass/layout/stretching"
@import "compass/utilities"
@import "compass/css3" @import "compass/css3"
#stretch-container .stretch-container
border: 1px solid #999 border: 1px solid #999
min-width: 200px width: 200px
min-height: 200px height: 200px
position: relative position: relative
+inline-block
.stretched .stretched
$stretch-color: #4C6B99 $stretch-color: #4C6B99
border: 3px solid $stretch-color border: 3px solid $stretch-color
+border-radius(8px) +border-radius(8px)
display: block display: block
background-color: darken($stretch-color, 30%) background-color: darken($stretch-color, 30%)
color: white
text-align: center text-align: center
vertical-align: middle vertical-align: middle
padding: 2em 0 padding: 0.5em
#stretch-full:target #stretch-full
@extend .stretched @extend .stretched
+stretch +stretch
#stretch-offset:target #stretch-offset
@extend .stretched @extend .stretched
+stretch(1em, 1em, 1em, 1em) +stretch(1em, 1em, 1em, 1em)
#stretch-x:target #stretch-x
@extend .stretched @extend .stretched
+stretch-x +stretch-x
#stretch-y:target #stretch-y
@extend .stretched @extend .stretched
+stretch-y +stretch-y