Sha256: 86acbb5d81b635e20e9ada2fb29b600f7a1438a9409fbcc3fcfb5cc2c84626a5
Contents?: true
Size: 1.33 KB
Versions: 45
Compression:
Stored size: 1.33 KB
Contents
@import "compass/css3";
@import "compass/css3/pie";
// There are two approaches to creating PIE elements
// The default approach is to make the element position: relative.
$pie-base-class: pie-element;
.pie-element {
// relative is the default, so passing relative
// is redundant, but we do it here for clarity.
@include pie-element(relative);
}
.bordered {
@include pie; // Because $pie-base-class is set, this results in an extend of .pie-element.
@include border-radius(5px);
}
.gradient {
@include pie; // Because $pie-base-class is set, this results in an extend of .pie-element.
@include background(linear-gradient(#f00, #00f));
}
// But sometimes this messes up your positioning
// So you can also use z-indexing. In this case
// an ancestor element before or having the first
// opaque background should be marked as a pie-container
// which gives it a z-index of 0 (actually any z-index
// can be provided to the pie-container mixin).
// And then the pie element itself should be given
// a z-index of -1.
.pie-container {
@include pie-container;
}
.z-pie-element {
// this will get a z-index of 0, you can pass a z-index value if you want
@include pie-element(z-index);
}
.widget {
@extend .pie-container; // This will
h3 {
@include pie(z-pie-element); // This will extend .z-pie-element instead of .pie-element
}
}
Version data entries
45 entries across 44 versions & 5 rubygems