@import "compass/layout/stretching";
@import "compass/utilities";
@import "compass/css3";
.stretch-container {
border: 1px solid #999999;
width: 200px;
height: 200px;
position: relative;
@include inline-block;
}
%stretched {
$stretch-color: #4c6b99;
border: 3px solid $stretch-color;
@include border-radius(8px);
display: block;
background-color: darken($stretch-color, 30%);
color: white;
text-align: center;
vertical-align: middle;
padding: 0.5em;
}
#stretch-full {
@extend %stretched;
@include stretch;
}
#stretch-offset {
@extend %stretched;
@include stretch(1em, 1em, 1em, 1em);
}
#stretch-x {
@extend %stretched;
@include stretch-x;
}
#stretch-y {
@extend %stretched;
@include stretch-y;
}
@import compass/layout/stretching
@import compass/utilities
@import compass/css3
.stretch-container
border: 1px solid #999999
width: 200px
height: 200px
position: relative
+inline-block
%stretched
$stretch-color: #4c6b99
border: 3px solid $stretch-color
+border-radius(8px)
display: block
background-color: darken($stretch-color, 30%)
color: white
text-align: center
vertical-align: middle
padding: 0.5em
#stretch-full
@extend %stretched
+stretch
#stretch-offset
@extend %stretched
+stretch(1em, 1em, 1em, 1em)
#stretch-x
@extend %stretched
+stretch-x
#stretch-y
@extend %stretched
+stretch-y
.stretch-container {
border: 1px solid #999999;
width: 200px;
height: 200px;
position: relative;
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
*zoom: 1;
*display: inline;
}
#stretch-full, #stretch-offset, #stretch-x, #stretch-y {
border: 3px solid #4c6b99;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
display: block;
background-color: #192433;
color: white;
text-align: center;
vertical-align: middle;
padding: 0.5em;
}
#stretch-full {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#stretch-offset {
position: absolute;
top: 1em;
bottom: 1em;
left: 1em;
right: 1em;
}
#stretch-x {
position: absolute;
left: 0;
right: 0;
}
#stretch-y {
position: absolute;
top: 0;
bottom: 0;
}