github-migration/compass
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Some adjustments to the PIE module from Jason's code review.

Browse Source
This commit is contained in:
Chris Eppstein 2010-11-20 20:34:35 -08:00
parent a4774bdf32
commit f1a6e280c1
2 changed files with 13 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
frameworks/compass/stylesheets/compass/css3/_pie.scss
View File

@ -11,6 +11,7 @@ $pie-base-class: false !default;
// //
// * relative (default) // * relative (default)
// * z-index // * z-index
// * none
$pie-default-approach: relative !default; $pie-default-approach: relative !default;
// The location of your PIE behavior file // The location of your PIE behavior file
@ -24,8 +25,12 @@ $pie-behavior: stylesheet-url("PIE.htc") !default;
// or before the container's opaque background // or before the container's opaque background
// should have a z-index set as well to ensure // should have a z-index set as well to ensure
// propert z-index stacking. // propert z-index stacking.
@mixin pie-container($z-index: 0) { //
// The `$position` argument must be some non-static
// value (absolute, relative, etc.)
@mixin pie-container($z-index: 0, $position: relative) {
z-index: $z-index; z-index: $z-index;
position: $position;
} }
// PIE elements must have this behavior attached to them. // PIE elements must have this behavior attached to them.
@ -33,10 +38,13 @@ $pie-behavior: stylesheet-url("PIE.htc") !default;
// relative to the stylesheet. It considers them relative // relative to the stylesheet. It considers them relative
// to the webpage. As a result, you cannot reliably use // to the webpage. As a result, you cannot reliably use
// compass's relative_assets with PIE. // compass's relative_assets with PIE.
//
// * `$approach` - one of: relative, z-index, or none
// * `$z-index` - when using the z-index approach, this
// is the z-index that is applied.
@mixin pie-element( @mixin pie-element(
$approach: $pie-default-approach, $approach: $pie-default-approach,
$z-index: if($approach == z-index, 0), $z-index: 0
$behavior : $pie-behavior
) { ) {
behavior: $behavior; behavior: $behavior;
@if $approach == relative { @if $approach == relative {

3
frameworks/compass/templates/pie/pie.scss
View File

@ -58,8 +58,9 @@ $pie-base-class: pie-element;
@include pie-element(z-index); @include pie-element(z-index);
} }
// This is just a simple example of how to use the z-index approach.
.widget { .widget {
@extend .pie-container; // This will @extend .pie-container;
h3 { h3 {
@include pie(z-pie-element); // This will extend .z-pie-element instead of .pie-element @include pie(z-pie-element); // This will extend .z-pie-element instead of .pie-element
} }