stylesheets/toolkit/_pe.scss in toolkit-0.2.0.1 vs stylesheets/toolkit/_pe.scss in toolkit-0.2.1

@@ -1,10 +1,12 @@
 ////////////////////////
 // Enhance From
 //
 // - $feature: Modernizr feature (base CSS class name)
 ////////////////////////
+@import "compass/typography/text/replacement";
+
 @mixin enhance-with($feature) {
   .#{$feature} & {
     @content;
   }
 }
@@ -48,30 +50,30 @@
     @extend %replace-text-pe-squish;
   }
   @else {
     @extend %replace-text-pe-hide;
   }
-  
+
   @if $method == 'svg' {
     @include svg-background($img-path, $sprite, $inline-svg, $with-dimensions);
   }
   @else if $method == 'retina' {
     @include retina-background($img-path, $sprite, $with-dimensions);
   }
-  
+
 }
 
 //////////////////////////////
 // SVG Background Image with Fallback
 //////////////////////////////
 @mixin svg-background($img-path, $sprite, $inline-svg: $replace-text-pe-inline-svg, $with-dimensions: $replace-text-pe-with-dimensions) {
   $png-path: $img-path + '/*.png';
   $sprite-map: sprite-map($png-path);
-  
+
   // Build SVG file name
   $svg-file: $img-path + '/#{$sprite}.svg';
-  
+
   // Default Sprite File
   $sprite-file: '' !default;
 
   @if $with-dimensions {
     // Get Sprite File for Height/Width
@@ -79,11 +81,11 @@
 
     // Put the height/width of the image in
     width: image-width($sprite-file);
     height: image-height($sprite-file);
   }
-  
+
   @include enhance-with('svg') {
     // Inline the SVG so that advanced browsers and future tech doesn't need the extra HTTP requests for the SVG
     @if $inline-svg {
       background-image: inline-image($svg-file);
     }
@@ -95,12 +97,12 @@
     // Set background size to ensure that our SVG is the right size.
     @if $with-dimensions {
       background-size: image-width($sprite-file) image-height($sprite-file);
     }
   }
-  
-  // Degrade from SVG 
+
+  // Degrade from SVG
   @include degrade-from('svg') {
     // Extend the Sprite Background
     @extend %#{sprite-map-name($sprite-map)}-image-map;
     // Call the Sprite'd image's position.
     @include sprite($sprite-map, $sprite);
@@ -111,25 +113,25 @@
 // Retina Background Image with Fallback
 //////////////////////////////
 @mixin retina-background($img-path, $sprite, $with-dimensions: $replace-text-pe-with-dimensions) {
   $png-path: $img-path + '/*.png';
   $sprite-map: sprite-map($png-path);
-  
+
   $png2x-path: $img-path + '_2x/*.png';
   $retina-map: sprite-map($png2x-path);
-  
+
   // Default Sprite File
   $sprite-file: '' !default;
 
   @if $with-dimensions {
     // Get Sprite File for Height/Width
     $sprite-file: sprite-file($sprite-map, $sprite);
-    
+
     width: image-width($sprite-file);
     height: image-height($sprite-file);
   }
-  
+
   .ie6 &,
   .ie7 &,
   .ie8 & {
     @extend %#{sprite-map-name($sprite-map)}-image-map-fallback;
     @include sprite($sprite-map, $sprite);
@@ -157,11 +159,11 @@
     @if $with-dimensions {
       background-size: image-width($sprite-file) image-height($sprite-file);
     }
     @include sprite($retina-map, $sprite);
   }
-  
+
     //////////////////////////////
     // Actual Hotness
     //
     // Do to a bug plus a design decision, I cannot extend the background image
     //   like I would like to or you would do by hand. This is how it'll work
@@ -188,22 +190,22 @@
 // - $png-path: The path to the pngs for the image sprite, including the *.png (just like normal image sprites)
 //////////////////////////////
 @mixin sprite-map-generator($img-path, $method: $replace-text-pe-method) {
   $png-path: $img-path + '/*.png';
   $png-path: sprite-map($png-path);
-  
+
   @if $method == 'retina' {
     $png2x-path: $img-path + '_2x/*.png';
     $png2x-path: sprite-map($png2x-path);
-    
+
     %#{sprite-map-name($png-path)}-image-map-fallback {
       background: {
         image: $png-path;
         repeat: no-repeat;
       }
     }
-    
+
     @media (-webkit-max-device-pixel-ratio: 1.4), (max--moz-device-pixel-ratio: 1.4), (-o-max-device-pixel-ratio: 7/5), (min-resolution: 1.4dppx), (min-resolution: 134.4dpi) {
       %#{sprite-map-name($png-path)}-image-map {
         background: {
           image: $png-path;
           repeat: no-repeat;
@@ -225,12 +227,12 @@
         image: $png-path;
         repeat: no-repeat;
       }
     }
   }
-  
-  
+
+
 }
 
 //////////////////////////////
 // Extendable Class for Squish Text mixin
 //////////////////////////////
@@ -241,6 +243,6 @@
 //////////////////////////////
 // Extendable Class for Hide Text mixin
 //////////////////////////////
 %replace-text-pe-hide {
   @include hide-text();
-}
\ No newline at end of file
+}