stylesheets/toolkit/_pe.scss in toolkit-0.1.18 vs stylesheets/toolkit/_pe.scss in toolkit-0.2
- old
+ new
@@ -35,40 +35,55 @@
// - $sprite: The name of the sprite you want to use (this is the file name without extension)
// - $inline-svg: Switches between a Base64 encoded SVG or a normal url() for the SVG. Default to true
// - $with-dimensions: Switches between including dimensions (height/width for all and background-size for SVG) or not. Defaults to true.
// - $inline: Whether or not the containing selector is an inline element. Defaults to false.
////////////////////////
-@mixin replace-text-pe($img-path, $sprite, $inline-svg: true, $with-dimensions: true, $inline-element: false) {
- // Map Out the Sprite
+$replace-text-pe-method: 'svg' !default;
+$replace-text-pe-inline-svg: true !default;
+$replace-text-pe-with-dimensions: true !default;
+$replace-text-inline-element: false !default;
+
+@mixin replace-text-pe($img-path, $sprite, $method: $replace-text-pe-method, $inline-svg: $replace-text-pe-inline-svg, $with-dimensions: $replace-text-pe-with-dimensions, $inline-element: $replace-text-inline-element) {
+ // Hide text. Use squish-text() if the element is inline
+ @if $inline-element {
+ @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: str-replace('*.png', '#{$sprite}.svg', $png-path);
$svg-file: $img-path + '/#{$sprite}.svg';
// Default Sprite File
$sprite-file: '' !default;
-
+
@if $with-dimensions {
// Get Sprite File for Height/Width
$sprite-file: sprite-file($sprite-map, $sprite);
// Put the height/width of the image in
width: image-width($sprite-file);
height: image-height($sprite-file);
}
- // Hide text. Use squish-text() if the element is inline
- @if $inline-element {
- @extend %replace-text-pe-squish;
- }
- @else {
- @extend %replace-text-pe-hide;
- }
-
- // Enhance with SVG
@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);
}
@@ -91,24 +106,130 @@
@include sprite($sprite-map, $sprite);
}
}
//////////////////////////////
+// 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);
+ }
+
+ //////////////////////////////
+ // Ugly Hack
+ //
+ // Due 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 sucks, but it's the
+ // only way to get it to work for now.
+ //////////////////////////////
+ @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) {
+ background: {
+ image: $sprite-map;
+ repeat: no-repeat;
+ }
+ @include sprite($sprite-map, $sprite);
+ }
+ @media (-webkit-max-device-pixel-ratio: 1.5), (max--moz-device-pixel-ratio: 1.5), (-o-max-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx), (min-resolution: 144dpi) {
+ background: {
+ image: $retina-map;
+ repeat: no-repeat;
+ }
+ @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
+ // when I can.
+ //////////////////////////////
+// @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) {
+// @extend %#{sprite-map-name($png-path)}-image-map;
+// @include sprite($png-path, $sprite)
+// }
+// @media (-webkit-max-device-pixel-ratio: 1.5), (max--moz-device-pixel-ratio: 1.5), (-o-max-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx), (min-resolution: 144dpi) {
+// @extend %#{sprite-map-name($png2x-path)}-image-map;
+// @include sprite($retina-map, $sprite);
+// @if $with-dimensions {
+// background-size: image-width($sprite-file) image-height($sprite-file);
+// }
+// }
+}
+
+//////////////////////////////
// Sprite Map Generator
//
// Need a custom mixin to create extendable classes classes for background image for sprites because dynamic mixin names don't work.
//
// - $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) {
+@mixin sprite-map-generator($img-path, $method: $replace-text-pe-method) {
$png-path: $img-path + '/*.png';
$png-path: sprite-map($png-path);
- %#{sprite-map-name($png-path)}-image-map {
- background: {
- image: $png-path;
- repeat: no-repeat;
+
+ @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;
+ }
+ }
+ }
+ @media (-webkit-max-device-pixel-ratio: 1.5), (max--moz-device-pixel-ratio: 1.5), (-o-max-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx), (min-resolution: 144dpi) {
+ %#{sprite-map-name($png2x-path)}-image-map {
+ background: {
+ image: $png2x-path;
+ repeat: no-repeat;
+ }
+ }
+ }
}
+ @else {
+ %#{sprite-map-name($png-path)}-image-map {
+ background: {
+ image: $png-path;
+ repeat: no-repeat;
+ }
+ }
+ }
+
+
}
//////////////////////////////
// Extendable Class for Squish Text mixin
//////////////////////////////
\ No newline at end of file