made the stretching example be less lame.
This commit is contained in:
parent
ceeb11ec9a
commit
b9be4702fd
@ -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.
|
||||||
|
@ -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
|
||||||
|
Loading…
Reference in New Issue
Block a user