diff options
author | Stefan Wintermeyer <stefan.wintermeyer@amooma.de> | 2012-12-17 12:01:45 +0100 |
---|---|---|
committer | Stefan Wintermeyer <stefan.wintermeyer@amooma.de> | 2012-12-17 12:01:45 +0100 |
commit | b80bd744ad873f6fc43018bc4bfb90677de167bd (patch) | |
tree | 072c4b0e33d442528555b82c415f5e7a1712b2b0 /app/assets/stylesheets/vendor/survival-kit/_images.scss | |
parent | 3e706c2025ecc5523e81ad649639ef2ff75e7bac (diff) |
Start of GS5.
Diffstat (limited to 'app/assets/stylesheets/vendor/survival-kit/_images.scss')
-rw-r--r-- | app/assets/stylesheets/vendor/survival-kit/_images.scss | 121 |
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; +} |