1 files changed, 121 insertions, 0 deletions
diff --git a/app/assets/stylesheets/vendor/survival-kit/_images.scss b/app/assets/stylesheets/vendor/survival-kit/_images.scss
new file mode 100644
index 0000000..36e67cd
--- /dev/null
+++ b/app/assets/stylesheets/vendor/survival-kit/_images.scss
@@ -0,0 +1,121 @@
+// Survival ✚ Kit
+
+@import "compass/typography/text/replacement";
+
+// Replace an A tag with an a background-image.
+// @var $image string path to the image
+// @var $inline boolean embed via data.
+@mixin image-link($image, $inline:false) {
+  @include image-background($image, $inline);
+  cursor:pointer;
+  @extend .ext-hide-text;
+}
+
+// Replace an A tag with an a background-image sprite. You need to provide it with
+// the dimentions of the image and the x-pos/y-pos
+//
+// @var $image string path to the image, inherit is useful.
+// @var $height width
+// @var $height pixels
+// @var $x-pos pixels
+// @var $y-pos pixels
+// @var $inline boolean embed via data.
+@mixin image-sprite-link($image, $width, $height, $x-pos, $y-pos, $inline: false) {
+  @include sk-background(transparent, $image, $x-pos, $y-pos, no-repeat, $inline);
+  width:$width;
+  height:$height;
+  @extend .ext-hide-text;
+}
+
+// Replace a Header>a tag with a background image. Made specifically for logos.
+// @var $image string path to the image
+// @var $inline boolean embed via data.
+@mixin logo($image, $inline:false) {
+  @include no-mp;
+  width: image-width($image);
+  height: image-height($image);
+  a {
+    @include image-link($image, $inline);
+    &:hover { opacity: 0.7;}
+  }
+}
+
+// Area for a header link, meant to be used when it inherits a background image.
+// This should be invoked on the H1-6 Tag and not in the link, the needed structure is:2
+//   <h1><a href=""></a></h1>
+@mixin logo-area($width, $height, $debugging: false) {
+  @include no-mp;
+  width:$width;
+  height:$height;
+  a {
+    @include link-area($width, $height, $debugging);
+  }
+}
+
+// An area which should be clickable. It's meant to be a low level mixin, you should
+// use the alternatuves.
+// - debugging enables a background color to know the position.
+@mixin link-area($width, $height, $debugging: false) {
+  width:$width;
+  height:$height;
+  @if $debugging {
+    @include debug($debugging);
+  }
+  @extend .ext-hide-text;
+}
+
+// Mixin for quickly replacing images for any given element.
+// @var $image string path to the image
+// @var $inline boolean embed via data.
+@mixin image-replace($image, $inline:false) {
+  @include image-background($image, $inline);
+  @extend .ext-hide-text;
+}
+@mixin image-replace-url($image, $width, $height) {
+  background:transparent url($image) left top no-repeat;
+  @include link-area($width, $height);
+}
+
+// Just adds the image as a background and sets the width/height accordingly.
+// @var $image string path to the image
+// @var $inline boolean embed via data.
+@mixin image-background($image, $inline:false) {
+  @include sk-background(transparent, $image, no-repeat, top, left, $inline);
+  width: image-width($image);
+  height: image-height($image);
+}
+
+// Add a background by passing the exact same parameters as a normal one. With
+// one more parameter $inline. Which will use inline-image and add backward
+// compatibility to IE7 via *background.
+//
+// @var $color
+// @var $image string can be a path to an image or inherit (will insert tags separately)
+// @var $horizontal
+// @var $vertical
+// @var $repeat
+// @var $inline
+@mixin sk-background($color, $image, $horizontal, $vertical, $repeat, $inline: false) {
+  @if $image == inherit {
+    background-color: $color;
+    background-repeat: $repeat;
+    background-position: $horizontal $vertical;
+  } @else {
+    @if $inline == true {
+      background  : $color inline-image($image) $horizontal $vertical $repeat;
+      *background : $color image-url($image) $horizontal $vertical $repeat;
+    } @else {
+      background: $color image-url($image) $horizontal $vertical $repeat;
+    }
+  }
+}
+
+
+// Common styles needed by our Image Mixins.
+// Depends on Compass.
+.ext-hide-text {
+  @include hide-text;
+  display:block;
+  direction: ltr;
+  outline:none;
+}